第4章 基础动画制作

模块四基础动画制作本章要点逐帧动画动画补间动画形状补间动画一、动画的基础知识1、逐帧动画：逐帧动画完全由关键帧组成，每个关键帧都可以进行单独编辑，它需要用户对物体运动的基本规律有深入的了解，并且具有一定的绘图基础。利用逐帧动画可以做出任意的动画效果，但是由于每个关键帧都要进行编辑，所以逐帧动画工作量很大，而且制作出来的作品文件容量也很大。2、动画补间动画：动画补间动画可以完成对象的移动、缩放、旋转、变色等形式的动画效果。构成动画补间动画的元素是元件，除了元件，其他元素包括文本都不能创建动画补间动画。3、形状补间动画：形状补间动画可以完成图形的移动、缩放、形状渐变、色彩渐变等动画，它的作用对象只能是图形。和一般的动画补间动画有所不同，在使用形状变形时，不需要把绘制好的形状转换为元件，如果要使用元件实例创建形状补间动画，也要将改实例通过按快捷键Ctrl＋B分离后才可以实现。二、动画的制作1、逐帧动画的制作(1)、直接导入生成逐帧动画1、我们可以将绘制好的jpg、png等格式的静态图片连续导入到Flash中来建立一段逐帧动画,也可以通过导入gif序列图像、swf动画文件等的方法来建立一段逐帧动画2、下面通过一个“麦兜”的例子来讲解导入一个序列的图片生成逐帧动画的制作方法:①启动FlashCS3，出现FlashCS3窗口，如图4-1所示，在“新建”中选择“Flash文件（ActionScript3.0）”，建立一个新文档，如图4-2所示。图4-1FlashCS3开始窗口图4-2

新建Flash文档②单击“属性”面板上“大小”处的位置，如图4-3所示。图4-3“属性”面板③在弹出的“文档属性”对话框中设置舞台的宽度为“200像素”、高度为“300像素”、背景色为“白色”，其他均为默认值，如图4-4所示。

图4-4“文档属性”对话框

④单击“文档属性”对话框中的“确定”按钮，完成对文档属性的各项设置。

⑤单击菜单栏中的“文件”→“导入”→“导入到舞台”命令，或者按“Crtl＋R”组合键，打开“导入”对话框，如图4-5所示。图4-5

“导入”对话框

⑥在“导入”对话框中选择本书的配套素材“第四章/逐帧动画/素材”目录下的“麦兜1.jpg”图形文件，然后单击“打开”按钮，将其导入到舞台。⑦因导入目录下的文件是一组系列文件，则弹出如图4-6所示的询问对话框，单击“是”按钮将序列文件全部导入，此时Flash会自动把该图片序列按序号以逐帧形式导入到场景中，如图4-7所示。图4-6导入序列文件的询问对话框

图4-7导入的序列动画在场景的上方形成逐帧动画⑧单击菜单栏中的“控制”→“测试影片”命令，或者按Ctrl＋Enter组合键，对影片进行测试，效果如图4-8所示。

图4-8影片测试效果(2)创建逐帧动画1、我们也可以利用鼠标或者手写板，在Flash中绘制一帧帧的矢量图形来生成逐帧动画。也可以用文字来做帧中的对象，实现文字的跳跃、闪烁等特效。2、实例操作

飞翔的海鸥、打字效果下面以制作打字效果为例讲解逐帧动画①启动FlashCS3，建立一个Flash文档。②单击菜单栏中的“修改”→“文档”命令，在弹出的“文档属性”对话框中设置舞台的宽度为“600像素”，高度为“200像素”，背景色设置为“黑色”，其他均为默认值，如图4-26所示。图4-26“文档属性”对话框③选择“文本”工具（），并在“属性”面板中设置字体为“隶书”，字体大小为50，字体颜色为“蓝色”，粗体，对齐方式为左对齐，其他均为默认值，如图4-27所示。图4-26“文档属性”对话框④在舞台上输入文字“模拟打字效果”，然后按快捷键Ctrl＋B把段落文字分离成单个的文字，如图4-28所示。图4-28输入文字⑤单击菜单栏中的“修改”→“时间轴”→“分散到图层”命令，把单个的文字分散到不同的图层，然后把变成空层的“图层1”删除，如图4-29所示。图4-28输入文字

⑥选择“模”图层的第1帧，按住鼠标左键，把该关键帧拖到该层的第3帧；用同样的方法，把“拟”图层第1帧处的关键帧拖到该层的第6帧；把“打”图层第1帧处的关键帧拖到该层的第9帧；把“字”图层第1帧处的关键帧拖到该层的第12帧；把“效”图层第1帧处的关键帧拖到该层的第15帧；把“果”图层第1帧处的关键帧拖到该层的第18帧，此时“时间轴”面板如图4-30所示。图4-30移动关键帧的位置图

