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

第6回 動きのある Flash を作る(後編)

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

前編は動きのあるFlashを最初から作りましたが,後編ではライブラリを使って簡単に作る方法を紹介します。

ActionScript 3.0にはアニメーション用のライブラリがいくつも公開されています。その中でも有名なのがMITライセンスで公開されてるtweenerです。

tweenerを使ったサンプル

それでは,tweenerを使ったサンプルを見ていただきましょう。前回からの変更点を太字にしています。

package{
    import flash.display.Sprite;
    import flash.events.MouseEvent;
    import caurina.transitions.Tweener;

    public class Anime2 extends Sprite{
        public function Anime2():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;
            s.scaleX = s.scaleY = 0;

            Tweener.addTween(s, {
                time: 1,    // 1秒間のアニメーション
                scaleX: 5,  // s の scaleX を 5 まで遷移
                scaleY: 5   // s の scaleY を 5 まで遷移
            });
        }
    }
}

このソースコードをコンパイルすると,次のようなFlashができあがります。

クリックすると円が「もわっ」と広がりますね。前回のものよりも動きがなめらかです。

ソースコードのうち,アニメーションを実現しているのは以下の箇所です。

    Tweener.addTween(s, {
        time: 1,    // 1秒間のアニメーション
        scaleX: 5,  // s の scaleXを 5 まで遷移
        scaleY: 5   // s の scaleY を 5 まで遷移
    });

見やすくするために複数行に分けていますが,Tweener.addTween()メソッドを1度呼び出しているだけです。前回,苦労して作ったものよりも高機能なアニメーションが1文で書けるのです。

コンパイルしよう

先に完成物をお見せしましたが,まだコンパイルしていませんでした。

先ほどのソースコードをAnime2.asとして保存してください。今までどおり,mxmlcでコンパイルしようとすると,Tweenerクラスが見つかららないため,エラーになってしまいます。

C:\samples>mxmlc Anime2.as
Loading configuration file C:\flex\frameworks\flex-config.xml
C:\samples\Anime2.as(25): col: 13 Error: 未定義のプロパティ Tweener へのアクセスです。

            Tweener.addTween(s, {
            ^

C:\samples\Anime2.as(4): col: 32 Error: 定義 caurina.transitions:Tweener が見つかりません。

    import caurina.transitions.Tweener;
                               ^

tweenerをダウンロードする

コンパイルするためにはtweenerをダウンロードする必要があります。tweenerは以下の場所で公開されています。

画面右側のFeatured DownloadsからActionScript 3用のソースコード(tweener_1_26_62_as3.zip)をダウンロードします。

※数字の部分tweener_1_XX_XXは将来的に変わる可能性があります。

画像

次に,ソースコードを置いているフォルダにダウンロードしたzipファイルを解凍します。caurinaフォルダがAnime2.asと同じ場所に展開されていれば成功です。

画像

今度はうまくコンパイルできるはずです。

C:\samples>mxmlc Anime2.as
Loading configuration file C:\flex\frameworks\flex-config.xml
C:\samples\Anime2.swf (11565 bytes)

mxmlcのオプションでtweenerのパスを指定していないところに注意してください。mxmlcは必要とされているクラスを自動的に解決してくれます。

著者プロフィール

最田健一(さいたけんいち)

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

URLhttp://tech.nitoyon.com/