yoppa.org

Web動画表現 2010

AS3でアニメーションを作成する

AS3でアニメーションを作るには

今回の授業では、いよいよAS3を用いたアニメーションに挑戦します。タイムラインを用いたアニメーションではなく、プログラムだけでアニメーションを行うには、発想の方法自体を切り替えていく必要があります。

AS3でアニメーションを作成する場合は、いくつかのステップに整理して考えていくと良いでしょう。以下のようなステップを想定していきましょう。

  • 起動 – 初期設定：Flashを起動したら、最初に１度だけ実行される初期設定を行います。画面の基本状態や、アニメーションで更新しない要素などは初期設定で行います。
  • 更新するイベントを登録：アニメーションを生みだすための定期的に更新されるイベントを登録します。AS3ではこの仕組みをイベントリスナーと呼んでいます。
  • 状態を更新：登録されたイベントに1コマ単位で更新される情報を記述していきます。この状態の差分が動きを生みだします。状態の更新の命令は、指定した間隔でプログラムを停止するまで実行を繰り返します。

イベントとイベントリスナー

AS3では、様々な処理が「イベント」と呼ばれる機能から構成されます。

イベントとは、ユーザからのマウス操作や、キーボードからの入力などのインタラクションや、ネットワークを用いた外部データの読み込みなど様々な状態の変化を扱う処理を意味しています。

Flashの画面が更新された際にも、「onEnterFrame」というイベントが発生します。この画面更新を通知するイベントにあわせて状態を更新していくというのがAS3でのアニメーションの基本となります。

イベントを受けとるようにするには「イベントリスナー」という仕組みを用います。イベントリスナーとは、イベントを受けとった際に行う処理を登録する仕組みです。イメージとしては、ホテルなどの「受付」のようなものを想像してみてください。例えば、受付の担当者に「自分宛てに電話があれば、要件をメモして後から報告してください」と依頼したとします。この依頼と依頼する処理の内容がイベントリスナーに相当します。担当者は依頼された内容を記憶しており、実際に電話がかかってきた際には依頼された通りの手順でメモを残して後から報告します。

アニメーションを作成する際にも同様の考えかたをします。画面が更新された際に発生するイベント「onEnterFrame」を受けとった際におこなう処理を、あらかじめイベントリスナーとして登録します。プログラムが実行されると、このイベントリスナーに登録された処理が一定間隔の時間をおいて実行されることになります。これがアニメーションを生成するエンジンとなるのです。

イベントリスナーのイメージ

ドキュメントクラスを作る

まず最初に、前回と同様にFLAファイルと連動したドキュメントクラスを作成します。新規にAS3形式のFLAファイルを作成し、ドキュメントのプロパティからクラスを指定します(例: Main)。同じフォルダ内に、クラス名と同じファイル名(例：Main.as)で、ASファイルを生成し、以下のテンプレートとなる枠組みを記入します。

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

  public class Main extends Sprite {
    public function Main() {

    }
  }
}

イベントリスナーを登録する

では早速、画面更新された際に発生するイベント「EnterFrame」を処理するためのイベントリスナーを登録してみましょう。イベントリスナーは、「this.addEventListener(イベントの種類, イベントを受けて実行する命令の名前)」という記述をします。

例えば、EnterFrameいべんとを受けとった際に、enterFrameHandler という名前の命令を実行するように設定する場合は以下のような記述となります。

this.addEventListner(Event.ENTER_FRAME, enterFrameHandler);

この処理をメインクラスに書き込んでみましょう。

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

    public class Main extends Sprite {
        public function Main() {
            
            //イベントリスナーを登録する
            this.addEventListner(Event.ENTER_FRAME, enterFrameHandler);
        
        }
    }
}

次にこのイベントが発生した際に行う処理を記述する必要があります。AS3ではイベントを処理する命令の集合のことを、イベントハンドラと呼んでいます。EnterFrameを処理するイベントハンドラは下記のようになります。

function イベントハンドラ名(event:Event):void

先程設定したイベントハンドラ、enterFrameHandlerをメインクラスに追記してみましょう。

