アド企画 制作部
アド企画 制作部
　

Flash：ActionScript3.0で、動物ルーレットをTweenerで回してストップさせるボタンを追加する３（3/3）

Flash：ActionScript3.0で、動物ルーレットをTweenerで回してストップさせるボタンを追加する３（3/3）

前回より、動物ルーレットを回転スタート・ストップと、指定した絵柄でストップさせるボタンを追加してみるテストを行っています。


第１回では、コードを記述するために必要なシンボルを作成し、ステージ上にレイアウトするところまで終えました。

第２回では、ルーレットを回転させるためのkaitenClass.asファイルを作成しました。

今回は作成したkaitenClass.asを使用して、スタート・ストップボタンが機能するようにスクリプトを記述していきます。

ActionScript3.0を記述


前回からの続きの作業になります。

シーン１（メイン）のタイムラインのレイヤー１：フレーム１に、以下の様なスクリプトを記述していきます。

20160129_a


//使用するオブジェクトの準備
import flash.events.Event;
import flash.events.MouseEvent;
import flash.display.MovieClip;
import caurina.transitions.Tweener;


//インスタンス「line1」を渡してkaitenClassオブジェクトを作成
var line1Class: kaitenClass = new kaitenClass(line1);

//イベントリスナー追加
startstop.addEventListener(Event.ENTER_FRAME, viewStartBtnPre);


第１回で作成したステージに配置されている「line1」インスタンスを渡して、新しいkaitenClassオブジェクトを作成します。

イベントリスナーをEvent.ENTER_FRAMEで登録して、スタートボタンの（表示）準備をします。

スタートボタン表示準備

viewStartBtnPre()では、次の処理を行います。

  • ボタンを半透明にする（alpha=0.7）
  • line1Class.get_totationg()で、ルーレットが回転中かどうか調べる

ルーレットが回転中でなければ、次の処理を行います。

  • ボタンの透明を解除(alpha=1.0)
  • Event.ENTER_FRAMEのイベントを削除
  • スタートボタンを有効にする viewStartBtn()

※ここで削除したEvent.ENTER_FRAMEのイベントリスナーは、後でストップ（ぶた）ボタンが押された時に同様のものが再度設定されます。


いきなりスタートボタンを表示させる（viewStartBtn()）事をしない理由は、ストップボタンをクリックの項で説明します。


//スタート表示準備 ====================
function viewStartBtnPre(e: Event) {
	//ルーレット回転中はクリックを受け付けない
	startstop.alpha = 0.7;
	butabtn.alpha = 0.7;
	//ルーレットが停止（アニメーション停止）していたら
	if (!line1Class.get_rotating) {
		startstop.removeEventListener(Event.ENTER_FRAME, viewStartBtnPre);
		//viewStartBtnでスタートを有効に
		viewStartBtn();
	}

}


viewStartBtn()では、次の処理をします。

  • startstopボタンは「スタート」の文字を表示
  • startstopボタンの透明を解除
  • MouseEvent.CLICKのイベントリスナーを登録


まずstartstopボタンは「スタート」の文字を表示、とは、startstopのタイムラインを「start」ラベルの位置に移動させますgotoAndStop("start")。


//スタートボタンを有効にする ====================
function viewStartBtn(): void {
	startstop.gotoAndStop("start");
	startstop.alpha = 1.0;
	//スタートのイベントリスナー登録
	startstop.addEventListener(MouseEvent.CLICK, pushStartBtn);
}

スタートボタンをクリック

MouseEvent.CLICKのイベントリスナーによって、startstopインスタンスがマウスクリックされたら、pushStartBtnが実行されます。

pushStartBtnでは、次の処理を行います。

  • MouseEvent.CLICKのイベント削除
  • ルーレット回転スタートline1Class.kaitenStart()
  • startstopインスタンスをTweenerでアニメーション（1.2倍にして戻す）
  • アニメーション終了後にEvent.ENTER_FLAMEイベントを登録

ここで登録されるEvent.ENTER_FRAMEイベントは、viewStopBtnPre()でストップボタン表示準備を行います。

