第3节我来当大师——形状补间

形状补间动画是Flash中非常重要的表现手法之一，运用它，你可以变幻出各种奇妙的、不可思议的变形效果。

　　 本课从形状补间动画基本概念入手，带你认识形状补间动画在时间帧上的表现，了解补间动画的创建方法，学会应用“形状提示”让图形的形变自然流畅。 学习目的：

创建形状补间动画

将文字转变为形状

添加形状提示

1．形状补间动画的概念

　　（1）形状补间动画的概念

　　 在一个关键帧中绘制一个形状，然后在另一个关键帧中更改该形状或绘制另一个形状，Flash 根据二者之间的帧的值或形状来创建的动画被称为“形状补间动画”。

　 　（2）构成形状补间动画的元素

　　 形状补间动画可以实现两个图形之间颜色、形状、大小、位置的相互变化，其变形的灵活性介于逐帧动画和动作补间动画二者之间，使用的元素多为用鼠标或压感笔绘制出的形状，如果使用图形元件、按钮、文字，则必先“打散”才能创建变形动画。

　 　（3）形状补间动画在时间帧面板上的表现

　　 形状补间动画建好后，时间帧面板的背景色变为淡绿色，在起始帧和结束帧之间有一个长长的箭头，

（4）创建形状补间动画的方法

　　 在时间轴面板上动画开始播放的地方创建或选择一个关键帧并设置要开始变形的形状，一般一帧中以一个对象为好，在动画结束处创建或选择一个关键帧并设置要变成的形状，再单击开始帧，在【属性】面板上单击【补间】旁边的小三角，在弹出的菜单中选择【形状】，此时，时间轴上的变化如图3-3-1所示，一个形状补间动画就创建完毕。

2．认识形状补间动画的属性面板

Flash的【属性】面板随鼠标选定的对象不同而发生相应的变化。当我们建立了一个形状补间动画后，单击帧，【属性】面板

形状补间动画的【属性】面板上只有二个参数：　　（1）“简易”选项

　　 单击其右边的按钮，会弹出滑动杆，拖动上面的滑块可以调节参数值，当然也可以在文本框中直接输入具体的数值，设置后，形状补间动画会随之发生相应的变化。

u 在1到 -100 的负值之间，动画运动的速度从慢到快，朝运动结束的方向加速度补间。

u 在1 到 100 的正值之间，动画运动的速度从快到慢，朝运动结束的方向减慢补间。

u 默认情况下，补间帧之间的变化速率是不变的。 　　（2）“混合”选项

　　 “混合”选项中有二项供选择：

u 【角形】选项：创建的动画中间形状会保留有明显的角和直线，适合于具有锐化转角和直线的混合形状。

u 【分布式】选项：创建的动画中间形状比较平滑和不规则。

3．使用形状提示

　　形状补间动画看似简单，实则不然，Flash在“计算”2个关键帧中图形的差异时，远不如我们想象中的“聪明”，尤其前后图形差异较大时，变形结果会显得乱七八糟，这时，“形状提示”功能会大大改善这一情况。

　 　（1） 形状提示的作用

　　 在“起始形状”和“结束形状”中添加相对应的“参考点”，使Flash在计算变形过渡时依一定的规则进行，从而较有效地控制变形过程。

　 　（2）添加形状提示的方法

　先在形状补间动画的开始帧上单击一下，再执行【修改】|【形状】|【添加形状提示】命令，该帧的形状上就会增加一个带字母的红色圆圈，相应地，在结束帧形状中也会出现一个“提示圆圈”，用鼠标左键单击并分别按住这2个“提示圆圈”，放置在适当位置，安放成功后开始帧上的“提示圆圈”变为黄色，结束帧上的“提示圆圈”变为绿色，安放不成功或不在一条曲线上时，“提示圆圈”颜色不变，如图3-3-3所示。

说明：在制作复杂的变形动画时，形状提示的添加和拖放要多方位尝试，每添加一个形状提示，最好播放一下变形效果，然后再对变形提示的位置做进一步的调整。　（3）添加形状提示的技巧

u “形状提示”可以连续添加，最多能添加26个。

u 将变形提示从形状的左上角开始按逆时针顺序摆放，将使变形提示工作得更有效。

u 形状提示的摆放位置也要符合逻辑顺序。例如，起点关键帧和终点关键帧上各有一个三角形，我们使用3个“形状提示”，如果它们在起点关键帧的三角形上的顺序为abc，那么在重点关键帧的三角形上的顺序就不能是acb，也要是abc。

u 形状提示要在形状的边缘才能起作用，在调整形状提示位置前，要打开工具栏上【选项】下面的【吸咐开关】，这样，会自动把“形状提示”吸咐到边缘上，如果你发觉“形状提示”仍然无效，则可以用工具栏上的【缩放工具】单击形状，放大到足够大，以确保“形状提示”位于图形边缘上。

　　 另外，要删除所有的形状提示，可执行【修改】|【形状】|【删除所有提示】命令。删除单个形状提示，可用鼠标右键单击它，在弹出菜单中选择【删除提示】。

