wonderflでイージングアニメーション

ブラウザで無料ではじめるActionScript 3.0 ―It's a wonderfl world―

本が手元に届いて3日も経ってしまったけど、ようやく読み始めた！
なんとなく既に分かっていそうな序盤を適度に読み飛ばしつつ…
面白いと思ったのは1-3 インタラクティブな動きを学ぶでの「タイムライン」の話。あまりこういう動きのあるものを作ったことがなかったし、イージングというのも用語は全然知らなくて、でも読んでみるとたしかに納得、簡単に書けそうだ！と思って自分でもwonderflで書いてみた。

/* マウスをゆっくり追従してくるサンプル */
package {
    import flash.events.Event;
    import flash.events.MouseEvent;
    import flash.display.Sprite;

    public class FlashTest extends Sprite {
        private var _circle:MyCircle = new MyCircle();
        private var _targetX:Number;
        private var _targetY:Number;
        private var _easeRatio:Number = 0.1;
    	    
        public function FlashTest() {
            addChild(_circle);
            stage.addEventListener(MouseEvent.MOUSE_MOVE, onMouseMove);
            stage.addEventListener(Event.ENTER_FRAME, onFrame);
        }
        
        private function onMouseMove(event:MouseEvent):void {
            _targetX = event.stageX;
            _targetY = event.stageY;
        }
        
        private function onFrame(event:Event):void {
            var dX:Number = _targetX - _circle.x;
            var dY:Number = _targetY - _circle.y;
        	    
            _circle.x += dX * _easeRatio;
            _circle.y += dY * _easeRatio;
        }
    }
}


import flash.display.Sprite;

class MyCircle extends Sprite {
    public function MyCircle() {
	graphics.beginFill(0xFF0000);
	graphics.drawCircle(0, 0, 10);
    }
}

作品はここで動かせます -> flash on 2010-1-21 - wonderfl build flash online

たったこれだけで、円がマウスを"ゆっくり"追従してくるインタラクティブなアニメーションが書ける！なるほどー。
ここからイージングの比率を場面に応じて変えたり、円の移動に残像のようなものを残すようにしたりすると面白そう。あとでやってみようっと

追記

残像を出して追従の軌跡がわかりやすくなるようにしてみた
forked from: flash on 2010-1-21 - wonderfl build flash online