⑦在“时间轴”面板中，选择“模”图层的第25帧，按住键盘上的Shift键，选择“果”图层的第25帧，将所有图层的第25帧都选中，然后按键盘上的F5键，在所有图层的第25帧都插入普通帧，效果如图4-31所示。4-31完整的打字效果

⑧单击菜单栏中的“控制”→“测试影片”命令，对影片进行测试，效果如图4-32所示。

图4-32影片测试效果2、动画补间动画的制作①动画补间动画是Flash中最常使用的一种动画形式，使用动画补间动画可以制作出对象的移动、旋转、色彩、放大缩小、透明度等变化的动画。在动画补间动画中使用的对象只能是元件，包括影片剪辑、图形元件、按钮等，除了元件，其他元素包括文本都不能创建动画补间动画。其他矢量图、位图、文本等都必须要转换成元件，才可以利用它们制作动画补间动画。②在制作动画补间动画时，每一段动画中只能使用一个对象，如果同一时间要实现多个不同对象的运动，可以使用多个层来实现多个对象的动画补间。(1)、动画补间动画简介(2)在FlashCS3中创建动画补间动画的两种方法：①在动画的两个关键帧之间选择任意一帧，然后单击鼠标右键，在弹出来的快捷菜单中选择“创建补间动画”命令，就可以创建出动画补间动画，如图4-33所示。虽然采用这种方法创建动画补间动画表面上不用元件实例也可以，但是Flash会在库面板中自动生成“补间1”、“补间2”……的图形元件，这对元件的管理不利。图4-33右键弹出菜单②在动画的两个关键帧之间选择任意一帧，然后在“属性”面板中的“补间”下拉菜单中选择“动画”选项就可以创建动画补间动画，如图4-34所示。图4-34

“属性”面板③在创建动画补间动画时，如果动画创建成功，在两个关键帧之间会形成一个具有淡蓝色背景的实线箭头，如图4-35所示；如果如果在两个关键帧之间形成的是一条虚线，如图4-36所示，说明动画没有创建成功，原因可能是动画的对象不是同一个对象，也可能是关键帧丢失或者动画对象的类型不对。图4-35创建成功的动画补间动画图4-36创建失败的动画补间动画（2）、动画补间动画的参数设置在创建动画补间动画后，在“时间轴”面板上单击动画的起始帧，打开“属性”面板，在“属性”面板上可以看到如图4-37所示的选项。图4-37动画补间动画的参数1、“缓动”选项该项用于设置对象的运动方式，即加速运动或减速运动。在“0”边有一个滑动条，单击后上下拉动滑条或填入具体的数据，动画补间动画会随之发生相应的变化。输入-1到-100之间的数值，动画运动的速度由慢到快，朝运动结束的方向加速度补间。输入1到100之间的数值，动画运动的速度由快到慢，朝运动结束的方向减速度补间。默认情况下，补间帧之间的变化速率是不变的，即“0”。2、“旋转”选项该项用于设置运动对象的旋转方式，其下拉菜单有4个选项。无：禁止元件实例旋转。自动：使元件实例根据起始帧与结束帧上的放置角度，自动进行旋转。顺时针：使元件实例在运动时顺时针旋转相应的圈数。逆时针：使元件实例在运动时逆时针旋转相应的圈数。3、“调整到路径”复选框选中该复选框，将对象的基线调整到运动路径，此项功能是用于引导线运动的，我们将在下一章介绍它。4、“同步”复选框选中该复选框，可以使图形元件实例内部动画的播放和舞台中的动画播放同步。5、“贴紧”复选框选中该复选框，可以根据注册点将动画对象吸附到运动路径上，此项功能也是用于引导线运动的。（3）、几种渐变动画1、位移渐变动画

位移渐变动画是指动画对象从一个位置移动到另外一个位置的动画效果。在制作这种类型的动画时可以创建两个关键帧，在这两个关键帧中放置需要运动的对象，然后在这两帧中分别把对象放置到运动的起点和终点上，最后在这两个关键帧中创建动画补间动画，就可以完成对象的位移动画。下面通过一个“运动的小球”的动画来说明对象位移动画的制作方法，具体操作步骤如下①启动FlashCS3，建立一个Flash文档。②单击菜单栏中的“修改”→“文档”命令，在弹出的“文档属性”对话框中设置舞台的宽度为“500像素”，高度为“200像素”，其他均为默认值，如图4-38所示。图4-38“文档属性”对话框③选择“椭圆”工具，在“属性”面板中设置其笔触颜色为无（），填充为一个红色的放射状渐变填充（），如图4-39所示，按住Shift键在舞台的最左面拖出一个正圆，如图4-40所示。图4-39“属性”面板图4-40绘制素材小球④选中绘制好的小球，单击菜单栏中的“修改”→“转换为元件”命令，在弹出来的“转换为元件”对话框中，设置名称为“小球”，类型为“图形”，如图4-41所示。图4-41“转换为元件”对话框⑤选择在“时间轴”面板上“图层1”的第30帧，在键盘上单击F6键，在第30帧插入关键帧，此时第30帧的关键帧上产生了和第1帧完全相同的副本。⑥在“图层1”的第30帧处按住Shift键把舞台上的“小球”元件水平拖动舞台的最右面，如图4-42所示。图4-42改变第30帧小球的位置⑦在“图层1”的第1帧和第30帧之间选择任意一帧，在“属性”面板中的“补间”下拉菜单中选择“动画”选项，设置缓动的值为-60，如图4-43所示。图4-43“属性”面板⑧单击菜单栏中的“控制”→“测试影片”命令，，对影片进行测试，效果如图4-44所示。

