さて最終回となる第4回は，Flashの定番，アニメーションを使ったサンプルをご紹介します。
Flashにおけるアニメーションの方法
Flashでオブジェクトを動かすには，大きく2種類の方法があります。
- FlashIDEを使って，動く前のオブジェクトと動く後のオブジェクトを異なるフレームに置いてぱらぱら漫画のように見せる方法
- Actionscriptを使用して，オブジェクトのプロパティ（位置や色等）をフレーム毎に変更する方法
前者はキャラクターの手足を動かすなど細やかな動き，後者は多くのオブジェクトを同時に動かすことが得意などそれぞれ特徴があり，必要に応じて使い分けます。
オープンソースのActionscriptのアニメーションライブラリは，非常に多く公開されており，開発も活発に行われています。各ライブラリのパフォーマンスチェックもさかんで，良い競争状態にあるようです。例えば，Jack Doyle氏のブログの記事では，多くのオブジェクトを同時に動かす場合のパフォーマンス比較を取り上げています。
wonderflでは，以下のアニメーションライブラリを使用可能です。
- tweener, version: 1.31.74
- TweenLite, ver10.09
- TweenMax, ver10.09
- tweensy, ver0.2.2
wonderflでtweensy入門
tweensyはその中でも最も新参のライブラリで，高速＆省メモリを特徴としています。
gihyo.jpの過去の特集「プログラマのためのFlash遊び方：第6回 動きのある Flashを作る（後編）」では，Tweenerを使ったサンプルが解説されています。
このサンプルと同じものを，tweensyを使用してサンプル「tweensy demo」をつくってみました。クリックする度に，色のついた円が「もわっ」と表示されます。
このコードは以下のとおりです。確認してみましょう。
1. // tweensy version of this
2. // http://gihyo.jp/dev/feature/01/flash-sdk/0006
3. package{
4. import flash.display.Sprite;
5. import flash.events.MouseEvent;
6. import com.flashdynamix.motion.Tweensy;
7.
8. public class Anime2 extends Sprite{
9. public function Anime2():void{
10. // クリックイベントを監視する
11. stage.addEventListener("click", clickHandler);
12. }
13.
14. private function clickHandler(event:MouseEvent):void {
15. // 円を作成
16. var s:Sprite = new Sprite();
17. s.graphics.beginFill(Math.random() * 0x1000000);
18. s.graphics.drawCircle(0, 0, 10);
19. s.graphics.endFill();
20. addChild(s);
21.
22. // 円をクリックされた位置に移動
23. s.x = event.stageX;
24. s.y = event.stageY;
25. s.scaleX = s.scaleY = 0;
26.
27. Tweensy.to(s, {
28. scaleX: 5, // s の scaleX を 5 まで遷移
29. scaleY: 5 // s の scaleY を 5 まで遷移
30. }, 1 ); // 第３引数がduration
31. }
32. }
33. }
Tweenerのサンプルとの差分は，ライブラリのimport宣言をしている6行目と，27～30行目のみです。1秒間かけて，sというSpriteのscaleX,scaleYプロパティを5にしています（デフォルト値は1）。
なお，tweensyのドキュメントによれば，tweensy.toは以下の仕様となっています。
public static function to(instance:Object, to:Object,
duration:Number = 0.5, ease:Function = null, delayStart:Number = 0,
update:Object = null, onComplete:Function = null,
onCompleteParams:Array = null):TweensyTimeline
つまり，Tweenerとは引数の与え方が異なり，durationやeaseは第二引数のオブジェクトに入れるのではなく，別の引数として与えます。
今回のサンプルでは使用している引数の数は3つですが，wonderflのfork機能を使用して，以下のような変更を加えながら理解を深めてみましょう。
- トランジションを変更してみる（第4引数）
- Tweenerの特集にあるようにアニメーション完了後に呼ばれるコールバック関数を設定してみる（tweensyではto関数の第7引数）
また，wonderflでtweensyを使っているコードも参考になります。確認してみてください。
