FlashとActionScriptのお勉強

下のサンプルは、赤い円と黄色い星のMovieClipがそれぞれ最後までアニメーションしたらカスタムイベントを発生させ、もう一方のアニメーションをスタートさせるサンプルです。


今回のサンプルは、イベントリスナーをそれぞれのMovieClipに加えるのではなく、各ムービークリップをコンテナ用のムービークリップの子として表示リストに加え、親のムービークリップで一括してイベントを検出する方法で作成しています。

基本的なカスタムイベントの設定方法は、
ActionScript3.0で独自のイベント（カスタムイベント）を使用するには

また、カスタムイベントではなく、ボタンのクリックを検出するマウスイベントを親のオブジェクト（MovieClip等）で検出する方法については、
ActionScript3.0で親子関係を利用してイベントリスナーを1つにまとめるには
で説明しましたので、必要があればそちらを見てください。

上記
「ActionScript3.0で独自のイベント（カスタムイベント）を使用するには」では、カスタムイベントが発生したことを通知する部分のActionScript3.0の記述を

dispatchEvent(new Event("anim_complete"));

としていました。

この部分を詳しく見ていくと、まず

new Event("anim_complete")　の部分で（アニメーションが終わったよ、と通知する）"anim_complete"というカスタムイベントを作り、それを、dispatchEventメソッドでイベントフローに流していることがわかります。

ちなみにdispatch というのは、「（部隊などを）派遣する」という意味があるそうです。

で、dispatchされたイベントを、イベントリスナーの側で検出する訳ですね。

Flashでは、MovieClipなどのオブジェクトを、親子関係で結びつけることが出来るのですが、自分の子や孫で発生したイベントを検出することも出来ます。

このとき「イベントが発生したよ」という情報が伝わっていく流れをイベントフローというのですが、情報の流れる段階によって、キャプチャ、ターゲット、バブリング、という3つのフェーズがあります。

詳しい説明をすると長くなってしまうのである程度はしょりますが、子から親のオブジェクトにイベント情報が流れる状態をバブリング（バブル＝泡）と言います。

先ほど説明した

new Event("anim_complete");

というEventの作成方法だと、このバブリングが禁止されているのですね。
実は　new Event("anim_complete");と言う記述ではバブリングに関する2番目の引数が省略されており、省略されるとバブリングしない設定になるのです。

ですので、今回のように親のMovieClipでイベントを検出するには

dispatchEvent(new Event("anim_complete",true));
のように、Event作成の2番目の引数をtrueにして、バブリングOKにしてあげる必要があります。

後はFlashCS4のタイムラインで、円、星それぞれのMovieクリップで独自のタイムラインを作成、最後のフレームをキーフレームにして

dispatchEvent(new Event("anim_complete",true));を記述しておけばOKです。

FlashCS4のメインのタイムラインに記述するActionScript3.0のスクリプトは以下の通りです。
星と円のインスタンス名はそれぞれcircle01、star01です。


var container:MovieClip = new MovieClip();
container.name="container";
addChild(container);
container.addChild(circle01);
container.addChild(star01);

container.addEventListener("anim_complete", onCompleteHandler);
//circle01.addEventListener("anim_complete", onCompleteHandler);
//star01.addEventListener("anim_complete", onCompleteHandler);
function onCompleteHandler(eventobj:Event) {
trace("イベントが発生したインスタンスは"+eventobj.target.name );
trace("イベント発生時のcurretFrameの値は、" + eventobj.target.currentFrame);
switch(eventobj.target.name){
case "circle01":
circle01.gotoAndStop(1);
star01.play();
break;
case "star01":
star01.gotoAndStop(1);
circle01.play();
break;
}

}



関連エントリ、
FlashCS4でモーショントゥイーン(motiontween)を作成するには

下のサンプルの赤い四角形をドラッグすると曲線の形状が変化します。（ドラッグ中にマウスポインタの形状は変化しません）


今回のサンプルはActionScript3.0でコントロールポイントを動かして曲線の形を変えるものです。

下のActionScript3.0のサンプルコード（FlashCS4のタイムライン記述用）にコメントを入れたので、そんなに難しくないのではないかと思います。

今回説明を省略した内容の関連記事としては
ActionScript3.0でmovieclip上のマウスカーソルの形を変化させるには

ActionScript3.0でマウスイベントを検出するには（イベントリスナの登録）などがありますので必要に応じて参照してください。

【ActionScript3.0サンプルコード】
var kyokusen01:MovieClip= new MovieClip();
var ctrlPoint01:MovieClip= new MovieClip();
var supportLine:MovieClip= new MovieClip();

//コントロールポイントの初期座標設定
var ctrl_x:Number=300;
var ctrl_y:Number=20;

//メインの図形を描画
kyokusen01.graphics.lineStyle(2, 0x000000);
kyokusen01.graphics.beginFill(0xFFFF00 );
//曲線を描画し始めるポイントへ移動
kyokusen01.graphics.moveTo(30,100);
//右上側の曲線を描画
//kyokusen01.graphics.curveTo(300,20, 200,200); //コントロールポイントを定位置で指定する場合
//曲線のコントロールポイントと終点の座標を指定
kyokusen01.graphics.curveTo(ctrl_x, ctrl_y, 200,200);
//左下側の曲線を描画
kyokusen01.graphics.curveTo(20,220, 30,100);
kyokusen01.graphics..endFill();
addChild(kyokusen01);