图4-44影片测试效果2、旋转渐变动画旋转渐变动画就是设置动画对象如何转动，在制作此类动画补间动画时，应注意动画对象的类型必须是元件的形式。对象的旋转一般都是通过“属性”面板进行设置的，通过“属性”面板我们可以设置对象旋转的方向和旋转的次数等属性。前面的“运动的小球”动画我们在测试时可以看到小球只是水平向右运动，与现实中球的运动规律不符，下面我们就前面的“运动的小球”动画进行修改，让小球在水平运动的同时再旋转，使小球的运动更自然。具体操作步骤如下：

①接上例的文件，在“图层1”的第1帧和第30帧之间选择任意一帧，在“属性”面板中的“旋转”下拉菜单中选择“顺时针”，3次，如图4-45所示。图4-45“属性”面板②按Ctrl＋Enter组合键，对影片进行测试，效果如图4-46所示。

图4-46影片测试效果3、色彩渐变动画色彩渐变动画就是设置对象颜色、亮度、透明值的变化动画，对象色彩渐变的补间动画与对象旋转渐变的补间动画一样，对象类型必须是元件的形式，因为只有元件的实例才能设置色彩的变化，其他对象不能。实例操作：“星空”动画4、大小渐变动画对象的大小渐变动画主要指对象形状上的变化，如对象的大小、扭曲、水平和垂直翻转等。在制作大小渐变动画时，对象也必须是元件形式。实例操作：“大海”的实例动画。3、形状渐变动画的制作①形状补间动画是补间动画的另一种表现形式，它的作用是使一种物体的形状变化为另外一种形状，在形状变化的同时颜色、位置等也可以随之变化。形状补间动画与动画补间动画的不同在于，形状补间动画是对两个不同的图形对象来进行补间，而动画补间动画是针对同一个对象的不同变化来进行补间的。因此在形状补间动画中作用的动画对象只能是图形，所以在使用形状变形时，无需也不能把绘制好的形状转换为元件，如果要使用现有的元件或文字创建形状补间动画，也要先将元件实例或文字通过按Ctrl＋B分离后才能实现。②虽然形状补间动画也能实现对象的移动、放大缩小、色彩、透明度等变化，但是在通常是情况下一般不会使用形状补间动画来创建这些变化，而是通过动画补间动画来实现，这是因为使用形状补间创建动画，Flash在保存时会记录每一个关键帧上的图形，文件体积较大，而动画补间动画中通常使用的是元件，Flash只要记录一次就可以了。所以在制作动画时，如果能用动画补间动画实现的变化最好不要使用形状补间动画。（1）、简介（2）创建形状补间动画有以下两种方法：

①在动画的两个关键帧之间选择任意一帧，然后单击鼠标右键，在弹出来的快捷菜单中选择“创建补间形状”命令，就可以创建出形状补间动画，如图4-75所示。图4-75右键弹出菜单②在动画的两个关键帧之间选择任意一帧，然后在“属性”面板中的“补间”下拉菜单中选择“形状”选项就可以创建形状补间动画，如图4-76所示。图4-76“属性”面板③在创建形状补间动画时，如果动画创建成功，在两个关键帧之间会形成一个具有淡绿色背景的实线箭头，如图4-77所示；如果如果在两个关键帧之间形成的是一条虚线，如图4-78所示，说明动画没有创建成功，可能是动画对象不是图形，需要将它转化为一个图形。图4-77创建成功的形状补间动画图4-78创建失败的形状补间动画（3）形状补间动画的参数设置在创建形状补间动画后，在“时间轴”面板上单击动画的起始帧，打开“属性”面板，在“属性”面板上可以看到如图4-79所示的选项。图4-79形状补间动画的参数“缓动”选项：这个选项的作用和动画补间动画一样，在此不再赘述。2.“混合”选项：“混合”选项的作用是设置动画中间的形状变化模式的。①分布式：使创建的动画的中间形状比较平滑和不规则。②角形：使创建的动画的中间形状保留明显的角和直线。（4）形状渐变动画1、形状补间动画和动画补间动画类似，也是在两个关键帧之间创建动画。在Flash中，只需要绘制发生变化的两个图形，然后在两个关键帧上设置形状补间模式，就可以产生一系列的2、下面通过一个简单的“变形”的动画来介绍创建形状补间动画的方法①启动FlashCS3，建立一个Flash文档。②选择“椭圆”工