《Flash动画简明教程》第3章

1、第3章 简单动画的生成,2007年1月8日,1,学习目标： 1、了解动画的形成原理 2、简述动画的分类 3、理解元件、实例和库的概念，熟 练元件的创建、编辑和库的操作 4、理解简单动画的制作步骤，会进 行简单运动补间动画的创建,2007年1月8日,2,3.1 动画原理 3.2 元件、实例和库 3.3 帧的分类和操作 3.4 场景的使用 3.5 简单动画的生成,2007年1月8日,3,3.1.1 动画的形成原理,动画是通过播放连续的静态图像所形成的一种动态幻觉，此种幻觉是利用人类生理上“视觉暂留”现象和心理上的感官经验来形成的。“视觉暂留”是指生理上视觉残像的现象，即当眼睛观看动画时，一个画面已

2、经结束了，但在视网膜仍残留图像刹那间的印象记忆，而“心理偏好作用”则是指在视觉感官经验当中，趋向将连续类似的图像在脑中组织起来的心理作用，大脑会将此信息辨识为动态的图像，使两个画面之间形成顺畅的衔接，把连续图像当成是不同位置的同一对象，从而产生视觉动感。,2007年1月8日,4,3.1.2 动画的播放,动画的播放速度以fps (frame per second, 帧每秒)为计算单位，即每秒播放多少帧。根据统计，人类视觉的反应时间为0.04秒左右，每秒播放25个帧以上，人类便不易发觉其中的差异。 Flash也是利用播放连续帧的方式产生动画效果。Flash默认动画效果是每秒12帧，虽然动画的连续动

3、作可能有些不顺畅，但是考虑到需要在网络上播放，文件的容量应较小，所以这样设置也是较为合理的。,2007年1月8日,5,3.1.3 动画的分类,3.1.3.1 逐帧动画 是由一幅幅内容相关的图像组成的连续画面，就象电影胶片或卡通画面一样，要在每一帧中绘制一个不同的画面，然后连续播放。以上，人类便不易发觉其中的差异。,2007年1月8日,6,3.1.3.2 补间动画 只需设定动画的起始帧和终点帧中的画面，中间的过程由Flash自动生成。补间动画又分为运动补间动画和形状补间动画。 （1）运动补间：定义符号、实例、组合体或文本块在时间轴某一帧中的属性，如位置、大小、颜色和旋转等，然后在另外的关键帧中改

4、变这些属性，例如运动的小鼠、自由落体的小球、飞舞的雪花等。 （2）形状补间：在时间轴的某一帧中绘制形状、矢量线条或导入外部素材，然后在另外的关键帧中修改这个形状，完成形状的平滑转变；例如将一个正方形变成圆形、字母A变成字母B等。,返回,2007年1月8日,7,3.2 元件、实例和库,我们在创作和编辑Flash动画时，经常会用到元件、实例和库，它们在动画的编辑过程中有着重要的地位；除此之外，正是由于使用了元件和实例（还包括矢量图形技术），才使得Flash动画容量较小，可在网络上广泛传播。 元件创建后保存在库中，可重复使用；实例是元件的复制品，当我们使用某一元件时，需打开对应的库窗口，然后选中要使

5、用的元件，拖动到舞台的编辑区，被拖入的元件称为该元件的实例；库是Flash动画中所有可以重复使用的元素的出仓库，各种元件都放在库中，使用时可从库中调用。,2007年1月8日,8,3.2.1 元件的创建,3.2.1.1 元件的分类 元件包括图形元件、按钮元件和电影剪辑元件，所有的元件一经创建就保存在库中，可以反复使用，使用元件可以简化Flash动画的创作和编辑过程，减少了重复工作。图形元件可以是导入的位图图形、矢量图形、文本对象和Flash工具创建的线条、图形等。按钮元件主要用于动画的交互使用；电影剪辑元件则可以理解为重复使用的一段动画。由于图形元件使用较多，本章中以此为例，按钮元件和电影剪辑元

6、件在后续章节中会陆续讲到。,2007年1月8日,9,3.2.1.2 将所选的图形转换为图形元件 制作步骤： 步骤1 打开“素材库中第三章转换元件”文件, 选中图中的卡通造型,如图3-2所示。,图3-2 “转换元件”文件,2007年1月8日,10,步骤2 选择菜单的“修改转换为元件”命令,弹出“转换为符号”对话框,在“名称”文本框中输入元件的名称“可爱的小鼠”，在“行为”中选择“图形”，如图3-3所示，然后单击“确定”按钮。,图3-3 “转换元件”文件,2007年1月8日,11,步骤3 这时在库面板中（或选择“窗口库”命令,打开相应的库）会生成相应的元件，如图3-4所示。,图3-4 库面板中的元

