第7章 Flash基础动画制作 本章主要内容： 逐帧动画 补间动画 形状补间动画.

Presentation on theme: "第7章 Flash基础动画制作 本章主要内容： 逐帧动画 补间动画 形状补间动画."— Presentation transcript:

1 第7章 Flash基础动画制作 本章主要内容： 逐帧动画 补间动画 形状补间动画

2 7.1 逐帧动画 时间轴和帧 了解图层 实战范例——朵朵梅花开

3 7.1 逐帧动画 逐帧动画是一种与传统动画创作技法相类似的动画形式，是Flash中一种重要的动画制作模式。逐帧动画是在时间轴上逐帧地绘制内容，这些内容是一张张不动的画面，但画面之间又逐渐发生变化。当动画在播放时，这一帧一帧的画面连续播放就会获得动画效果。逐帧动画在绘制时具有很大的灵活性，几乎可以表现任何需要表现的内容。在Flash中，一段逐帧动画表现为时间轴上连续放置关键帧。

4 7.1.1 时间轴和帧 在Flash中，时间轴用于组织和控制在一定时间内在图层和帧中的内容。动画效果的好坏，决定于时间轴上帧的效果。
时间轴和帧 在Flash中，时间轴用于组织和控制在一定时间内在图层和帧中的内容。动画效果的好坏，决定于时间轴上帧的效果。 在Flash中，合成动画的场所称为时间轴，时间轴上的每一个影格称为帧，帧是最小的时间单位。

5 7.1.1 时间轴和帧 1．【时间轴】面板 在【时间轴】面板的左侧列出了文档中的图层，图层就像堆叠在一起的多张幻灯片胶片，每个图层都有自己的时间轴，其位于图层名的右侧，包含了该图层动画的所有帧。在面板的时间轴顶部显示帧的编号，播放头指示出当前舞台中显示的帧。在舞台上测试动画时，播放头从左向右扫过时间轴，动画也将随之播放。

6 时间轴和帧 2．洋葱皮功能 在制作动画时，当前帧中图像的绘制往往需要参考前后帧中图像，这样才能获得逼真且流畅的动画效果。在制作动画时，使用洋葱皮功能，在编辑当前帧的图像时，可以同时显示其他帧中的内容。

7 时间轴和帧 3．选择帧 在【时间轴】面板中，用户可以根据需要选择帧。帧被选择后，在时间轴上该帧将会显示为灰色，同时该帧中所有的对象将被选择。在时间轴上单击需要选择的帧，则该帧将被选中。 选择连续的多个帧：在时间轴上单击选择一个帧，在时间轴上另一个帧上按住【Shift】键单击，则这2帧之间的所有帧被选择。 选择非连续的多个帧：在时间轴上按住【Ctrl】键依次单击需要选择的帧，则这些帧将被同时会选择。

8 时间轴和帧 4．插入帧 在制作动画时，在某一时刻需要定义对象的某个状态，这个时刻所对应的帧就是关键帧。实际上，关键帧就是用于定义动画变化或包含脚本动作的帧。Flash可以通过在两个关键帧之间补间或填充帧来产生动画，关键帧包括关键帧、空白关键帧和属性关键帧这3种类型。 插入关键帧：F6键 插入空白关键帧：F7键 插入帧：F5键

9 7.1.1 时间轴和帧 5．删除和清除帧 鼠标右击时间轴上的一个关键帧，选择关联菜单中的【清除帧】命令，此时该关键帧中的内容将被清除，关键帧变为空白关键帧。 鼠标右击时间轴上的一个关键帧，选择关联菜单中的【删除帧】命令，则该关键帧将被删除。在时间轴上鼠标右击一个关键帧，选择关联菜单中的【清除关键帧】命令，则关键帧将被清除。

10 时间轴和帧 6．设置帧频 帧频是动画播放的速度，以每秒播放的帧数（即FPS）为单位。在动画播放时，帧频将影响动画播放的效果，如果帧频太小动画播放将会不连贯，而帧频大则会使动画画面的细节模糊。在默认情况下，Flash动画播放的帧频是24FPS，这个帧频能为Web播放提供最佳效果。

11 了解图层 图层就像一层透明的白纸，当一层一层叠加上去之后，透过上一层的空白部分可以看见下一层的内容，而上一层中的内容将能够遮盖下一层上的内容。通过更改图层的叠放顺序，可以改变在舞台上最终看见的内容。同时，对图层上对象的修改，不会影响到其他图层中的对象。因此，在制作动画时，图层用于组织文档中不同元素。

