アニメオブジェクトを制御してみましょう。
完成ページを見てみましょう。
※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の動的コンテンツ制作手法。
シーン作成について学んでいきます。