「イベント」の版間の差分

2014年12月15日 (月) 11:40時点における最新版

イベントとは?

MovieインスタンスやButtonインスタンスにイベントを設定することで
インスタンスが生成された瞬間や、インスタンスの描画準備が整った瞬間、毎フレームの処理、任意のイベントを発火した瞬間、等
様々なタイミングで関数を実行したりすることができます。

イベントリスナーを設定したい

イベントリスナーを設定するにはaddEventListenerを使用します。

【サンプル】
<Movie 又は Buttonインスタンス>.addEventListener("イベントタイプ", function(){
    console.log("イベントを受け取りました");
});

addEventListenerの第1引数にはイベントタイプを指定します。
指定されたイベントがMovieやButtonに対して発火されると、第2引数の関数を実行します。
MovieやButtonにより設定できるイベントタイプは異なります。

イベントリスナーを解除したい

設定したイベントリスナーを解除するには主に2通りの方法があります。

• 指定したイベントタイプの中から指定した関数のみ解除する
• 指定したイベントタイプの関数全てを解除する

【指定したイベントタイプの中から指定した関数のみ解除する】 イベントリスナーを解除するにはremoveEventListenerを使用します。

【サンプル】
//解除する関数
var func1 = function(){
    console.log("イベント1");
}

//解除しない関数
var func2 = function(){
    console.log("イベント2");
}

//毎フレーム実行するように登録
<Movieインスタンス>.addEventListener("enterFrame",func1);
<Movieインスタンス>.addEventListener("enterFrame",func2);

//func1のみ解除
<Movieインスタンス>.removeEventListener("enterFrame",func1);

removeEnvetListenerの第1引数にはイベントタイプ。
第2引数には解除したい関数を設定します。

【指定したイベントタイプの関数全てを解除する】
指定したイベントタイプのイベントリスナーを全て解除するにはclearEventListenerを使用します。

【サンプル】
var func1 = function(){
    console.log("イベント1");
}
var func2 = function(){
    console.log("イベント2");
}

//毎フレーム実行するように登録
<Movieインスタンス>.addEventListener("enterFrame",func1);
<Movieインスタンス>.addEventListener("enterFrame",func2);

//enterFrameタイプを全て解除
<Movieインスタンス>.clearEventListener("enterFrame");

removeEnvetListenerの第1引数にはイベントタイプを設定します。
※注意_rootに対してclearEventListener("enterFrame")を行うと、tweenクラスで使用されているenterFrame処理も止まってしまいます。
_rootに対してはclearEventListener("enterFrame")を行わないでください。

※タイムライン上で静的に配置されたMovieやButtonに設定されているイベントリスナーはインスタンスがタイムライン上から消えた時点で解除されます。

Movieが生成された瞬間に関数を実行したい

Movieインスタンスが生成された瞬間に関数を実行したい場合のサンプルです。

• attachMovieで追加したMovieの場合

//attachMovieでインスタンスが生成された瞬間アラートを表示
<Movieインスタンス>.attachMovie("linkageName","movieName",{
    "load":function(){
        alert("このMovieは今、生成されました");
    }
});

• フレームスクリプトで記述する場合

該当するタイムラインの1フレーム目に記述します。

/* js_load
    alert("このMovieは今、生成されました");
*/

上記のjs_load指定は1Movieにつき1つまでです。

Movieの再生準備が整ったら関数を実行したい

Movieインスタンスが生成され、描画の準備が整った瞬間に関数を実行したい場合のサンプルです。

• attachMovieで追加したMovieの場合

//attachMovieでインスタンスが生成され、描画準備が整った瞬間アラートを表示
<Movieインスタンス>.attachMovie("linkageName","movieName",{
    "postLoad":function(){
        alert("このMovieの描画準備が整いました");
    }
});

• フレームスクリプトで記述する場合

該当するタイムラインの1フレーム目に記述します。

/* js_postLoad
    alert("このMovieの描画準備が整いました");
*/

上記のjs_postLoad指定は1Movieにつき1つまでです。

Movieが削除された瞬間に関数を実行したい

Movieインスタンスが削除された瞬間に関数を実行したい時のサンプルです。

• スクリプトで指定する場合

//削除された時のイベントリスナーを設定
<Movieインスタンス>.addEventListener("unload",function(){
    alert("このMovieは削除されました");
});

• フレームスクリプトで記述する場合

該当するタイムラインの1フレーム目に記述します。

/* js_unload
    alert("このMovieは削除されました");
*/

上記のjs_unload指定は1Movieにつき1つまでです。

毎フレーム実行させたい

Movieの更新処理が走る度(毎フレーム)に関数を実行させたい場合のサンプルです
更新処理が走る度なので、movie.active=falseになっている場合は実行されません。

• スクリプトで指定する場合

<Movieインスタンス>.addEventListener("enterFrame",function(){
    console.log("毎フレームはしってます");
});

• フレームスクリプトで記述する場合

該当するタイムラインの1フレーム目に記述します。

/* js_enterFrame
    console.log("毎フレームはしってます");
*/

上記のjs_enterFrame指定は1Movieにつき1つまでです。

カスタムイベントを使いたい

カスタムイベントを使えば、自分の好きなタイミングでイベントを発火し、そのタイミングで関数を実行することが出来ます
例えば、剣を振るアニメーションがあったとして、当たり判定が発生するフレームにカスタムイベントを発火すれば
そのタイミングで、当たり判定の計算ができるといった具合です。
下記はそのサンプルになります。

//イベントリスナーを設定
<Movieインスタンス>.addEventListener("hitTest",function(){
    console.log("当たり判定を確認");
});

addEventListenerの第1引数は対応するイベントの指定。
第2引数はイベントを受け取った際に実行する関数を入れます。

リスナーを設定したMovieの任意のフレームに下記のスクリプトを記述すると、そのフレームが再生されるタイミングで 先ほど設定した関数が実行されます。

/* js
    //タイムラインスクリプト
    //イベント発火
    this.dispatchEvent("hitTest");
*/

また、下記のようにパラメータを持たせることもできます。

/* js
    //タイムラインスクリプト
    //イベント発火 + パラメータ
    this.dispatchEvent({type:"myEvent",param:{age:7,speed:10}});
*/

パラメータを受け取って使う場合のサンプルです。

//イベントリスナーを設定
<Movieインスタンス>.addEventListener("myEvent",function(e){
    console.log(e.param.speed);
});

※Flashのイベントとは違い、Movieに発火したイベントは伝播していくわけではないので注意してください。