7、件,2007年1月8日,12,3.2.1.3 新建图形元件 在创建动画的过程中，很多情况下是先创建一个空白元件，然后编辑元件相应的内容。 制作步骤： 步骤1 新建一个空白文档，选择菜单的“插入创建新元件”命令,弹出“创建新元件”对话框,输入名称椭圆，如图3-5所示。,图3-5 “创建新元件”对话框,2007年1月8日,13,步骤2 选中工具箱中的【椭圆工具】，设置【笔触颜色】为无色 ，【填充颜色】为“绿色到黑色”的径向渐变颜色；拖动鼠标左键在舞台上绘制一个椭圆，然后使用箭头工具选中后进行颜色填充，如图3-6所示。,图3-6 “创建新元件”对话框,2007年1月8日,14,步骤3 此时，如打开库

8、窗口，可以看到在库中增加了一个图形符号，同时在舞台上的椭圆周围淡蓝色的方框,表示此方框内的图形为元件在舞台上的实例, 如图3-7所示。,图3-7 库中图形元件和舞台上该元件的实例,2007年1月8日,15,3.2.2 实例的创建与编辑 3.2.2.1 实例的创建 制作步骤： 步骤1 新建一个空白文档，选择菜单的“窗口库”命令,打开元件库，此时库为空，如图3-8所示。,图3-8 元件库,2007年1月8日,16,步骤2 选择菜单的“文件导入导入到外部库”命令,打开“打开外部库”对话框，在文件的查找范围中找到“素材库中第三章实例操作”文件，如图3-9，然后单击“打开”。,图3-9 外部库和空的库,

9、2007年1月8日,17,步骤3 外部库-实例操作和新建库同时打开，如图3-10。选中外部库的元件拖动到舞台中作为实例，此时，在新建库中出现了实例操作库元件1，如图3-11，这样就可以把其它的Flash动画中的元件通过实例使用到我们创作的动画中了。,图3-10 “作为库打开”对话框,2007年1月8日,18,图3-11 实例与库,2007年1月8日,19,3.2.2.2 实例的编辑 舞台中的实例创建后，可以修改实例的各种属性，包括名称、大小、位置、倾斜、颜色和透明度等，然后在以新的名称保存在库中。 舞台上的图形可转化为元件，元件拖动到舞台是实例。相反，也可将实例打散，成为图形后，重新编辑保存为

10、元件。选中舞台上的实例，执行“修改”“分离”命令即可将实例打散，实例打散后，具有图形的一切属性，可以使用工具箱中工具进行修改。,2007年1月8日,20,3.2.3 库的使用 库是Flash动画中可重复使用元素的存储仓库，所有的元件创建后就保存在库中，导入的外部素材，如图像、声音、视频等也保存在库中。通过库可以对其中的各个元件进行操作，为动画的编辑带来很大的方便。 3.2.3.1 库面板 要正确地使用库中的工具进行编辑，需要了解库面板的组成。可以使用菜单中的 “窗口”“库”命令或按快捷键“Ctrl+L”，即可对当前文件中的库面板进行操作，如图3-13所示。,2007年1月8日,21,图3-13

11、 库面板花儿朵朵,2007年1月8日,22,3.2.3.2 库的分类 库可分为打开文件的库和系统提供的公共库，打开文件的库中存放是当前打开的文件中所使用的元件，可通过执行菜单中的“窗口”“库”命令打开，只可在当前文件中使用，如要使用其它文件中的库，需要“导入”后方可。公共库中则是系统创建的，可通过执行“窗口其它面板公共库”命令打开，其中元件分为学习交互、按钮和类三种，其中按钮非常丰富，使用较多，可使用在任意Flash文件中。,返回,2007年1月8日,23,3.3.1 帧的分类 不同的动画任务需要不同类型的帧，利用时间轴中时间线的标尺，可以看到帧的类型并进行编辑，不同的帧其标识也不尽相同。 3

