摘要：源碼以及資源地址下載鏈接密碼首先，打開文件，可以看到庫里面有幾個待使用的元件我們先用軟件自帶的發(fā)布功能發(fā)布一下快捷鍵也可以在文件里選擇發(fā)布發(fā)布后在文件旁邊會有一個和一個我們打開可以看到這樣的代碼片段我們新建一個，把生成的部分的代

源碼以及資源地址下載：
鏈接: http://pan.baidu.com/s/1kU8LBTH 密碼: j7hu

首先，打開flash文件，可以看到庫里面有幾個待使用的元件

我們先用軟件自帶的發(fā)布功能發(fā)布一下
快捷鍵 alt+shift+F12,也可以在文件里選擇發(fā)布

發(fā)布后在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部分的代碼復(fù)制進去，然后再新建一個html上引用
代碼如下

這個flash里面有兩個動畫，我們現(xiàn)在來實現(xiàn)一個效果，在一般情況時播放一個動畫，在手指按下時播放另一個動畫
我們需要改一改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)建兩個場景animate1/animate2
new lib.view1()為新建一個場景的構(gòu)造方法，場景的類名對應(yīng)程序中

然后給兩個場景定好x/y位置
將其中一個場景加入舞臺中

需要介紹一下createjs下的三個類

Stage是createjs的一個舞臺類
相當于最根部的場景，需要展示的場景添加到他的內(nèi)部，構(gòu)造函數(shù)可以傳入一個canvas標簽，表示對對應(yīng)的canvas進行繪制。
stage = new createjs.Stage(canvas);
可以獲得一個舞臺對象，把需要展示的內(nèi)容放入該對象中

LoadQueue是一個加載器類,
需要用它加載資源，也可以綁定事件監(jiān)聽，有以下事件

用以下哎方法加載文件

Ticker
這是一個類似setIntervald的東西，可以在這里對canvas的繪制頻率進行控制
tick事件就是幀變化的時候的事件
createjs.Ticker.addEventListener("tick", stage);
此為當幀變化時刷新stage，stage也可以傳入一個function

ok至此我們已經(jīng)成功添加一個元件到舞臺中，并播放動畫。
因為需要加載一個本地資源的json文件，所以你需要在當前目錄搭建一個本地服務(wù)器來跑。
否則會出現(xiàn)以下問題

現(xiàn)在我們需要實現(xiàn)觸碰屏幕播放另一個動畫
寫一個事件綁定的方法

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并沒有填充整個屏幕
加一個自適應(yīng)屏幕的方法

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";
}

在資源加載完成的回調(diào)方法中調(diào)用它
resizeCanvas();//自適應(yīng)寬高
bindEvent();//綁定事件

完成！