ActionScript 3 でマウスを追いかけるアニメーションを作成する

この記事はアピリッツの技術ブログ「DoRuby」から移行した記事です。情報が古い可能性がありますのでご注意ください。

こんにちは。

KBMJの佐藤です。

今回は ActionScript 3 を使って、マウスを追いかけるアニメーションを作成してみます。

Arrow.as

package{
    import flash.display.*;

    // 矢印クラス
    public class Arrow extends Sprite {
        public function Arrow(){
            init();
        }

        // 矢印を描画する
        public function init():void{
            // 枠のスタイルを設定
            graphics.lineStyle(2,0,1);
            // 塗りつぶしの色を設定
            graphics.beginFill(0xff0000);

            graphics.moveTo(-50,-25);
            graphics.lineTo(0,-25);
            graphics.lineTo(0,-50);
            graphics.lineTo(50,0);
            graphics.lineTo(0,50);
            graphics.lineTo(0,25);
            graphics.lineTo(-50,25);
            graphics.lineTo(-50,-25);
            graphics.endFill();
        }
    }
}

ChaseCursor.as

package{
    import flash.events.*;
    import flash.display.*;

    public class ChaseCursor extends Sprite {
        // スピード
        private var s:Number = 10;
        // 矢印オブジェクト
        private var a:Arrow;

        public function ChaseCursor(){
            init();
        }

        private function init():void{
            // フレーム更新イベントを設定
            addEventListener(Event.ENTER_FRAME, onEnterFrame);
            // 矢印オブジェクトを生成
            a = new Arrow();
            // 矢印オブジェクトと画面に追加
            addChild(a);
        }

        // フレームイベント
        private function onEnterFrame(e:Event):void{
            // 矢印の座標とマウスカーソルの座標との差分を算出
            var dx:Number = mouseX - a.x, dy:Number = mouseY - a.y;
            // 矢印の座標とマウスカーソルの座標との角度を算出
            var d:Number = Math.atan2(dy, dx);
            // 矢印オブジェクトの速度を算出
            var vx:Number = Math.cos(d) * s, vy:Number = Math.sin(d) * s;
            // 速度に基づいて矢印の位置を更新
            a.x += vx, a.y += vy;
            // 矢印オブジェクトの角度を設定
            a.rotation = d / Math.PI * 180.0;
        }
    }
}

ChaseCursor-app.xml

<?xml version="1.0" encoding="UTF-8"?>
<application xmlns="http://ns.adobe.com/air/application/1.5">
  <id>ChaseCursor</id>
  <version>0.1</version>
  <filename>ChaseCursor</filename>
  <initialwindow>
    <content>ChaseCursor.swf</content>
    <visible>true</visible>
    <systemchrome>standard</systemchrome>
    <transparent>false</transparent>
  </initialwindow>
</application>

コンパイルする

% amxmlc ChaseCursor.as

実行する

% adl ChaseCursor-app.xml

実行結果

赤い矢印がマウスカーソルを追いかけます。

さいごに

ActionScript 3 でアニメーションを作成する時は、位置と速度を変数に保持すると管理しやすくなります。

皆さんも是非お試し下さい。

個人ブログ 拡張現実ライフ