第4章基础动画制作

1、本章要点 l逐帧动画 l动画补间动画 l形状补间动画 1、逐帧动画： 逐帧动画完全由关键帧组成，每个关键帧都可以进行单独编辑，它需要 用户对物体运动的基本规律有深入的了解，并且具有一定的绘图基础。 利用逐帧动画可以做出任意的动画效果，但是由于每个关键帧都要进行 编辑，所以逐帧动画工作量很大，而且制作出来的作品文件容量也很大。 2、动画补间动画： 动画补间动画可以完成对象的移动、缩放、旋转、变色等形式的动画效 果。构成动画补间动画的元素是元件，除了元件，其他元素包括文本都 不能创建动画补间动画。 3、形状补间动画： 形状补间动画可以完成图形的移动、缩放、形状渐变、色彩渐变等动画， 它的作用对象只

2、能是图形。和一般的动画补间动画有所不同，在使用形 状变形时，不需要把绘制好的形状转换为元件，如果要使用元件实例创 建形状补间动画，也要将改实例通过按快捷键CtrlB分离后才可以实现。 1、逐帧动画的制作 (1)、直接导入生成逐帧动画 1、我们可以将绘制好的jpg、png等格式的静态图片连 续导 入到 Flash中来建立一段逐帧动画,也可以通过导入 gif序列图像、swf动画文件等的方法来建立一段逐帧动 画 2、下面通过一个“麦兜”的例子来讲解导入一个序列 的图片生成逐帧动画的制作方法: 启动Flash CS3，出现Flash CS3窗口，如图4-1所示， 在“新建”中选择“Flash文件（Ac

3、tionScript3.0）”， 建立一个新文档，如图4-2所示。 图4 -1 Flash CS3开始窗口 图4 -2 新建Flash文档 图4 -3 “属性”面板 在弹出的“文档属性”对话框中设置舞台的宽度 为“200像素”、高度为“300像素”、背景色为 “白色”，其他均为默认值，如图4-4所示。 图4 -4 “文档属性”对话框 单击菜单栏中的“文件”“导入”“导入到舞台” 命令，或者按“CrtlR”组合键，打开“导入”对话 框，如图4-5所示。 图4 -5 “导入”对话框 因导入目录下的文件是一组系列文件，则弹出如图 4-6所示的询问对话框，单击“是”按钮将序列文件 全部导入，此时Fla

4、sh会自动把该图片序列按序号以 逐帧形式导入到场景中，如图4-7所示。 图4 -6 导入序列文件的询问对话框 图4 -7 导入的序列动画在 场景的上方形成逐帧动画 图4 -8 影片测试效果 l1、我们也可以利用鼠标或者手写板，在 Flash中绘制一帧帧的矢量图形来生成逐帧动 画。也可以用文字来做帧中的对象，实现文 字的跳跃、闪烁等特效。 l2、实例操作 飞翔的海鸥 、打字效果 启动Flash CS3，建立一个Flash文档。 1. 单击菜单栏中的“修改”“文档”命令，在弹出 的“文档属性”对话框中设置舞台的宽度为“600像 素”，高度为“200像素”，背景色设置为“黑色”， 其他均为默认值，如

5、图4-26所示。 图4 -26 “文档属性”对话框 选择“文本”工具（），并在“属性”面板中设置字体为“隶 书”，字体大小为50 ，字体颜色为“蓝色” ，粗体，对齐方式 为左对齐，其他均为默认值，如图4-27所示。 图4 -26 “文档属性”对话框 在舞台上输入文字“模拟打字效果”，然后按快捷键Ctrl B把段落文字分离成单个的文字，如图4-28所示。 图4 -28 输入文字 单击菜单栏中的“修改”“时间轴”“分散到图层” 命令，把单个的文字分散到不同的图层，然后把变成 空层的“图层1”删除，如图4-29所示。 图4 -28 输入文字 图4 -30 移动关键帧的位置图 4 -31 完整的打字效

6、果 图4 -32 影片测试效果 动画补间动画是Flash中最常使用的一种动画形式， 使用动画补间动画可以制作出对象的移动、旋转、色 彩、放大缩小、透明度等变化的动画。在动画补间动 画中使用的对象只能是元件，包括影片剪辑、图形元 件、按钮等，除了元件，其他元素包括文本都不能创 建动画补间动画。其他矢量图、位图、文本等都必须 要转换成元件，才可以利用它们制作动画补间动画。 在制作动画补间动画时，每一段动画中只能使用一个 对象，如果同一时间要实现多个不同对象的运动，可 以使用多个层来实现多个对象的动画补间。 (1)、动画补间动画简介、动画补间动画简介 在动画的两个关键帧之间选择任意一帧，然后单击鼠标

