2010年度 インタラクティブ映像制作実習II(1)
[Prev] [Home] [Next]

第2回 イベント処理

担当者: 斎藤進也 (saitos[at]fc.ritsumei.ac.jp)


★本日のテーマ

本日は、Flashを用いてインタラクティブ・コンテンツを作成する上で、最も重 要となるイベント処理について学習する。

※本日の内容は特に重要です。心して取り組んでください。


<ひとこと>
「プログラミングが苦手なので、これからついていけるかが心配だ・・・」といった声をたくさん頂戴しましたが、問題ありません。
ゆっくり進めますし、グループの他のメンバーも助けてくれるはずです。
はじめからプログラミングに拒否反応をしめさず、落ち着いて取り組んでください。
間違いなく、表現/創作の幅が広がるはずです。

ただし、変数、if文、for文くらいは復習しておいてください。

<プログラミングが苦手なひとへのお薦め文献>

<プログラミングが得意なひとへのお薦め文献>


★イベント処理とは?(pp.17-18)

イベント処理とは、何かが起きたことを"キッカケ"として、任意の処理を実行するための仕組み。

例えば、ボタンがクリックされたことを"キッカケ"として、オブジェクトの座標xに10加算するなどといった処理。


すなわち、特定の処理があるとして、それを「いつ実行するのか」ということが問題になる。
キッカケは「ボタンが押された時」なのか、「特定のフレームが読まれた時」な のか、「キーボードのキーが押された時」なのか??

そして、そうしたキッカケを統制するのが、「イベントリスナー」である。

次のサンプルプログラムを見てみよう。 →[download]
this.btn.addEventListener(MouseEvent.CLICK,showMessage);

function showMessage(event:MouseEvent){

 trace("高さは"+this.obj.height+"です。");
 trace("幅は"+this.obj.width+"です。");
 trace("xは"+this.obj.x+"です。");
 trace("yは"+this.obj.y+"です。");
    
}

★イベントリスナーの使用(p.94)

addEventListenerメソッド

addEventListenerは、「あることが起きた場合、こうしなさい」ということを設定するメソッドである。
インスタンス名.addEventListener(イベント定数(イベントの種類), 通知先の関数名);

通知先の関数の設定

function 関数名 ( 引数 ) { 処理 ;}

主なイベント定数

イベント定数説明
MouseEvent.CLICKクリックしたときに発生するclickイベントを表す
KeyboadEvent.KEY_DOWN キーが押されたときに発生するKeydownイベントを表す
Event.ENTER_FRAMEFPSに合わせたタイミングで発生するenterFrameイベントを表す

とあるホテルでの一幕 〜たとえ話による理解

お客:「すみませんが、もしTogoなる人物が訪ねてきたら、このメモを渡してください」
受付:「Togo様ですね。承りました」(メモをカウンターの下のひき出しにしまう)

-------数時間後 ------

Togo氏:「こんにちは。私、Togoと申しまして・・・」
受付:(ひき出しからメモを取り出して)「Togo様ですね。こちらのメモをことづかかっております。どうぞ」
Togo氏:「ありがとう。これは・・・。早急に、上野発の夜行列車の切符を手配せねば」

ここでの「受付」は、まさしくイベントリスナー的であるといえる。
若干、無理があるが、ここでのやりとりをActionScriptの構文になぞらえると、下記ののようになる。

Togo.addEventListener(たずねて来た ら , カウンターの下の引きだし);
function カウンターの下の引きだし(event:だずねて来たたら){ 上野発の夜行列車の切符を手配する; }



★マウスイベントを使ったプロパティ制御

主なイベント定数

イベント定数説明
MouseEvent.CLICKオブジェクトの領域内でマウスボタンを押して離す
MouseEvent.DOUBLE_CLICKオブジェクトの領域内でマウスボタンを連続して2回押して離す。
MouseEvent.MOUSE_DOWNオブジェクトの領域内でマウスボタンを押す
MouseEvent.ROLL_OVERオブジェクトの領域内にマウスカーソルが入る
MouseEvent.ROLL_OUTオブジェクトの領域内からマウスカーソルが出る

★試してみよう

次のファイルをダウンロードし、マウス操作によって車を前後に動かすプログラムを作成してみよう。→[download]
this.left_btn.addEventListener(MouseEvent.CLICK,car_back);
this.right_btn.addEventListener(MouseEvent.CLICK,car_go);

function car_back(event:MouseEvent){
 this.car.x -= 10;
}

function car_go(event:MouseEvent){
 this.car.x += 10;
}

★キーボードイベントを使ったプロパティの制御

主なイベント定数

イベント定数説明
KeyboadEvent.KEY_DOWNキーが押された
KeyboardEvent.KEY_UPキーが離された

★試してみよう

先に作成した(マウス操作の)プログラムを改造し、キーボード操作によって車を前後に動かすプログラムを作成してみよう。
//ステージにイベントリスナーを登録する。イベントはキーが押された時。
stage.addEventListener(KeyboardEvent.KEY_DOWN,keydown);

function keydown(event:KeyboardEvent){

//押されたキーのキーコードを出力する
    trace(event.keyCode);
    
    //キーコードによって、処理を分岐させる。37は「←」キー、39は「→」
    キー。
    if(event.keyCode == 37){
    this.car.x -= 10;
    }else if(event.keyCode == 39){
    this.car.x += 10;
    }
}

★練習

次の素材ファイルを用いて、イベント処理の練習をしてみよう。
素材のダウンロー ド → [click]
//0の時、visible==true / 1の時false
var i:Number = 0; 

this.vsible_btn.addEventListener(MouseEvent.CLICK, tako_visible);
stage.addEventListener(KeyboardEvent.KEY_DOWN, alpha_updown);


function tako_visible(event:MouseEvent){
if(i==0){
this.tako.visible = false; //見せなくする
i=1;
}else{
this.tako.visible = true;
i=0;
}
}

function alpha_updown(event:KeyboardEvent){
    //keyCodeをえる。 
    //trace(event.keyCode);
    //38が「↑」 40が「↓」
    
    if(event.keyCode == 38){
    this.tako.alpha *=1.2;
    }
    
    if(event.keyCode == 40){
    this.tako.alpha *=0.8;
    }
}


★本日の課題

宇宙空間およびUFOを描きなさい。

なお、UFOはキーボード操作によって左右に移動できるようにしなさい。(「←」キー、「→」キーを使用)
また、直進/後退による遠近感を表現するために、UFOの大きさを拡大縮小できる ようにしなさい。この処理についてもキーボード操作によって行う。(「↑」キー (前進:縮小)、「↓」キー(後退:拡大)を使用。)

なお、本日の課題は「個人課題」である。

<注意事項>
グループで、知識、技術を共有するように努めてください!
困っているメンバーがいたら積極的に助けましょう。
分からないことがあれば、どんどん他のメンバーに質問しましょう。


発展課題(提出する必要はありません)

教科書やWebサイトなどを各自で調べ、UFOのx,y座標をテキストフィールドに表 示するように上記課題プログラムを改造しなさい。

↓テキストフィールドへの座標表示の例

[Prev] [Home]