Tweensyとは

Tweensyとは、Actionscriptからアニメーションを効率よく作成・制御するためのAS3向けのライブラリです。TweenerやTweenMax、Tween Liteなどのライブラリとほぼ同等の機能があり、Tweensyの独自の特徴としては以下のものがあります。

  1. ビットマップエフェクト
  2. パーティクルエミッター
  3. ベクターシェイプトゥィーン
  4. グラデーショントゥィーン

Tweensyの制作者は、Lost in ActionscriptのShane McCartneyです。

Tweensyを公開する動機や経緯が知りたい方は彼のブログの次の記事なんかを読むといいかもしれません。

Tweensyを入手する

TweensyはGoogle Codeで公開されています。

この記事を書いている時点では、バージョンは0.2.2です。

Project Home :  http://code.google.com/p/tweensy/

SVN : http://tweensy.googlecode.com/svn/trunk/

各パケージの違い

すでにコンパイル済みのswcファイルが含まれているので、環境に応じてswcファイルを配置しましょう。

CS3向けCS4向けがありますが、CS4向けは、FlashPlayer10で追加されたDisplayObjectのプロパティのトゥィーンに対応しています。（ｚ,rotationX,rotationY,rotationZ,scaleZとか）

もし、FlashPlayer10向けに開発を行うならCS4向けのswcファイルを使いましょう。


さらに、Tweensyには、Tweensy OriginalとTweensy Zeroと呼ばれる２つのプロダクトがあり、Tweensy ZeroはTweensy Originalをより軽量にしたものです。ファイルサイズがぐっと小さくなります。


Tweensyの使い方

基本的な使い方

時間ベースとフレームベース

Tweensyは時間ベースとフレームベースの両方のアニメーションに対応しており、デフォルトでは時間ベースのアニメーションを採用している。両者の違いは、アニメーション更新時の時間の計算の違いにある、時間ベースのアニメーションは、更新前と更新時の時間差を求めて正確に値を変更するのに対して、フレームベースのアニメーションは、１フレーム当たりの時間固定で計算を行う。　たとえばフレームレート３０の場合1/30秒。

アニメーション更新ごとに経過時間を計算する時間ベースより、時間固定で計算を行うフレームベースのアニメーションほうが、若干高速だろうと予想できる。

パーティクルなど、あまり精度を必要としないような場合ではフレームベースのアニメーションを選択したほうが良いでしょう。

フレームベースのアニメーションを使用する場合は、以下のように設定を行います。

Tweensy.refreshType = Tweensy.FRAME;
Tweensy.secondsPerFrame = 1/30;</pre>

具体的にコードを見たい方はTweensyGroupクラスのupdateメソッドを参照してください。

to()：現在の位置から指定した位置に移動する。

たぶん一番使用頻度が高いはずです。

import com.flashdynamix.motion.Tweensy;
Tweensy.to(myInstance, {x:500});

from():指定した位置から現在位置に移動する。

Flash IDEで開発している人にとっては、なかなか使えるメソッドです。

import com.flashdynamix.motion.Tweensy;
Tweensy.from(myInstance, {x:500});

fromTo()：指定した位置から指定した位置へと移動する。

import com.flashdynamix.motion.Tweensy;
Tweensy.fromTo(myInstance, {x:0}, {x:500});

ちなみにこれらのメソッドは、インスタンスを配列で渡すことで、まとめてトゥィーンを実行することもできる。

import com.flashdynamix.motion.Tweensy;
Tweensy.fromTo([myInstanceA, myInstanceB, myInstanceC ], {x:0}, {x:500});

トゥィーンの制御

トゥィーンを止める。

トゥィーンはstopメソッドによって停止できる。引数の渡し方によって細かな制御が可能です。

  • 特定のインスタンスに関するトゥィーンすべてを停止させる 
    Tweensy.stop(instance);
  • 特定のインスタンスの特定のプロパティのみ停止させる。
    Tweensy.stop(instance, "x", "y");
  • 複数のインスタンスに関するトゥィーンをまとめて停止させる。
    Tweensy.stop([instanceA, instanceB] );
  • 複数のインスタンスの特定のプロパティのみを停止させる。
    Tweensy.stop([instanceA, instanceB], "x", "y");
  • 特定のプロパティに関するトゥィーンすべてを停止させる。
    Tweensy.stop(null, "x", "y");
  • すべてのインスタンスのすべてのプロパティに関するトゥィーンを停止させる。
    • Tweensy.stop();

stopメソッドでトゥィーンを停止させた場合は、Completeイベントは発生しません。また、トゥィーンされているプロパティが存在しない場合、そのインスタンスは自動的にremoveされます。

一時停止と再生

pause、resumeメソッドでトゥィーンの一時停止、再生ができます。

stopメソッドのように、配列でまとめてインスタンスを渡したり、特定のプロパティだけを停止するというようなことはできません。

Tweensy.pause();
Tweensy.resume();
位置の更新

