２０１４年度　ウェブアニメーション実習（後半）
[Prev] [Home] [Next]

第１０回 イベント処理

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

★本日のテーマ

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

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

★イベント処理とは？

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

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

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

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

function onShowMessage(event:MouseEvent){

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

ActionScriptでイベント処理を行うにはイベントリスナーを使用する。
イベントリスナーは、任意のイベントの発生を聞き耳を立てて待っており、実際にそれが発生したら、予め登録しておいたイベントハンドラと呼ばれるメソッド（関数）を実行する。

★イベントリスナーの使用【重要】

addEventListenerメソッド

addEventListenerは、「●●に、あることが起きた場合、こうしなさい」ということを設定するメソッドである。
→「●●」は、インスタンス。「あること」はイベント。「こうしなさい」は関数（メソッド）。

イベントターゲット.addEventListener(イベント定 数（イベントの種類）, 通知先の関数名(イベントハンドラの参照));


上述のサンプルプログラムで言うと・・・

通知先の関数(イベントハンドラ)の設定
→「こうしなさい」の内容を記述する。

function 関数名 ( 引数 ) { 処理 ；}
※ 引数にはイベントオブジェクトが渡される。イベントオブジェクトの型に注意する。
上述のサンプルプログラムで言うと・・・

よく使うイベント定数（イベントの種類）

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

removeEventListeneメソッド

不要になったイベントリスナーは、removeEventListenerメソッドで削除できる。
各パラメータにはaddEventListenerメソッドで登録した時と同じ値を指定する。

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

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

★試してみよう

次のファイルをダウンロードし、マウス操作によって車を前後に動かすプログラムを作成してみよう。→[download] 

left_btn.addEventListener(MouseEvent.CLICK, onCarBack);
right_btn.addEventListener(MouseEvent.CLICK, onCarGo);

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

function onCarGo(event:MouseEvent){
  car.x += 10;
}
※【補足】複合代入演算子
x -= 1;
は
x = x - 1;
と同じこと。

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

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

【補足】キーコードを知る方法
(KeyboardEvent.KEY_DOWNの)イベントハンドラにおいて、「イベントオブジェクト.keyCode」で押されたキーの"キーコード"を参照できる。

trace(イベントオブジェクト.keyCode);

で出力するとよい。
具体的なコーディングについては、下記のサンプルコードを参考にする。

★試してみよう

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

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

★ENTER_FRAMEイベント

フレームの読み込みをキッカケに、ある処理を実行する。
イベント定数説明
Event.ENTER_FRAMEFPSに合わせたタイミングで発生するenterFrameイベントを表す


サンプルファイル →[download]
stage.addEventListener(Event.ENTER_FRAME, onCarGo);

function onCarGo(e:Event) {
	car.x += 1;
	
	if(car.x > 100){
		//x座標が100にななったら、イベントリスナーを削除する
		stage.removeEventListener(Event.ENTER_FRAME,onCarGo);
	}
	
	//テキストフィールドにx座標を表示
	x_zahyo.text = String(car.x);
}

★練習

次の素材ファイルを用いて、イベント処理の練習をしてみよう。
また、オブジェクトのプロパティについて理解を深めよう。

【参考】オブジェクトの主なプロパティ
説明プロパ ティ値を設定するシンタックス単位(範囲)
位置 x,ybox.x=100;ピクセル
box.y=100;
スケール（１） scaleX,scaleYbox.scaleX=0.5;パーセント（０から１）
box.scaleY=0.5;
スケール（２） width,heightbox.width=80; ピクセル
box.height=80;
回転 rotationbox.rotation=45;度(０から３６０)
透明度 alphabox.alpha=0.5;パーセント(0から1)
可視性 visiblebox.visible=false;ブール値

素材のダウンロー ド → [click]
  • 拡大／縮小
    kakudai_btn.addEventListener(MouseEvent.CLICK, tako_kakudai);
syukusyo_btn.addEventListener(MouseEvent.CLICK, tako_syukusyo);

function tako_kakudai(event:MouseEvent){
  tako.scaleX *= 1.02;
  tako.scaleY *= 1.02;
}

function tako_syukusyo(event:MouseEvent){
  tako.scaleX *= 0.98;
  tako.scaleY *= 0.98;
}

  • 回転

    hantokei.addEventListener(MouseEvent.CLICK, tokei_mawari);
tokei.addEventListener(MouseEvent.CLICK, hantokei_mawari);

function tokei_mawari(event:MouseEvent){
  tako.rotation -= 5;
}

function hantokei_mawari(event:MouseEvent){
  tako.rotation += 5;
}

  • 透明度と可視性
    //0の時、visible==true　/　1の時false
var i:int = 0; 

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


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

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

  • ENTER_FRAMEイベントの利用 
stage.addEventListener(Event.ENTER_FRAME, onTakoEnterFrame);

//拡大・縮小の切り替えフラグ
var f:int = 0;

function onTakoEnterFrame(e:Event){
    //タコを回転させる
	tako.rotation += 5;

    //タコを拡大・縮小させる
    if(f == 0){
	   tako.scaleX *= 0.88;
	   tako.scaleY *= 0.88;
	   
	   if(tako.width < 3){
		   //タコの幅が3より小さくなったら、拡大に切り替え
		   f = 1;
	   }

	}else{
		tako.scaleX *= 1.20;
	    tako.scaleY *= 1.20;
		
		if(tako.width > 1500){
			//タコの幅が1500より大きくなったら、縮小に切り替え
			f = 0;
		}
	}
}


課題1

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

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

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

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

発展課題1（時間があまった人はやってみよう）

EnterFrameイベントによってUFOにアニメーションをつけて下さい。 大きさでも良いし、移動でも良いし、アルファでもいい。

発展課題2

UFOの座標をテキストフィールドに表示するように上記課題プログラムを改造しなさい。

↓テキストフィールドへの座標表示の例
[Prev] [Home] [Next]