アニメーションを制御する


アニメオブジェクトを制御してみましょう。

完成ページを見てみましょう。
※PCの場合グーグルクロームかSafari、スマートフォンの場合アンドロイド、iPhoneでごらんください。
サンプル7

 

 

 

 

完成サンプルダウンロードはこちら
jaction_sample7

前回説明したアニメファイルを使うには、MovieImageClassを使います。

完成ソースを見てみましょう。

Main = function()
{
	ja_CanvasSet();

	var actionFlg = false;
	var xinc = 5;
	var mainObj = this
	var imageCount = 0;
	
	//アニメ画像処理
	var animeListerner = new Object();
	
	//アニメ画像
	var animeObj = new ja.MovieImageClass();
	animeObj.incFrame = 5;
	animeObj.addEventListener("onLoad", animeListerner);
	animeObj.onLoad("Image/chara.png" , 50); //元画像と切り取る幅
	
	//ボタン
	var stopButton;
	var playButton;
	var stop5Button;
	var play8Button;
	var playStop3_5Button;
	var playLoop3_5Button;

	//ボタン用リスナーオブジェクト
	var stopObj = new Object();
	var playObj = new Object();
	var stop5Obj = new Object();
	var play8Obj = new Object();
	var playStop3_5Obj = new Object();
	var playLoop3_5Obj = new Object();

	animeListerner.onLoad = function(e)
	{
		imageCount++;
		
		//今後使わないものだけメモリ消去
		animeObj.removeEventListener("onLoad", animeListerner);
		animeListerner = null;
		
		mainObj.imegeComplete();
	}
	
	//静止画像処理
	ja.imageUnitObj.addEventListener("onLoad", this);
	ja.imageUnitObj.load(["Image/Bg.jpg", "Image/btn01.png" , "Image/btn02.png"]);
	var block_array = new Array(); //ブロックを格納する配列を作る
	this.onLoad = function()
	{
		imageCount++;
		ja.imageUnitObj.removeEventListener("onLoad", this);
		
		mainObj.imegeComplete();
	};
	
	
	//画像をすべて読み込み終わった処理
	this.imegeComplete = function()
	{
		if(imageCount >= 2)
		{
			window.scrollTo(0, 1); //アドレスバーを消す

			ja.stage.addChild(ja.imageUnitObj["Bg"]);
			ja.stage.addChild(animeObj);

			var Y = 200;
			
			var txt_array = new Array();
			for(var j = 0 ; j < 6 ; j++)
			{
				var button = new ja.ImageClass(ja.imageUnitObj["btn01"]);
				button.name = "btn" + j;
				button.x = 0;
				button.y = Y;
				ja.stage.addChild(button);

				var onButton = new ja.ImageClass(ja.imageUnitObj["btn02"]);
				onButton.visible = false;
				onButton.mouseEnabled = false;

				button.addChild(onButton);
				button.onButton = onButton;

				var textObj = new ja.TextClass(); 
				textObj.px = "12px";
				textObj.color = "#FF0000";
				textObj.x = 100;
				textObj.y = Y + 20;
				ja.stage.addChild(textObj);
				txt_array.push(textObj);
				
				Y += button.h + 10;
			}
			
			txt_array[0].text = "アニメーションを止める";
			txt_array[1].text = "アニメーションを再生する";
			txt_array[2].text = "5フレーム目で止める";
			txt_array[3].text = "8フレーム目から再生";
			txt_array[4].text = "3から5フレーム目までを1回再生";
			txt_array[5].text = "3から5フレーム目までをリピート再生";

			stopButton = ja.stage.getChildByName("btn0");
			playButton = ja.stage.getChildByName("btn1");
			stop5Button = ja.stage.getChildByName("btn2");
			play8Button = ja.stage.getChildByName("btn3");
			playStop3_5Button = ja.stage.getChildByName("btn4");
			playLoop3_5Button = ja.stage.getChildByName("btn5");

			
			stopButton.addEventListener("touchIn", this);
			stopButton.addEventListener("touchOut", this);
			stopButton.addEventListener("touchUp", stopObj);
			
			playButton.addEventListener("touchIn", this);
			playButton.addEventListener("touchOut", this);
			playButton.addEventListener("touchUp", playObj);
			
			stop5Button.addEventListener("touchIn", this);
			stop5Button.addEventListener("touchOut", this);
			stop5Button.addEventListener("touchUp", stop5Obj);
			
			play8Button.addEventListener("touchIn", this);
			play8Button.addEventListener("touchOut", this);
			play8Button.addEventListener("touchUp", play8Obj);
			
			playStop3_5Button.addEventListener("touchIn", this);
			playStop3_5Button.addEventListener("touchOut", this);
			playStop3_5Button.addEventListener("touchUp", playStop3_5Obj);
			
			playLoop3_5Button.addEventListener("touchIn", this);
			playLoop3_5Button.addEventListener("touchOut", this);
			playLoop3_5Button.addEventListener("touchUp", playLoop3_5Obj);
		}
	};
				
	this.touchIn = function(e)
	{
		e.target.onButton.visible = true;
	};
	
	this.touchOut = function(e)
	{
		e.target.onButton.visible = false;
	};
	
	stopObj.touchUp = function(e)
	{
		console.log(e.target);
		e.target.onButton.visible = false;
		animeObj.stop();//アニメオブジェクトをストップさせる
	};
	
	playObj.touchUp = function(e)
	{
		e.target.onButton.visible = false;
		animeObj.play();//アニメオブジェクトを再生させる
	};
	
	stop5Obj.touchUp = function(e)
	{
		e.target.onButton.visible = false;
		animeObj.gotoAndStop(5);//5フレーム目で停止
	};
	
	play8Obj.touchUp = function(e)
	{
		e.target.onButton.visible = false;
		animeObj.gotoAndPlay(8);//8フレームめから再生させる
	};
	
	playStop3_5Obj.touchUp = function(e)
	{
		e.target.onButton.visible = false;
		animeObj.playAndStop(3,5);//3フレームでスタート、5フレーム目で停止
	};

	playLoop3_5Obj.touchUp = function(e)
	{
		e.target.onButton.visible = false;
		animeObj.playAndLoop(3,5);//
	};
};

 

ここまでで学習した手順でボタンを5つ並べていますが、新しい命令が出てきました。

画像オブジェクトのnameプロパティに、自由に名前を付けられることは以前のチュートリアルで出来てきましたが

親の画像オブジェクト.getChildByName(子供の画像オブジェクトの名前);

を使うと、名前を使って画像オブジェクトを取得する事ができます。

取得する為には、取得したい画像オブジェクトが、親に存在しないといけません。

存在しない場合は、「null」が返ってきます。

今回は、getChildByNameを使って、ja.stageに張り付いているボタンの画像オブジェクトを取得してみました。


 

5つのボタンに、アニメオブジェクトの動作を割り当てています。

animeObj.stop();//アニメオブジェクトをストップさせる

アニメオブジェクト.stop();

でアニメオブジェクトのアニメを停止させます。

元々停止中の場合は、なにもおこりません。

 

animeObj.play();//アニメオブジェクトを再生させる

アニメオブジェクト.play();

停止していたアニメオブジェクトを再生します。

再生中の場合は、なにもおこりません。

 

animeObj.gotoAndStop(5);//5フレーム目で停止

アニメオブジェクト.gotoAndStop(停止したいフレーム);

停止したいフレームを指定して、そのフレームに飛ばして停止させる命令です。

 

animeObj.gotoAndPlay(8);//8フレームめから再生させる

アニメオブジェクト.gotoAndPlay(再生開始したいフレーム);

再生したいフレームを指定して、そのフレームに飛ばして、そこから再生を開始する命令です。

 

animeObj.playAndStop(3,5);//3フレームでスタート、5フレーム目で停止

アニメオブジェクト.playAndStop(再生開始フレーム , 停止フレーム);

指定したフレームから再生を開始して、停止フレームまで再生をします。

 

animeObj.playAndLoop(3,5);//3フレーム目から5フレームまでをリピート再生

アニメオブジェクト.playAndStop(リピート開始フレーム , リピートの最後のフレーム);

指定したフレームから再生を開始して、リピートの最後のフレームまで繰り返し再生をします。

 

チュートリアル3は、アニメーションオブジェクト関連について説明してきました。

ここまでは、jActionの基本機能の説明となります。

大規模のプログラムになってくるとMain.jsにすべて書くのは無理がありますし、ガベージコレクタのメモリ解放など難しい話も出てきます。

チュートリアル4からは、より本格的なjActionによるHTML5の動的コンテンツ制作手法。

シーン作成について学んでいきます。