《二维flash动画制作》第4章 基本动画的制作

第2部分强化篇——让对象动起来第4章基本动画的制作4.1Flash动画概述4.2逐帧动画的制作4.3补间动画的制作4.4补间形状动画的制作4.5传统补间动画的制作4.6上机实习4.1Flash动画概述4.1.1帧

4.1.2图层

4.1.1帧1、什么是帧二维动画的基本原理是每秒钟播放24幅（格）图像，这是由人眼的生理特点决定的，因为人眼能够分辨的最短时间差异是0.15秒，所以当时间相隔很小的两幅变化很小的画面先后闪过人眼时，视觉是察觉不出来的。由于每两格之间的画面差异很小，这样一系列的画面串起来后就形成了动态视觉效果，这也是Flash动画的基本原理。帧是构成Flash动画的基本单位，在播放Flash动画时，会依次显示每一帧的内容，所以也可以将帧看做是Flash动画中按照规定时间速率停留时间最短的画面。如图4.1所示，【时间轴】面板上每一个小格便代表一帧。图4.1【时间轴】面板上每一个小格便是一帧Flash影片放映速度的单位是帧每秒（fps：即每秒播放多少帧）。在舞台上的空白区域单击，我们便可以在窗口右侧的【属性】面板查看到当前Flash文档的帧频，如图4.2所示。FlashCS4默认的帧频是24，当然我们可以根据需要进行修改，帧频越高，影片播放越快，也越流畅、逼真。Flash能支持的最快的帧频为120fps。2、帧的类型帧主要有三种类型：普通帧、关键帧和过渡帧。其中关键帧又分为空白关键帧和关键帧，普通帧也分为普通帧和空白帧。帧类型的识别：如图4.3所示便为时间轴上表现出的不同类型的帧。图4.2【属性】面板中设置帧频关键帧：在Flash中，要表现动画的运动变化，一般都需要两个不同的关键画面，这两个关键画面即为关键帧。过渡帧：在两个关键帧之间，计算机自动完成的过渡画面的帧称为过渡帧。关键帧与过渡帧的区别：过渡帧从属于关键帧，过渡帧的前后都肯定有关键帧，但是两个关键帧的中间却可以没有过渡帧。当修改关键帧时，系统自动修改过渡帧，但是过渡帧无法修改该帧的内容。图4.3帧类型的识别3、帧的操作我们在Flash中经常需要对帧进行选择、移动、插入、删除等操作。选择帧：将鼠标移动到时间轴的帧上，当鼠标指针为白色箭头时，如果单击便可选中一个帧；如果在帧区域上拖动鼠标便可选择多个帧。当我们单击层时，层上的的所有帧对象便被选择。提示：按住键盘上的Ctrl键同时分别单击要选的帧，可以选择多个不连续的帧。按住Shift键同时分别单击要选的两帧，期间的所有帧均被选择。移动帧：当鼠标指针选择了需要的帧，鼠标右下角出现一个矩形框，按下鼠标左键不放，拖动选择的帧便可移动帧。插入帧：首先选择要插入帧的位置，然后单击鼠标右键，在弹出的快捷菜单中选择“插入帧”即可，同理可以插入关键帧、空白关键帧。插入帧就是延长前一关键帧的内容，而插入关键帧是将前一关键帧的内容复制到新插入的关键帧中。删除帧：选择要删除的帧后，单击鼠标右键，选择“删除帧”即可。4.1.2图层1、理解图层使用过图像编辑软件的读者对图层的概念应该不会陌生。图层是位于舞台的透明画布，在透明的图层上既可绘制图像，也可构思动画。由于图层是透明的，所以各个图层之间的动画不会互相影响，各图层相互重叠区域将优先显示上方图层的内容。在创建动画时，可以使用图层和图层文件夹来组织动画序列的组件和分离动画对象，这样它们就不会相互擦除、相连或分割。如果要让Flash一次创建多个组或元件的动画，每个组或元件就必须放置在独立的图层上。2、图层的编辑插入图层：用鼠标单击【时间轴】面板左下方的“新建图层”按钮，便可在当前选择的图层上方新建一个图层。删除图层：选中要删除的图层，单击【时间轴】面板左下方的“删除”按钮便可删除当前选中图层。如图4.4所示。更改图层名称：双击图层的名称，即可进入名称编辑状态并修改图层的名称，如图4.5所示。图4.5修改图层名称更改图层顺序：选择要更换顺序的图层，按下鼠标左键不放将其拖动到适当位置后释放鼠标即可，如图4.6所示。图4.4新建与删除图层图4.5修改图层名称4.6将云朵图层移至草地图层上方隐藏图层：单击图层面板的眼睛图标，可以看到所有图层的眼睛列都增加了一个不可见标识，表明隐藏了所有图层；再次单击眼睛图标，不可见标识消失，图层均可见。如果单击某个图层右侧的眼睛列，可以看到只有当前图层的眼睛列增加了一个不可见标识，表明只有该图层被隐藏；再次单击眼睛列，显示该图层。锁定图层：单击图层面板的锁定图标；可以看到所有图层的锁定列都增加了一个锁定图标，表明锁定了所有图层（被锁定的图层内所有内容都不可编辑）；再次单击锁定图标可以解除锁定（解除锁定后的图层内容才可编辑）。如果单击某个图层右侧的锁定列，可以看到只有当前图层的锁定列增加了一个锁定图标，表明只有该图层被锁定，再次单击锁定列，解除锁定。4.2逐帧动画的制作4.2.1逐帧动画的创建