いきなりストップボタンを表示させる（viewStopBtn()）事をしないのは、スタートボタンが0.2秒＋0.2秒かけて拡大縮小アニメーションをしている間は、クリックを受け付けたくないからです。


//スタートが押された場合 ====================
function pushStartBtn(e: MouseEvent): void {
	//スタートのイベントリスナー削除
	startstop.removeEventListener(MouseEvent.CLICK, pushStartBtn);

	//ルーレット回転(ランダムにしてみる)
	if (xRandomInt(1, 0) > 0) { //「0」か「1」をランダムに受け取る
		line1Class.kaitenStart("l");
	} else {
		line1Class.kaitenStart("r");
	}

	//ボタンを拡大アニメーション
	Tweener.addTween(startstop, {
		scaleX: 1.2,
		scaleY: 1.2,
		time: 0.2,
		//ボタンを縮小アニメーション
		onComplete: function () {
			Tweener.addTween(startstop, {
				scaleX: 1,
				scaleY: 1,
				time: 0.2,
				//ストップ表示準備イベント登録
				onComplete: function () {
					startstop.addEventListener(Event.ENTER_FRAME, viewStopBtnPre);
				}
			});
		}
	});
}

ストップボタン表示準備

viewStopBtnPre()では、次の処理を行います。

  • startstopボタンとぶたボタンを半透明にする（alpha=0.7）
  • line1Class.get_totationg()で、ルーレットが回転中かどうか調べる


ルーレットが回転中であれば、次の処理を行います。

  • Event.ENTER_FRAMEのイベントを削除
  • ストップとぶたボタンを有効にする viewStopBtn()

//ストップ表示準備 ====================
function viewStopBtnPre(e: Event) {
	//ルーレットが回転を始まるまではストップもぶたもクリックできない
	startstop.alpha = 0.7;
	butabtn.alpha = 0.7;
	//ルーレットが回転を始めたら
	if (line1Class.get_rotating) {
		startstop.removeEventListener(Event.ENTER_FRAME, viewStopBtnPre);
		//viewStopBtn実行して、ストップとぶたを有効にする
		viewStopBtn();
	}

}

viewStopBtn()は、次の処理を行います。

  • startstopボタンは「ストップ」の文字を表示
  • startstopボタンの透明(alpha=1.0)を解除
  • butabtnボタンの透明(alpha=1.0)を解除
  • MouseEvent.CLICKのイベントリスナーを、startstopとbutabtnに登録


startstopボタンは「ストップ」の文字を表示、とは、スタートの文字を表示の時と同様にstartstopのタイムラインを「stop」ラベルの位置に移動させますgotoAndStop("stop")。

MouseEvent.CLICKのイベントリスナーをストップとぶたボタンの両方に登録して、マウスクリックの受付を開始します。


//ストップを表示させる ====================
function viewStopBtn(): void {
	//startstopはstopラベル表示
	startstop.gotoAndStop("stop");
	startstop.alpha = 1.0;
	butabtn.alpha = 1.0;
	//ストップとぶたのイベントリスナー登録
	startstop.addEventListener(MouseEvent.CLICK, pushStopBtn);
	butabtn.addEventListener(MouseEvent.CLICK, pushButaBtn);
}

ストップボタンをクリック

MouseEvent.CLICKのイベントリスナーによって、startstopインスタンスがクリックされたら、pushStopBtnが実行されます。

pushStopBtn()では、次の処理を行います。

  • startstopのMouseEvent.CLICKのイベント削除
  • butabtnのMouseEvent.CLICKのイベント削除
  • ルーレット回転停止line1Class.kaitenStop()
  • startstopインスタンスをTweenerでアニメーション（1.2倍にして戻す）
  • アニメーション終了後にEvent.ENTER_FLAMEイベントを登録

ここで登録されるEvent.ENTER_FRAMEイベントは、一番最初に登録したイベントリスナーと同様にviewStartBtnPre()でスタートボタン表示準備を行います。

いきなりスタートボタンを表示させる（viewStartBtn()）事をしないのは、きちんとルーレットが停止するまで（line1Class.commonStop()のアニメーションが完了するまで）の間は、クリックを受け付けたくないからです。


