使用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

运行中的某帧:

使用Flash Pro CC 输出动画--html5-canvas相关推荐

android 漩涡动画,html5 canvas酷炫的粒子漩涡动画特效
特效描述:html5 canvas 粒子漩涡动画特效.html5粒子漩涡动画,酷炫的粒子动画特效代码结构 1. HTML代码 function project3D(x,y,z,vars){ var ...
html飞机动画,html5 canvas纸飞机跟随鼠标飞行动画
这是一款效果很酷的html5 canvas纸飞机跟随鼠标飞行动画.插件中使用了paper.js来构建场景中的各种元素. HTML html结构只需要一个canvas,并给它一个id triangle- ...
android气球上升的属性动画,html5 canvas告白气球上升背景动画特效
特效描述:html5 canvas 告白气球上升背景动画特效.html5基于canvas绘制各种卡通气球上升动画.告白气球背景动画特效. 代码结构 1. 引入JS 2. HTML代码 Balloon ...
html语音播放动画,html5 canvas+js音频可视化动画特效
html5 canvas+js实现的音频可视化动画特效,选择一首本地音频文件播放查看效果. 查看演示下载资源: 13 次下载资源下载积分: 20 积分 js代码 window.onload = ...
html图像粒子转换动画,html5 canvas粒子动画生成图片特效
特效描述:html5 canvas 粒子动画生成图片特效.html5基于canvas粒子化图片利用easying.js公式计算粒子动态轨迹方程, x轴方向和y轴方向的公式均可以选择可以设置粒子运 ...
五十个html js特效动画,html5 canvas酷炫的月食动画特效
特效描述:html5 canvas 月食动画特效.html5月食动画代码结构 1. 引入JS 2. HTML代码 varying vec3 vNormal; void main() { vNorma ...
html5绘制矩形动画,HTML5 Canvas中绘制矩形实例
本文翻译自Steve Fulton & Jeff Fulton HTML5 Canvas, Chapter 2, "The Basic Rectangle Shape". ...
用html语言制作表白动画,HTML5 Canvas程序员经典爱情表白动画
JavaScript 语言: JaveScriptBabelCoffeeScript 确定 var $window = $(window), gardenCtx, gardenCanvas, $gar ...
html信号动画,HTML5 Canvas火箭着陆和雷达信号动画
JavaScript 语言: JaveScriptBabelCoffeeScript 确定 let canvas = document.querySelector('canvas'); let ctx ...

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

使用Flash Pro CC 输出动画--html5-canvas相关推荐

最新文章

热门文章