アニメファイルを使ってみる


前回アニメファイルの構造を説明しました。

今回は実際にアニメファイルを使ってアニメさせてみましょう。

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

 

 

 

 

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

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

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

Main = function()
{
	ja_CanvasSet();//Ver1.10以降はCanvasのセットが必要です。

	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); //元画像と切り取る幅
	
	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(ja.imageUnitObj["btn01"]);
			ja.stage.addChild(ja.imageUnitObj["btn02"]);
			ja.stage.addChild(animeObj);

			ja.imageUnitObj["btn01"].x = 110;
			ja.imageUnitObj["btn01"].y = 350;
			
			ja.imageUnitObj["btn02"].x = 110;
			ja.imageUnitObj["btn02"].y = 350;
			ja.imageUnitObj["btn02"].alpha = 0;
			
			ja.imageUnitObj["btn02"].addEventListener("touchIn", this);
			ja.imageUnitObj["btn02"].addEventListener("touchOut", this);
			ja.imageUnitObj["btn02"].addEventListener("touchUp", this);
		}
	};
				
	this.touchIn = function()
	{
		console.log("インしました");
		ja.imageUnitObj["btn02"].alpha = 1;
	};
	
	this.touchOut = function()
	{
		console.log("アウトしました");
		ja.imageUnitObj["btn02"].alpha = 0;
	};
	
	this.touchUp = function()
	{
		console.log("タッチしました");
		ja.imageUnitObj["btn02"].alpha = 0;
		
		if(actionFlg)
		{
			actionFlg = false;
			animeObj.removeEventListener("onEnterFrame" , this);
		}
		else
		{
			actionFlg = true;
			animeObj.addEventListener("onEnterFrame" , this);
		}
	};
	
	this.onEnterFrame = function()
	{
		animeObj.x += xinc;
		if(animeObj.x > 270)
		{
			xinc = -xinc;
			animeObj.x = 270;
		}
		else if(animeObj.x < 0)
		{
			xinc = -xinc;
			animeObj.x = 0;
		}
	};
};

 

MovieImageClassを使う処理がまとまっている箇所があります。

//アニメ画像処理
var animeListerner = new Object();
var animeObj;

//アニメ画像
animeObj = new ja.MovieImageClass();
animeObj.incFrame = 5;
animeObj.addEventListener("onLoad", animeListerner);
animeObj.onLoad("Image/chara.png" , 50); //元画像と切り取る幅

まず、

animeObj = new ja.MovieImageClass();

でMovieImageClassを使い、アニメ用オブジェクトを作っています。

 

animeObj.incFrame = 5;

でフレームの移り変わりの間を制御しています。

デフォルトは1になっていますので、1フレームにつき1回画像が変わります。
5にしたので、5フレーム間同じ画像が流れてから、次の画像に移り変わります。
jActionデフォルトは10fpsに設定してありますので、1秒間に2枚の画像が表示される計算です。

animeObj.addEventListener("onLoad", animeListerner);

で画像が読み込み終わった時のメソッド登録を行なっています。
上記だと、画像読み込みが終わったら、
animeListernerオブジェクトのonLoadメソッドを実行という意味になります。

前回までは、thisを設定していましたが、thisは、BGやボタンなどの読み込みの

ja.imageUnitObj.addEventListener("onLoad", this);

で使ってしまってるので、別のオブジェクトを指定しなければいけません。
animeListernerという読み込み命令実行のための専用オブジェクトを準備したという事になります。

読み込み後の命令を準備したあとに、読み込み開始です。

animeObj.onLoad("Image/chara.png" , 50); //元画像と切り取る幅

読み込む時に、横幅を何ピクセルで切り取るかを指定します。

全部で何フレーム分のアニメオブジェクトになるかは自動で決まりますが、指定することもできます。
読み込み後の命令を準備したあとに、読み込み開始です。

animeObj.maxFrame = 3;

と指定すると、たとえ画像ファイルが横幅500あったとしても、
50×3=150ピクセルの3コマアニメとして計算されます。 (右側の350 ピクセルは、使用されないことになります)

なにもしなければ、500/50=10コマのアニメとして登録されます。

後から指定することもできます。

 

今回は読み込みが、ja.imageUnitObjの画像読み込みとアニメ画像の読みがありますので、両方の読み込み完了をチェックする必要があります。

初期値0のimageCount というプロパティに、それぞれ読み込んだ時に+1して、
imageCountが2になったら動作開始という手順を踏んでいます。
後はいつも通り

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

と「ja.stage」に「addChild」すれば、設定通りに画面に表示されるようになります。

ja.MovieImageClassは、単にループアニメだけでなく、途中で停止させたり、再生させたりと、
決めたフレームに止めたりと柔軟性の高いアニメオブジェクトです。

次回は、アニメの制御を重点に説明する予定です。