持续创作,加速成长!这是我参与「掘金日新计划 · 10 月更文挑战」的第22天,点击查看活动详情
今天我们做一个波形水纹的动画效果,尽量形象的绘制出水纹的效果,让水面更加真实
目录
新建画纸 绘制波纹 波纹的动态效果 如何产生层次? 作品效果展示
一.新建画纸
打开Flash,新建ActionScript 3.0,就新建了大小为550×400像素大小的纸张。
二.绘制波纹
波纹是由多个同心圆嵌套而成,所以我们先画一个圆一定要不填充任何颜色只留白色描边,将舞台颜色改为黑色,在50帧的地方,按F6,在35帧左右鼠标右键插入关键帧。将第一帧动画的圆圈缩放至最小,按住Alt+Shift可以沿中心点缩放
如果遇到有首帧和尾帧并且调整首帧大小后,转为传统补间播放,没有中间放大和缩小的过程,那你就忘了一个fl动画效果最重要的因素,那就是必须要在原件状态下才可以进行动画效果,所以,在一开始,你们将舞台颜色变黑画出那个白色的空心圆石,就要把那个最大的白色的空心圆转为元件,然后在最后一帧按下f6粘贴上一帧已经是元件的图形这样在播放的时候就会从第一帧到最后一帧进行大小的变化
但有从小到大就要有从有到无,所以我们在95帧插入关键帧
调整Alpha值(不透明度)
95帧透明度不变,最后一帧调为0,这样透明度就会从95帧开始到结束逐渐减少直至消失
三.波纹的动态效果
将这个图层的帧剪切下来,在窗口菜单里找到库,这里面放的都是元件,在左下角新建元件,进入元件里点击第一帧,右键粘贴帧
在元件里,Enter回车是播放,记住元件名称,退出元件在库中找到这个元件,拖拽到画布中,按住Alt键拖拽可直接复制,在对齐菜单下找到垂直对齐和水平居中,让每个圆的间距都一样大
将实例行为改为图形,下面会有第一帧开始播放的帧数,更改他形成先后顺序
120 帧给12个球平分,所以每个球的第一帧是前一个球帧数加10帧,每个球累加就会出现效果
在对齐菜单下选择水平居中对齐,就能得到同心圆效果
播放一下试试
可以看到最外层有一个圈好像不受规则限制,可以直接删除(因为是最后一帧)也可以回头找原因
往前撤回一步看看原因在哪
进入这个元件单独播放,发现图层时间轴最后居然有2个黑点,正常情况下倒数第二个点的透明度就为0了,后面这个透明度一定为100%,所以才会有这样的瑕疵
最终效果
四.如何产生层次?
将这个动画效果全程的帧剪切,在库中新建元件
在第一帧粘贴帧,退出元件,记住元件名称,拖拽元件到舞台上复制并粘贴3个,压扁调整大小
分到四个图层上,做动画效果:
1.渐显
因为是水面所以要尽量贴合水面,可以在剪切各元件到图层时,将Alpha值调整为50%。 0-15帧渐显,首先在50帧按下F6,在15帧添加关键帧,调整Alpha值为50%,第一帧为0%
想移动长短可以按Ctrl鼠标拖动进行移动
2.渐隐
依旧是插入关键帧,最后一帧的透明度调为0