さて最終回となる第4回は,
Flashにおけるアニメーションの方法
Flashでオブジェクトを動かすには,
- FlashIDEを使って,
動く前のオブジェクトと動く後のオブジェクトを異なるフレームに置いてぱらぱら漫画のように見せる方法 - Actionscriptを使用して,
オブジェクトのプロパティ (位置や色等) をフレーム毎に変更する方法
前者はキャラクターの手足を動かすなど細やかな動き,
オープンソースのActionscriptのアニメーションライブラリは,
wonderflでは,
- tweener, version: 1.
31. 74 - TweenLite, ver10.
09 - TweenMax, ver10.
09 - tweensy, ver0.
2.2
wonderflでtweensy入門
tweensyはその中でも最も新参のライブラリで,
gihyo.
このサンプルと同じものを,
このコードは以下のとおりです。確認してみましょう。
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 ); // 第3引数がduration
31. }
32. }
33. }
Tweenerのサンプルとの差分は,
なお,
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
つまり,
今回のサンプルでは使用している引数の数は3つですが,
- トランジションを変更してみる
(第4引数) - Tweenerの特集にあるようにアニメーション完了後に呼ばれるコールバック関数を設定してみる
(tweensyではto関数の第7引数)
また,