//ストップが押された場合 ====================
function pushStopBtn(e: MouseEvent): void {
	//ストップとぶたのイベントリスナー削除
	startstop.removeEventListener(MouseEvent.CLICK, pushStopBtn);
	butabtn.removeEventListener(MouseEvent.CLICK, pushButaBtn);

	line1Class.kaitenStop();

	Tweener.addTween(startstop, {
		scaleX: 1.2,
		scaleY: 1.2,
		time: 0.2,
		onComplete: function () {
			Tweener.addTween(startstop, {
				scaleX: 1,
				scaleY: 1,
				time: 0.2,
				//スタート表示準備イベント登録
				onComplete: function () {
					startstop.addEventListener(Event.ENTER_FRAME, viewStartBtnPre);
				}
			});
		}
	});
}


pushButaBtnもpushStopBtn()と同様の処理を行います。
異なる点はルーレット停止メソッド（line1Class.kaitenStop()）に「buta」を渡して、「buta」インスタンスが当たり位置にきたらルーレットが止まるように強制している点です。

※当たり絵柄の指定などは、前回作成したkaitenClass.asのコードで詳しく紹介していますので、参考にしてください。


//ぶたボタンが押された場合 ====================
function pushButaBtn(e: MouseEvent): void {
	//ストップとぶたのイベントリスナー削除
	startstop.removeEventListener(MouseEvent.CLICK, pushStopBtn);
	butabtn.removeEventListener(MouseEvent.CLICK, pushButaBtn);

	//ルーレットを指定絵柄でストップ
	line1Class.kaitenStop("buta");

	//ぶたボタンを拡大アニメーション
	Tweener.addTween(butabtn, {
		scaleX: 1.2,
		scaleY: 1.2,
		time: 0.5,
		//ぶたボタンを縮小アニメーション
		onComplete: function () {
			Tweener.addTween(butabtn, {
				scaleX: 1,
				scaleY: 1,
				time: 0.2,
				//スタート表示準備イベント登録
				onComplete: function () {
					startstop.addEventListener(Event.ENTER_FRAME, viewStartBtnPre);
				}
			});
		}
	});
}


最後に、pushStartBtnでは、次の関数を使って「0」か「1」の整数をランダムに受け取って、ルーレットの回転方向をランダムに決定しています。

最小の数・最大の数を指定してランダムな整数を得るFunctionについては、次のURLを参考にしました。
http://kb2.adobe.com/jp/cps/228/228622.html

// nMinからnMaxまでのランダムな整数を返す 
//http://kb2.adobe.com/jp/cps/228/228622.html
function xRandomInt(nMax: int, nMin: int): int {
	var nRandomInt: int = Math.floor(Math.random() * (nMax - nMin + 1)) + nMin;
	return nRandomInt;
}

レイヤー１：フレーム１のコード

以上のコードを続けて書くと、次のとおりです。
デバッグして、動作の確認をしてみてください。


import flash.events.Event;
import flash.events.MouseEvent;
import flash.display.MovieClip;
import caurina.transitions.Tweener;



var line1Class: kaitenClass = new kaitenClass(line1);


startstop.addEventListener(Event.ENTER_FRAME, viewStartBtnPre);


//スタート表示準備 ====================
function viewStartBtnPre(e: Event) {
	//ルーレット回転中はクリックを受け付けない
	startstop.alpha = 0.7;
	butabtn.alpha = 0.7;
	//ルーレットが停止（アニメーション停止）したら
	if (!line1Class.get_rotating) {
		startstop.removeEventListener(Event.ENTER_FRAME, viewStartBtnPre);
		//viewStartBtnでスタートを有効に
		viewStartBtn();
	}

}

//スタートボタンを有効にする ====================
function viewStartBtn(): void {
	startstop.gotoAndStop("start");
	startstop.alpha = 1.0;
	//スタートのイベントリスナー登録
	startstop.addEventListener(MouseEvent.CLICK, pushStartBtn);
}

