使用Flash Pro CC 输出动画--html5-canvas

环境:adobe flash professional cc(2014),最新版不是cs6,cs6没创建html5-canvas的功能

新建:

选择时间轴,选定第一帧,画一个圆形:

选择30帧,按F7插入空白关键帧,再将其之间任意地方右击选择"创建补间动画".按ctrl+enter可以看到一段动画效果

再在60帧处添加空白关键帧,画和第一帧一样的图形,创建补间动画后,就是一个连贯的循环了.

添加控制按钮

新建图层,写文字,如"play",选中文字,在属性中指定"实例名称",如:

再添加一个图层,按F9,添加"动作",即javaScript代码:

this.stop();
this.btn.on('click',this.play.bind(this));

添加运动补间动画

新建一个图层,在第一帧放入一个图形,然后按F8添加为原件:

再在本图层任意一帧右击选择创建补间动画,选中最后一帧,移动图形,即可设置运动路径,如(已隐藏其它图层):

接着ctrl+enter即可在浏览器运行,属于html5

运行中的某帧: