yoppa.org

Webアニメーション 2010

ActionScript (1) : Flashムービーにインタラクションを付加する

今回の授業の内容

これまで学んできたFlashのアニメーションは、時間に沿って決まった動きを繰りかえすという「伝統的な」アニメーションの枠内に留まるものでした。

Fhashでは、こうしたアニメーションの要素に加えて、ユーザの何らかの動作に反応してアニメーションを行うようにプログラミングしていくとが可能です。これはFlashを用いてユーザインタフェイスを作成したり、インタラクティブな作品を作る際の基本となります。

今日の授業では、簡単なインタラクティブなムービーの作成を通して、Flashでのプログラミングの基本を学びます。

インタラクションについて

  • インタラクションとは?
  • interaction = inter + action
    • inter → ○○の間に
    • action → 動作
  • ふたつ以上の存在が互いに影響を及ぼしあうこと
  • コンピュータプログラムの場合には、プログラムを使用するユーザーと、プログラムの間の相互作用のこと

Flashでインタラクションを実現するには

  • 今までのアニメーションのテクニックに加えて、プログラミングが必要となる
  • Flashでは、ActionScriptというFlash専用のプログラミング言語を用いる
  • 現在のバージョンは、ActionScript 3.0
  • 複雑な処理や双方向性を持たせたFlashを作成することが可能となる

どこにActionScriptを書き込むのか?

  • ActionScriptはフレームの中に記入していく
  • 再生ヘッドが、ActionScriptを記入したフレームに到達したタイミングで、フレーム内に記入された命令が実行される

フレームへのActionScriptの記入方法

  • ActionScriptを記入したいフレームにキーフレームを挿入する
  • キーフレームを選択した状態にする
  • 「ウィンドウ」→「アクション」を選択
  • 「アクション」パネルが表示される。これがActionScriptを作成するための画面になる


アクションパネル

イベントリスナーについて

  • ActionScript 3.0で、インタラクションを実現するには、イベントリスナーという概念を理解する必要がある
  • イベントリスナー – 何らかの「イベント」が発生を検知して、そのイベントの内容に応じて特定の動作(イベントハンドラ)を行うこと
    • イベント – 「マウスをクリックする」「マウスを動かす」「マウスをドラッグする」など
  • 「受付」を想像すると理解しやすい(かもしれない) – あらかじめ想定される予定を受付に登録しておくようなイメージ
    • 受付に依頼する「Aさんが訪ねてきたら、私に電話してください」
    • 受付係：イベントリスナー
    • 「Aさんが訪ねてきたら」：イベント (きっかけ)
    • 「私に電話してください」：イベントハンドラ (動作)

マウスのクリックで、タイムラインをコントロールする

例1：特定のフレームへ移動

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


タイムラインの状態

1フレーム目に記入するActionScript

[code language=”javascript”]
stop(); //まず再生を停止しておく

//イベントリスナーの追加
//"Blue"のボタンをクリックしたら、"blueClickHandler"を実行する
this.blue_button.addEventListener(MouseEvent.CLICK, blueClickHandler);
//"Red"のボタンをクリックしたら、"redClickHandler"を実行する
this.red_button.addEventListener(MouseEvent.CLICK, redClickHandler);

//"blueClickHandler"の処理の内容
function blueClickHandler(event:MouseEvent):void
{
gotoAndStop("blue"); //タイムラインの"blue"のラベルへ移動
}

//"redClickHandler"の処理の内容
function redClickHandler(event:MouseEvent):void
{
gotoAndStop("red"); //タイムラインの"red"のラベルへ移動
}
[/code]

https://yoppa.org/wp-content/uploads/2010/06/interaction01.swf,550,400

例2：ムービーの再生と停止をコントロール

  • ボタンの操作で、ムービーの再生と停止をコントロールする
  • 作成手順
    • ステージ上に円を配置
    • モーショントゥイーンを適用し、アニメーションを作成
    • レイヤーを追加する
    • 追加したレイヤーにボタンを2つ追加
    • ボタンのインスタンス名を"play_button","stop_button"に
    • レイヤーをもう1つ追加
    • 追加したレイヤーの1フレーム目にスクリプトを追加


タイムラインの状態

1フレーム目に記入するActionScript

[code language=”javascript”]
//イベントリスナーの追加
//"Play"のボタンをクリックしたら、"playHandler"を実行する
this.play_button.addEventListener(MouseEvent.CLICK, playHandler);
//"Stop"のボタンをクリックしたら、"stopHandler"を実行する
this.stop_button.addEventListener(MouseEvent.CLICK, stopHandler);

//"playHandler"の処理の内容
function playHandler(event:MouseEvent){
play(); //ムービーを再生
}

//"stopHandler"の処理の内容
function stopHandler(event:MouseEvent){
stop(); //ムービーを停止
}[/code]

https://yoppa.org/wp-content/uploads/2010/06/interaction02.swf,550,400