12 7.1.2 了解图层 1．图层操作

13 7.1.2 了解图层 2．修改图层状态

14 实战范例——朵朵梅花开 1、范例简介 本例介绍梅花开放的逐帧动画的制作过程。本例需要制作3朵梅花由花苞到半开到开放的过程，使用Flash的绘图工具绘制梅花的这3个不同的状态，将这3种状态放置到3个不同的帧中，然后将每种状态关键帧延伸10帧使每种状态在动画播放时获得一定的延迟。通过本例的制作，读者将能够掌握逐帧动画制作的要点，熟悉图层和帧的操作方法。 2．制作步骤 略。请参看教材或者观看配盘上的视频教程。

15 7.2 补间动画 补间动画和传统补间动画 运动补间动画 实战范例——文字特效

16 补间动画和传统补间动画 Flash CS5支持2种类型的补间来创建动画，一种是补间动画，一种是传统补间。这2种类型的补间各具特点，下面分别对它们进行介绍。 1．补间动画 补间动画，是Flash CS5中的一种动画类型，其是从Flash CS4开始引入的。相对于以前版本中的补间动画，这种补间动画类型具有功能强大且操作简单的特点，用户可以对动画中的补间进行最大程度的控制。 Flash CS5中的“补间动画”动画模型是基于对象的，其将动画中的补间直接应用到对象，而不是像传统补间动画那样应用到关键帧，Flash能够自动纪录运动路径并生成有关的属性关键帧。 补间动画只能应用于影片剪辑元件，如果所选择的对象不是影片剪辑元件，则Flash会给出提示对话框，提示将其转换为元件。只有转换为元件后，该对象才能创建补间动画。

17 补间动画和传统补间动画 2．传统的补间动画 Flash CS4之前的各个版本创建的补间动画都称为传统补间动画，在Flash CS5中，同样可以创建传统的补间动画。要创建传统的补间动画，可以使用下面步骤来进行。

18 7.2.1 补间动画和传统补间动画 补间动画和传统补间之间的差异:
补间动画和传统补间动画 补间动画和传统补间之间的差异: 传统补间使用关键帧，关键帧是其中显示对象的新实例的帧。补间动画只能具有一个与之关联的对象实例，并使用属性关键帧而不是关键帧。 补间动画在整个补间范围上由一个目标对象组成。 补间动画和传统补间都只允许对特定类型的对象进行补间。若应用补间动画，则在创建补间时会将所有不允许的对象类型转换为影片剪辑。而应用传统补间会将这些对象类型转换为图形元件。 补间动画会将文本视为可补间的类型，而不会将文本对象转换为影片剪辑。传统补间会将文本对象转换为图形元件。 在补间动画范围上不允许帧脚本，传统补间允许帧脚本。补间目标上的任何对象脚本都无法在补间动画范围的过程中更改。

19 运动补间动画 在Flash中，运动补间动画用于完成群组、文本框或各种元件实例的渐变动画效果的创建。这里的渐变动画效果是指对象的大小、倾斜、位置、旋转、颜色以及透明度、颜色和滤镜效果等属性的变化动画效果。

20 实战范例——文字特效 1．范例简介 本例介绍影片中文字飞入和飞出动画效果的制作过程。本例影片在播放时，文字依次从左下方飞入舞台，停顿片刻后依次从左上方飞出。本例在制作时，采用补间动画来创建文字旋转飞入和飞出效果。通过本例的制作，读者将掌握创建补间动画的方法，熟悉在创建补间动画时对象熟悉设置以及运动路径修改的方法，掌握设置补间属性的方法。同时，读者还将掌握将对象分散到图层的操作方法以及通过调整动画开始帧在时间轴上的位置来控制动画开始时间的方法。 2．制作步骤 略。请参看教材或者观看配盘上的视频教程。

21 7.3 形状补间动画 创建形状补间 实战范例——滴落的墨迹