实例——运动的球　　 制作步骤

　 步骤1 创建新文档

　　 执行【文件】|【新建】命令，在弹出的对话框中选择【常规】|【Flash文档】选项后，单击【确定】按钮，新建一个影片文档，在【属性】面板上设置文件大小为400×330像素，【背景色】为白色，

步骤2 创建背景图层

【属性】面板中选择画布的颜色 例如，将背景色换成黄色！

步骤3 创建球形状

　　 我们先来画球，执行【窗口】|【设计面板】|【混色器】命令，打开【混色器】面板，设置各项参数，渐变的颜色为白色到红色，

新建一个图层，并将其重新命名为“球一”。选择工具箱中的【椭圆工具】，设置【笔触颜色】为无，在场景中绘制出一个圆

步骤4 插入关键帧

在40帧 处插入一个关键帧，动画两头关键帧 是打散的形状。

步骤5 形成动画

放在1 ~ 40 帧 任意一帧，在【属性面板】中选择 补间 【形状】形成动画。

敲一下回车，能看到效果！！第4节我来当大师——动作补间

动作补间动画

动作补间动画也是Flash中非常重要的表现手段之一，与“形状补间动画”不同的是，动作补间动画的对象必需是“元件”或“成组对象”。

运用动作补间动画，您可以设置元件的大小、位置、颜色、透明度、旋转等种种属性，配合别的手法，您甚至能做出令人称奇的仿3D的效果来。本实例详细讲解了动作补间动画的特点及创建方法，并分析了动作补间动画和形状补间动画的区别，我们精心设计的一个实例将带您进一步加深对动作补间动画的了解。

1．动作补间动画的概念

（1）动作补间动画的概念

在Flash的时间帧面板上，在一个时间点（关键帧）放置一个元件，然后在另一个时间点（关键帧）改变这个元件的大小、颜色、位置、透明度等等，Flash 根据二者之间的帧的值创建的动画被称为动作变形动画。

（2）构成动作补间动画的元素

构成动作补间动画的元素是元件，包括影片剪辑、图形元件、按钮等等，除了元件,其他元素包括文本都不能创建补间动画的,其他的位图、文本等等都必须要转换成元件才行，只有把形状“组合”或者转换成“元件”后才可以做“动作补间动画”。

（3）动作补间动画在时间帧面板上的表现

动作补间动画建立后，时间帧面板的背景色变为淡紫色，在起始帧和结束帧之间有一个长长的箭头，如图3-4-1所示。

图3-4-1 动作补间动画在时间帧上的表现

4）创建动作补间动画的方法

在时间轴面板上动画开始播放的地方创建或选择一个关键帧并设置一个元件，一帧中只能放一个项目，在动画要结束的地方创建或选择一个关键帧并设置该元件的属性，再单击开始帧，在【属性面板】上单击【补间】旁边的“小三角”，在弹出的菜单中选择【动作】，或单击右键，在弹出的菜单中选择【新建补间动画】，就建立了“动作补间动画”。

2．认识动作补间动画的属性面板

在时间线“动作补间动画”的起始帧上单击，帧属性面板会变成如图3-4-2所示。

图3-4-2动作补间动画属性面板

“旋转”选项

有四个选择，选择“无”（默认设置）禁止元件旋转；选择“自动”可以使元件在需要最小动作的方向上旋转对象一次；选择“顺时针”(CW) 或“逆时针”(CCW) ，并在后面输入数字，可使元件在运动时顺时针或逆时针旋转相应的圈数。第5节我来当大师——引导线动画

引导线动画

【设计思想】

根据信息技术课程的教学目标、任务和学科特点，以初中信息技术新课标为指导，以建构主义理论为基础进行教学设计，力求充分发挥教学过程中学生的主体作用和教师的主导作用。采用以“自主学习、探究学习”为中心的教学设计，培养学生自主学习和探究学习的能力，提高学生信息获取、信息加工处理和信息应用的能力。

【教材分析】

本节课是山东省初中信息技术（泰山版）第二册第三单元第五节的教学内容，教材是以活动的形式将知识点引入，很好的应用引导线能够使制作出来的动画增色许多，因此引导线的应用在本单元中是一个重点内容。

【学情分析】

学生通过前面的学习已经熟悉Flash MX的界面，大部分学生会创建补间动画使一元件沿着直线运动，能够从外部导入文件到库。

【教学目标】

知识目标

1、掌握引导层的添加和引导线的设置和应用；

2、掌握引导线在动画制作中的作用。

3、学会图层属性的设置，图层顺序的调整

能力目标

1、培养学生自主学习和探究学习的能力；

2、提高学生的实践操作能力、文字理解能力和创新能力。

情感目标

1、培养学生热爱生活，热爱大自然的情怀，学会欣赏美，鉴赏美，创造美；

2、体验成功后的喜悦；

3、提高学生Flash的学习兴趣和热情。

【教学重点、难点】

重点：引导层的添加，引导线的应用

难点1、图层之间的顺序

