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

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

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

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

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

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

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

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

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

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()を実行した1秒後にアニメーションが開始されます。

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

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

応用例:波紋

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

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

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

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

まとめ

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

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

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

著者プロフィール

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

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

URLhttp://tech.nitoyon.com/