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

コメント

  • ぼわっと消えるやつ

    正解かわからないですが、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)

コメントの記入