package {
    import flash.display.Sprite;
    public class Main extends Sprite {
        public function Main() {

            //イベントリスナーを登録する
            this.addEventListner(Event.ENTER_FRAME, enterFrameHandler);

        }
    }
}

function enterFrameHandler(event:Event):void {
    //イベントを受けとった際の処理を以下に記述する
}

ムービークリップを追加

まず最初に物体が回転する動きを作成してみましょう。Main.flaに、新規にムービークリップを作成します。作成したムービクリップは「Spinner」というクラス名でリンケージの設定を行います。

まず始めに、画面の中心にSpinnerを配置してみましょう。メインクラスに以下のように命令を追加してライブラリにあるムービクリップ「Spinner」を画面に追加しましょう。

package {
  import flash.display.Sprite;
  import flash.events.Event;
  
  public class Main extends Sprite {
    
    //Spinnerのインスタンス
    var spinner:Spinner;

    public function Main() {
      //Spinnerのインスタンスを生成
      spinner =  new Spinner();

      //画面の中心に移動
      spinner.x=200;
      spinner.y=150;

      //画面に追加
      this.addChild(spinner);

      //イベントリスナーを登録する
      stage.addEventListener(Event.ENTER_FRAME, enterFrameHandler);
    }


    public function enterFrameHandler(e:Event):void {
      //イベントを受けとった際の処理を以下に記述する
    }
  }
}

回転角度を更新する

画面中央に追加したムービークリップを、フレームが更新するたびに少しずつ回転してみましょう。回転する命令は、enterFrameHandlerの中に記述していきます。すると、この角度の変化が回転するアニメーションになるのです。

package {
  import flash.display.Sprite;
  import flash.events.Event;
  
  public class Main extends Sprite {
    
    //Spinnerのインスタンス
    var spinner:Spinner;

    public function Main() {
      //Spinnerのインスタンスを生成
      spinner =  new Spinner();

      //画面の中心に移動
      spinner.x=200;
      spinner.y=150;

      //画面に追加
      this.addChild(spinner);

      //イベントリスナーを登録する
      stage.addEventListener(Event.ENTER_FRAME, enterFrameHandler);
    }


    public function enterFrameHandler(e:Event):void {
      //イベントを受けとった際の処理を以下に記述する
      spinner.rotation+=10;
    }
  }
}

/wp-content/uploads/2010/11/Main01.swf, 400, 300

画面をクリックでスタート

回転スピードを徐々速くしていく

このプログラムを少し改造して、徐々に回転速度を上げていくムービーにしてみましょう。まず変数としてrotationSpeedというNumber型の変数を用意します。最初はこのスピードは0ですが、フレームが更新すると、徐々にスピードを上げていくようにしてみましょう。

package {
  import flash.display.Sprite;
  import flash.events.Event;
  
  public class Main extends Sprite {
    
    //Spinnerのインスタンス
    var spinner:Spinner;
    //回転スピード
    var rotationSpeed:Number;

    public function Main() {
      //Spinnerのインスタンスを生成
      spinner =  new Spinner();

      //画面の中心に移動
      spinner.x=200;
      spinner.y=150;

      //画面に追加
      this.addChild(spinner);
      
      //初期スピードを0に
      rotationSpeed = 0;

      //イベントリスナーを登録する
      stage.addEventListener(Event.ENTER_FRAME, enterFrameHandler);
    }


    public function enterFrameHandler(e:Event):void {
      //イベントを受けとった際の処理を以下に記述する
      
      //指定スピードで回転
      spinner.rotation+=rotationSpeed;
      
      //スピードを増加させる
      rotationSpeed += 0.1;
    }
  }
}

/wp-content/uploads/2010/11/Main02.swf, 400, 300

画面をクリックでスタート

回転する物体の模様を工夫してみる

回転する物体にいろいろと模様を書き込むと、不思議な効果が生まれます。いろいろ工夫してみましょう。

/wp-content/uploads/2010/11/Main03.swf, 400, 300

画面をクリックでスタート

/wp-content/uploads/2010/11/Main04.swf, 400, 300

画面をクリックでスタート

サンプルファイルのダウンロード

今回の授業で取りあげたサンプルファイルは、下記からダウンロードしてください。