摘要:源碼以及資源地址下載鏈接密碼首先,打開(kāi)文件,可以看到庫(kù)里面有幾個(gè)待使用的元件我們先用軟件自帶的發(fā)布功能發(fā)布一下快捷鍵也可以在文件里選擇發(fā)布發(fā)布后在文件旁邊會(huì)有一個(gè)和一個(gè)我們打開(kāi)可以看到這樣的代碼片段我們新建一個(gè),把生成的部分的代
源碼以及資源地址下載:
鏈接: http://pan.baidu.com/s/1kU8LBTH 密碼: j7hu
首先,打開(kāi)flash文件,可以看到庫(kù)里面有幾個(gè)待使用的元件
我們先用軟件自帶的發(fā)布功能發(fā)布一下
快捷鍵 alt+shift+F12,也可以在文件里選擇發(fā)布
發(fā)布后在flash文件旁邊會(huì)有一個(gè)html和一個(gè)js
我們打開(kāi)demo1.html可以看到這樣的代碼片段
var canvas, stage, exportRoot; function init() { // --- write your JS code here --- canvas = document.getElementById("canvas"); images = images||{}; ss = ss||{}; var loader = new createjs.LoadQueue(false); loader.addEventListener("fileload", handleFileLoad); loader.addEventListener("complete", handleComplete); loader.loadFile({src:"images/demo1_atlas_.json", type:"spritesheet", id:"demo1_atlas_"}, true); loader.loadManifest(lib.properties.manifest); } function handleFileLoad(evt) { if (evt.item.type == "image") { images[evt.item.id] = evt.result; } } function handleComplete(evt) { var queue = evt.target; ss["demo1_atlas_"] = queue.getResult("demo1_atlas_"); exportRoot = new lib.demo1(); stage = new createjs.Stage(canvas); stage.addChild(exportRoot); stage.update(); createjs.Ticker.setFPS(lib.properties.fps); createjs.Ticker.addEventListener("tick", stage); }
我們新建一個(gè)test.js,把html生成的script部分的代碼復(fù)制進(jìn)去,然后再新建一個(gè)html上引用
代碼如下
Title
這個(gè)flash里面有兩個(gè)動(dòng)畫(huà),我們現(xiàn)在來(lái)實(shí)現(xiàn)一個(gè)效果,在一般情況時(shí)播放一個(gè)動(dòng)畫(huà),在手指按下時(shí)播放另一個(gè)動(dòng)畫(huà)
我們需要改一改flash生成的代碼
把handleComplete
改為以下內(nèi)容
var queue = evt.target; stage = new createjs.Stage(canvas); ss["demo1_atlas_"] = queue.getResult("demo1_atlas_"); var animate1 = new lib.view1(); var animate2 = new lib.view2(); // animation.setTransform(205,209); animate1.x="360"; animate1.y="600"; animate2.x="300"; animate2.y="570"; animateList= [animate1,animate2]; stage.addChild(animate2); stage.update(); createjs.Ticker.setFPS(lib.properties.fps); createjs.Ticker.addEventListener("tick", stage);
創(chuàng)建兩個(gè)場(chǎng)景animate1/animate2
new lib.view1()為新建一個(gè)場(chǎng)景的構(gòu)造方法,場(chǎng)景的類(lèi)名對(duì)應(yīng)程序中
然后給兩個(gè)場(chǎng)景定好x/y位置
將其中一個(gè)場(chǎng)景加入舞臺(tái)中
需要介紹一下createjs下的三個(gè)類(lèi)
Stage是createjs的一個(gè)舞臺(tái)類(lèi)
相當(dāng)于最根部的場(chǎng)景,需要展示的場(chǎng)景添加到他的內(nèi)部,構(gòu)造函數(shù)可以傳入一個(gè)canvas標(biāo)簽,表示對(duì)對(duì)應(yīng)的canvas進(jìn)行繪制。
stage = new createjs.Stage(canvas);
可以獲得一個(gè)舞臺(tái)對(duì)象,把需要展示的內(nèi)容放入該對(duì)象中
LoadQueue是一個(gè)加載器類(lèi),
需要用它加載資源,也可以綁定事件監(jiān)聽(tīng),有以下事件
用以下哎方法加載文件
Ticker
這是一個(gè)類(lèi)似setIntervald的東西,可以在這里對(duì)canvas的繪制頻率進(jìn)行控制
tick事件就是幀變化的時(shí)候的事件
createjs.Ticker.addEventListener("tick", stage);
此為當(dāng)幀變化時(shí)刷新stage,stage也可以傳入一個(gè)function
ok至此我們已經(jīng)成功添加一個(gè)元件到舞臺(tái)中,并播放動(dòng)畫(huà)。
因?yàn)樾枰虞d一個(gè)本地資源的json文件,所以你需要在當(dāng)前目錄搭建一個(gè)本地服務(wù)器來(lái)跑。
否則會(huì)出現(xiàn)以下問(wèn)題
現(xiàn)在我們需要實(shí)現(xiàn)觸碰屏幕播放另一個(gè)動(dòng)畫(huà)
寫(xiě)一個(gè)事件綁定的方法
function bindEvent() { canvas.addEventListener("touchstart",function(){ stage.removeChild(animateList[1]); stage.addChild(animateList[0]); }) canvas.addEventListener("touchend",function(){ stage.removeChild(animateList[0]); stage.addChild(animateList[1]); })
該方法使手指觸碰與離開(kāi)時(shí)更換舞臺(tái)中的動(dòng)畫(huà),好了功能完成,不過(guò)此時(shí)用手機(jī)看
canvas并沒(méi)有填充整個(gè)屏幕
加一個(gè)自適應(yīng)屏幕的方法
function resizeCanvas(){ model = new createjs.EventDispatcher();//用來(lái)捕獲事件的原型 stageWidth = document.documentElement.clientWidth; stageHeight = document.documentElement.clientHeight; stageScale = stageWidth/(750/2); canvas = document.getElementById("canvas"); if(stageWidth/stageHeight > 0.665) { stageScale = stageHeight/(1206/2); canvas.style.left = (stageWidth - 750/2*stageScale)/2 + "px"; } else { stageScale = stageWidth/(750/2); } canvas.style.width = 750/2*stageScale + "px"; canvas.style.height = 1206/2*stageScale + "px"; }
在資源加載完成的回調(diào)方法中調(diào)用它
resizeCanvas();//自適應(yīng)寬高
bindEvent();//綁定事件
完成!
文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址:http://specialneedsforspecialkids.com/yun/50435.html
摘要:源碼以及資源地址下載鏈接密碼首先,打開(kāi)文件,可以看到庫(kù)里面有幾個(gè)待使用的元件我們先用軟件自帶的發(fā)布功能發(fā)布一下快捷鍵也可以在文件里選擇發(fā)布發(fā)布后在文件旁邊會(huì)有一個(gè)和一個(gè)我們打開(kāi)可以看到這樣的代碼片段我們新建一個(gè),把生成的部分的代 源碼以及資源地址下載:鏈接: http://pan.baidu.com/s/1kU8LBTH 密碼: j7hu 首先,打開(kāi)flash文件,可以看到庫(kù)里面有幾個(gè)...
摘要:說(shuō)明在以下開(kāi)始您的自定義代碼行后的新行上添加您的自定義代碼。單擊此元件實(shí)例時(shí),此代碼將執(zhí)行。開(kāi)始您的自定義代碼此示例代碼在輸出面板中顯示已單擊鼠標(biāo)。 結(jié)合之前的兩篇解析 微信內(nèi)嵌視頻1(案例淺析)https://segmentfault.com/a/11...從AnimateCC到CreateJS入門(mén)https://segmentfault.com/a/11... 這次是一篇creat...
摘要:說(shuō)明在以下開(kāi)始您的自定義代碼行后的新行上添加您的自定義代碼。單擊此元件實(shí)例時(shí),此代碼將執(zhí)行。開(kāi)始您的自定義代碼此示例代碼在輸出面板中顯示已單擊鼠標(biāo)。 結(jié)合之前的兩篇解析 微信內(nèi)嵌視頻1(案例淺析)https://segmentfault.com/a/11...從AnimateCC到CreateJS入門(mén)https://segmentfault.com/a/11... 這次是一篇creat...
閱讀 3511·2021-11-18 10:02
閱讀 946·2021-09-04 16:48
閱讀 2034·2019-08-30 15:55
閱讀 3533·2019-08-30 15:52
閱讀 1810·2019-08-30 14:08
閱讀 3552·2019-08-30 13:19
閱讀 1137·2019-08-27 10:53
閱讀 3116·2019-08-26 12:11