22 创建形状补间 补间形状动画是形状之间的切换动画，是从一个形状逐渐过渡到另一个形状。Flash在补间形状的时候，补间的内容是依靠关键帧上的形状进行计算所得。形状补间与补间动画是有所区别的，形状补间是矢量图形间的补间动画，这种补间动画改变了图形本身的属性。而补间动画并不改变图形本身的属性，其改变的是图形的外部属性，如位置、颜色和大小等。 专家点拨：这里要注意，补间形状的对象必须是非成组和非元件的矢量图形。如果希望对元件或成组对象创建形状补间，必须使用【分离】命令将它们分离打散。

23 实战范例——滴落的墨迹 1．范例简介 本例介绍墨滴滴落到纸上并且渗入纸中的动画效果的制作过程。在本例的制作过程中，使用补间动画制作墨滴滴落的动画过程，使用补间形状来制作滴在纸上的墨滴逐渐扩展开的变化过程。同时通过补间动画来模拟扩展开后的墨迹渗入纸张的过程。通过本例的制作，读者将能够掌握补间形状的创建过程，同时能够进一步熟悉补间动画的制作方法。 2．制作步骤 略。请参看教材或者观看配盘上的视频教程。

24 7.4 本章小结 本章学习Flash中常见的动画类型，包括逐帧动画、补间动画和形状补间动画。通过本章的学习，读者将掌握逐帧动画、补间动画和形状动画的制作方法，了解它们的特点，能够根据需要灵活选择动画类型来完成作品的制作。

25 7.5 本章练习

26 4.5 本章练习

27 7.6 上机练习和指导 制作动画——行走的狗 制作动画——新年Banner

28 7.6.1 绘制图案 使用提供的素材制作狗从走向右走过的效果，效果如图7.87所示。 主要操作步骤指导：
绘制图案 使用提供的素材制作狗从走向右走过的效果，效果如图7.87所示。 主要操作步骤指导： （1）导入背景图片和所有的素材图片。创建一个名为“狗”的 影片剪辑，在图层中添加5个空白关键帧，将狗行走不同姿势的素材图片分别放置到这5个图层中。选择这5个关键帧后，复制这些帧。此时测试动画可以看到狗行走的效果。

29 绘制图案 主要操作步骤指导： （1）导入背景图片和所有的素材图片。创建一个名为“狗”的 影片剪辑，在图层中添加5个空白关键帧，将狗行走不同姿势的素材图片分别放置到这5个图层中。选择这5个关键帧后，复制这些帧。此时测试动画可以看到狗行走的效果。 （2）在“狗”所在图层下再添加一个图层，在该图层中绘制一个椭圆，将其放到狗脚下。将该图形转换为影片剪辑，为其添加【模糊】滤镜并适当减小其Alpha值。使该椭圆延伸到所有的帧。椭圆在这里作为狗身下的阴影。 （3）回到“场景1”，首先将背景图片添加到舞台上，然后在一个新图层中放置“狗”影片剪辑，将该影片剪辑放置回到左侧舞台的外部。创建补间动画，在动画最后一帧将“狗”影片剪辑放置到舞台右侧的外部。测试动画即可看到狗从左侧向右侧走过整个舞台的动画效果。

30 7.6.2制作动画——新年Banner 使用提供的素材制作新年祝福Banner，效果如图7.88所示。 主要操作步骤指导：
（1）创建新文档，调整文档的大小。导入素材图片，将其放置到舞台上。创建一个新图层，在图层中绘制一个矩形图形，在第30帧创建关键帧。在第1帧将矩形缩为一个宽度为1个像素的矩形，在第30帧将其宽度设置为初始大小。创建第1帧至第30帧的形状补间动画。将第30帧延伸到第120帧。

31 7.6.2制作动画——新年Banner （2）创建一个新图层，在第30帧创建关键帧，在该帧中输入文字“新的一年 新的希望 新的未来”，将文字放置到绿色矩形的中间。在第65帧创建关键帧，在第30帧至第65帧间创建传统补间动画。在第30帧将文字的Alpha值设置为0，获得文字逐渐显现的效果。将该图层的帧延伸到第120帧。 （3）创建一个新图层，在第65帧创建关键帧，在帧中输入文字“新年快乐”，将该图层的帧延伸到第120帧。 （4）再创建一个新图层，在第65帧创建关键帧，将文字“新年快乐”复制到该帧中，使其正好盖住上一步创建的文字，将文字的Alpha值设置为“50％”。在该图层创建补间动画，选择第80帧，使用【任意变形工具】将文字放大，同时将其Alpha值设置为0。这样获得文字重影飞出的效果。