//スタートが押された場合 ====================
function pushStartBtn(e: MouseEvent): void {
	//スタートのイベントリスナー削除
	startstop.removeEventListener(MouseEvent.CLICK, pushStartBtn);

	//ルーレット回転(ランダムにしてみる)
	if (xRandomInt(1, 0) > 0) { //「0」か「1」をランダムに受け取る
		line1Class.kaitenStart("l");
	} else {
		line1Class.kaitenStart("r");
	}

	//ボタンを拡大アニメーション
	Tweener.addTween(startstop, {
		scaleX: 1.2,
		scaleY: 1.2,
		time: 0.2,
		//ボタンを縮小アニメーション
		onComplete: function () {
			Tweener.addTween(startstop, {
				scaleX: 1,
				scaleY: 1,
				time: 0.2,
				//ストップ表示準備イベント登録
				onComplete: function () {
					startstop.addEventListener(Event.ENTER_FRAME, viewStopBtnPre);
				}
			});
		}
	});
}


//ストップ表示準備 ====================
function viewStopBtnPre(e: Event) {
	//ルーレットが回転を始まるまではストップもぶたもクリックできない
	startstop.alpha = 0.7;
	butabtn.alpha = 0.7;
	//ルーレットが回転を始めたら
	if (line1Class.get_rotating) {
		startstop.removeEventListener(Event.ENTER_FRAME, viewStopBtnPre);
		//viewStopBtn実行して、ストップとぶたを有効にする
		viewStopBtn();
	}

}

//ストップを表示させる ====================
function viewStopBtn(): void {
	//startstopはstopラベル表示
	startstop.gotoAndStop("stop");
	startstop.alpha = 1.0;
	butabtn.alpha = 1.0;
	//ストップとぶたのイベントリスナー登録
	startstop.addEventListener(MouseEvent.CLICK, pushStopBtn);
	butabtn.addEventListener(MouseEvent.CLICK, pushButaBtn);
}

//ストップが押された場合 ====================
function pushStopBtn(e: MouseEvent): void {
	//ストップとぶたのイベントリスナー削除
	startstop.removeEventListener(MouseEvent.CLICK, pushStopBtn);
	butabtn.removeEventListener(MouseEvent.CLICK, pushButaBtn);

	line1Class.kaitenStop();

	Tweener.addTween(startstop, {
		scaleX: 1.2,
		scaleY: 1.2,
		time: 0.2,
		onComplete: function () {
			Tweener.addTween(startstop, {
				scaleX: 1,
				scaleY: 1,
				time: 0.2,
				//スタート表示準備イベント登録
				onComplete: function () {
					startstop.addEventListener(Event.ENTER_FRAME, viewStartBtnPre);
				}
			});
		}
	});
}

//ぶたボタンが押された場合 ====================
function pushButaBtn(e: MouseEvent): void {
	//ストップとぶたのイベントリスナー削除
	startstop.removeEventListener(MouseEvent.CLICK, pushStopBtn);
	butabtn.removeEventListener(MouseEvent.CLICK, pushButaBtn);

	//ルーレットを指定絵柄でストップ
	line1Class.kaitenStop("buta");

	//ぶたボタンを拡大アニメーション
	Tweener.addTween(butabtn, {
		scaleX: 1.2,
		scaleY: 1.2,
		time: 0.5,
		//ぶたボタンを縮小アニメーション
		onComplete: function () {
			Tweener.addTween(butabtn, {
				scaleX: 1,
				scaleY: 1,
				time: 0.2,
				//スタート表示準備イベント登録
				onComplete: function () {
					startstop.addEventListener(Event.ENTER_FRAME, viewStartBtnPre);
				}
			});
		}
	});
}


// nMinからnMaxまでのランダムな整数を返す 
//http://kb2.adobe.com/jp/cps/228/228622.html
function xRandomInt(nMax: int, nMin: int): int {
	var nRandomInt: int = Math.floor(Math.random() * (nMax - nMin + 1)) + nMin;
	return nRandomInt;
}

次は、ここで作成したコードをAndroidのアプリにして動作するのか実験してみようと思います。

はじめての事ばかりで、いちいちハマりながら、実験しております。