以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(); } });
运行效果: