Home > lesson2 > ボタンに連動してムービークリップの表示を変える[2-6]

ボタンに連動してムービークリップの表示を変える[2-6]

ボタンごとにマウスオーバー(オンマウス)のムービークリップを指定する – for編

[2-5]で使用したムービークリップのボタンとイメージムービークリップを連動さるアクションスクリプトをもっと簡略化した条件分岐(今回はfor)でプログラム処理をします。

マウスオーバー、マウスアウトした時の処理を[2-5]ではswitchを使って条件分岐をしていましたが、今回はforを使って条件分岐を行います。
forを使うことで、アクションスクリプトの簡略化にもつながります。

//マウスオーバー
function Over(event:Event):void{
	var btn = event.target;  //ターゲットを置き換える
	btn.alpha = 0.7;
	//条件に合わしてイベントリスナー登録
	for(var i:int = 1; i < 4; i++){
    	if(btn == this["btn_mc"+i]){
        	this["img_mc"+i].addEventListener(Event.ENTER_FRAME,imgAlpha);
    	}
	}
}
//マウスアウト
function Out(event:Event):void{
	var btn = event.target;  //ターゲットを置き換える
	btn.alpha = 1;
	//条件に合わしてイベントリスナー登録
	for(var i:int = 1; i < 4; i++){
    	if(btn == this["btn_mc"+i]){
        	this["img_mc"+i].addEventListener(Event.ENTER_FRAME,zero);
    	}
	}
}

オンマウス、マウスアウトした時に走るイベントリスナーをforを使ってループさせます。

まず、forで変数iの条件を設定し、ボタンのムービークリップ(btn_mc)を条件が終わるまで+1づつ足していく処理なので、btn_mc1~btn_mc3までを示しすことになります。さらに変数btnはターゲットになっているボタンのムービークリップとなるので、”btn_mc”+iの条件と同じ時、つまりはbtn_mc1~btn_mc3でのイベントリスナーが走ります。
リスナー関数も同様に、”img_mc”+iとなっているのでimg_mc1~img_mc3がインスタンス名になります。

続いてプログラムリスナー関数の条件分岐もforに変更します。

//アルファプログラム関数
function imgAlpha(event:Event){
	//ムービークリップのチェック
	var img:MovieClip = event.target as MovieClip;
	for(var i:int = 1; i < 4; i++){
		var imgNo:MovieClip = this["img_mc"+i] as MovieClip;
		imgNo.alpha = 0;
		img.alpha = 1;
		img.removeEventListener(Event.ENTER_FRAME,imgAlpha);
	}
}
//リセットプログラム関数
function zero(event:Event):void{
	var img:MovieClip = event.target as MovieClip;
	img.alpha = 1;
	img.removeEventListener(Event.ENTER_FRAME,imgAlpha);
	img.removeEventListener(Event.ENTER_FRAME,zero);
}

アルファプログラム関数(オンマウス時に走るイベントリスナー)
上記アクションスクリプト同様にforで変数iの条件を設定します。
さらに変数imgNoを宣言し、”img_mc”+iでループさせることで、img_mc1~img_mc3までを変数imgNoに置き換えますので、すべてのimg_mcの透明度が0になり非表示になります。
しかしターゲットになっているムービークリップをimgに置き換えて透明度を1していますにで、ターゲットになっているムービークリップだけが表示となるカラクリです。

リセットプログラム関数(マウスアウト時に走るイベントリスナー)では、簡潔にターゲットになっているムービークリップの透明度が1、つまり表示になったらリスナー関数の登録の削除を行うカラクリです。

//ループを使い
for(var i:int = 1; i < 4; i++){
	//イベントリスナー登録
	this["btn_mc"+i].addEventListener(MouseEvent.MOUSE_OVER,Over);
	this["btn_mc"+i].addEventListener(MouseEvent.MOUSE_OUT,Out);

	//ボタンモード
	this["btn_mc"+i].buttonMode = true;
	//イメージムービークリップを非表示
	this["img_mc"+i].alpha = 0;
}
//初期表示設定
img_mc1.alpha = 1;

//マウスオーバー
function Over(event:Event):void{
	var btn = event.target;  //ターゲットを置き換える
	btn.alpha = 0.7;
	//条件に合わしてイベントリスナー登録
	for(var i:int = 1; i < 4; i++){
    	if(btn == this["btn_mc"+i]){
        	this["img_mc"+i].addEventListener(Event.ENTER_FRAME,imgAlpha);
    	}
	}
}
//アルファプログラム関数
function imgAlpha(event:Event){
	//ムービークリップのチェック
	var img:MovieClip = event.target as MovieClip;
	for(var i:int = 1; i < 4; i++){
		var imgNo:MovieClip = this["img_mc"+i] as MovieClip;
		imgNo.alpha = 0;
		img.alpha = 1;
		img.removeEventListener(Event.ENTER_FRAME,imgAlpha);
	}
}

//マウスアウト
function Out(event:Event):void{
	var btn = event.target;  //ターゲットを置き換える
	btn.alpha = 1;
	//条件に合わしてイベントリスナー登録
	for(var i:int = 1; i < 4; i++){
    	if(btn == this["btn_mc"+i]){
        	this["img_mc"+i].addEventListener(Event.ENTER_FRAME,zero);
    	}
	}
}
//リセットプログラム関数
function zero(event:Event):void{
	var img:MovieClip = event.target as MovieClip;
	img.alpha = 1;
	img.removeEventListener(Event.ENTER_FRAME,imgAlpha);
	img.removeEventListener(Event.ENTER_FRAME,zero);
}
ボタンごとにマウスオーバー(オンマウス)のムービークリップを指定する – for

Comments:0

Comment Form
Remember personal info

Trackbacks:0

Trackback URL for this entry
http://www.addchild.net/as3-beginner/ls2/269.html/trackback
Listed below are links to weblogs that reference
ボタンに連動してムービークリップの表示を変える[2-6] from ADD CHILD = AS3

Home > lesson2 > ボタンに連動してムービークリップの表示を変える[2-6]

Feeds
Meta

Return to page top