4.2.2实践与练习：漂亮的圣诞树4.2.1逐帧动画的创建逐帧动画通过更改每一个关键帧中的舞台内容来创建动画，最适合于复杂的动画。逐帧动画会明显增加文件的大小。要创建逐帧动画，需要将每个帧都定义为关键帧，然后给每个关键帧创建不同的图像。1、绘制矢量逐帧动画如图4.7所示的“快乐的老头”动画就是一个逐帧动画，它的创作方法很简单，但是每一个关键帧都需要绘制或修改图像，做起来很繁琐，但是效果很精致。具体制作方法如下。图4.7快乐的老头在时间轴的当前图层内每隔两帧插入一个关键帧，一共插入8个关键帧，如图4.8所示。（如果依次插入关键帧动画速度会非常快，我们经常通过调整关键帧之间的间隔来更改动画的速度）依次在每个关键帧中绘制相应的动作片段图像，最后完成后测试动画。2、导入序列图像新建一个Flash文档后，选择“文件/导入/导入到舞台”菜单命令，选择光盘上的GIF动画图像“micky.gif”导入。这时可见在时间轴上自动创建了12个关键帧，舞台上自动形成了动画序列。测试动画，可以发现动画完整流畅，与我们使用看图软件打开“micky.gif”图像时看到的动画相同。但是细心的读者会发现舞台上形成的动画序列位于舞台的左上角，那么如何将整个动画放置在舞台中央处呢？解决方法为选择【时间轴】面板下方的“编辑多个帧”按钮，这时在帧刻度处调整编辑轮廓从第1帧延续到最后一帧，如图4.9所示，此时可以看到舞台上每一帧的内容。使用选择工具框选舞台所有内容后将所有图像一起移动至舞台中央即可。图4.8创建8个关键帧图4.9元件编辑模式的舞台提示：以上方法对于导入swf格式的动画文件、jpg、png等格式的静态连续图片同样适用。4.2.2实践与练习：漂亮的圣诞树这里我们通过动画“漂亮的圣诞树”的制作，让读者掌握逐帧动画的制作方法、图层的操作以及帧的编辑。1、新建一个Flash文档，文档尺寸保持默认，背景颜色设置为黑色，FPS更改为12。首先利用工具栏在舞台上绘制一个如图4.10所示的圣诞树。2、更改图层1的名称为“圣诞树”，选择图层1的第12帧后单击鼠标右键，选择“插入帧”命令，延长该图层内容至12帧，可以锁定“圣诞树”图层防止误操作。3、在图层1上方新建一个图层2，更改图层2的名称为“霓虹灯”，利用刷子工具在圣诞树上绘制六个闭合的圆圈，如图4.11所示。4、打开“颜色”面板，选择从浅橙色至深橙色的辐射状渐变，选择颜料桶工具为圆圈喷涂上渐变色。图4.10绘制的圣诞树图4.11绘制6个圆圈5、选择第3帧，按下键盘上的F6键即可插入一个关键帧，选择六个圆圈的渐变色后在“颜色”面板中将渐变色修改为浅粉色至深粉色的辐射状渐变。同理在第5、7、9、11帧插入关键帧并改变圆圈内的渐变颜色，如图4.12所示。6、测试并保存动画图4.12制作逐帧动画4.3补间动画的制作补间动画是Flash中最常用的一种动画效果，它可以被称为“渐变动画”。要创建补间动画，只需要建立起始和结束的画面即可，中间的部分由Flash软件自动计算生成渐变动画，省去了复杂的中间制作过程。这样制作的动画，也最大程度上减小了文件的大小。在以前版本的Flash中包含了形状补间动画和动作补间动画，而FlashCS4中新增了一种新的补间动画，让动画的制作更加简单。我们现在将三种主要的补间动画给大家简单介绍一下：补间动画：新增的动画类型，在制作过程中可以自动将选中的对象转换为元件，如图4.13所示。它的制作相对传统补间更加快速，而且可以通过修改线条来修改补间运动轨迹。补间形状：以前版本也称为形状补间动画，主要应用于不同形状之间的过渡变化，例如从星型到圆形的变化，从黑色到白色的变化等等。传统补间：以前版本也称为动作补间动画，制作的主体为元件的实例，并且起始和结束的关键帧必须放置的是同一个实例。涉及实例的缩放、位移、倾斜以及色调变化图4.13“将所选的内容转换为元件进行补间”对话框4.3.1补间动画1、制作方法在Flash时间轴上选择或者插入一个关键帧用于添加一个对象，然后在该帧上单击鼠标右键，选择“创建补间动画”命令。在需要变化的帧上修改对象后，计算机会自动在该帧上产生关键帧。补间动画可以实现元件的形变、位移、色调、渐变等效果，并由补间自动生成动画，运动轨迹是可以调整的。补间动画一旦建立后，相应的【时间轴】面板的背景色会变成蓝色，初始帧显示为黑色圆点，其它关键帧显示为黑色菱形点。如图4.14所示。2、注意事项当构成补间动画的对象是位图、形状、组合等时，创建补间动画的时候会自动将他们转换为元件；当构成补间动画的对象是元件的一个实例时，将直接创建补间动画；当构成补间动画的对象是多个元素时，在创建补间动画的同时都会将这些对象组合起来创建成一个元件，并生成补间。创建补间动画需要在舞台上有内容，所以空白关键帧是没法创建补间动画的。补间动画不支持两个关键帧之间的补间，只能在一个关键帧中创建修改，并且补间动画还包含了3D动画的功能。图4.14创建补间动画后的【时间轴】面板图4.15不同情况下创建补间动画产生的动画长度当【时间轴】面板上只有一个关键帧，并且该关键帧内容没有被延长时，创建的补间动画帧数与该文档的帧频相同；当在关键帧后插入了普通帧延长后，创建的补间动画帧数将依据实际帧数，如图4.15所示。当然这些默认产生的帧数是可以更改的，将鼠标定位在动画最后一帧，当鼠标成状时，拖动鼠标便可以改变帧数。3、补间动画的【属性】面板当我们建立了一个补间动画后，单击帧便会出现如图4.16所示的【属性】面板。【补间动画】名称项：用于给补间动画取一个实例名称，主要在编写动作脚本时用到。【缓动】项：取值范围为-100—100，设置动画的加速度。当为负值时动画加速运动，-100时最快；当为正值时动画减速运动，100时最慢。当为0时匀速运动。【旋转】项：“旋转”后面可以设置旋转的次数；“+”后可以设置其它旋转的角度；【方向】项：设置旋转是按照顺时针方向还是逆时针方向。【调整到路径】项：一旦选中后，会将旋转应用到路径，设置的旋转和其它旋转将会失效恢复到初始状态，元件符合路径运动。提示：当旋转设置为顺时针1次，“+”设置为20°，最后旋转的度数为380°。【路径】项：“X”值用于舞台中路径的横向调整（正值向右移动，负值向左移动）；“Y”值用于舞台中路径的纵向调整（正值向下移动，负值向上移动）；“高度”用于调整补间路径的整体高度（取值范围1—9999）；“宽度”用于调整路径的整体宽度；将高度与宽度锁定在一起，调整宽或高中任意数值将会成比例放大或缩小。【同步图形元件】项：勾选此项所做的调整会同步到元件上。图4.16补间动画【属性】面板4.3.2实践与练习：文字飞入动画这里我们通过“文字飞入”动画的制作，让读者掌握补间动画的制作方法。1、新建一个Flash文档，利用文本工具在舞台输入为本“TEXT”，设置字体为“HoboStd”，大小为48，颜色为橙色。选中字体后，在【属性】面板“滤镜”区域单击左下方的“添加滤镜”按钮，在弹出的菜单中选择“投影”，如图4.17所示。图4.17添加投影滤镜图4.18字体样式2、这时得到的字体如图4.18所示，为制造飞入效果，将文字移动到舞台外面，作为初始位置。在第1帧单击鼠标右键，选择“创建补间动画”命令，即创建了一个24帧的补间动画（FPS为24），将鼠标移动到最后一帧，当鼠标成状时，拖动鼠标至60帧的位置，此时动画延长至60帧。3、我们选择60帧，水平拖动文字到舞台外右侧，如图4.19所示。图4.19文字的起始和终点位置4、选择第30帧，将文字垂直拖动到舞台下方，这时可见路径上多了一个锚点，此锚点为角点。选择转换锚点工具拖动该锚点，调整路径的样式如图4.20所示。5、保存并测试文件。图4.20在30帧处修改路径4.4补间形状动画的制作4.4.1补间形状动画4.4.2实践与练习：气球变礼帽动画

