バージョンアップで新しくなった Tween24.serial() / parallel() を試してみた

2012.10.11

バージョン2.0 から Tween24.serial() と parallel() の仕様を少し変更しました。
またちょっと便利になったと思うので紹介します。

Download

http://code.google.com/p/tween24/downloads/list

ASDoc

http://package.a24.cat/libs/tween24/asdoc/2.0/

はじめての方はこちら(チュートリアル)

http://package.a24.cat/2011/11/24/tween24/#tutorial

バージョン2.0 リリースノート

http://package.a24.cat/2012/09/24/tween24-2-0/

引数にトゥイーンの配列を渡す

引数にトゥイーンの配列を渡すと、内部で展開するようになりました。
例えば、下記のように

var tweenList:Array = [
  Tween24.prop(target).xy(0, 0).fadeOut(),
  Tween24.tween(target, 1).fadeIn(),
  Tween24.tween(target, 1).xy(100, 100)
];
			
Tween24.serial(
  Tween24.addChild(this, target),
  tweenList,
  Tween24.removeChild(target)
);

と書くと内部的には、

Tween24.serial(
  Tween24.addChild(this, target),
  Tween24.prop(target).xy(0, 0).fadeOut(),
  Tween24.tween(target, 1).fadeIn(),
  Tween24.tween(target, 1).xy(100, 100).
  Tween24.removeChild(target)
);

という風に解釈するようになりました。

Tween24.parallel() の新しい使い方

内部的な細かい仕様の話になりますが、以前まで parallel() は
「一番 time の長いトゥイーンが完了したら complete する」
という仕様になっていましたが、
「全ての子のトゥイーンが完了したら complete する」
という仕様に変更しました。

これにより、例えば parallel() に複数の Tween24.waitEvent()Tween24.funcAndWaitEvent() を入れることで、「複数のイベントの待機」といったようなことができるようになりました。

下のサンプルでは2枚の画像を読み込み、完了するのを待って表示のトゥイーンを再生するということを1つのserial トゥイーンで実現しています。

Tween24 v2.0 released – wonderfl build flash online

var logo01:Loader = new Loader();
var logo02:Loader = new Loader();
			
Tween24.serial(

  // Wait image load
  Tween24.parallel(
    Tween24.funcAndWaitEvent(logo01.contentLoaderInfo, Event.COMPLETE, logo01.load, url1),
    Tween24.funcAndWaitEvent(logo02.contentLoaderInfo, Event.COMPLETE, logo02.load, url2)
  ),

  // Init
  Tween24.prop(logo01).$y(-80).blurY(64).fadeOut(),
  Tween24.prop(logo02).$x(40).blurX(64).fadeOut(),
  Tween24.prop(text).fadeOut(),
  Tween24.addChild(this, logo01, logo02, text),

  // Tween
  Tween24.wait(0.5),
  Tween24.tween(logo01, 0.4, Ease24._BounceOut).$y(0).blurY(0).fadeIn(),
  Tween24.wait(0.2),
  Tween24.tween(logo02, 0.4, Ease24._6_ExpoOut).$x(0).blurX(0).fadeIn(),
  Tween24.wait(0.5),
  Tween24.tween(text, 0.6).fadeIn()
).play();

大きな変更ではないですが、またちょっと痒いところに手が届くようになったかなと思います。


There are 5 comments in this article:

  1. 10/22/2012tsa says:

    はじめまして
    http://wonderfl.net/c/39ov
    上記スクリプトをTween24_2.0.1で再現しているのですが、Tweener.removeAllTweens();の変わりにTween24.stopAllTweens();を実行しても、再生中のTween24.tween(略).play();が止まりません。
    Tween24.stopAllTweens();はどのような使い方をするのが正しいのでしょうか?

  2. 10/22/2012Atsushi Kaga says:

    tsaさん、はじめまして。
    Tween24.stopAllTweens() ですが、恐らく最後に play() で実行していないのではと思います。
    「stop」を「play」するという、なんともややこしい感じなのですが、基本的に Tween24 のメソッドは play() を呼び出して実行するという形で統一しています。
    fork して Tween24 版に書き換えてみましたので、よかったら参考にしてみてください。
    http://wonderfl.net/c/ic6X

  3. 10/23/2012tsa says:

    Kaga様返信ありがとうございます。
    play()が必要だったんですね、あまり良く調べず質問していまい申し訳ありませんでした。
    わざわざサンプルまで用意していただき助かりました。
    Tween24を頑張って使っていきたいと思います(^^)
    ありがとうございました。

  4. 12/19/2012yamadori says:

    はじめまして。
    ver2.0から加わったフレーム駆動のためのtweenCountファンクションですが、
    時間駆動のtweenファンクションと対をなすように、こちらのファンクションにもターゲットを配列で渡せるという認識でよろしいでしょうか。
    自分が検証したところ、tweenCountにターゲットを配列で渡すと、
    1) tweenが目標値まで達しない状態で終わる。
    2) serialが機能していない。(loop, parallelは未検証)
    という現象を確認しました。
    これらは仕様でしょうか?もしくはバグでしょうか?

    http://wonderfl.net/c/aqq3

  5. 12/19/2012Atsushi Kaga says:

    yamadoriさん、はじめまして。
    こちらの現象ですが、恐らく何かしらのバグでserial内のtweenのcompleteが送信されず、途中で止まってしまっているのかと思われます。
    詳しい原因はまだ調査できていませんが、修正したいと思います。
    ご報告助かります、ありがとうございます。

Write a comment: