プログラマのための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/

コメント

  • ぼわっと消えるやつ

    正解かわからないですが、tweenerのサイトでスペシャルプロパティについて説明が書いてあります。

    http://hosted.zeh.com.br/tweener/docs/en-us/

    で、FilterShortcutsのところで_blur_blurYなどのpropertyについての説明がありました。

    まず_Blur_blurYって書いてあったので、頭文字は大文字にする必要があるのかわかりませんが、Xの方も含めてそうしました。

    あとFilterShortcutsのページの冒頭で、Usageが書いてあって、インポートと初期化の設定をしろ、と書いてありました。

    import caurina.transitions.properties.FilterShortcuts;
    FilterShortcuts.init();

    これ入れたら自分のところでは動きました。

    Commented : #3  betty (2009/02/08, 16:30)

  • 自分もできませんでした

    以下エラーが発生して複数のアニメーションを追加するができませんでした。

    ReferenceError: Error #1069: flash.display.Sprite にプロパティ _blur_blurY が見つからず、デフォルト値もありません。

    Commented : #2  shohu (2008/09/01, 23:48)

  • ぼわっと消えるのが。。。

    はじめまして。
    最近AS3をはじめ、こちらのサイトで勉強させて頂いております。
    現在ぼわっと消えるところをやっていたのですが、
    プレビューをすると「_blur_blurYが見るからない」などとエラーが出てしまいできませんでした。
    プログラムも合っていますし、Tweenのフォルダもきちんとしたのですが。。。
    なぜでしょうか。。。
    よろしくお願いします。

    Commented : #1  kazu (2008/07/05, 16:32)

コメントの記入