ActionScript 3.0入門ノート CS4でタグ「target」が付けられているもの

(section04-02 イベントとイベントリスナーから抜粋)

 入れ子のムービークリップのロールオーバー/ロールアウトのイベントは、クリックイベントと同じではありません。クリックイベントの場合は親ムービーにイベントリスナーを登録すれば子ムービーのインスタンスのクリックをイベントのtargetとして処理できますが、ロールオーバー/ロールアウトのイベントの場合はtargetとして処理できません。
 これに対処するために、次のサンプルで示すようにaddEventListener()の第3引数(useCaptureプロパティ)をtrueにします。すると親ムービーに設定したリスナー関数でロールオーバー/ロールアウトをした子ムービーのインスタンスをtargetとして処理できるようになり、子ムービーのインスタンスごとにイベントリスナーを登録する手間がなくなります。

[:script:]ロールオーバーした入れ子のインスタンスを拡大する
//イベントリスナーの追加
box_mc.addEventListener(MouseEvent.ROLL_OVER, onRollover, true);
box_mc.addEventListener(MouseEvent.ROLL_OUT, onRollout, true);

//ロールオーバーのリスナー関数
function onRollover(eventObj:MouseEvent):void {
	var target_mc:MovieClip=eventObj.target as MovieClip;
	target_mc.scaleX=target_mc.scaleY=3.0;
}

//ロールアウトのリスナー関数
function onRollout(eventObj:MouseEvent):void {
	var target_mc:MovieClip=eventObj.target as MovieClip;
	target_mc.scaleX=target_mc.scaleY=1.0;
}
fig4-02-09.jpg
イベントリスナーは親ムービーに設定してありますが、ロールオーバーした子ムービーのインスタンスが拡大します
swfを試す

[:note:] ROLL_OVER ROLL_OUT のイベントオブジェクトのbubblesプロパティがfalseだからです。CLICKのbubblesプロパティはtrueです。
詳しくはヘルプのイベントフローを参照してください。

(section04-02 イベントとイベントリスナーから抜粋)

 ムービークリップの中にさらにムービークリップが含まれているという入れ子のムービークリップのインスタンスの場合には、マウスイベントを受け取ったターゲットの処理に注意が必要です。
 たとえば、次のカエルの顔のムービークリップは顔の中の目が入れ子のインスタンスになっています。このムービークリップのインスタンスface_mcにクリックすると回転するイベントリスナーを追加します。

fig04-02-04.jpg
顔のムービークリップの中に目のムービークリップが入れ子で入っています。

[:script:]クリックしたtargetを回転させる
//イベントリスナーの追加
face_mc.addEventListener(MouseEvent.CLICK, onClick);

//クリックのリスナー関数
function onClick(eventObj:MouseEvent):void {
	var target_mc:MovieClip=eventObj.target as MovieClip;
	target_mc.rotation+=30;
}
 カエルの顔すなわちface_mcをクリックすると顔全体が回転します。つまり、targetはface_mcということになります。

fig04-02-05.jpg
顔をクリックすると顔全体が回転します。

 ところが、目をクリックすると目だけが回転します。目のインスタンスにはイベントリスナーを登録していないのに、クリックのtargetはface_mcではなく目のインスタンスになっています。

fig04-02-06.jpg
目をクリックすると目だけが回転します。
swfを試す

 目をクリックしても顔全体を回転させるには、targetプロパティではなくcurrentTargetプロパティを利用します。

[:script:]リスナーを追加したインスタンスを回転させる
//イベントリスナーの追加
face_mc.addEventListener(MouseEvent.CLICK, onClick);

//クリックのリスナー関数
function onClick(eventObj:MouseEvent):void {
	var target_mc:MovieClip=eventObj.currentTarget as MovieClip;
	target_mc.rotation+=30;
}
swfを試す

(section04-01 イベントとイベントリスナーから抜粋)

 イベントが発生するとaddEventListener()で登録しておいたリスナー関数が呼び出されますが、このときイベントオブジェクトが引数として送られてきます。イベントオブジェクトにはイベントの種類によってさまざまなプロパティがあり、発生したイベントの状況を示すデータが含まれています。このプロパティの値を活用することで、スクリプトのむだを省いたり、イベントに応じてできることをひろげることができます。