12、.3.1.1 空帧 空帧，又称空白帧，如图3-14所示，实际上不是真正的帧，而是些矩形框，该矩形中没有任何图形。在创建Flash动画时，经常会有没内容的空帧，动画播放时，需要有实际内容的帧，如果每个图层中都是空帧，该动画就是一片空白，没有任何意义了。,图3-14 空帧,2007年1月8日,24,3.3.1.2 关键帧 关键帧，如图3-15所示，是用来定义动画中的变化，包括对象的运动状态和属性(如大小、位置、形状和颜色蹬)的改变。在创建动画的过程中，如果想希望动画发生改变或发生某种动作，必须要使用关键帧。,图3-15 起始关键帧和结束关键帧,2007年1月8日,25,一般来说，大多数关键帧中是包

13、含内容的，但也可以为空，用空心的“”表示，称为空白关键帧；在对关键帧进行了动作设置后，在关键帧上有一个“a”，具体的不同的关键帧及表示见表3.2所示。,2007年1月8日,26,3.3.1.3普通帧 普通帧也称为静态帧，它显示的是同一图层中最后一个关键帧的内容。在时间轴上，普通帧必须跟在关键帧的后面，在使用时，一般为了增加最后一帧动画的播放时间，即动画播放结束时定格在最后一帧，需要在动画的最后关键帧后面添加普通帧；当然同时也会增加动画的播放时间，如图3-16所示。,图3-16 在结束关键帧后添加了普通帧,2007年1月8日,27,3.3.1.4过渡帧 过渡帧是指位于起始关键帧和结束关键帧中间的

14、帧，在Flash中按其动画的处理方式一般分为两种类型的过渡帧：运动补间的过渡帧和形状补间的过渡帧，简称运动过渡和形状过渡。利用运动过渡来处理动画中定义的元件、实例、组合体或文本块在时间轴属性，如位置、大小、颜色和旋转的变化；形状补间过渡则是图像的变形。 动作过渡帧至少需要用两个关键帧来标识，中间浅蓝色的背景即是过渡帧，形状过渡帧也是需要由两个关键来标识，中间浅绿色的背景即是过渡帧，有问题的过渡帧，一般为关键帧丢失，中间是用虚线来标识。,2007年1月8日,28,3.3.2 帧的操作 不同的动画任务需要不同类型的帧，利用时间轴中时间线的标尺，可以看到帧的类型并进行编辑，不同的帧其标识也不尽相同。

15、 3.3.2.1 帧的选中 要想对帧进行操作，需要先选中帧。 单独一个帧的选择，操作如下：把鼠标指向该帧，单击左键，即选中，第三帧被选中，为当前帧，此时单击鼠标右键会弹出该帧的快捷菜单，进行对帧的各项操作。 选择多个帧，如果帧是连续的帧，可用鼠标或键盘上的功能键进行操作。鼠标操作如下：单击帧范围中的第一个帧，拖动鼠标到需要选择的最后一帧，然后释放鼠标，所有被选中的帧会高亮显示；功能键操作如下：单击选中帧范围中的第一个帧，按下“Shift”键，最后单击鼠标选中范围最后一帧。如果是不连续的帧，单击选中帧范围中的第一个帧，按下“Ctrl”键，最后单击鼠标选中范围最后一帧。,2007年1月8日,29,

16、3.3.2 帧的操作 不同的动画任务需要不同类型的帧，利用时间轴中时间线的标尺，可以看到帧的类型并进行编辑，不同的帧其标识也不尽相同。 3.3.2.1 帧的选中 要想对帧进行操作，需要先选中帧。 单独一个帧的选择，操作如下：把鼠标指向该帧，单击左键，即选中，第三帧被选中，为当前帧，此时单击鼠标右键会弹出该帧的快捷菜单，进行对帧的各项操作。 选择多个帧，如果帧是连续的帧，可用鼠标或键盘上的功能键进行操作。鼠标操作如下：单击帧范围中的第一个帧，拖动鼠标到需要选择的最后一帧，然后释放鼠标，所有被选中的帧会高亮显示；功能键操作如下：单击选中帧范围中的第一个帧，按下“Shift”键，最后单击鼠标选中范围