4.4.3使用形状提示

4.4.1补间形状动画1、制作方法在Flash中，在一个关键帧上绘制一个形状（不能是组合或者元件），然后在另一个关键帧上修改或另外绘制一个形状，此时创建补间形状后Flash会自动根据绘制好的帧中的值或形状来创建动画。补间形状动画建立后，【时间轴】面板相应部分的背景色会变成浅绿色，在起始帧和结束帧之间会出现一条长长的箭头表明动画创建成功，如图4.21所示。2、补间形状动画的【属性】面板：当我们建立了一个补间形状动画后，单击帧便会出现如图4.22所示的【属性】面板。【缓动】项：上一节我们已经讲到过，不再赘述。【混合】项：有“分布式”和“角形”两个选择。选择“分布式”选项，所创建动画中的补间形状比较平滑，并且不规则；选择“角形”选项，所创建动画中补间形状保留明显的直线和角。图4.21创建补间形状动画后的【时间轴】面板图4.22补间形状动画【属性】面板4.4.2实践与练习：气球变礼帽动画这里我们通过“气球变礼帽”动画的制作，让读者掌握补间形状动画的制作方法。1、新建一个Flash文档，利用工具栏中的绘图工具在第一帧绘制一个气球，效果如图4.22所示。2、选择第40帧，单击鼠标右键，在弹出的快捷菜单中选中“插入空白关键帧”，利用绘图工具在该帧中绘制一顶礼帽，回到第1帧，单击鼠标右键，选择“创建补间形状”，这时可以看到【时间轴】面板相应部分的背景色变成了浅绿色，而且起始帧与结束帧之间会出现一个箭头。效果如图4.23所示。3、测试并保存动画。图4.23起始帧的绘制的气球4.4.3使用形状提示图4.24结束帧的绘制的礼帽从上面的例子可以看出来，补间形状动画制作起来很简单，但是中间的变化是由计算机自己控制，所以有时变化十分的混乱和奇怪，尤其是起始和结束帧的形状差距很大的时候。如果想在变形的过程中控制变形的形式，就需要用到形状提示的功能，此功能能够控制变形的关键点，从而对补间形状动画的变形进行有效地控制。1、添加形状提示只需要在起始帧和结束帧的对象中添加相互对应的控制点便可控制变形的整个过程。现在我们将以一个翻页动画为例，讲解添加形状提示的方法：首先创建一个“背景”图层，用于绘制书页的背景。在“背景”图层上新建一个“翻页”图层，在起始帧绘制好左侧的书页，在结束帧插入关键帧，选择左侧书页后利用任意变形工具将其水平拖放到右侧，制造右侧书页的样式，创建好补间形状动画，如图4.25所示。在补间形状动画的初始帧上选择图形对象,选择“修改/形状/添加形状提示”菜单命令，在补间形状动画的初始帧会出现一个带字母的红色圆圈。在结束帧也会同样出现一个提示圆圈，圆圈内的字母与初始帧相同。选择动画的初始帧，用鼠标选中提示圆圈将其拖放到第一个控制点上（最好放置在形状边缘线或者角点处）。然后选择动画的结束帧，用鼠标选中提示圆圈将其拖放到与初始帧相对应的位置。如果安放成功，系统会给你相应的提示，初始帧的圆圈由红色变成黄色，结束帧上的圆圈变成绿色；如果安放不成功或者不在一条曲线上时，提示圆圈的颜色不变，如图4.26所示。重复为书页的每个角点添加调整形状提示，以控制动画的变形过程，得到最后的效果如图4.27所示。预览动画，可以看到此动画在控制之下实现了翻页的效果，运动轨迹如图4.28所示。图4.25修改右侧书页的样式图4.26调整位置后的起始帧和结束帧的形状提示提示：添加形状提示时，按照一个方向进行放置时工作效果最好，例如按照逆时针方向放置或者顺时针方向放置。图4.27设置好所有形状提示的起始帧和结束帧图4.28翻页动画运动轨迹4.5传统补间动画的制作4.5.1传统补间动画