7、右键， 在弹出来的快捷菜单中选择“创建补间动画”命令，就可以创 建出动画补间动画，如图4-33所示。虽然采用这种方法创建动 画补间动画表面上不用元件实例也可以，但是Flash会在库面板 中自动生成“补间1”、“补间2”的图形元件，这对元件的 管理不利。 图图4 -33 右键弹出菜单右键弹出菜单 在动画的两个关键帧之间选择任意一帧， 然后在“属性”面板中的“补间”下拉菜单 中选择“动画”选项就可以创建动画补间动 画，如图4-34所示。 图4 -34 “属性”面板 图4 -35 创建成功的动画补间动画 图4 -36 创建失败的动画补间动画 在创建动画补间动画后，在“时间轴”面板上 单击动画的起始帧

8、，打开“属性”面板，在 “属性”面板上可以看到如图4-37所示的选项。 图4 -37 动画补间动画的参数 l该项用于设置对象的运动方式，即加速运动或减速运 动。在“0”边有一个滑动条，单击后上下拉动滑条或 填入具体的数据，动画补间动画会随之发生相应的变 化。 l输入-1到-100之间的数值，动画运动的速度由慢到快， 朝运动结束的方向加速度补间。 l输入1到100之间的数值，动画运动的速度由快到慢， 朝运动结束的方向减速度补间。 l默认情况下，补间帧之间的变化速率是不变的，即 “0”。 该项用于设置运动对象的旋转方式，其下拉菜 单有4个选项。无：禁止元件实例旋转。 l自动：使元件实例根据起始帧与

9、结束帧上的放 置角度，自动进行旋转。 l顺时针：使元件实例在运动时顺时针旋转相应 的圈数。 l逆时针：使元件实例在运动时逆时针旋转相应 的圈数。 选中该复选框，将对象的基线调整到运动路径， 此项功能是用于引导线运动的，我们将在下一 章介绍它。 选中该复选框，可以使图形元件实例内部动画 的播放和舞台中的动画播放同步。 选中该复选框，可以根据注册点将动画对象 吸附 到运动路径上，此项功能也是用于引导 线运动的。 1、位移渐变动画位移渐变动画 位移渐变动画是指动画对象从一个位置移动到另外一个位置的 动画效果。在制作这种类型的动画时可以创建两个关键帧，在 这两个关键帧中放置需要运动的对象，然后在这两帧

10、中分别把 对象放置到运动的起点和终点上，最后在这两个关键帧中创建 动画补间动画，就可以完成对象的位移动画。 下面通过一个“运动的小球”的动画来说明对象位移 动画的制作方法，具体操作步骤如下 图4 -38 “文档属性”对话框 选择“椭圆”工具，在“属性”面板中设置其笔触 颜色为无（），填充为一个红色的放射状渐变填充 （），如图4-39所示，按住Shift键在舞台的最左面 拖出一个正圆，如图4-40所示。 图4 -39 “属性”面板 图4 -40 绘制素材小球 图4 -41 “转换为元件”对话框 选择在“时间轴”面板上“图层1”的第30帧，在键盘上单 击F6键，在第30帧插入关键帧，此时第30帧的

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

12、trlEnter组合键，对影片进行测试，效果如图4-46所示。 图4 -46 影片测试效果 l色彩渐变动画就是设置对象颜色、亮度、透明值的变 化动画，对象色彩渐变的补间动画与对象旋转渐变的 补间动画一样，对象类型必须是元件的形式，因为只 有元件的实例才能设置色彩的变化，其他对象不能。 l实例操作： “星空”动画 l 对象的大小渐变动画主要指对象形状上的变化，如对象 的大小、扭曲、水平和垂直翻转等。在制作大小渐变动画 时，对象也必须是元件形式。 l实例操作：“大海”的实例动画 。 形状补间动画是补间动画的另一种表现形式，它的作用是使一种 物体的形状变化为另外一种形状，在形状变化的同时颜色、位置

13、等也可以随之变化。形状补间动画与动画补间动画的不同在于， 形状补间动画是对两个不同的图形对象来进行补间，而动画补间 动画是针对同一个对象的不同变化来进行补间的。因此在形状补 间动画中作用的动画对象只能是图形，所以在使用形状变形时， 无需也不能把绘制好的形状转换为元件，如果要使用现有的元件 或文字创建形状补间动画，也要先将元件实例或文字通过按Ctrl B分离后才能实现。 虽然形状补间动画也能实现对象的移动、放大缩小、色彩、透明 度等变化，但是在通常是情况下一般不会使用形状补间动画来创 建这些变化，而是通过动画补间动画来实现，这是因为使用形状 补间创建动画，Flash在保存时会记录每一个关键帧上的