updateToメソッドを使うと、アニメーション再生中に移動先を変更できます。

Tweensy.updateTo(instance, {x:100});
相対＆ランダムポジション指定

to,from,fromToなどに渡すto,fromオブジェクトに、文字列を渡すと現在位置からの相対的な値で指定することができます。 

//instanceの現在位置から+500の位置
Tweensy.to(instance,  {x:"500"}, 2.0);
//instanceの現在位置から、-100～100の間でランダムな位置
Tweensy.to(instance, {x:"-100,100"}, 2.0 );

より高度な使い方

Timelineオブジェクトを使う

Tweensyのfrom,to,formToなどのメソッドを使うと、戻り値としてTimelineのインスタンスが返されます。
Timelineオブジェクトを使用するとより細かな制御が可能になります。

開始遅延、終了遅延

TimelineオブジェクトのプロパティdelayStart、delayEndでトゥィーンの開始、終了を指定した時間だけ遅らせることができる。終了を遅らせるというのは、onCompleteイベントの発行を遅らせるという意味でアニメーション自体が長くなるわけでありません。

ちなみに、totalDurationの値はdelayStart + duration + delayEndの合計になります。

//例
var timeline:TweensyTimeline = new TweensyTimeline();
timeline.delayStart = 1;
timeline.delayEnd = 2;

timeline.to(instance, {x:100, y:100});

Tweensy.add(timeline);

イージング

Timelineオブジェクトのeaseプロパティを利用すると、補完関数によるイージングが可能になります。

補完関数にパラメータを渡す場合は、easeParamsプロパティに関数に渡す引数を配列にして設定します。

var timeline = new TweensyTimeline();
timeline.ease = Elastic.easeIn;
timeline.easeParams = [0.7, 0.5];
 //パラメータとして渡せる値は補完関数ごとに異なる。

繰り返し

再生したトゥィーンを繰り返し再生させることも可能です。
繰り返しには、LOOP, REPLAY, YOYOの３つのタイプがあります。

  • LOOPは、始点と終点を入れ替え、delayStartとdelayEndも入れ替えてトゥィーンを行います。
  • REPLAYは、始点から終点まで同じトゥィーンを繰り返します。
  • YOYOは、始点終点を入れ替えます。LOOPと違ってdelayStartとdelayEndは入れ替えません。

繰り返しの回数を制限したり、繰り返しごとにイージングの補完関数を変えることもできます。

var timeline:TweensyTimeline = new TweensyTimeline();
timeline.repeatType = TweensyTimeline.LOOP

TweensyGroup

TweensyGroupクラスは複数のTimelineオブジェクトまとめて管理したり、便利なショートハンドメソッドなどが用意されたクラスです。

TweensySequence

TweensySequeceクラスは、Timelineオブジェクトを連続して再生させるためのクラスです。

ガイドを使ったトゥィーン

Tweensyは、ガイドを使ったトゥィーンにも対応しています。ガイドを使用すると、パスに沿ったトゥィーンを行うことができます。使用できるパスにはBezier2D、Direction2D、Orbit2Dの3種類のタイプが用意されています。



DisplayObject,MovieClip以外のトゥィーン

Tweensyは、トゥィーンの対象となるオブジェクトが何のクラスのインスタンスであるかを自動で判断して、必要なプラグインを選択します。そのおかげでMatrix、Sound、Filter、Colorなども同じようなコードでトゥィーンさせることができるようになっています。

Matrixを使ったトゥィーン

トゥィーン対象がMatrixオブジェクト出あった場合、TweensyはプラグインMatrixTeen選択します。Matrixオブジェクトのプロパティa,b,c,d,tx,tyの値を更新してトゥィーンを行います。

var mat:Matrix = instance.transform.matrix;<br>mat.translate(30, 30);
Tweensy.to(instance.transform.matrix, mat, 3, null,  0, instance);
// 引数の6番目に対象となるインスタンスを渡すこと。

色をトゥィーンさせる

Matrixの場合と同様に、ColorTransformオブジェクトを引数に渡すと、ColorTweenを選択します。
ColorTweenは、ColorTranformオブジェクトのredOffset、blueOffset、greenOffset、alphaOffset、redMultiplier、blueMultiplier、greenMultiplier、alphaMultiplierの値をトゥィーンします。 

var ct:ColorTranfrom = new ColorTransform();
ct.redOffset = 128;
ct.blueOffset = 128;
ct.greenOffset = 64;
Tweensy.to( instance.colorTranform, ct, 3, null, 0, instance);

音をトゥィーンさせる

SoundTransformオブジェクトを引数に渡すと、プラグインSoundTweenを選択します。SoundTweenは、SoundTransformオブジェクトのプロパティのトゥィーンを行います。

フィルターをトゥィーンさせる

BitmapFilterオブジェクトを引数に渡すと、プラグインFiterTweenを選択します。FilterTweenはBitmapFilterのサブクラスである各種フィルターのプロパティをトゥィーンさせます。