4.5.2实践与练习一：夏日海景动画4.5.3实践与练习二：小球自由落体动画

4.5.1传统补间动画1、制作方法在Flash中，在前后两个关键帧上放置同一个元件，然后在其中一个关键帧中改变此元件的颜色、大小、位置、透明度等，Flash会自动根据这两帧中元件的区别创建传统补间动画。建立传统补间动画后，【时间轴】面板相应部分的背景色会变成浅紫色，在起始帧和结束帧之间会出现一条长长的箭头表明动画创建成功，如图4.29所示。2、传统补间动画的【属性】面板当我们建立了一个传统补间动画后，单击帧便会出现如图4.30所示的【属性】面板。【缓动】项：前面我们已经讲到过，不再赘述。【旋转】项：有“无”、“自动”、“顺时针”、“逆时针”四个选项，其中“无”为禁止元件旋转；“自动”使元件在一定方向上旋转一次；“顺时针”和“逆时针”可以指定旋转的方向，并且可以在后面设置旋转的圈数。【贴紧】项：选择此项，对于补间的调整都会对我们添加的参考线进行贴紧。【调整到路径】项：主要用于引导线动画，选择此项后会将补间元素的基线调整到运动路径。【同步】项：选择此项，可使元件实例的动画与主时间轴同步。【缩放】项：可根据元件的注册点将补间元素附加到运动路径。图4.29创建传统补间动画后的【时间轴】面板图4.30传统补间动画【属性】面板

