yoppa.org


immediate bitwave

Web動画表現技法 2009

第7回:ActionScript3.0:フレームアクションとイベント処理

本日の内容

  • 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();
}
— 05 November 2011 22:26
失礼しました! インスタンス名が間違っていました。 動きました。ありがとうございます。
— 05 November 2011 01:24
「例2:フレーム再生のナビゲーション」を試しにやってみたのですが、下記のようなエラーが出ます。 TypeError: Error #1010: 条件は未定義であり、プロパティがありません。 at test_fla::MainTimeline/frame1()