初中第三课 动画补间动画课文配套课件ppt

第三课    动画补间动画

教学目标

（一）知识与技能

1补间动画和动画补间动画。

2制作动画补间动画

（二）过程与方法

完成位置、大小、角度、透明度等变化的动画补间动画。

（三）情感态度价值观

培养学生养成严谨的学习态度和团结协作的精神，提升素质，发展个性。

教学重难点

制作动画补间动画

教学过程

导入：观看微课

一、补间动画

Flash提供了一种自动生成动画的方式，只需确定起始、结两个关健帧，即可由计算机自动生成中间的帧，这种动画称为补间动画。

补间动画根据对象的变化方式不同，分为动画补间动画和形状补间动画。

二、动画补间动画

动画补间动画，是指为了实现对元件(实例)的大小、位置、角度、明暗、色调、透明度等属性的变化而使用的一种补间动画方式。它没有改变元件本身的形态。

三、制作简单的动画补间动画

制作一个简单的位置变化的动画，操作步骤如下。

(1)新建一个1000×200像素的Flash文件，将素材文件夹中的文件“范例1.fla”中的元件导入到库。

(2)将“图层1”重命名为“蝴蝶”。

(3)制作起始关键帧:将“蝴蝶侧面”元件拖放到“蝴蝶”图层的第1帧，并确定它的位置。设想蝴蝶从外部飞入，所以将其放在舞台以外右侧位

置。至此，此动画补间动画的起始状态设置完成。

(4)制作结束关键帧:根据动画持续时间估计所需帧数(本例在第110帧制作结束关键帧)。

方法一:右击第110帧，在弹出的快捷菜单中选择“插入空白关键帧”，将“蝴蝶侧面”元件拖放到“蝴蝶”图层的第110帧，并将“蝴蝶侧面”元件调整到飞舞结束的位置。

方法二:右击第110帧，在弹出的快捷菜单中选择“插入关键帧”，此时，第110帧与前一关键帧，即

起始关键帧内容完全一致，再通过“选择工具”选中“蝴蝶侧面”实例，并将它调整到飞舞结束的位置。

(5)创建补间动画:选择起始关键帧或两关键帧之间区域，将“属性”面板的“补间”选项设置为“动画”，如图3-1所示;也可尝试使用快捷菜单完成创建补间动画。

图3-1创建补间动画

动画完成后，时间轴状态如图3-2所示，正确生成动画补间的部分将显

示为淡紫色底色、有实线箭头标识。

图3-2时间轴状态示意图

此时，单击1到110帧之间任何一帧，可以发现已经由计算机自动补充

了每一帧的内容。这种由软件自动“补充中间部分”的方式极大地提高了工

作效率。

练一练   制作蝴蝶直线飞舞的动画效果，尝试小结动画补间动画制作的方法。

◆四、制作方法和制作要点

1.制作方法

(1)制作起始关键帧，以描述动作变化的开始状态。

(2)制作结東关帧，以描述动作变化的结東状态。

(3)使用“创建补间动画”，以自动生成中间的过渡帧。

2.制作要点

(1)两个关键帧的内容通常为同一元件的单个实例。

(2)两个关键帧必须是有内容的关键帧，且必须有所不同，否则将无法形成动态效果。

(3)应使用元件来制作“动画补间动画”。

(4)制作元件时，有动态变化的部分最好拆分至最小，以便灵活地使用。

◆五、动画补间动画实现的效果

？想一想  打开“信息”面板，单击“蝴蝶”图层的两个关中的对象实例，观察X值、Y值的变化，思考它们描述的是什么信息。计算机是如何实现自动补充中间帧功能的?

1.位置变化

对于“蝴蝶”图层的两个关键帧中的对象实例，所观察到的位置变化结果如图3-3所示。

由于计算机将位置信息以数据的方式进行存储，所以可以对存储数据(也就是位置信息)进行处理。根据两关键帧间隔数以及X值、Y值的数据进行计算，得出自动补充的中间过渡帧的X值和Y值，即确定它们的位置。

？想一想  除了位置信息是数字化的，还有哪些信息是数字化的?它们是不是也同样可以实现“自动补充中间帧”呢？

2.大小变化

如图3-4所示，实例的大小信息同样用数据来表示。

图3-4大小变化

获得了起始关键帧和结束关键帧的宽、高数据以及间隔帧数，通过计算同样可以得出由大到小或由小到大变化的中间各帧的数据。

练一练  将之前制作的简单补间动画添加大小变化，修改成如素材文件夹中文件“大小变化，swf”所示效果。

具体操作步骤如下。

(1)新建图层，命名为“背景”，将其拖动到最底层，并由外部导入背景图片至库。

(2)位图不能够直接制作动画补间动画，因此须新建“背景”元件，拖入背景图片完成元件制作，单击“场景1”返回。

(3)锁定“蝴蝶”图层，将“背景”元件拖动至“背景”图层第1帧，并使用“任意变形工具”等比例放大超出舞台一定范围，完成起始帧制作。

(4)在第100帧处插入关键帧，将该帧中的“背景”实例缩小至舞台大小。由于位置和大小信息都是用数值表示的，因此当用“任意变形工具”无法准确定位和调整大小时，可以通过“信息”面板输入宽、高数据和位置坐标(0，0)实现精确控制，如图3-5所示。

图3-5用数值精确控制位置和大小

(5)创建动画补间动画。

(6)测试正确后锁定“背景”图层，解锁“蝴蝶”图层，将其结关键帧的“蝴蝶侧面”实例缩小，以实现越飞越远的效果。

