gihyo.jpサイトのロゴ

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

第6回動きのある Flash を作る（後編）

2008-04-17

前編は動きのある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()メソッドを１度呼び出しているだけです。前回、苦労して作ったものよりも高機能なアニメーションが１文で書けるのです。

コンパイルしよう

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

先ほどのソースコードを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は必要とされているクラスを自動的に解決してくれます。

addTween()を極める

それではソースコードを見ていきましょう。

アニメーションさせるにはTweenerクラスの静的メソッドaddTween()を利用します。

表示オブジェクトs（円）をパラメータに従ってアニメーションさせています。

パラメータを見ていきましょう。timeはアニメーションの秒数です。その次の、scaleXとscaleYはアニメーション後のscaleXとscaleYプロパティの値を指定しています。

つまり、このコードを実行すると、１秒の間にsのscaleXとscaleYプロパティがそれぞれ5まで遷移します。

第2引数のパラメータの{}のところが分かりにくいかもしれませんね。{}というのは、Objectクラスのインスタンスを生成して、プロパティに値を設定するときの構文です。次のようなソースコードと同じと考えるとよいでしょう。

var param:Object = new Object();
param.time = 1;
param.scaleX = 5;
param.scaleY = 5;

Tweener.addTween(s, param);

timeとscaleXの違い

timeパラメータはtweenerによってあらかじめ定義されているパラメータです。あらかじめ定義されているパラメータの一覧はtweenerオンラインマニュアルのTweening Parametersにあります。delay、count、transitionといったアニメーションの振る舞いを決めるパラメータや、アニメーション中にイベントが発生したときに呼び出されるonUpdate、onCompleteなどがあります。

それに対して、scaleXとscaleYは、アニメーション後の値を指定するパラメータです。scaleXとscaleYの他には、どのような種類があるのでしょうか。tweenerのオンラインマニュアルには一覧が載っていません。というのも、指定できるパラメータの種類は、アニメーション対象の表示オブジェクトのプロパティであれば何でもいいのです。

scaleXプロパティとscaleYプロパティは最初は0に設定されています。

s.scaleX = s.scaleY = 0;

addTween() が呼ばれると、プロパティの値は初期値(0)から指定された値(5)まで段階的に変化します。結果として、アニメーションしているように見えるのです。

それでは、別のプロパティも変更してみましょう。x座標を表すxプロパティを付け加えてみます。

Tweener.addTween(s, {
    time: 1,
    scaleX: 5,
    scaleY: 5,
    x: 0
});

クリックした位置から左端まで移動するようになりました。

このように、表示オブジェクトのプロパティであれば、どのようなものであってもtweenerでアニメーションさせることができます。

transitionを修正する

tweenerには、パラメータが遷移するときの移り変わり具合をコントロールするtransitionというパラメータがあります。

transitionの一覧はtweenerオンラインマニュアルのTransition Typesにあります。デフォルト値はeaseOutExpoです。

試しに、transitionの値をeaseOutBounceに変更してみましょう。

Tweener.addTween(s, {
    time: 1,
    scaleX: 5,
    scaleY: 5,
    transition: "easeOutBounce"
});

バウンドしながら拡大していくようになります。

アニメーションの終了イベント

アニメーションが終了したときにはonCompleteプロパティで指定された関数が呼ばれます。

アニメーション終了時に円を削除するようにしてみます。

Tweener.addTween(s, {
    time: 1,
    scaleX: 5,
    scaleY: 5,
    transition: "easeOutBounce",
    onComplete: function():void {
        removeChild(s);
    }
});

複数のアニメーションを追加する

１つの表示オブジェクトに複数のアニメーションを追加することもできます。

Tweener.addTween(s, {
    time: 1,
    scaleX: 5,
    scaleY: 5,
    transition: "easeOutBounce"
});
Tweener.addTween(s, {
    time: 0.5,
    delay: 1,
    alpha: 0,
    _blur_blurX: 30,
    _blur_blurY: 30,
    onComplete: function():void {
        removeChild(s);
    }
});

バウンドして大きくなったあと、ぼわっと消えていきます。

delayはアニメーションを開始する時間を指定するパラメータです。ここでは、1が指定されているため、addTween()を実行した１秒後にアニメーションが開始されます。

alphaは表示オブジェクトの透明度を表すプロパティです。0を指定しているので、徐々に透明になっていきます。

_blur_blurXと_blur_blurYは、ボカシ具合を指定するスペシャルプロパティです。スペシャルプロパティはtweenerでのみ使える仮想的なプロパティです。本来、Spriteクラスにはボカシ具合を指定するプロパティはないのですが、スペシャルプロパティを使うことで、そういうプロパティが存在するものとして扱うことができます。スペシャルプロパティはTweener.registerSpecialProperty()メソッドを利用して自分で登録することもできます。

応用例：波紋

最後にtweenerを使った応用例をお見せいたしましょう。

マウスの位置に波紋が表示されます。マウスを大きく動かしたときには、大きな波が立ちます。

ソースコードはこちらに掲載していますので、ぜひ確認してみてください。見た目は派手ですが、50行ほどの簡単なソースコードです。

技術的に新しい内容は入っていないので、それほど苦労することなく読めると思います。

まとめ

前回からの２回に渡って、ActionScript3.0だけでアニメーションを行う方法を取り上げてきました。

tweenerを使えば、非常に簡単にアニメーションを作成できますね。凝ったFlashを作るためには、Flash CS3などのソフトウェアの力を借りないと大変かもしれませんが、ActionScript 3.0だけで作成するほうが簡単な場合もあるでしょう。

次回はActionScript 3.0の総集編ということで、今までに比べて複雑な機能を持ったFlashを作成してみます。

おすすめ記事

記事・ニュース一覧