2、引导应绘制在引导层中

3、对齐对象的使用，如何使元件自动吸附到引导线上

【学习环境设计】

1、清华同方多媒体广播系统；任务驱动、任务分层激发学生学习兴趣

2、基本任务提供具体操作步骤，能力稍差得还可以看操作的录像，这样尽量多得提供给学生各种学习途径，从而完成基本任务，体验成功的快乐；

3、提高任务和探究任务的友情提醒，留给学生很大的空间去自主探索，完成任务，进一步体验成就感；

4、自我评价让学生在没有压力的情况下清醒的认识自我；

5、老师寄语让学生倍感温馨，不至于有太大的挫败感，失去学习的动力。

【教学过程】

一、复习导入；（快速通览学案，了解本节课的学习目标和环节练习设置）

请大家利用5分钟的时间，通览学案，了解本节课的学习目标和环节设置，完成环节一中的练习：蝴蝶从场景的左边飞向右边的动画。（“动作补间”动画的复习）

教师巡视检查指导，五分钟后展出本动画实例的效果（教学课件）。

二、新授教学过程；（学案环节二、三、四）

学案环节二：〈 呈现新知 〉

课件展出本节课要达到的动画效果（蝴蝶沿设计好的路线飞舞，卫星环绕地球），

这就是我们本节课的研究课题：引导线动画的制作（Flash动画制作中最经典的例子）；

首先我们来了解引导线动画的原理：引导线动画的基础是“动作补间”动画，它可以让元件沿着指定的路线运动，这里说的路线就是“引导线”，引导线绘制在“引导层”中。摆在我们面前的两个新词，就是本环节的关键词：引导层，引导线。

下面让我们打开“蝴蝶飞舞引导线动画”的源文件来认识它们；

观察引导线动画与动作补间动画的区别，认识引导层的图标；隐藏背景层可以清楚地看到引导层中只有一条线，那就是引导线；反方向讲解还原到运动补间动画；

提出首要问题：1、确定被引导层后，如何添加引导层？

              2、在引导层中如何绘制引导线？

检查同学们的预习情况：可以找两个同学上教师机演示，总结添加引导层的方法和绘制引导线的方法和注意问题。

添加引导线的方法：“插入”菜单法，右单击快捷菜单法，工具栏按钮法；

引导线的绘制：铅笔工具，钢笔工具，椭圆工具和矩形工具，注意要平滑，有起点和终点，起点和终点间不能断开；

演示动画，没有出现效果，为什么？提出疑问！！

引导线动画的要素：引导层，引导线，元件必须吸附到引导线的起点和终点。

学案环节三〈 小试牛刀 〉

再测试影片看效果，布置同学练习，5人小组碰到问题可以讨论解决。

7至8分钟后，大多同学已经完成练习，总结部分没有完成练习的错误点，设计“火眼金睛”环节，帮着找错，修改。

1、元件必须吸附到引导线的起点和终点；

2、引导线起点和终点间不能断开；

3、引导线必须绘制在引导层上；

没有完成蝴蝶飞舞引导线动画的同学继续把它完成，做好的同学可以进入环节四，特殊引导线动画的制作。

学案环节四〈 挑战自我，积极进取 〉特殊引导线动画的制作；

欣赏动画实例，分析特殊在什么地方，讨论解决方法。

特殊在：引导线上，用椭圆工具画圆，不要填充颜色，封闭的圆不符合引导线的要求，可以用橡皮擦开一个缺口，同样卫星元件必须吸附到引导线的起点和终点。

可以找个同学来尝试；

给10分钟时间练习。

可以给基础好的一个思考题：小球从桌上滚下的引导线动画？

展出个别同学的作品。（展示激学）

课堂总结：用5个判断题来总结本节课的知识要点；

1、 引导层的作用就是使运动元件沿着绘制好的路径（引导线）运动。 （    ）

2、 引导线可以是封闭的，起点和终点之间的线条可以是不连续的。    （    ）

3、 引导层中绘制引导线，而在被引导层中设置补间动画。            （    ）

4、 不将对象吸附到引导线上，对象就能沿引导线运动。              （    ）

5、 在最终生成动画时，引导线是可以看见的。                      （    ）

课后思考作业：多个运动元件自由运动的引导线动画该怎么做哪？

同学可以讨论：（提示：一个引导层可以引导多个被引导层，可以绘制多条引导线；也可以一个引导层结合一个被引导层；）

形状补间动画和动作补间动画的异同

形状补间动画和动作补间动画都属于补间动画。前后都各有一个起始帧和结束帧，二者之间的区别如下表所示。

区别之处 动作补间动画 形状补间动画

在时间轴上的表现 淡紫色背景加长箭头 淡绿色背景加长箭头

组成元素 影片剪辑、图形元件、按钮 形状，如果使用图形元件、按钮、文字，则必先打散再变形。

完成的作用 实现一个元件的大小、位置、颜色、透明等的变化。 实现二个形状之间的变化，或一个形状的大小、位置、颜色等的变化。

区别之处