17、最后一帧。如果是不连续的帧，单击选中帧范围中的第一个帧，按下“Ctrl”键，最后单击鼠标选中范围最后一帧。,2007年1月8日,30,3.3.2.2 帧的添加 要在时间轴添加普通帧、关键帧或空白关键帧，操作如下：先选中帧或帧的范围，选择菜单中的“插入”“时间轴” “帧（关键帧、空白关键帧）”命令后，如图3-19所示，则相应的帧被添加了。,图3-19 帧的插入命令,2007年1月8日,31,3.3.2.3 帧动作的添加 要在帧中添加动作，操作方法如下：单击选中需要添加动作的关键帧，选择菜单中的“窗口”“开发面板” “动作”命令后，如图3-20所示，在弹出的“动作帧”面板中添加相应的程序就可以了，

18、添加动作结束后，在该关键帧时出现了一个小“a”。,图3-20 帧的动作添加命令,2007年1月8日,32,3.3.2.4 帧的复制移动删除 要删除帧，操作方法如下：选中或帧的范围，选择“修改”“时间轴” “清除关键帧”命令后，则删除当前关键帧。 3.3.2.5 时间轴中帧的快捷菜单 当选中时间轴中帧后，右击鼠标，则弹出对应帧的快捷命令菜单，包括添加和删除帧、创建补间动画、复制和移动帧等命令。 3.3.2.6 帧的命名和注释 为帧命名和添加注释操作如下：先选中要命名或添加注释的关键帧，然后打开窗口下方的帧属性面板，选择标签类型为：名称或注释，在帧文本框中输入相应的内容即可。命名帧由一个红旗标识，

19、后面跟名称；注释帧由绿色的“/”表示；锚记帧由黄色的锚标识。,返回,2007年1月8日,33,.4.1 场景的管理 场景的管理包括添加和删除场景、场景的重命名、改变动画中场景的顺序。上述操作可以在如图3-25所示的场景面板中完成。 3.4.1.1 显示场景面板,图3-25 场景面板 图3-26 显示场景命令,要显示场景面板，操作方法如下：选择菜单中的“窗口”“设计面板” “场景”命令，如图3-26所示，或按组合键Shift+F2，在场景面板中，列出动画的创建的所有场景。,2007年1月8日,34,. 3.4.1.2 增加场景 要增加场景，操作方法如下：单击场景面板中的增加场景按钮，即创建了一个

20、新场景，默认的名称是：场景编号，时间轴则自动跳到新建场景的第1帧。 3.4.1.3 删除场景 要删除场景，操作方法如下：单击场景面板中的增加场景按钮，出现一个警告框，单击“确定”按钮，即将当前的选中场景删除。 3.4.1.4 重命名场景 要重命名场景，操作方法如下：从场景面板的场景列表中，双击要重命名的场景，出现场景名称的文本框，出现闪动的光标后，即可进行编辑，输入场景的新名称即可。 3.4.1.5 重新安排场景的顺序 要重新安排场景的顺序，操作方法如下：从场景面板的场景列表中单击要移动的场景名称，将该场景拖动到列表中新位置，则场景以新排列的顺序放映。,2007年1月8日,35,. 3.4.2

21、 场景的复制 场景的复制是指制作场景的副本，包括场景中的所有帧、层、动画，也就是制作一个新场景。操作方法如下：从场景面板的场景列表中单击要复制的场景名称，单击复制场景按钮，则把选中的场景复制，并显示在场景列表中。,返回,2007年1月8日,36,本节以简单运动补间动画的创建运动的小鼠为例，讲述动画的制作流程。,制作步骤： 步骤1 设置动画属性：在制作动画前，首先应该设置动画的尺寸大小、背景颜色、播放速度和时间等属性。 1、在【开始】菜单中启动Flash MX 2004,在运行窗口中选择创建新项目中的Flash文档选项，创建一个新的动画。,2007年1月8日,37,2、选择菜单的“修改文档”命令，如图3-28所示,打开文档属性对话框, 如图3-29所示,在此对话框中,就可以设置动画的属性了。,图3-28 文档属性菜单 图3-29 文档属性对话框,2007年1月8日,38,3、在尺寸的【宽】中输入动画的宽度为400px，在尺寸的【高】中输入动画的高度为200px，如图3-30所示；选中【背景颜色】右边的颜色框，选择背景的颜色为“浅紫色” 。,图3-30 动画属性设置对话框,2007年1月8日,39,步骤2 元件的导入 选择菜单的“文件导入导入到外部库”命令,打开“打开外部库”对话框，在文件的查找范围中找到“素材库中第三章运动的小鼠”文件，然后单击“打开”，完成从外部