本日の内容

• ActionScript3.0へ移行する
• 前回やったインタラクションのサンプル
  • ActionScript2で作成されていた
  • 1世代前の書式
  • 現在の最新のバージョンである、ActionScript3.0で、簡単なインタラクティブなムービーを作成してみる

ボタンアクションからイベントリスナーへ

• ActionScript2では、ボタンの中にActionScrpitを記述する方法が一般的だった
  • 先週の授業のサンプル参照
• ActionScript3.0では、ボタンにアクション(プログラム)を埋めこむことができない！
  • ではどうすればいいのか?
  • イベントリスナーを用いた、イベント処理という手法を使う
  • イベントリスナーとは：あらかじめ想定される予定を受付に登録しておくようなイメージ
    • 「Aさんが訪ねてきたら、私に電話してください」
      • 受付係：イベントリスナー
      • 「Aさんが訪ねてきたら」：イベント (きっかけ)
      • 「私に電話してください」：イベントハンドラーメソッド (動作)
• マウスによるインタラクションをイベントリスナーを使って作成してみる

例1：ムービクリップのクリック

• ムービークリップをクリックすると、メッセージを表示する
• 作成手順
  • ステージ上に、クリックするためのオブジェクトを配置
  • ムービクリップシンボルとして、シンボル化する
  • インスタンス名をつける、インスタンス名 = "hello"
  • レイヤーを追加して、1フレーム目にスクリプトを記述

//イベントリスナーの追加
this.helloMc.addEventListener(MouseEvent.CLICK, onClick);
//イベントハンドラメソッドの定義
function onClick(event:MouseEvent):void
{
trace("Hello!");
}

例2：フレーム再生のナビゲーション

• ボタンをクリックすると、シーンのフレームの特定位置に移動する
• 作成手順
  • ステージ上に2つボタンを配置
  • それぞれにインスタンス名をつける："blueButton" "redButton"
  • 10フレームまでフレームを挿入
  • レイヤーを追加して、6フレーム目にキーフレームを追加。2つの領域に分ける
    • 前半のブロックに青い丸、後半のブロックに赤い丸を描く
  • さらにレイヤーを追加
    • フレームのプロパティーから、ラベルを追加する：1フレーム目に"blue"、6フレーム目に"red"
  • レイヤーを追加して、1フレーム目にスクリプトを追加

//メインのタイムラインの再生を停止
stop();
//イベントリスナーの追加
this.blueButton.addEventListener(MouseEvent.CLICK, onClickBlue);
this.redButton.addEventListener(MouseEvent.CLICK, onClickRed);
//blurButtonをクリックした際の、イベントハンドラ
function onClickBlue(event:MouseEvent):void
{
gotoAndStop("blue");
}
//redButtonをクリックした際の、イベントハンドラ
function onClickRed(event:MouseEvent):void
{
gotoAndStop("red");
}

例3： ムービークリップの再生と停止

• ステージに配置したムービクリップシンボルを再生・停止する
• 作成手順
  • ステージ上にムービクリップシンボルを作成
  • ムービクリップをダブルクリックして、ムービクリップ内のタイムラインへ移行
  • ムービークリップ内でアニメーションを作成
  • 作成したムービクリップにインスタンス名を付ける："ball"
  • レイヤーを追加して、ボタンを2つ追加
  • 追加したボタンにインスタンス名を付ける："startButton", "stopButton"
  • レイヤーを追加して、1フレーム目に以下のスクリプトを記述する

this.ball.stop();
this.startButton.addEventListener(MouseEvent.CLICK, onClickStart);
this.stopButton.addEventListener(MouseEvent.CLICK, onClickStop);
function onClickStart(event:MouseEvent):void
{
this.ball.play();
}
function onClickStop(event:MouseEvent):void
{
this.ball.stop();
}

例4：複数のムービークリップの制御

• ステージ上に複数のムービークリップを配置して、それぞれの再生・停止をボタンからコントロールする
• 作成方法
  • 例3で作成したムービークリップとボタンの組を、コピーする
  • コピーしたムービークリップとボタンを、オリジナルの横にペースト
  • 2つのムービークリップとボタンの組に、それぞれインスタンス名をつけていく
    • "ball1", "startButton1", "stopButton1"
    • "ball2", "startButton2", "stopButton2"
  • レイヤーを追加して、1フレーム目に以下のスクリプトを記述する

this.ball1.stop();
this.ball2.stop();
this.startButton1.addEventListener(MouseEvent.CLICK, onClickStart1);
this.stopButton1.addEventListener(MouseEvent.CLICK, onClickStop1);
this.startButton2.addEventListener(MouseEvent.CLICK, onClickStart2);
this.stopButton2.addEventListener(MouseEvent.CLICK, onClickStop2);
function onClickStart1(event:MouseEvent):void
{
this.ball1.play();
}
function onClickStop1(event:MouseEvent):void
{
this.ball1.stop();
}
function onClickStart2(event:MouseEvent):void
{
this.ball2.play();
}
function onClickStop2(event:MouseEvent):void
{
this.ball2.stop();
}