Flex入門者がアニメーションを基礎から説明してみる #2

第２回からさっそくの放置かよ、と思ったみなさんこんばんわ。 インストールしたFlexBuilderの試用期間が終わる前にちゃんと完結するのか、ご心配のことでしょう。 安心してください。僕も同じように心配しています。

等速直線運動

さて、今回のテーマは「物体の移動」。その中でも最も基本的な「等速直線運動」に取り組みます。 中学生の理科で習ったやつですね。 物体が同じ速度で直線状に移動するというものです。 ああもっと勉強しておけばよかった、というのは全ての大人が感じる感情なので、気にしても仕方ありません。 未来は操作できても過去は操作できないのです。

それと同時に、今後のプログラム作成のベースとなる部分の説明をしますので、第２回として適切な分量になるかと思います。 説明は今後FlexBuilder3を前提にしますので、別の環境で行う方は適宜読み替えてください。

プロジェクトの作成

これから、新たな物を作成するたびにFlexBuilderのプロジェクトを作成するようにします。 今回も以下のようにFlexBuilder上から[新規]　→　[ActionScriptプロジェクト]とします。

プロジェクト名は何でもいいですが、例として「Animation1」としています。 入力したら「終了」ボタンをクリック。簡単です。

するとAnimation1.asというファイルが開かれるので、これを編集して今回の説明を行います。 この流れは今後も同じになるので憶えておきましょう。 以下が最初の状態。

プログラム作成

では、ソースコードを修正していきましょう。 最初の状態から修正して、以下のように入力してください。

package {
    import flash.display.Sprite;
    import flash.events.Event;
    import flash.events.MouseEvent;

    public class Animation1 extends Sprite
    {
        //ボール
        public var ball:Sprite;
        //ボールの横方向の移動速度
        public var vx:Number = 10;
        //ボールの縦方向の移動速度
        public var vy:Number = 0;

        public function Animation1()
        {
            init();
        }

        public function init():void
        {
            //ボールの作成
            ball = new Sprite();
            ball.graphics.beginFill(0xff0000);  //赤色で塗りつぶし開始
            ball.graphics.drawCircle(0, 0, 50);  //座標(0, 0)に半径50の円
            ball.graphics.endFill();  //塗りつぶし終了

            //ボールの位置指定（画面の真ん中）
            ball.x = stage.stageWidth / 2;
            ball.y = stage.stageHeight / 2;

            //ボールを画面に追加
            addChild(ball);

            //マウスクリックイベントを追加
            stage.addEventListener(MouseEvent.CLICK, onMouseClick);
        }

        public function onMouseClick(event:MouseEvent):void
        {
            //フレーム毎のイベントの追加
            stage.addEventListener(Event.ENTER_FRAME, onEnterFrame);
        }

        public function onEnterFrame(event:Event):void
        {
            ball.x += vx;
            ball.y += vy;
        }
    }
}

主に行っているのは以下の３つです。

1. ボールの作成、配置
2. マウスクリックイベントの追加
3. フレーム毎のイベントの追加

重要なのはフレーム毎のイベント部分です。 マウスクリックイベントが発生するとonMouseClickメソッドが実行されます。 その中で、フレーム毎のイベント(Event.ENTER_FRAME)発生時に実行されるメソッドonEnterFrameをセットしています。 フレームとはアニメのコマみたいなもので、１秒間に数十回、画面更新されるために発生するイベントだと思ってください。 このタイミングで物体の座標を変更すればボールはそれに合わせて移動します。実にシンプルです。 このソースコードの基本的な形は今後のひな型にもなる予定ですので、しっかりと理解しておきましょう。

実行

ではまずは実行してみましょう。 FlexBuilderであればF11をおせばブラウザが起動し、その中に表示されます。 たまに画面がずれるみたいですので、その場合はbin-debugフォルダの中にできているAnimation1.swfをダブルクリックで実行しましょう。 以下のような画面が出るはずです。 画面上でマウスをクリックすると玉が動き出します。

解説

この動作を説明するために、座標と速度の話をしなければなりません。 ご存じの方も多いかとは思いますが念の為。

• 座標

座標は物体の位置を決める要素です。 一般的にxとyで横の位置と縦の位置を決めます。 (x, y)などのようにして一つの点を表します。 Flexの場合は右に行くほどxが増加し、下に行くほどyが増加します。 数学で習った座標とは縦のy軸が逆さまなので気をつけてください。 サンプルでのボールの座標はball.xとball.yです。 この値を変更してボールをフレーム毎に少しずつ移動して動いているように見せています。

• 速度

物体が移動する速度です。 縦向きの移動量と横向きの移動量があるので、上記のソースコード上ではvx, vyとしています。 上記のサンプルでは横にしか移動させていないので、vy=0にしていますが、値を変更するともちろん移動する方向は変わります。 vxもvyも正の値を入れると斜め下に移動するでしょう。 また、値を大きくすると移動量が大きくなる、つまりスピードがあがります。 ぜひ色々な値を入れて移動の角度やスピードの変化などを見てください。

まとめ

さて、上記の説明を終えるとこのソースコードは実にシンプルです。 ボールのx座標、y座標に毎回一定の数値を加算しているだけだからです。 しかし、これこそが現実世界での出来事だということを理解する必要があります。 物体に他の力が加わっていないとき、物体は一定の速度が常に加算されつづけています。 この点において、僕たちは現実世界を十分にプログラムコードに落とし込んだと言えるでしょう。

物体に加わる他の力、と言ったものは多くの場合、重力と摩擦です。 重力と摩擦が働きにくい場面を想像してください。 宇宙空間を飛ぶロケット（エンジンは止めている状態）、ボーリングやビリヤードの球、カーリングなど。 そうすれば僕たちは現実世界を十分にプログラムできたと気づくことでしょう。

それでは第2回はここまで。
次回は物体移動の角度と反射に取り組みます。