プログラマのためのFlash遊び方

第5回　動きのある Flash を作る（前編）

Flash

この記事を読むのに必要な時間：およそ 3 分

今回からは2回に渡って，アニメーションするFlashを作っていきます。今回は，自力でアニメーション処理を書く方法を紹介します。

Timerクラスでアニメーション

Flashにはアニメーションに便利なTimerクラスが用意されています。Timerクラスを利用すると，一定時間ごとに特定の処理を行うことができるようになります。

前回のサンプルをベースに，円がじわじわとフェードアウトするものを作ってみました。前回からの変更点を太字にしています。

package {
    import flash.display.Sprite;
    import flash.events.MouseEvent;
    import flash.events.Event;
    import flash.utils.Timer;
    
    public class Anime1 extends Sprite {
        public function Anime1():void {
            // クリックイベントを監視する
            stage.addEventListener("click", clickHandler);
        }

        private function clickHandler(event:MouseEvent):void {
            // 円を作成
            var s:Sprite = new Sprite();
            s.graphics.beginFill(Math.random() * 0x1000000);
            s.graphics.drawCircle(0, 0, 10);
            s.graphics.endFill();
            addChild(s);

            // 円をクリックされた位置に移動
            s.x = event.stageX;
            s.y = event.stageY;

            // タイマー開始
            var timer:Timer = new Timer(50, 20);
            timer.start();
            timer.addEventListener("timer", function(event:Event):void {
                var ratio:Number = timer.currentCount / timer.repeatCount;
                s.alpha = 1 - ratio;
            });
            timer.addEventListener("timerComplete", function(event:Event):void {
                removeChild(s);
            });
        }
    }
}

Anime1.asとして保存して，コンパイルします。

mxmlc Anime1.as

Flashの完成です。クリックすると円が表示され，徐々に消えていきます。

それでは，Timerクラスの使い方を見ていきましょう。

タイマーの作成

まずは，Timerオブジェクトの生成です。

var timer:Timer = new Timer(50, 20);

Timerオブジェクトを作成して，timerという変数で参照しています。コンストラクタには2つのパラメータを指定します。

Timer(タイマー実行の間隔:Number, 回数:int = 0)

今回は50ミリ秒間隔で20回呼び出されるタイマーを作成しています。50ミリ秒×20回＝1秒ですので，アニメーションは約1秒間再生さることになります。

次に，start()メソッドを呼び出して，タイマーを開始しています。

timer.start();

Flash

著者プロフィール

最田健一（さいたけんいち）

有限会社 CO-CONV勤務のプログラマ。京都在住の京都好き。趣味で ActionScript 3.0やFlex 2を触っていたら，いつの間にか仕事でも使うことになっていた。個人ブログは「てっく煮ブログ」。

URL：http://tech.nitoyon.com/