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

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

 今度は同じイベントに同じリスナー関数を重ねて追加した場合を見てみましょう。次のサンプルではa_mcのフレーム再生イベントに対してstepRotationA()を4回重ねてリスナー関数として追加しています。この場合にはフレーム再生でstepRotationA()が4回実行されることになり、同じ機能のstepRotationB()を1回しか追加していない場合にb_mcに比べて4倍の速度で回転するでしょうか。
 その結果はa_mcもb_mcと同じくstepRotationA()を1回しか追加していない場合と同じ速度で回転します。すなわち、同じイベントに同じリスナー関数を重ねて追加しても、リスナー関数は重複して登録されないわけです。

[:script:]同じイベントに同じリスナー関数を重ねて追加した場合
//同じイベントに同じリスナー関数を重ねて追加する
a_mc.addEventListener(Event.ENTER_FRAME, stepRotationA);
a_mc.addEventListener(Event.ENTER_FRAME, stepRotationA);
a_mc.addEventListener(Event.ENTER_FRAME, stepRotationA);
a_mc.addEventListener(Event.ENTER_FRAME, stepRotationA);
//b_mcには1度しか追加しない
b_mc.addEventListener(Event.ENTER_FRAME, stepRotationB);

//回転させる
function stepRotationA(eventObj:Event):void {
	a_mc.rotation+=2;
}

function stepRotationB(eventObj:Event):void {
	b_mc.rotation+=2;
}
fig04-01-05.jpg
a_mcもb_mcと同じ速度で回転します。→swfを試す
(section04-01 イベントとイベントリスナーから抜粋)

 さらに発展させて、止まっているbox_mcをクリックすると回転が始まり、回転しているbox_mcをクリックすると回転が止まるようにしてみましょう。

 今度は止まっている状態から回転を開始する必要があるので、box_mcの回転を開始するstartRotation()を用意し、startRotation()をクリックイベントのリスナー関数として追加するところから始めます。
 startRotation()では2つのことを行います。1つはbox_mcが回転するようにフレーム再生イベントにstepRotation()を追加します。もう1つはbox_mcをクリックしたら回転を止める機能です。このとき、クリックイベントには回転を開始するstartRotation()がリスナー関数として追加されている状態なので、startRotation()を取り除くのを忘れないようにします。
 回転中にクリックしたときに実行されるstopRotation()では、startRotation()の場合とは逆に回転を止めることに加えて、次にクリックされたならば回転を開始するように設定し直します。このように、addEventListener()とremoveEventListener()を使ってイベントリスナーを追加したり取り除いたりすることで、イベントへの対応を切り替えるのがイベント処理の基本テクニックです。

[:script:]box_mcをクリックして回転と停止を切り替える
//クリックで回転を開始するようにする
box_mc.addEventListener(MouseEvent.CLICK, startRotation);

//回転を始めるリスナー関数
function startRotation(eventObj:MouseEvent):void {
	//フレーム再生で回転するようにする
	box_mc.addEventListener(Event.ENTER_FRAME, stepRotation);
	//クリックで回転を停止するようにする
	box_mc.removeEventListener(MouseEvent.CLICK, startRotation);
	box_mc.addEventListener(MouseEvent.CLICK, stopRotation);
}

//回転を止めるリスナー関数
function stopRotation(eventObj:MouseEvent):void {
	//回転を止める
	box_mc.removeEventListener(Event.ENTER_FRAME, stepRotation);
	//クリックで回転を開始するようにする
	box_mc.addEventListener(MouseEvent.CLICK, startRotation);
	box_mc.removeEventListener(MouseEvent.CLICK, stopRotation);
}

//フレーム再生で実行されるリスナー関数
function stepRotation(eventObj:Event):void {
	//box_mcを回転させる
	box_mc.rotation+=2;
}
fig4-1-3.jpgswfを試す
(section05-02 座標移動のアニメーションから抜粋)

 次のサンプルはマウスカーソルを回りを楕円形を描いてトンボのインスタンスが飛びます。トンボは進行方向を向くように回転に合わせて向きを変えます。マウスカーソルを動かすとトンボはゆっくり追いかけます。
 トンボが回る軌道を楕円形にするには、15〜16行目のようにX軸方向の振幅をY軸方向の振幅の2倍にします。これで横方向に2倍の長さの楕円になります。マウスカーソルの座標を楕円の中心にすればマウスカーソルの回りをトンボが回ります。このとき10〜11行目のようにマウスカーソルの座標にイージングで近づくようにすれば、マウスカーソルをゆっくり追いかける楕円軌道になります。
 トンボの向きを回転の進行方向に合わせているのは18行目です。トンボのインスタンスのrotationの値を周回の回転角度と同じにすれば向きが合いますが、時計回りなのでトンボを下向きに作っておく必要があります。

#このサンプルは「AS3入門ノート2」にもあるサンプルですが、好例なので取り上げました(説明は書き直してます)。

fig05-02-10_shiji.jpgswfを試す
var deg:uint = 0;
var r:uint = 90;
var tmpX:Number = stage.mouseX;
var tmpY:Number = stage.mouseY;
//イベントリスナーの設定	
tombo_mc.addEventListener(Event.ENTER_FRAME, roundCursor);
//フレーム再生イベントのリスナー関数
function roundCursor(eventObj:Event):void {
	//マウスカーソルの位置に近づく
	tmpX += (stage.mouseX-tmpX)/10;
	tmpY += (stage.mouseY-tmpY)/10;
	//15度ずつ回転する
	deg = (deg+15)%360;
	//(tmpX,tmpY)を中心点にして時計回りに楕円で回る
	tombo_mc.x = 2*r*Math.cos(deg*Math.PI/180) + tmpX;
	tombo_mc.y = r*Math.sin(deg*Math.PI/180) + tmpY;
	//回転に合わせて向きを変える
	tombo_mc.rotation = deg;
}
まったく新しいAS3の世界!
694a.jpg
Adobe Flash CS4
詳細!ActionScript3.0入門ノート[完全改訂版](CD-ROM付)

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

タグ

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

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