还剩4页未读，
继续阅读
所属成套资源：教科版八年级下册信息技术教案教学设计
成套系列资料，整套一键下载
初中信息技术教科版八年级下册第三课 动画补间动画教学设计
展开
这是一份初中信息技术教科版八年级下册第三课 动画补间动画教学设计，共7页。教案主要包含了补间动画，动画补间动画，制作简单的动画补间动画，制作方法和制作要点，动画补间动画实现的效果，可能产生的问题及解决方法等内容，欢迎下载使用。
（一）知识与技能
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对于所完成的动画，你认为还有哪些需要改进的地方。
课堂小结
这节课，我们认识了补间动画和动画补间动画的特点，学习、体验了制作简单的动画补间动画，掌握了制作方法和制作要点、效果和注意事项。
板书设计
补间动画
动画补间动画
动画补间动画 制作简单的动画补间动画
制作方法和制作要点
动画补间动画实现的效果
可能产生的问题及解决方法
课后反思
（一）知识与技能
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对于所完成的动画，你认为还有哪些需要改进的地方。
课堂小结
这节课，我们认识了补间动画和动画补间动画的特点，学习、体验了制作简单的动画补间动画，掌握了制作方法和制作要点、效果和注意事项。
板书设计
补间动画
动画补间动画
动画补间动画 制作简单的动画补间动画
制作方法和制作要点
动画补间动画实现的效果
可能产生的问题及解决方法
课后反思
相关教案
教科版八年级下册第三课 动画补间动画教案设计： 这是一份教科版八年级下册第三课 动画补间动画教案设计，共5页。
教科版八年级上册第一单元 计算机第三课 优化计算机教学设计： 这是一份教科版八年级上册第一单元 计算机第三课 优化计算机教学设计，共4页。教案主要包含了卸载软件“可牛影像”等内容，欢迎下载使用。
信息技术八年级下第七课 球体运动——动画补间动画教案及反思： 这是一份信息技术八年级下第七课 球体运动——动画补间动画教案及反思，共2页。教案主要包含了进行新课，教师小结，板书等内容，欢迎下载使用。