14、图形，文 件体积较大，而动画补间动画中通常使用的是元件，Flash只要记 录一次就可以了。所以在制作动画时，如果能用动画补间动画实 现的变化最好不要使用形状补间动画。 （1）、简介 在动画的两个关键帧之间选择任意一帧，然后 单击鼠标右键，在弹出来的快捷菜单中选择 “创建补间形状”命令，就可以创建出形状补 间动画，如图4-75所示。 图4 -75 右键弹出菜单 图4 -76 “属性”面板 在创建形状补间动画时，如果动画创建成功，在两个关键帧之 间会形成一个具有淡绿色背景的实线箭头，如图4-77所示；如果 如果在两个关键帧之间形成的是一条虚线，如图4-78所示，说明 动画没有创建成功，可能是动画对

15、象不是图形，需要将它转化为 一个图形。 图4 -77 创建成功的形状补间 动画 图4 -78 创建失败的形状补间动 画 在创建形状补间动画后，在“时间轴”面板上单击动 画的起始帧，打开“属性”面板，在“属性”面板上 可以看到如图4-79所示的选项。 图4 -79 形状补间动 画的参数 “缓动”选项：这个选项的作用和动画补间动画一样，在此不再赘述。 2.“混合”选项：“混合”选项的作用是设置动画中间的形状变化模式 的。 分布式：使创建的动画的中间形状比较平滑和不规则。 角形：使创建的动画的中间形状保留明显的角和直线。 1、形状补间动画和动画补间动画类似，也是在两个关 键帧之间创建动画。在Flas

16、h中，只需要绘制发生变 化的两个图形，然后在两个关键帧上设置形状补间模 式，就可以产生一系列的 2、下面通过一个简单的“变形”的动画来介绍创建形 状补间动画的方法 启动Flash CS3，建立一个Flash文档。 选择“椭圆”工具，在“属性”面板中设置其笔触 颜色 为无（），填充为一个红色的放射状渐变填充 （），如图4-80所示，按住Shift键在舞台中央绘制一 个立体圆形，如图4-81所示。 选择第20帧，在键盘上敲击F7键，在第20帧插入空 白关键帧。这里不使用“插入关键帧”的原因是， “插入关键帧”会复制第一帧的图形，在这里我们不 需要。 图4 -80 “属性”面板 图4 -81 绘制立

17、体圆形 图4 -82 “属性”面板 点击“属性”面板上的选项按钮，打开“工具设置”对 话框，设置样式为“星形”，如图4-83所示。在舞台中央绘 制一个蓝色的五角星，如图4-84所示。 图4 -83 “工具设置”对话框 图4 -84 绘制五角星 图4 -85 “属性”面板 单击菜单栏中的“控制”“测试影片”命令，对影 片进行测试，效果如图4-86所示。 图4 -86 影片测试效果 l 虽然形状补间动画制作起来很简单，但是当 前后图形差异比较大时变形效果较差。为了能 使变形效果按照自己的意愿变化，可以使用 “形状提示”功能，在“起始形状”和“结束 形状”中添加一些相应的参考点，使对象之间 的变形不

18、是随机的，而是有规律的。 l实例操作：“翻书”的动画 2、选择“矩形”工具，在“属性”面板中设置其笔触颜 色为黑色，笔触高度为1，填充颜色为黄色（值为 #FF6600），如图4-87所示，在工作区中央绘制两个 带边框的矩形，调整两个矩形的位置，效果如图4-88 所示。 1、启动Flash CS3，建立一个Flash文档。 图4 -87 “属性”面板 图4 -88 舞台中的效果图 4、选择“右页”图层的第一帧，运用“矩形”工具，先 在“属性”面板中设置其填充颜色为灰白色 （#CCCCCC），然后在舞台上绘制一个矩形，调整 其位置，效果如图4-89所示。 图4 -89 舞台中的效果 图4 -90 舞台中的效果 6将“左页”图层锁定，新建一个名为“翻动页”的图层。选中 “翻动页”图层的第40帧，按F7键插入空白关键帧，此时“时 间轴”面板效果如图4-91所示。 图4 -91 时间轴 8、在“翻动页”图层的第40帧绘制一个和“左页”上的 矩形大小相同、位置一致的矩形。 9、单击“翻动页”图层的第10帧，按F7键插入空白关键帧， 然后使用“矩形”工具，在“属性”面板中设置其笔触 颜色无（），填充颜色为灰白色（#CCCC99），在工作 区中绘制一个矩形，再利用选择工具和任意变形工具调 整