yoppa.org


Web動画表現技法 2009

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

本日の内容

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

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

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

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

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

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

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

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

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

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

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

  • Anonymous

    「例2:フレーム再生のナビゲーション」を試しにやってみたのですが、下記のようなエラーが出ます。

    TypeError: Error #1010: 条件は未定義であり、プロパティがありません。
    at test_fla::MainTimeline/frame1()

  • Anonymous

    失礼しました!
    インスタンス名が間違っていました。
    動きました。ありがとうございます。