Flash动画导出到Cocos Studio动作编辑器

最近遇到需要将flash动画制作成cocos骨骼动画的需求,记得一年前曾研究过,简单的标记了下注意事项,但最近动手时还是踩到一些坑,叫苦连连啊,于是就有了本文。

首先准备好Flash CS6 + Cocos Studio Animation Editor 1.6(官方帮助)。

*2018.03.22补充 官方链接已失效,1.6版编辑器地址 百度云:https://pan.baidu.com/s/1ls52X-x2mpTIPinxNkPFig  密码:itkn

这里以一个简单的小鸟舞动翅膀的动画为例,动画很丑请勿见怪:

1.新建一个fla,例如bird.fla;

2.新建元件"birdClip"再放拖放到主场景上(新建元件为图形元件或影片剪辑,方便实时查看动画效果这里推荐使用图形元件);

3.创建骨骼,例如小鸟有7个骨骼,这里的一个图层对应编辑器里的一个骨骼。

最上面的一层为动作名称图层,动作名称使用帧标签标识,如果你将骨骼放置在顶层,则动作编辑器不会导入这一层的显示内容(切记顶层不要放显示元素,这次我就是被这个坑了,每次导出的文件都少一个骨骼,自己找了很久的原因才发现这个猫腻)

4.定义骨骼,每个图层上只放一个元件,元件内只有一帧,这一帧内容必须是位图

处理完后大概是这样的

Flash动画导出到Cocos Studio动作编辑器_第1张图片


5.定义骨骼的锚点(注册点)

锚点通过调整元件内位图的坐标来完成。

有效的锚点调整

Flash动画导出到Cocos Studio动作编辑器_第2张图片


示例中的翅膀需沿着一个点旋转,在flash里面选中一个元件然后按“Q”可以看到一个小圆点,小圆点的位置就是锚点,调整小圆点就可以改变锚点,但是cocos动作编辑器并不支持这种锚点设置,cocos是通过读取元件里位图相对于起始点(0,0)的相对坐标来实现的。

Flash里面的小圆点

Flash动画导出到Cocos Studio动作编辑器_第3张图片

*注意调整元件内位图坐标后,需双击小白点,让flash里面的小圆点和起始点相同,以便我们预览的动画和cocos动作编辑器里的保持一致!


6.然后就可开始制作动画了,示例是一个调整“翅膀”角度的一个简单动画

Flash动画导出到Cocos Studio动作编辑器_第4张图片


7.启动Cocos动作编辑器,执行“文件(F)”--“打开Flash项目”操作,选中刚才保存的fla文件

Flash动画导出到Cocos Studio动作编辑器_第5张图片

导入成功后,应如下图:

Flash动画导出到Cocos Studio动作编辑器_第6张图片

切换至“动画模式”查看动画内容

Flash动画导出到Cocos Studio动作编辑器_第7张图片

*如果导入失败,请将fla里面相关的文字内容改成英文字母+数字的形式


8.导出,执行“文件(F)”--"导出项目(Ctrl+E)"

Flash动画导出到Cocos Studio动作编辑器_第8张图片


示例fla下载地址:http://pan.baidu.com/s/1mhvgwsg




你可能感兴趣的:(移动开发)