1、实验 3 Flash 动画制作基础一实验目的1.掌握 Flash 动画制作中常见动画的制作方法和技巧。2.掌握动画制作的原理二实验内容及基本要求(一)形状补间动画的制作。1. 制作一个时长为 3 秒的形状补间动画;2. 实现字母由 A 到 B、再到 C 的形变动画;3. 以“形状补间动画.swf”为名输出影片。(二)动作补间动画的制作。1. 制作一个时长为 3 秒的飞机运动动画。2. 实现飞机由画面左边飞进画面,由快变慢飞至画面中间位置。3. 以“动作补间动画.swf”为名输出影片。(三)遮照动画的制作。1. 制作一个“舞台灯”效果的动画,灯光左右移动,以“遮照动画.swf”为名输出影片。(四
2、)引导路径动画的制作。1. 实现小球做圆周运动的动画效果; 2. 以“引导路径动画.swf”为名输出影片。三实验原理(一)形状补间动画形状补间动画是 Flash 中非常重要的表现手法之一,运用它,你可以变幻出各种奇妙的、不可思议的变形效果。本节从形状补间动画基本概念入手,带你认识形状补间动画在时间帧上的表现,了解补间动画的创建方法,学会应用“形状提示”让图形的形变自然流畅,最后,提供了二个实例,帮助你更深地理解形状补间动画。1形状补间动画的概念(1)形状补间动画的概念 在一个关键帧中绘制一个形状,然后在另一个关键帧中更改该形状或绘制另一个形状,Flash 根据二者之间的帧的值或形状来创建的动画
3、被称为“形状补间动画”。(2)构成形状补间动画的元素形状补间动画可以实现两个图形之间颜色、形状、大小、位置的相互变化,其变形的灵活性介于逐帧动画和动作补间动画二者之间,使用的元素多为用鼠标或压感笔绘制出的形状,如果使用图形元件、按钮、文字,则必先“打散”才能创建变形动画。(3)形状补间动画在时间帧面板上的表现形状补间动画建好后,时间帧面板的背景色变为淡绿色,在起始帧和结束帧之间有一个长长的箭头,如下图所示。(4)创建形状补间动画的方法在时间轴面板上动画开始播放的地方创建或选择一个关键帧并设置要开始变形的形状,一般一帧中以一个对象为好,在动画结束处创建或选择一个关键帧并设置要变成的形状,再单击开
4、始帧,在【属性】面板上单击【补间】旁边的小三角,在弹出的菜单中选择【形状】,一个形状补间动画就创建完毕。2认识形状补间动画的属性面板Flash 的【属性】面板随鼠标选定的对象不同而发生相应的变化。当我们建立了一个形状补间动画后,单击帧,【属性】面板如下图所示。形状补间动画的【属性】面板上只有二个参数:(1)“简易”选项单击其右边的 按钮,会弹出滑动杆,拖动上面的滑块可以调节参数值,当然也可以在文本框中直接输入具体的数值,设置后,形状补间动画会随之发生相应的变化。? 在 1 到 -100 的负值之间,动画运动的速度从慢到快,朝运动结束的方向加速度补间。? 在 1 到 100 的正值之间,动画运动
5、的速度从快到慢,朝运动结束的方向减慢补间。? 默认情况下,补间帧之间的变化速率是不变的。(2)“混合”选项“混合”选项中有二项供选择:?【角形】选项:创建的动画中间形状会保留有明显的角和直线,适合于具有锐化转角和直线的混合形状。?【分布式】 选项:创建的动画中间形状比较平滑和不规则。(二)动作补间1动作补间动画的概念(1)动作补间动画的概念在一个关键帧上放置一个元件,然后在另一个关键帧改变这个元件的大小、颜色、位置、透明度等,Flash 根据二者之间的帧的值创建的动画被称为动作补间动画。(2)构成动作补间动画的元素构成动作补间动画的元素是元件,包括影片剪辑、图形元件、按钮、文字、位图、组合等等
6、,但不能是形状,只有把形状“组合”或者转换成“元件”后才可以做“动作补间动画”。(3)动作补间动画在时间帧面板上的表现动作补间动画建立后,时间帧面板的背景色变为淡紫色,在起始帧和结束帧之间有一个长长的箭头,如下图所示。(4)创建动作补间动画的方法在时间轴面板上动画开始播放的地方创建或选择一个关键帧并设置一个元件,一帧中只能放一个项目,在动画要结束的地方创建或选择一个关键帧并设置该元件的属性,再单击开始帧,在【属性】面板上单击【补间】旁边的“小三角”,在弹出的菜单中选择【动作】,或单击右键,在弹出的菜单中选择【创建补间动画】,就建立了“动作补间动画”。2认识动作补间动画的属性面板在时间线“动作补
7、间动画”的起始帧上单击,帧属性面板会变成如下图所示。(1)【简易】选项用鼠标单击【简易】右边的 按钮,弹出拉动滑杆,拖动上面的滑块,可设置参数值,当然也可以直接在文本框中输入具体的数值,设置完后,补间动作动画效果会以下面的设置作出相应的变化:? 在-1 到 -100 的负值之间,动画运动的速度从慢到快,朝运动结束的方向加速补间。? 在 1 到 100 的正值之间,动画运动的速度从快到慢,朝运动结束的方向减慢补间。? 默认情况下,补间帧之间的变化速率是不变的。(2)【旋转】选项有四个选择,选择【无】(默认设置)可禁止元件旋转;选择【自动】可使元件在需要最小动作的方向上旋转对象一次;选择【顺时针】
8、(CW) 或【逆时针】(CCW) ,并在后面输入数字,可使元件在运动时顺时针或逆时针旋转相应的圈数。(3)【调整到路径】将补间元素的基线调整到运动路径,此项功能主要用于引导线运动,我们在下一节中会介绍此功能。(4)【同步】复选框使图形元件实例的动画和主时间轴同步。(5)【对齐】选项可以根据其注册点将补间元素附加到运动路径,此项功能主要也用于引导线运动。(三)遮罩动画 在 Flash 的作品中,我们常常看到很多眩目神奇的效果,而其中不少就是用最简单的“遮罩”完成的,如水波、万花筒、百页窗、放大镜、望远镜等等。1遮罩动画的概念(1)什么是遮罩遮罩动画是 Flash 中的一个很重要的动画类型,很多效
9、果丰富的动画都是通过遮罩动画来完成的。在 Flash 的图层中有一个遮罩图层类型,为了得到特殊的显示效果,可以在遮罩层上创建一个任意形状的“视窗”,遮罩层下方的对象可以通过该“视窗”显示出来,而“视窗”之外的对象将不会显示。(2)遮罩有什么用在 Flash 动画中,“遮罩”主要有 2 种用途,一个作用是用在整个场景或一个特定区域,使场景外的对象或特定区域外的对象不可见,另一个作用是用来遮罩住某一元件的一部分,从而实现一些特殊的效果。2创建遮罩的方法(1)创建遮罩在 Flash 中没有一个专门的按钮来创建遮罩层,遮罩层其实是由普通图层转化的。在某个图层上单击右键,在弹出菜单中选择【遮罩层】,使命
10、令的左边出现一个小勾,该图层就会生成遮罩层,“层图标”就会从普通层图标 变为遮罩层图标 ,系统会自动把遮罩层下面的一层关联为“被遮罩层”,在缩进的同时图标变为 ,如果关联更多层被遮罩,只要把这些层拖到被遮罩层下面就行了,如下图所示。(2)构成遮罩和被遮罩层的元素遮罩层中的图形对象在播放时是看不到的,遮罩层中的内容可以是按钮、影片剪辑、图形、位图、文字等,但不能使用线条,如果一定要用线条,可以将线条转化为“填充”。被遮罩层中的对象只能透过遮罩层中的对象被看到。在被遮罩层,可以使用按钮,影片剪辑,图形,位图,文字,线条。(3)遮罩中可以使用的动画形式可以在遮罩层、被遮罩层中分别或同时使用形状补间动
11、画、动作补间动画、引导线动画等动画手段,从而使遮罩动画变成一个可以施展无限想象力的创作空间。(四)引导路径动画 1创建引导路径动画的方法(1)创建引导层和被引导层一个最基本“引导路径动画”由两个图层组成,上面一层是“引导层”,它的图层图标为 ,下面一层是“被引导层”,图标为 ,同普通图层一样。在普通图层上单击时间轴面板中的【添加运动引导层】按钮 ,该层的上面就会添加一个引导层 ,同时该普通层缩进成为“被引导层”,如下图所示。(2)引导层和被引导层中的对象引导层是用来指示元件运行路径的,所以“引导层”中的内容可以是用钢笔、铅笔、线条、椭圆工具、矩形工具或画笔工具等绘制出的线段。而“被引导层”中的
12、对象是跟着引导线走的,可以使用影片剪辑、图形元件、按钮、文字等,但不能应用形状。由于引导线是一种运动轨迹,不难想象,“被引导”层中最常用的动画形式是动作补间动画,当播放动画时,一个或数个元件将沿着运动路径移动。(3)向被引导层中添加元件“引导动画”最基本的操作就是使一个运动动画“附着”在“引导线”上。所以操作时特别得注意“引导线”的两端,被引导的对象起始、终点的 2 个“中心点”一定要对准“引导线”的 2 个端头,如下图所示。2应用引导路径动画的技巧(1)“被引导层”中的对象在被引导运动时,还可作更细致的设置,比如运动方向,在【属性】面板上,选中【路径调整】复选框,对象的基线就会调整到运动路径
13、。而如果选中【对齐】复选框,元件的注册点就会与运动路径对齐,如下图所示。(2)引导层中的内容在播放时是看不见的,利用这一特点,可以单独定义一个不含“被引导层”的“引导层”,该引导层中可以放置一些文字说明、元件位置参考等,此时,引导层的图标为 。(3)在做引导路径动画时,按下工具箱中的【对齐对象】按钮 ,可以使“对象附着于引导线”的操作更容易成功,拖动对象时,对象的中心会自动吸附到路径端点上。(4)过于陡峭的引导线可能使引导动画失败,而平滑圆润的线段有利于引导动画成功制作。(5)向被引导层中放入元件时,在动画开始和结束的关键帧上,一定要让元件的注册点对准线段的开始和结束的端点,否则无法引导,如果
14、元件为不规则形,可以点击工具箱中的【任意变形工具】 ,调整注册点。(6)如果想解除引导,可以把被引导层拖离“引导层”,或在图层区的引导层上单击右键,在弹出的菜单上选择【属性】,在对话框中选择“正常”,作为正常图层类型,如下图所示。(7)如果想让对象作圆周运动,可以在“引导层”画一根圆形线条,再用【橡皮擦工具】擦去一小段,使圆形线段出现 2 个端点,再把对象的起始、终点分别对准端点即可。(8)引导线允许重叠,比如螺旋状引导线,但在重叠处的线段必需保持圆润,让 Flash 能辨认出线段走向,否则会使引导失败。四实验步骤(一)形状补间动画的制作。1. 新建一个 Flash 文件,命名为形状补间动画.
15、fla。更改动画舞台尺寸。2. 第 1 帧的画面中央,利用文字工具输入一个字母“A”,适当更改该文字的字体、字号、颜色等属性。3. 在第 12 帧处按 F6 键分别插入关键帧,将字母 A 修改为 B,再在 36 帧处按 F6 键分别插入关键帧,将字母 B 修改为 C。4. 按 Ctrl+B 键,将第 1、12、36 帧里的文字对象打散。5. 在将“形变动画”层的第 1 与 12 帧间、第 13 与 36 帧间设置动画补间属性为“形状”6. 按 Ctrl+Enter 键测试影片,观察动画效果。7. 修改无误后,保存文件,输出“形状补间动画.swf”。(二)动作补间动画的制作。1. 新建一个 Fl
16、ash 文件,命名为动作补间动画.fla。更改动画舞台尺寸。2. 导入一幅飞机的图片到舞台上,将它转化为图形元件。3. 在第 1 帧,将飞机元件拖放到舞台左边界以外的地方,创建出一个飞机实例。4. 在第 36 帧处按 F6 键分别插入关键帧。调整该帧画面中飞机实例的位置至舞台的中心位置。5. 设置 “运动动画”层的第 1 帧与第 36 帧间动画补间属性为“运动(或移动)”。6. 调整第 36 帧间的动作动画补间的“简易”属性值为+100。“简易”值的设置如下图所示。7. 按 Ctrl+Enter 键测试影片,观察动画效果。8. 修改无误后,保存文件,输出“动作补间动画.swf”。(三)遮照动画
17、的制作。1.新建 Flash 8 文件,将舞台的背景颜色设置为黑色,并在舞台上创建文本“Flash8”,2.在这层之上新建一图层,然后在舞台上画个圆,将圆转化为图形元件。3. 将第 15 帧插入关键帧,并且将圆的位置移动到右端。然后做圆的动作补间动画。4. 在圆的图层名称上鼠标右键单击,在弹出的菜单中选择遮罩层,这样可以看到效果。5.按 Ctrl+Enter 键测试影片,观察动画效果。6.修改无误后,保存文件,输出“遮照动画.swf”。(四)引导路径动画的制作。1.在舞台上第一帧用椭圆工具,在混色器面板上设置填充样式为“放射状”,左色标为白色,右色标为土褐色,在舞台上画一个的正圆。2.单击“添加运动引导层”按钮 ,选中引导层的第 1 帧,用椭圆工具画一无填充色的白线条椭圆,居中后用工具栏中的橡皮擦工具在椭圆左半部分擦出一个小缺口。3.选中“小球”第 1 帧,将月亮实例拖到椭圆小缺口的右边端点上,并使小球的中心点紧扣在椭圆弧线上。4.在月亮图层的第 60 帧插入一个关键帧,在引导层的第 60 帧插入一个关键帧。5.选中小球图层的第 60 帧,把舞台上的小球拖移到小缺口的另一端点上,同样让小球的中心点紧扣在椭圆弧线上。6.选中小球图层第 1 帧,创建“动作” 补间动画,测试影片。