源碼以及資源地址下載:
連接: http://pan.baidu.com/s/1kU8LBTH 密碼: j7huhtml
首先,打開flash文件,能夠看到庫裏面有幾個待使用的元件json
咱們先用軟件自帶的發佈功能發佈一下
快捷鍵 alt+shift+F12,也能夠在文件裏選擇發佈canvas
發佈後在flash文件旁邊會有一個html和一個js服務器
咱們打開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); }
咱們新建一個test.js,把html生成的script部分的代碼複製進去,而後再新建一個html上引用
代碼以下動畫
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body onload="init();" style="margin: 0;padding: 0;"> <canvas id="canvas" width="720" height="1206" style="background: #ddd;position: absolute;left: 50%;transform: translateX(-50%)"></canvas> <script src="lib/createjs.js"></script> <script src="demo1.js"></script> <script src="test.js"></script> </body> </html>
這個flash裏面有兩個動畫,咱們如今來實現一個效果,在通常狀況時播放一個動畫,在手指按下時播放另外一個動畫
咱們須要改一改flash生成的代碼
把handleComplete
改成如下內容spa
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);
建立兩個場景animate1/animate2
new lib.view1()爲新建一個場景的構造方法,場景的類名對應程序中
而後給兩個場景定好x/y位置
將其中一個場景加入舞臺中code
須要介紹一下createjs下的三個類orm
Stage是createjs的一個舞臺類
至關於最根部的場景,須要展現的場景添加到他的內部,構造函數能夠傳入一個canvas標籤,表示對對應的canvas進行繪製。
stage = new createjs.Stage(canvas);
能夠得到一個舞臺對象,把須要展現的內容放入該對象中htm
LoadQueue是一個加載器類,
須要用它加載資源,也能夠綁定事件監聽,有如下事件
用如下哎方法加載文件
Ticker
這是一個相似setIntervald的東西,能夠在這裏對canvas的繪製頻率進行控制
tick事件就是幀變化的時候的事件
createjs.Ticker.addEventListener("tick", stage);
此爲當幀變化時刷新stage,stage也能夠傳入一個function
ok至此咱們已經成功添加一個元件到舞臺中,並播放動畫。
由於須要加載一個本地資源的json文件,因此你須要在當前目錄搭建一個本地服務器來跑。
不然會出現如下問題
如今咱們須要實現觸碰屏幕播放另外一個動畫
寫一個事件綁定的方法
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]); })
該方法使手指觸碰與離開時更換舞臺中的動畫,好了功能完成,不過此時用手機看
canvas並無填充整個屏幕
加一個自適應屏幕的方法
function resizeCanvas(){ model = new createjs.EventDispatcher();//用來捕獲事件的原型 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'; }
在資源加載完成的回調方法中調用它
resizeCanvas();//自適應寬高
bindEvent();//綁定事件
完成!