如果能把flashcc导出的html5动画元件和createjs框架结合起来写程序，那是多么爽的事情啊,ok,这就是今天的学习目标。
Step1，用flashcc建立个元件Quanmc,导出类名为Quanmc,里面建立一段动画，注意动画里的移动物件也是元件。也可以给相应帧加上标签。
Step2，Shift+f9一键导出成html5动画。
Step3，用flashdevelop新建一个createjs app.运行以后会在bin目录下生成一个index.html文件。将index.html里面的引用js地址换成,flashcc生成的html文件里的引用js地址,注意把相应的js文件也拷贝到对应的引用目录下。
Step4，在flashdevelop里打开src目录下的Main.js文件，开始激动人心的编辑吧，下面上代码:
[code]
/*
* work_flow study
* Visit http://amyflash.duapp.com/ for documentation, updates and examples.
*
* Copyright (c) 2013 amyflash.com
*
* Distributed under the terms of the MIT license.
* http://www.opensource.org/licenses/mit-license.html
*
* This notice shall be included in all copies or substantial portions of the Software.
*/
/** @define {string} */
var BUILD = "debug";
(function(){
/**
* Main class of the app.
*/
function Main(){}
/**
* Entry point of the app.
*/
Main.main = function()
{
var main = new Main();
if (!window.HTMLCanvasElement)
{
alert("Your browser does not support HTML5 Canvas.");
return;
}
else main.initialize();
// entry point
main.createCircle();
}
var a,b;
Main.prototype.createCircle = function () // 相当于as3里Main类下面的public createCircle方法
{
a = new createjs.Shape();
a.graphics.beginFill("#FF0000").drawCircle(0, 0, 50);
a.graphics.endFill();
a.x = 50;
a.y = 200;
b = new lib.Quanmc();
b.gotoAndStop(0);
this.mainStage.addChild(b);
a.addEventListener("click",clickHandle);
function clickHandle(event)
{
console.log("test");
b.gotoAndPlay("fall");
}
this.mainStage.addChild(a);
};
/**
* Initializes the basics of the app.
*/
Main.prototype.initialize = function()
{
/**
* mainCanvas
*/
this.mainCanvas = document.getElementById("mainCanvas");
/**
* mainStage
*/
this.mainStage = new createjs.Stage(this.mainCanvas);
this.mainStage.snapToPixelsEnabled = true;
/*
* createjs
*/
createjs.Ticker.addListener(this);
createjs.Ticker.useRAF = true;
createjs.Ticker.setFPS(60);
}
/**
* Updates the stage on Ticker tick.
* @param event The recieved tick event.
*/
Main.prototype.tick = function(event)
{
if(b.currentFrame==24)
{
b.gotoAndStop(24);
}
this.mainStage.update();
}
/**
* Expose class.
*/
window.Main = Main;
})();
[/code]
注意这段代码里面这几行
[code]b = new lib.Quanmc();
b.gotoAndStop(0);
this.mainStage.addChild(b);
[/code]
Quanmc就是我们在flashcc里面自定义的动画元件导出类名了，
注意起始帧数是0，
其他用法和在as3里面基本一样用的，有么有啊！！！！！！！
Step5,快捷键f5就用google js压缩工具把src目录下的js文件压缩到bin目录下的js文件了，文件体积缩小了很多啊，有么有啊！！！！
最后在chrome下跑bin/index.html
点击红圆圈，就会发现html5动画按你所想跑起来啦！！！！！！！