需要调整蝴蝶出现时间时，可以单击起始关键帧或结关键帧，当鼠标右下方出现虚线矩形框时，拖动它至合适的位置。

在动画制作中，常常使用类似“背景”图层的做法，实现镜头的拉近和推远。

试一试  将库元件“背景”和“蝴蝶侧面”分别放大，观察它们的区别，并分析原因。

资料室

位图与矢量图

将位图放大至一定比例后，会发现图像出现马赛克，而用 Flash自行绘制的元件无论放大多少倍，也不会出现这种情况。

这是因为位图是一个点一个点地逐点存储此位置的颜色信息，而 Flash绘制的图像是以矢量图的形式存储，它保存的是图像的几何特性，如圆形存储的是圆心坐标、半径以及颜色值。因此，位图所需的存储空间通常较矢量图大得多。在放大图像时，矢量图经过重新计算获得新的几何特性数据来绘制图案，而位图通过以同色扩充周围点的方式来重现图案，所以矢量图放大后的图像仍然平滑，而位图放大后会产生一定失真。

3.透明度变化

动画创作中，淡入淡出的效果是通过控制透明度的变化实现的。 Alpha值

用来表示透明度。不透明时， Alpha值为100％:全透明时， Alpha值为0％。

很显然，动画补间动画也能实现对透明度变化的控制。

练一练

继续修改蝴蝶动画，添加透明度的变化，实现花束渐渐长出和诗文淡入的效果。

具体操作步骤如下。

(1)锁定所有图层，在最上层新建图层，命名为“花”。

(2)在“背景”图层运动效果即将结束时，将“花”元件拖入“花”图层相应位置，本例选择在第80帧开始建立此动画的起始关键帧。

(3)在第160帧“插入关键帧”作为结束关键帧。

(4)两关键帧没有大小和位置的变化，仅有透明度的变化，从开始的全

透明慢慢变化为不透明，即 Alpha值从0％变化到100％，可通过“属性”面

板来调整。操作时尤其需要注意的是，只有选中舞台中的实例，“属性”面板中才会出现有关“颜色”的选项，如图3-6所示。将第80帧实例的 Alpha值调整成0％，而第160帧实例的Alpha值保持100％不变。

(5)在两关键帧之间创建动画补间动画，在第200帧“插入帧”延长显示时间，与其他图层同步结束。

(6)尝试自己制作诗文的淡入效果。

从图3-6中可以看出，颜色选项中除了可以修改 Alpha值以外，还可以

修改亮度和色调值。表现天色渐亮可以使用色调的变化，表现光线渐暗时的剪

影可以使用亮度变化等，从而实现丰富的颜色变化过程。

4.角度变化

对象的角度信息也用数据表示，因此可以通过动画补间动画实现角度的

变化，即可以实现旋转、摆动等动画效果，如图3-7所示。

图3-7角度变化

练一练   继续修改蝴蝶动画，添加角度的变化，实现枝条摆动的效果。

具体操作步骤如下。

(1)锁定除“花”以外的其他图层。

(2)在第161帧处制作起始关键帧、调整角度时，需要着重考虑旋转的中心点。由于枝条摆动时围绕的中心点在枝条上方，这与第160帧有所不同，故在第161帧“插入关键帧”，然后选择“任意变形工具”，将中心点位置调整成如图3-8所示。

(3)在第175帧处“插入关键帧”作为结束帧，使用“任意变形工具”指向实例四个角之一，拖动旋转一定角度。

(4)在两关键帧之间创建动画补间动画。

(5)在第176～180帧、第180～195帧使用同样的方法，创建不同方向和角度的动画补间动画，以完善来回飘动的效果。

(6)测试动画，完成调试和保存。

此例的第(3)步使用“插入关键帧”，而不是使用“插入空白关键帧”。

其实，“插入关键帧”可以分解为两个动作:插入空白关键帧——复制前一个关

键帧内容到相同位置。这种操作方式可以防止两帧因位置、大小不同而使画面抖动。此例的操作确保了制作动画补间动画的两个关键帧，其大小、位置，以及旋转中心点完全一致。因此，当需要保持与前一关键帧完全一样的大小、位置和相关参数时，最好使用“插入关键帧”的方式。

六、可能产生的问题及解决方法

当时间轴上所生成补间动画的箭头为虚线或不带箭头时，说明有错误发生，此时可以尝试以下步骤来解决。

(1)检查两端是否都有关键帧，且应当均为非空白关键帧。

(2)隐藏出错图层外的其他所有图层，检查两端关键帧是否都只有一个对象。通常情况下，应该是同一个元件生成的大小、位置、角度、色调、透明度不同的对象实例。

(3)生成动画补间动画的通常应该是元件。 Flash8中，未制作成元件的图形，其生成的补间动画会自动在库中生成如补间1、补间2等名称的元件，不易阅读且易产生错误，应尽量避免。

思考与练习

1尝试使用动画补间方法完成你喜欢的网站标志动画的创意和制作。

2对于所完成的动画，你认为还有哪些需要改进的地方。

课堂小结

这节课，我们认识了补间动画和动画补间动画的特点，学习、体验了制作简单的动画补间动画，掌握了制作方法和制作要点、效果和注意事项。

板书设计

补间动画

动画补间动画

动画补间动画    制作简单的动画补间动画

制作方法和制作要点

动画补间动画实现的效果

可能产生的问题及解决方法

课后反思