Flashの学習(14) ActionScript 3.0 アニメーション(1)

本「ActionScript 3.0 アニメーション」を読みます。

ActionScript 3.0 アニメーション

最初から丁寧に読んだりすると最期まで続かないことが多いので、大事なとこ以外は読み飛ばすことにします。最後までやりたいので。

メタデータ

http://d.hatena.ne.jp/itouhiro/20111004 で作ったソースコードに「メタデータ」を加えました。これは

ActionScriptステートメントではなく、コンパイル時にコンパイラが使用するステートメントからなります。SWFメタデータタグを使うと‥‥次のように設定できます。 この行は、package内のクラス定義の直前に記述します。

[SWF(backgroundColor="0xffff00", width="320",height="180", frameRate="15")]

これを記述すると、作るswfの形式を指定できます。ここでは「背景色を#FFFF00, swfの横幅を320px, 縦の高さを180px, 画面書き換えを1秒15コマ」と指定。

イベントハンドラ

EventHandlerとして この本では onMouseDown のような「on～」関数名を使うと書いてあるが、それはよくないようです。

（訳者注）：本書のサンプルコードを実行すると‥‥警告が表示されますが、それは本書で使用しているハンドラ名がAS2.0で使用されていたものと同じ名前であるからです。たとえば‥‥のようなAS2.0で使用されていなかった名前に変更することで、警告の表示はなくなります。

じゃあEventHandler関数名はどう名付ければいいか？

『ActionScript 3.0 コーディング規約の日本語訳』 http://www.trick7.com/blog/2008/03/14-131809.php#CodingConventions-Eventhandlernames によると

イベントタイプ名称に “Handler” をくっつけた名前にします。例：mouseDownHandler()

なるほど。

それではEventHandler使ったソースを書いてみます。

package 
{
    import flash.display.Sprite;
    import flash.events.Event;
    import flash.events.MouseEvent;  //←必要。FlashDevelopが勝手に追加してくれた。
    
    [SWF(backgroundColor="0xfcfcfc", width="320",height="180", frameRate="15")] //←手動で追加した。
    
    /**
     * ...
     * @author itouhiro
     */
    public class Main extends Sprite 
    {
        private var maru:Sprite;  //この変数はキャラ「まる」そのもの
        private var i:int;        //数をかぞえるだけの変数
        
        //Constructor この関数はFlashDevelopが最初から用意してくれている
        public function Main():void 
        {
            if (stage) init();
            else addEventListener(Event.ADDED_TO_STAGE, init);
        }

        //この関数の中身を変更した
        private function init(e:Event = null):void 
        {
            removeEventListener(Event.ADDED_TO_STAGE, init);

            // new chara
            maru = new Sprite(); //maruはSpriteクラスから生み出されたインスタンス
            addChild(maru);      //maruを画面表示してもらうため、登録した
            maru.graphics.beginFill(0xcceecc);   //maruの肉体というか画像を描く
            maru.graphics.drawCircle(0,0,18);
            maru.graphics.endFill();

            // set chara
            maru.x = stage.stageWidth / 2;     //maruをステージの中央に初期配置
            maru.y = stage.stageHeight / 2;
            i = 0;                             //カウンターを0にリセット
            maru.addEventListener(MouseEvent.MOUSE_DOWN, mouseDownHandler); //マウスを押したとき呼び出す関数を登録
            maru.addEventListener(MouseEvent.MOUSE_UP, mouseUpHandler); //マウスを離したとき呼び出す関数を登録
        }
        
        private function mouseDownHandler(event:Event):void 
        {
            maru.x += 1;                //マウスを押したとき、maruのx座標を変更する
        }
        
        private function mouseUpHandler(event:Event):void 
        {
            maru.y -= 1;                //マウスを離したとき、maruのy座標を変更する
        }
    }   
}

フラッシュの中の丸の図形をクリックしたとき、

• マウスを押した → 丸が右に移動
• マウスを離した → 丸が上に移動

というそれだけのプログラムですが‥‥動いてます。

https://sites.google.com/site/itouhiro/2011/20111004-1.swf