摘 要: 文章阐述了Flash里的三种补间动画,三种元件,遮罩动画和传统运动引导层动画,逐帧动画和按钮的运用。
关键词 : Flash;元件;遮罩动画;传统运动引|导层动画;逐帧动画;按钮;
如果想要实现二维动画的效果,有人会说Office里的Power Point也可以做得到。比如说文字的滚动推出,图片的旋转变大等等这些简单的平面动画效果,还可以搭配一些简单的声音效果。但是如果想要一些复杂的、特别的动画效果,那就需要功能强大一些,专业性和针对性也需要强大一些的软件,Flash就能很好地满足这些要求。Flash由于专业性强,操作复杂,初学者一般不容易掌握。现在由我来说怎么样才能快速学好Flash并加以灵活运用。
1、 Flash的几个基本概念
首先需要理解常用的几个概念。Flash里常用的补间动画有三种:第一种是补间动画,第二种是补间形状,第三种是传统补间。创建补间动画和传统补间的前提条件是元件,而元件又有三种类型,第一类是图形元件,第二类是影片剪辑元件,第三类是按钮元件。其次所有的补间运动都是简单的运动。如果想要实现复杂一点的动画则可以使用遮罩动画、传统运动引导层动画和逐帧动画等等。再次按钮是含有触发事件的元件,触发事件简单地说就是鼠标经过或者单击按钮,按钮会改变颜色或者运动起来或者发出声音或者引起其他运动等等这些效果之一或者好几个效果的结合。
2、 嵌套运动
如果想要实现一个蓝色小球从左往右直线滑过去,使用简单的补间动画就可以做得到。但是如果想要实现一个蓝色小球从左往右滚动过去,那么需要嵌套运动才可以做得到。首先在场景的左面画一个蓝色的小球,将蓝色小球转换为图形元件,接着再转换为影片剪辑元件。在场景里双击影片剪辑,在影片剪辑的时间轴第40帧里插入关键帧,然后在第1帧和第40帧中间添加传统补间动画,动画类型为顺时针旋转2圈。返回场景里在第40帧里插入关键帧,将蓝色小球移动到场景的右面,中间添加传统补间动画。解释一下这么做的结果是影片剪辑元件里蓝色小球在40帧时间里原地顺时针旋转2圈,场景里蓝色小球从左往右直线滑动。最后的效果就是这两项运动的结合,即蓝色小球从左往右滚动过去。
3 、遮罩动画
Flash里的遮罩动画是很重要的一种动画效果。可以这样理解:就是透过一块穿了孔的板观看板后面的画面,板后面的画面可以运动,穿了孔的板可以运动,并且孔也可以变化运动,从而产生千变万化的动画效果。运用遮罩运动来实现展开一幅国画的动画效果,首先在场景第一层导入一张国画,国画下面有白色的纸张和橙色的画布,把这一层作为被遮罩层。新建一层作为遮罩层,遮罩层的第1帧画一个高度可以覆盖国画但是宽比较小的矩形形状,第100帧画一个撑满左右场景的矩形形状,中间添加补间形状动画。新建一层画一个画轴靠左,首先将画轴转换为图形元件,在第100帧插入普通帧。再次新建一层放之前的画轴但是靠右一点,在第100帧插入关键帧,将画轴移动到场景的右面,中间添加传统补间动画。最后的结果是随着画轴的右轴慢慢向右移动,国画的画面也慢慢地向右展开。
4、 逐帧动画
补间动画的轨迹都是直线,但是现实生活中很多运动都不是直线运动,为了解决这个问题,Flash使用传统运动引导层动画来解决这种不走直线的问题。传统运动引导层相当于轨道,轨道绘成曲线则可以实现曲线运动。现实生活中还有很多运动不是直线运动或者曲线运动,比如说人走路,猪、马和羊奔跑,小鸟在天上飞这些复杂的运动。为了解决这个问题,Flash使用逐帧动画来解决。像人走路这种情况,具体操作是连续每一帧都绘画人在走路的连贯的静态画面。第1帧绘制人提左手,迈右腿。第2帧左手提高一点,右腿迈得大一些,身体向前倾一些。第3帧左手提得最高,右腿迈得最大,身体再向前倾一些。第4帧是左手回收,右腿也是回收,身体再向前倾一些。第5帧左手垂下,右脚底全部着地,重心在右脚,左腿向前曲,准备迈左脚。后面5帧就是将前面5帧的左手和右腿换成右手和左腿。每1帧都是静止的画面,但是Flash在测试或者导出影片人们观看时就会感觉他在走路一样,因为人眼有视觉上的短暂停留。通俗地说就是人眼观察物体的时候,当光信号传入大脑时,需要经过一段短暂的时间,而光的作用结束后,视觉形象并不会立即消失。
5、 图形和影片剪辑的区别
图形元件和影片剪辑元件都是元件,也都有时间轴,它们之间有什么区别呢?首先图形元件可以改变它的颜色,调整透明度等。而影片剪辑除了可以改变颜色和调整透明度这些效果之外,还有滤镜效果,比如说发光或者模糊的滤镜效果。其次图形元件尽管在它的时间轴里做了动画效果,然而在场景里只有一帧的话它是不会动的;但是影片剪辑则不一样,场景里只有一帧它也会动起来。
6 、按钮的触发动画
6.1 、按钮控制场景和影片剪辑动画的停止
按钮可以控制场景里的时间轴动画停止,也可以控制影片剪辑的动画停止。在按钮上添加的语句分别是on(press){stop():}和on(press){Object(this).ball.stop():}。控制影片剪辑多了Object(this).ball.这个语句,在添加按钮上面的语句之前需要对影片剪辑命名为ball这个变量名。变量名和影片剪辑的名称是两件不一样的事,不能互相使用,一般来说用到动作才需要使用变量名。
6.2 、按钮改变影片剪辑的各种属性
通过单击按钮可以改变影片剪辑的位置、大小、旋转的方向、透明度、可见性、质量甚至颜色,主要是通过set Property(目标,属性,值)这个函数来实现。具体操作是绘制一个按钮,一个变量名为ufo的影片剪辑,通过单击按钮来改变ufo的各种属性。在按钮上添加动作,具体语句是on (release){set Property(ufo,_x,get Property("ufo",_x)-20);},第一个ufo是set Property里的目标,第一个_x就是指ufo的横坐标。后面还有一个get Property(目标,属性),为什么需要用到get Property这个函数,是因为最后设置ufo位置时它不是固定为100的坐标,它是变化的,所以需要先获取ufo的横坐标,取得它横坐标的值后再减去20,结果就是ufo往左移动了20个像素的距离。
6.3、 经过按钮出现新画面
具体效果是经过第一个按钮时会出现另外三个按钮,再经过另外三个按钮时分别出现三幅不同的图画。首先新建一个影片剪辑,将它的变量名命名为mc1,第一个图层第1帧是画一个按钮,第二帧画四个按钮,其中第一个按钮的位置和第1帧一样。新建一个as的图层,在第1帧添加stop();语句,让影片剪辑停留在第1帧。然后在第1帧的按钮里添加以下语句:on(roll Over){goto And Stop(2);},它的作用是鼠标经过这个按钮时会出现另外三个按钮。在场景里新建一个图层放第二个影片剪辑,将它的变量名命名为mc2,它的第1帧是空白帧,新建一个as的图层,在第1帧添加stop();语句,主要作用是不要让mc2这个影片剪辑自动播放。第2帧到第4帧分别导入3张不同的图画,这时在mc1里的第2帧的第二个按钮添加语句:on (rollOver){Object(_root).mc2.goto And Stop(2);},它的作用是鼠标经过这个按钮时出现第一张图画并且停留在那里。在mc1里的第2帧的第三个按钮添加语句:on (roll Over){Object(_root).mc2.goto And Stop(3);},它的作用是鼠标经过这个按钮时出现第二张图画并且停留在那里。在mc1里的第2帧的第四个按钮添加语句:on (roll Over){Object(_root).mc2.goto And Stop(4);},它的作用是鼠标经过这个按钮时出现第三张图画并且停留在那里。
6.4 、温馨相册
温馨相册主要效果是首先显示3张旧的小照片,点击每一张小照片都会出现相应照片的彩色大图,点击大图又还原回去小图的状态。首先将3张小图导入都放在第一个图层的第1帧,将每一张小图都分别转换为按钮。新建一层在第2帧的关键帧上导入第一张大图,将大图转换为按钮,在第10帧插入关键帧,接着将第2帧的大图缩小为小图,第2帧和第10帧之间添加传统补间动画。再新建一个as的图层,将第1帧和第10帧都设为关键帧,都添加stop();的语句。将彩色小图的第2帧复制到第20帧,第10帧和第20帧之间添加传统补间动画。再在as图层的第20帧插入关键帧,添加goto And Stop(1);语句。在第一个小图的按钮上添加语句:on (release){goto And Play(2);},它的作用是按下这张小图的按钮时它将会出现一张彩色的小图变为大图的动画,然后停留在大图上,在大图这个按钮上添加语句:on (release){goto And Play(11);},它的作用是按下这张大图的按钮时它将会出现一张彩色的大图变为小图的动画,然后回到开始3张旧的小照片的界面上并且停留在那里。
7 、总结
想要学好Flash并且灵活运用,需要懂得adobe photoshop、illustrator和c语言。Flash时间轴上有图层的概念和运用,起码需要知道前面的图层会挡住后面图层的内容;Flash是矢量图软件,它的绘画功能和同为矢量图软件的illustrator很相似,它的特点是绘好的图形可以无限扩大而不会出现锯齿状,矢量图的对象具有颜色、形状、大小的独立属性。保证清晰度的同时文件大小也会非常小;按钮的触发效果需要使用Action Script的语句,如果有C语言基础的话理解并且运用起来会容易很多,比如if()else条件判断语句,for()循环语句等编程语言的用法与功能和C语言是一样的。
参考文献
[1]张凡.Flash动画设计[M].2版北京:中国铁道出版社,2017.
[2]九洲书源Flash CS6动画制作[M].北京:清华大学出版社2015.
[3]麓山文化.Flash CS6标准教程(全视频微课版)[M].北京:人民邮电出版社,2020.
[4]王智强Flash动画设计经典100例[M].北京:中国电力出版社,2017.