4.5.2实践与练习一：夏日海景动画这里我们通过“夏日海景”动画的制作，让读者掌握传统补间动画的制作方法以及如何通过【属性】面板控制动画的播放。1、新建一个Flash文档，将图层1命名为“背景”，利用工具栏的绘图工具在舞台上绘制如图4.31所示的海景，延长至120帧。2、锁定背景层，在“背景”图层上方新建一个图层，命名为“太阳”，利用绘图工具绘制好太阳后，调整好大小和方位，选择太阳转换为图形元件，在第120帧处插入关键帧，回到第1帧创建传统补间动画，在【属性】面板中将“旋转”设置为顺时针1次。3、锁定“太阳”层，在“背景”层上方新建一个图层，命名为“帆船”，利用绘图工具绘制好帆船后将其转换为图形元件，放置于舞台右侧外，在第120帧处插入关键帧，按住Shift键将帆船水平拖动到舞台左侧外，回到第1帧创建传统补间动画。4、测试并保存动画。图4.31背景层内容图4.32制作“太阳”图层动画图4.33帆船的运动路径4.5.3实践与练习二：小球自由落体动画这里我们通过“小球自由落体”动画的制作，让读者掌握传统补间动画的制作方法以及如何通过【属性】面板控制动画的播放。（本动画可以作为物理课件，表现的是没有阻力的理想状态下小球受万有引力的作用落地形变并恢复弹起的过程）1、新建一个Flash文档，将背景色修改为蓝色，将图层一命名为“地面”，利用线条工具，调整好笔触样式，在舞台底部绘制一条水平线条作为地面，如图4.34所示。选中第84帧，单击鼠标右键选择“插入帧”，将第1帧内容延长至84帧。2、可以锁定“地面”图层防止误操作，在它上方新建一个图层，命名为“小球”，绘制一个渐变的正圆，按F8键转换为图形元件，将注册点设置为中心点，利用任意变形工具将其调整到合适大小，将小球拖放到舞台上方中央位置，如图4.35所示。图4.34水平地面图4.35渐变的小球3、在第40帧处插入关键帧，按住键盘上的Shift键不放将小球垂直拖动下来，直到接触到地面。4、现在制作小球落地产生形变的部分，在第41帧插入关键帧，选择任意变形工具后将小球的中心点下移至下边缘中心，并且稍微缩小小球的高度；在第42帧插入关键帧，同上步骤，继续缩小小球的高度，如图4.36所示。6、复制第41帧，并在43帧处粘贴；复制第40帧，并在第44帧处粘贴，实现小球恢复变形的过程。7、复制第1帧，并且在84帧处粘贴，实现小球弹起回到原点的过程。回到第1帧，单击鼠标左键，选择“创建传统补间”，在【属性】面板中设置缓动参数为-100（速度最大程度的逐渐变快）；回到第44帧，创建传统补间动画，设置缓动参数为100（速度最大程度的逐渐变慢）。8、测试并保存动画。图4.36两次缩小小球的高度图4.37小球自由落体的轨迹4.6上机实习4.6.1完成项目中部分动画的创作