クリックされたターゲット
 次のサンプルのball1_mcからball4_mcの4個のインスタンスはクリックのたびに10度回転します。各インスタンスのaddEventListener()ではそれぞれのインスタンスを10度回転させるリスナー関数を追加していますが、リスナー関数のstepRotation1()からstepRotation4()の4個のリスナー関数定義をみると回転の対象となるインスタンスが違うだけで同じ機能の関数です。この方法ではターゲットと同じ個数のリスナー関数が必要になります。

[:script:]ターゲットと同じ個数のリスナー関数が必要
//4個のmcに同じ機能のイベントリスナーを追加する
ball1_mc.addEventListener(MouseEvent.CLICK, stepRotation1);
ball2_mc.addEventListener(MouseEvent.CLICK, stepRotation2);
ball3_mc.addEventListener(MouseEvent.CLICK, stepRotation3);
ball4_mc.addEventListener(MouseEvent.CLICK, stepRotation4);

//ball1_mcを回転させる
function stepRotation1(eventObj:MouseEvent):void {
	ball1_mc.rotation+=10;
}
//ball2_mcを回転させる
function stepRotation2(eventObj:MouseEvent):void {
	ball2_mc.rotation+=10;
}
//ball3_mcを回転させる
function stepRotation3(eventObj:MouseEvent):void {
	ball3_mc.rotation+=10;
}
//ball4_mcを回転させる
function stepRotation4(eventObj:MouseEvent):void {
	ball4_mc.rotation+=10;
}
fig04-01-06.jpg
インスタンスをクリックすると、そのインスタンスが10度回転します。。→swfを試す

 このスクリプトは、次のようにリスナー関数の引数のイベントオブジェクトのtargetプロパティを利用することで、どのインスタンスも同じstepRotation()をリスナー関数として使えるようになりスクリプトも短くなります。

[:script:]イベントオブジェクトのtargetプロパティを利用する
//4個のmcに同じイベントリスナーを追加する
ball1_mc.addEventListener(MouseEvent.CLICK, stepRotation);
ball2_mc.addEventListener(MouseEvent.CLICK, stepRotation);
ball3_mc.addEventListener(MouseEvent.CLICK, stepRotation);
ball4_mc.addEventListener(MouseEvent.CLICK, stepRotation);

//ターゲットを回転させる
function stepRotation(eventObj:MouseEvent):void {
	eventObj.target.rotation+=10;
}

 このスクリプトのポイントは9行目のeventObj.targetです。イベントオブジェクトのtargetプロパティには、イベントが発生したターゲットの参照、すなわちクリックされたインスタンスの参照が入っています。したがって、イベントによって呼ばれるリスナー関数が同じであっても、どのインスタンスがクリックされたのかがわかります。eventObj.targetをいったん変数に代入して使う場合には、次のようにas演算子を使って変数のデータ型にキャスト(型変換)しなければコンパイルエラーになります。

[:script:]targetの値を変数に代入して利用する
//4個のmcに同じイベントリスナーを追加する
ball1_mc.addEventListener(MouseEvent.CLICK, stepRotation);
ball2_mc.addEventListener(MouseEvent.CLICK, stepRotation);
ball3_mc.addEventListener(MouseEvent.CLICK, stepRotation);
ball4_mc.addEventListener(MouseEvent.CLICK, stepRotation);

//ターゲットを回転させる
function stepRotation(eventObj:MouseEvent):void {
	//targetの値をMovieClipクラスにキャストする
	var ball_mc:MovieClip=eventObj.target as MovieClip;
	ball_mc.rotation+=10;
}
まったく新しいAS3の世界!
694a.jpg
Adobe Flash CS4
詳細!ActionScript3.0入門ノート[完全改訂版](CD-ROM付)

楽しいActionScript。
新たなる1歩へと踏み出しましょう。
■内容は?→ 目次を見る
■評判は?→ 書評を読む
この本を書いたわけ

タグ

最近のコンテンツはインデックスページで見られます。過去に書かれたものはアーカイブのページで見られます。

あわせて読みたいブログパーツ