HelloWorld为基础,教大家怎样在分分钟内显示一个逐帧动画。

假设美术为我们创建了一个动画,名为zombie.fla,将其放入工程中的flash目录。

打开zombie.fla,里面有一个zombieWalk的动画:

在舞台上选择zombieWalk实例,点击工具栏中【转为Flax元件】按钮,弹出面板中选择【一般动画】,【素材ID】填入ZombieWalk,这个ID是就是在程序中创建这个动画的ID,谨记!

     

此时,请确保Flax工具是打开并工作在当前工程目录。ctr+enter发布,这个时候可以看到Flax的图标在闪动,表示Flax已经启动自动转换,当转换完毕时,屏幕右上角会有【Flax转换成功】的气泡弹出,这个时候,zombie.swf已经被转换为zombie.png和zombie.plist并被保存到工程的res目录,如果此时查看工具转换效果,应该是这样:

接着修改代码来实现这个zombie的动画播放。
先修改Resource.js,定义好资源:

//Flash输出的资源
var res = {
    zombie:"res/zombie.plist",
    zombie_png:"res/zombie.png"
};
//场景依赖的资源
var res_simpleScene = [
    res.zombie,
    res.zombie_png
];

再修改主场景,播放动画:

var SimpleScene = cc.Scene.extend({
    onEnter:function(){
       this._super();
       //窗口尺寸
       var winSize = cc.visibleRect;
       //res.zombie是Flash输出的资源路径
       //“ZombieWalk"是Flash中定义的动画类名
       //{parent: this, x:...}是可设定的任意参数,指定parent表示自动加入父容器
       var zombie = flax.assetsManager.createDisplay(res.zombie, "ZombieWalk", {parent: this, x: winSize.width/2, y: winSize.height/2, fps:60});
       //播放动画
       zombie.play();
    }
});

运行效果:

素材下载

日期:2015年2月4日 作者:longames
  1. 看起来不错啊

    greenday:2015年3月23日