createjs框架学习笔记2-动画工作流

如果能把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动画按你所想跑起来啦!!!!!!!

用flashdevelop创建createjs应用

最近cdc大会上各大牛分享了如何把flash技能延续到html5中,虽然我不喜欢js各种乱七八糟的写法,但是工作如果需要还是应该研究下,毕竟还没到财务自由的程度.下面入正题,我习惯用flashdevelop当编辑器,所以自然想让其成为js开发工具了,幸运的是flashdevelop新建项目的时候,已经加入了createjs app的模板,可以一键生成很多初始化的操作,cool,除此以外,js自定义函数也可以代码提示,基本符合我要求了,开工.
主要逻辑都在src/js/Main.js里面了,直接贴代码:
[code]
/** @define {string} */
var BUILD = “debug”;

(function(){

/**
* Main class of the app.
*/
function Main(){}

/**
* Entry point of the app.
*/
Main.main = function() // 相当于as3里Main类下面的static main方法
{
var main = new Main();
if (!window.HTMLCanvasElement)
{
alert(“Your browser does not support HTML5 Canvas.”);
return;
}
else main.initialize();
// entry point
main.createCircle();
}

var c = 3;
var d = 5;
var a;
Main.prototype.createCircle = function () // 相当于as3里Main类下面的public createCircle方法
{
a = new createjs.Shape();
a.graphics.beginFill(“#FF0000”);
a.graphics.drawCircle(0, 0, 30);
a.graphics.endFill();
a.x = 250;
a.y = 250;
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)
{
a.x += c;
a.y += d;
if (0 > a.x – 30 || a.x + 30 > this.mainCanvas.width) c *= -1;
if (0 > a.y – 30 || a.y + 30 > this.mainCanvas.height) d *= -1;
this.mainStage.update();
}

/**
* Expose class.
*/
window.Main = Main;

})();

[/code]

然后直接run,就看到个红色的圆在浏览器里上蹦下跳了,哈哈
这些代码里面,只有
[code]main.createCircle();[/code]及
[code]var c = 3;
var d = 5;
var a;
Main.prototype.createCircle = function () // 相当于as3里Main类下面的public createCircle方法
{
a = new createjs.Shape();
a.graphics.beginFill(“#FF0000”);
a.graphics.drawCircle(0, 0, 30);
a.graphics.endFill();
a.x = 250;
a.y = 250;
this.mainStage.addChild(a);
};
[/code]

[code]
a.x += c;
a.y += d;
if (0 > a.x – 30 || a.x + 30 > this.mainCanvas.width) c *= -1;
if (0 > a.y – 30 || a.y + 30 > this.mainCanvas.height) d *= -1;
[/code]
是我加上去的,其他都是模板代码,无敌high了
用flashdevelop创建createjs应用