第3回　イベントハンドラメソッド

「イベントハンドラメソッド」はButtonオブジェクトやMovieClipオブジェクトに、ロールオーバーやクリックなどのイベントが起こったときの動作を定義することができる。これによって、アニメーションだけでは実現できなかったインタラクティブなムービーを作成できるActionScriptだ。イベントハンドラメソッドの構文を理解し、例題としてタブをクリックするとポップアップウィンドウが開くナビゲーションを作ってみよう。

・構文
オブジェクト名.イベントハンドラメソッド = funciton(){
イベントが起こったときに実行するスクリプト
};

例えば、ボタン「a_btn」をクリックしたときに、ムービークリップ「b_mc」のx座標を100に移動させる例文は次のようになる。

a_btn.onRelease = function(){
b_mc._x = 100;
};

ButtonオブジェクトとMovieClipオブジェクトのイベントハンドラメソッドは次の通りだ。まずは、「onRelease」や「onRollOver」などといった使用頻度の高いマウス操作によるイベントハンドラメソッドから覚えるとよいだろう。

onPress
オブジェクトの上でマウスボタンを押したとき

onRelease
オブジェクトの上でマウスボタンを離したとき

onReleaseOutside
オブジェクトの外でマウスボタンを離したとき

onRollOver
オブジェクトの上にマウスポインタがのったとき

onRollOut
オブジェクトの外にマウスポインタがはずれたとき

onDragOver
オブジェクトの上でマウスボタンを押した後、オブジェクトの外にドラッグし、再度オブジェクトの上にドラッグしたとき

onDragOut
オブジェクトの上でマウスボタンを押した後、オブジェクトの外にドラッグしたとき

onSetFocus
フォーカスを受け取ったとき

onKillFocus
フォーカスを失ったとき

onKeyDown
キーボードのキーを押したとき

onKeyUp
キーボードのキーを離したとき

onEnterFrame
フレームが再生されるたび

onMouseDown
マウスボタンを押したとき

onMouseUp
マウスボタンを離したとき

onMouseMove
マウスポインタを動かしたとき

onLoad
オブジェクトがタイムラインに読み込まれたとき

onUnload
オブジェクトがタイムラインから削除されたとき（再生が終わったとき）

onData
「loadVariables()」や「loadMovie()」メソッドでデータを受信したとき

タブをクリックするとポップアップウィンドウが開くActionScriptを設定しよう。

1．［名前：tab0］、［タイプ：ムービークリップ］の新規シンボルを作成する。ステージにタブのついたウィンドウを描画する。ウィンドウの中には、画像や文字などのコンテンツを配置し、タブにタイトルをつけよう【図1】。

2．「シーン1」のステージ上で、ウィンドウが閉じている状態の位置に「tab0」を配置する。フィルタでグローを設定する【図2】。

3．ウィンドウを開くための、半透明のタブ形のボタンシンボル「open_btn」と【図3】、ウィンドウを閉じるための、closeと書いたボタンシンボル「close_btn」を作成する【図4】。

4．ムービークリップシンボル「tab0」の編集画面に戻り、新規レイヤー「open_btn」、「close_btn」に、それぞれのボタンを配置。プロパティインスペクタでインスタンス名を「open_btn」、「close_btn」に設定する【図5】。

5．新規レイヤー「action」を作成する。［フレーム1］を選択し、［アクション］パネルに、ボタンをクリックしたときのイベントハンドラメソッド「onRelease」を使って、2つのボタンをクリックしたときにウィンドウを移動させる処理を【図6】のように記述する。イベントハンドラメソッド内の「this」の意味に注意しよう。

(1)
open_btn.onRelease = function(){
_y = 20;
};
ボタン「open_btn」をクリックしたとき、このムービークリップ（「tab0」）のY座標を20（ウィンドウを開いたときの座標）に移動する

(2)
close_btn.onRelease = function(){
_y = 297;
};
ボタン「close_btn」をクリックしたとき、このムービークリップ（「tab0」）のY座標を297（ウィンドウを閉じたときの座標）に移動する

イベントハンドラメソッド内で「this」を省略すると、ターゲットパスは、スクリプトを記述しているオブジェクトを参照する。よって、この場合の「_y」は「tab0」のy座標のことを指す。

6．ここまでを［制御］→［ムービープレビュー］で確認してみよう【図7】。ウィドウの開閉ができるようになったが、ウィンドウを開いているときも、タブのボタン機能が有効になっままだ。そこで、これを解決するため、【図8】の処理を追加しよう。

（1）
open_btn.onRelease = function(){
_y = 20;
this._visible = false;
};
ボタン「open_btn」をクリックしたとき（ウィンドウを開いたとき）、ボタン「open_btn」を非表示（false）にする

（2）
close_btn.onRelease = function(){
_y = 297;
open_btn._visible = true;
};
ボタン「close_btn」をクリックしたとき（ウィンドウを閉じたとき）、ボタン「open_btn」を表示（true）する

イベントハンドラメソッド内で「this」を記述すると「this」はイベントハンドラメソッドを呼び出したオブジェクトを参照する。よって、この場合の「this._visible」は「open_btn」の表示（_visible）のことを指す。

7．［ライブラリ］パネルで「tab0」を複製して、「tab1」、「tab2」を作成する。コンテンツの部分だけ変更し、「シーン1」に並べて配置し、フィルタでグローを設定する【図9】。［制御］→［ムービープレビュー］で確認しよう。