4.6.2

制作“发展成就”部分的区域标识

4.6.1完成项目中部分动画的创作

本项目一共有六个主要的画面，所以从现在开始，我们打开项目文件，进行以下操作。1、更改图层1名称为“背景图”，在第1帧导入光盘中的项目素材图像“image2.jpg”，利用【对齐】面板将图像置于舞台正中。完成后继续导入素材图像“image1.png”，调整其在“image2.jpg”上的位置，直至与项目效果相同。2、依次在“背景图”图层第2、3、4、5、6帧处插入另外五个关键帧，每个关键帧依次插入背景图像“image9.jpg”、“image16.jpg”、“image18.jpg”、“image35.jpg”、“image59.jpg”，让所有图像置于舞台正中。3、在“背景图”图层上方新建一个图层，取名为“首页动画”，选中首页动画的第2至第6帧，单击右键选择“删除帧”，只保留第一个关键帧，我们需要在里面制作首页图像切换的动画：在该帧导入图像“6.png”，调整好位置后选取图像，按下F8键将其转换为影片剪辑元件，双击该元件，进入元件编辑模式，以下操作都在元件编辑模式下进行。修改图层1名称为“6”，在第49帧单击鼠标右键选择“插入帧”，将第1帧内容延长至49帧。在第50帧单击鼠标右键选择“插入空白关键帧”，复