资源简介

第五课
形状补间动画
教学目标
（一）知识与技能
1形状补间动画。
2制作形状补间动画
3添加形状提示点来控制形状补间动画。
4逐帧动画、动画补间动画、形状补间动画的制作要点与使用需求。
过程与方法
根据首尾关键帧补充中间帧的方法制作形状补间动画。体验添加形状提示点来控制形状补间动画技术；掌握逐帧动画、动画补间动画、形状补间动画的制作要点与使用需求。
情感态度价值观
通过学习、体验、制作动画，进一步激发学生学习flash动画的积极性，培养学生自主探索、协作进取的精神。
教学重难点
形状补间动画的制作方法。（重）
2.实例的动手操作和属性设置。（难）
教学过程
补间动画由用户制作起始关键帧和结束关键帧，中间的各过渡帧由
Flash通过计算自动补充。元件实例的大小、位置、亮度、色调、
Alpha值等的变化可以使用动画补间动画来实现，但要用补间动画的方式实现形状上的变化则需要使用形状补间动画。
试一试
打开文件“汉字的演变.swf”，观看播放效果。
一、形状补间动画
形状补间动画指的是在起始关键帧中绘制一个形状，然后在结束关键帧中更改该形状或绘制另一个形状，
Flash根据起始关键帧和结束关键帧的值或形状来自动创建中间帧的动画。制作形状补间动画时，起始关键帧或结束关键帧中的对象必须是分离状态的图形。
Flash中的图形有分离状态的，也有组合状态的。选中分离状态与组合状态的对象以不同形式显示，如图5-1、图5-2所示。
“对象绘制”未被选中时，舞台上直接绘制的图形为分离状态;被选中时，绘制的图形则是组合状态。通常，所有通过库元件在舞台上生成的实例对象则是组合状态的。
图5-1图形的分离状态与组合状态
图5-2文宇的分离状态与组合状态
练一练
模仿“范例1.fla”，在舞台上绘制起始关键帧的一弯半月，以及结束关键帧的象形文字。
1.制作形状补间动画
(1)在起始关键帧和结束关键帧中绘制所需形态变化的图形，并确保两关键帧中的图形均为分离状态。如果是组合状态的对象，可以通过单击“修改”菜单下的“分离”命令，或者直接使用快捷组合键【Crl+B】使之变为分离状态。
(2)选中起始关键帧与结关键帧之间的任意帧，在“属性”面板中设置“补间”为“形状”，此时将自动生成形状补间动画。形状补间动画建立后，时间轴面板的背景色变为淡绿色，在起始关键帧和结关键帧之间有一条实线箭头，如图5-3所示。
2.可能产生的问题及解决方法
当起始关键帧和结束关键帧之间带箭头的线为虚线，或不带箭头时，说明形状补间动画生成有误。解决方法如下。
(1)检查两端是否都有非空白的关键帧，即从外观上看，两端是否都是黑色实心圆点。
(2)检查两端关键帧中的图形是否均被分离。
3能实现的效果
形状补间动画可以实现元件实例大小、位置、色调等的变化，但通常形状补间动画主要用于实现不同形状之间流畅变化的动态演变过程。
练一练
模仿“范例2.fla”，绘制关键帧，制作从象形文字到甲骨文演变过程的动画。
二、绘图纸外观工具
为了方便用户操作，
Flash提供了绘图纸外观工具，它可同时编辑多个帧，如图5-4至图5-7所示。
试一试
尝试使用绘图纸外观工具，在文件“范例2.fla”中对齐前后不同帧的位置。
图5-4绘图纸外观工具
图5-5绘图纸外观
图5-6绘图纸外观轮廓
图5-7编辑多个帧
Flash舞台上通常只能显示某一帧的画面，即只能显示某一时刻的变化。
但使用绘图纸外观工具，就可以同时显示或编辑多个帧的内容，方便对整个影
片进行定位和安排。
练一练
打开文件“范例3.fla”，使用元件以及绘图纸外观工具，制作从甲骨文到金文演变过程的动画。
具体操作步骤如下。
(1)动画的起始关键帧为上一动画的结束关键帧(第60帧)，在第120帧插入空白关键帧。
(2)将“金文”元件拖动至舞台，并将其分离。
(3)保持选中第120帧，单击“绘图纸外观”工具，在时间轴刻度上便会出现带有空心圆圈的中括号，左括号表示使用绘图纸外观工具查看动画的起始点，右括号表示使用绘图纸外观工具查看动画的结束点，如图5-8所示。
图5-8查看动画的起始点与结束点
将指针移动到括号上，拖动左括号调至第
59帧或第60帧，查看此间包括所有帧的显示。
由于尚未创建补间动画，所以没有中间帧的图像显示，可以很清楚地看到两个关键帧的大小、位置等关系。
(4)选中结束关键帧，调整其位置，使之与起始关键帧相对重合。
(5)选中中间顿，单击“属性”面板，设置“形状”补间。
形状补间动画的起始关键帧和结東关键帧通常具有形状、颜色等相关性，为得到流畅美观的效果，最好不要使用完全不同的图像，否则会产生许多变化中的杂乱线条。因此，图标的形象化示意、云彩的变化等适合使用形状补间来实现。
三、添加形状提示点
1.插入形状提示点
练一练
打开文件“范例4.fla＂，运用文字工具，制作从金文到隶书演变过程的动画。
具体操作步骤如下。
(1)在第121帧到第159帧中制作动画补间动画，实现文字的旋转及缩放变化。
(2)在第160帧到第220帧中制作形状补间动画，实现文字形状的变化。
测试效果时发现，实现的变化效果与范例不一样。实际上，
Flash在“计算”两个关键帧中图形的差异时，远不如我们想象中“聪明”，尤其在前后图形差异较大时，变形效果不佳。“形状提示”可以帮助计算机在计算时，准确对应两个关键帧中的相应变形点。
(3)插入形状提示点。
选中形状补间动画的起始关键帧，执行“修改”菜单下的“形状”→“添加形状提示”命令，该帧的形状就会增加一个带字母的“提示圆圈”，在结关键帧形状中也会出现一个“提示圆圈”。单击并分别按住这两个“提示圆圈”拖至适当位置安放，起始关键帧上的“提示圆圈”变为黄色，结束关键帧上的“提示圆圈”变为绿色，当安放不成功或不在一条曲线上时，“提示圆圈”颜色不变。这些“提示圆圈”就是形状提示点，每一个图形可以有多组形状提示点。设置过程如图5-9、图5-10所示。
如果测试后发现化效果仍不佳，可以手工修正起始关键帧的形状。使用形状补间动画的起始关键帧和结束关键帧在空间结构上类似，可以很好地实现形状补间动画。因此，需要选中第160帧，使用刷子工具将“月”字中的第一横两端封口，并继续添加形状提示点控制变化过程。
2.添加形状提示点的技巧
(1)可以连续添加“形状提示”，最多添加26个。
(2)
Flash中按逆时针方向从形状的左上角开始放置“形状提示”，这样它们的工作效果最好。
(3)确保起始关键帧和结关键帧中的“形状提示”是一一对应并符合逻辑的。
(4)“形状提示”要在形状的边缘才能起作用，在调整“形状提示”位置前，要打开工具栏上“选项”下面的“紧贴至对象”，系统自动把“形状提示”吸附到边缘上。如果发觉“形状提示”仍然无效，则可用工具栏上的放大工具放大图形后操作，以确保“形状提示”位于图形边缘上。
(5)选中形状提示点，单击鼠标右键，去掉“显示形状提示”前面的对钩，可以实现隐藏形状提示点的效果。
(6)若要将隐藏后的形状提示点显示出来，可选择“视图”菜单下的“显示形状提示”，或者同时按【Cr+
Alt+H】键。
(7)若要删除所有的“形状提示”，可选择“修改”菜单下的“形状”→“删除所有提示”，或者指向提示点后用快捷菜单删除。
思考与练习
1打开文件“汉字的演变.fla＂，添加标题场景，完成整个动画创作。
2打开文件“图标.swf”，尝试在完成的网站标题动画上，加上动态示意图标。3逐帧动画、动画补间动画和形状补间动画的对比。
(1)分析逐帧动画、动画补间动画和形状补间动画在制作及应用上的不同，归纳如表5-1所示。
表5-1逐帧动画、动画补间动画和形状补间动画的比较
(2)打开文件“汉字的演变.swf＂，分析从金文到隶书的变化中运用了哪些动画类型。
课堂小结
这节课，我们了解了形状补间动画的特点，根据首尾关键帧补充中间帧的方法制作形状补间动画。体验添加形状提示点来控制形状补间动画技术；掌握逐帧动画、动画补间动画、形状补间动画的制作要点与使用需求。
板书设计
形状补间动画
制作形状补间动画
形状补间动画
添加形状提示点来控制形状补间动画
逐帧动画、动画补间动画、形状补动画的制作要点与使用需求
课后反思(共43张PPT)
第五课
形状补间动画
补间动画由用户制作起始关键帧和结束关键帧，中间的各过渡帧由
Flash通过计算自动补充。元件实例的大小、位置、亮度、色调、
Alpha值等的变化可以使用动画补间动画来实现，但要用补间动画的方式实现形状上的变化则需要使用形状补间动画。
试一试
打开文件“汉字的演变swf”，观看播放效果。
一、形状补间动画
形状补间动画指的是在起始关键帧中绘制一个形状，然后在结束关键帧中更改该形状或绘制另一个形状，
Flash根据起始关键帧和结束关键帧的值或形状来自动创建中间帧的动画。制作形状补间动画时，起始关键帧或结束关键帧中的对象必须是分离状态的图形。
Flash中的图形有分离状态的，也有组合状态的。选中分离状态与组合状态的对象以不同形式显示，如图5-1、图5-2所示。
“对象绘制”未被选中时，舞台上直接绘制的图形为分离状态;被选中时，绘制的图形则是组合状态。通常，所有通过库元件在舞台上生成的实例对象则是组合状态的。
练一练
模仿“范例1.fla”，在舞台上绘制起始关键帧的一弯半月，以及结束关键帧的象形文字。
1.制作形状补间动画
(1)在起始关键帧和结束关键帧中绘制所需形态变化的图形，并确保两关键帧中的图形均为分离状态。如果是组合状态的对象，可以通过单击“修改”菜单下的“分离”命令，或者直接使用快捷组合键【Crl+B】使之变为分离状态。
(2)选中起始关键帧与结关键帧之间的任意帧，在“属性”面板中设置“补间”为“形状”，此时将自动生成形状补间动画。形状补间动画建立后，时间轴面板的背景色变为淡绿色，在起始关键帧和结关键帧之间有一条实线箭头，如图5-3所示。
2.可能产生的问题及解决方法
当起始关键帧和结束关键帧之间带箭头的线为虚线，或不带箭头时，说明形状补间动画生成有误。解决方法如下。
(1)检查两端是否都有非空白的关键帧，即从外观上看，两端是否都是黑色实心圆点。
(2)检查两端关键帧中的图形是否均被分离。
3
能实现的效果
形状补间动画可以实现元件实例大小、位置、色调等的变化，但通常形状补间动画主要用于实现不同形状之间流畅变化的动态演变过程。
练一练
模仿“范例2.fla”，绘制关键帧，制作从象形文字到甲骨文演变过程的动画。
二、绘图纸外观工具
为了方便用户操作，
Flash提供了绘图纸外观工具，它可同时编辑多个帧，如图5-4至图5-7所示。
试一试
尝试使用绘图纸外观工具，在文件“范例2.fla”中对齐前后不同帧的位置。
Flash舞台上通常只能显示某一帧的画面，即只能显示某一时刻的变化。
但使用绘图纸外观工具，就可以同时显示或编辑多个帧的内容，方便对整个影片进行定位和安排。
练一练
打开文件“范例3.fla”，使用元件以及绘图纸外观工具，制作从甲骨文到金文演变过程的动画。
具体操作步骤如下。
(1)动画的起始关键帧为上一动画的结束关键帧(第60帧)，在第120帧插入空白关键帧。
(2)将“金文”元件拖动至舞台，并将其分离。
(3)保持选中第120帧，单击“绘图纸外观”工具，在时间轴刻度上便会出现带有空心圆圈的中括号，左括号表示使用绘图纸外观工具查看动画的起始点，右括号表示使用绘图纸外观工具查看动画的结束点，如图5-8所示。
将指针移动到括号上，拖动左括号调至第59帧或第60帧，查看此间包括所有帧的显示。
由于尚未创建补间动画，所以没有中间帧的图像显示，可以很清楚地看到两个关键帧的大小、位置等关系。
(4)选中结束关键帧，调整其位置，使之与起始关键帧相对重合。
(5)选中中间顿，单击“属性”面板，设置“形状”补间。
形状补间动画的起始关键帧和结東关键帧通常具有形状、颜色等相关性，为得到流畅美观的效果，最好不要使用完全不同的图像，否则会产生许多变化中的杂乱线条。因此，图标的形象化示意、云彩的变化等适合使用形状补间来实现。
三、添加形状提示点
1.插入形状提示点
练一练
打开文件“范例4.fla＂，运用文字工具，制作从金文到隶书演变过程的动画。
具体操作步骤如下。
(1)在第121帧到第159帧中制作动画补间动画，实现文字的旋转及缩放变化。
(2)在第160帧到第220帧中制作形状补间动画，实现文字形状的变化。
测试效果时发现，实现的变化效果与范例不一样。实际上，
Flash在“计算”两个关键帧中图形的差异时，远不如我们想象中“聪明”，尤其在前后图形差异较大时，变形效果不佳。“形状提示”可以帮助计算机在计算时，准确对应两个关键帧中的相应变形点。
(3)插入形状提示点。
选中形状补间动画的起始关键帧，执行“修改”菜单下的“形状”→“添加形状提示”命令，该帧的形状就会增加一个带字母的“提示圆圈”，在结关键帧形状中也会出现一个“提示圆圈”。单击并分别按住这两个“提示圆圈”拖至适当位置安放，起始关键帧上的“提示圆圈”变为黄色，结束关键帧上的“提示圆圈”变为绿色，当安放不成功或不在一条曲线上时，“提示圆圈”颜色不变。这些“提示圆圈”就是形状提示点，每一个图形可以有多组形状提示点。设置过程如图5-9、图5-10所示。
如果测试后发现化效果仍不佳，可以手工修正起始关键帧的形状。使用形状补间动画的起始关键帧和结束关键帧在空间结构上类似，可以很好地实现形状补间动画。因此，需要选中第160帧，使用刷子工具将“月”字中的第一横两端封口，并继续添加形状提示点控制变化过程。
2.添加形状提示点的技巧
(1)可以连续添加“形状提示”，最多添加26个。
(2)
Flash中按逆时针方向从形状的左上角开始放置“形状提示”，这样它们的工作效果最好。
(3)确保起始关键帧和结关键帧中的“形状提示”是一一对应并符合逻辑的。
(4)“形状提示”要在形状的边缘才能起作用，在调整“形状提示”位置前，要打开工具栏上“选项”下面的“紧贴至对象”，系统自动把“形状提示”吸附到边缘上。如果发觉“形状提示”仍然无效，则可用工具栏上的放大工具放大图形后操作，以确保“形状提示”位于图形边缘上。
(5)选中形状提示点，单击鼠标右键，去掉“显示形状提示”前面的对钩，可以实现隐藏形状提示点的效果。
(6)若要将隐藏后的形状提示点显示出来，可选择“视图”菜单下的“显示形状提示”，或者同时按【Cr+
Alt+H】键。
(7)若要删除所有的“形状提示”，可选择“修改”菜单下的“形状”→“删除所有提示”，或者指向提示点后用快捷菜单删除。
思考与练习
1打开文件“汉字的演变.fla＂，添加标题场景，完成整个动画创作。
2打开文件“图标.swf”，尝试在完成的网站标题动画上，加上动态示意图标。
3逐帧动画、动画补间动画和形状补间动画的对比。
(1)分析逐帧动画、动画补间动画和形状补间动画在制作及应用上的不同，归纳如表5-1所示。
表5-1逐帧动画、动画补间动画和形状补间动画的比较
(2)打开文件“汉字的演变.swf＂，分析从金文到隶书的变化中运用了哪些动画类型。
课堂小结
这节课，我们了解了形状补间动画的特点，根据首尾关键帧补充中间帧的方法制作形状补间动画。体验添加形状提示点来控制形状补间动画技术；掌握逐帧动画、动画补间动画、形状补间动画的制作要点与使用需求。
板书设计
形状补间动画
制作形状补间动画
形状补间动画
控制形状补间动画
形状补动画的制作要点与使用需求

展开更多......

收起↑