//右上の曲線用コントロールポイントと曲線の開始点、終了点を結ぶ直線を描画（参考用補助線）
supportLine.graphics.lineStyle(1, 0x00FF00);
supportLine.graphics.moveTo(30,100);
supportLine.graphics.lineTo(ctrl_x, ctrl_y);
supportLine.graphics.lineTo(200, 200 );
addChild(supportLine);


//赤いコントロールポイント（四角形）を描画
//ctrlPoint01.graphics.lineStyle(2, 0x000000);//塗りのみの場合はlineStyleを指定しない
ctrlPoint01.graphics.beginFill(0xFF0000 );
ctrlPoint01.graphics.drawRect(ctrl_x-5, ctrl_y-5,10,10);
ctrlPoint01.graphics..endFill();
addChild(ctrlPoint01);

//赤いコントロールポイント（四角形）でマウスボタン押し、マウスボタン離しを検出するイベントリスナーを追加
//ドラッグ開始、終了用のリスナー関数を指定。
ctrlPoint01.addEventListener(MouseEvent.MOUSE_DOWN, moveCtrlPoint);
ctrlPoint01.addEventListener(MouseEvent.MOUSE_UP, stopCtrlPoint);


//赤いコントロールポイント（四角形）上でマウスボタンを押した場合にドラッグ開始、
//フレームごとに描画しなおすイベントリスナーを追加
function moveCtrlPoint(eventobj:MouseEvent):void {
ctrlPoint01.startDrag();
ctrlPoint01.addEventListener(Event.ENTER_FRAME, drawing);

}

//赤いコントロールポイント（四角形）上でマウスボタンを離した場合にドラッグを終了、
//フレームごとに描画しなおすイベントリスナーを削除
function stopCtrlPoint(eventobj:MouseEvent):void {
ctrlPoint01.stopDrag();
ctrlPoint01.removeEventListener(Event.ENTER_FRAME, drawing);

}


//コントロールポイント(赤い四角形)をドラッグ中に毎フレーム呼び出されるリスナー関数
//変更されたコントロールポイントの座標を元に描画を行う。
function drawing(eventobj:Event):void{
//新しいコントロールポイントの座標を代入
//ローカル座標に初期値を加えてステージ上の座標に変換している。
ctrl_x= eventobj.target.x +300;
ctrl_y= eventobj.target.y+ 20;


kyokusen01.graphics.clear();
kyokusen01.graphics.lineStyle(2, 0x000000);
kyokusen01.graphics.beginFill(0xFFFF00 );
kyokusen01.graphics.moveTo(30,100);
//右上側の曲線を描画
//kyokusen01.graphics.curveTo(300,20, 200,200); //コントロールポイントを定位置で指定する場合
kyokusen01.graphics.curveTo(ctrl_x, ctrl_y, 200,200);
//左下側の曲線を描画
kyokusen01.graphics.curveTo(20,220, 30,100);
kyokusen01.graphics..endFill();
//addChild(kyokusen01);


//コントロールポイントと曲線の開始点、終了点を結ぶ直線を描画（参考用補助線）
supportLine.graphics.clear();
supportLine.graphics.lineStyle(1, 0x00FF00);
supportLine.graphics.moveTo(30,100);
supportLine.graphics.lineTo(ctrl_x, ctrl_y);
supportLine.graphics.lineTo(200, 200 );
//addChild(supportLine);

}

FlashCS4で、自分が定義したイベントをイベントリスナーで検出するにはActionScript3.0の　dispatchEvent　を使用します。

下のサンプルは、赤い円が右下に落ちるとイベントが発生して、リスナー関数内に記述された長方形の幅や高さを変える処理を呼び出しています。


基本的な使い方は簡単で、ActionScript3.0で

dispatchEvent(new Event("anim_complete"));

というコードを記述するだけです。
"anim_complete"の部分は自分で決めたイベントの名前を入れるだけです。今回は赤い円のアニメーションが終わった、というイベントなので、"anim_complete"という名前をつけましたが、どんなイベントか、によって分かりやすい名前を決めればいいでしょう。

この、
dispatchEvent(new Event("anim_complete"));
というコードを記述す場所ですが、今回は、

赤い円に30フレームの独自のタイムラインを持たせて、その最終フレーム（30フレーム目）をキーフレームにしてそこに記述しました。

FlashCS4での作業としては、
�@メインのシーンに赤い円（インスタンス名：circle01）と四角形（インスタンス名：rect01）のMovieClipを配置します。メインのシーンのタイムラインは1フレームのみです。

�A赤い円をステージ上でダブルクリックすると、他の部分が薄くなって、赤い円のみがそのまま濃く表示される状態になると思います。その状態でタイムラインにフレームを挿入して30フレームにし、ActionScriptを記述するタイムラインのレイヤーの30フレーム目をキーフレームに変換して、そこに上記のコードを記述します。

この状態でカスタムイベントが発生するようになっています。後は、発生したイベントを検出するコードを記述するだけです。

�Bステージ左上にある矢印をクリックしてメインのタイムラインに戻ります。

メインのタイムライン上に以下のコードを記述します。
trace文は、状態を確認するためのもので動作には関係ありません。
var counter:int=1;
circle01.addEventListener("anim_complete", onCompleteHandler);
function onCompleteHandler(eventobj:Event) {
trace("イベントが発生したインスタンスは"+eventobj.target.name );
trace("イベント発生時のcurretFrameの値は、" + eventobj.target.currentFrame);
rect01.width=40 +20*(counter%2);
rect01.height=40 +10*(counter%3);
counter++;
}

関連エントリ
ActionScript3.0のカスタムイベントを親のムービークリップ(MovieClip)で検出するには
FlashCS4でモーショントゥイーン(motiontween)を作成するには