利用动作补间动画制作课件的教案.doc

第3章 制作简单动态演示课件3.3 利用动作补间动画制作课件【学习目标】1. 掌握元件的概念，并学会灵活运用各类元件2. 理解动作补间动画并学会合理运用3. 学会制作美观实用的动作补间动画4. 初步理解ActionScript语法【学习内容】1. 元件的概念2. 简单补间动作的生成3. 多图层补间动画的创作4. 影片剪辑的应用5. 按钮元件的应用6. 简单的ActionScript代码的添加【学习重点】1. 元件的概念2. 多图层补间动作3. 按钮元件的应用【学习难点】1. 影片剪辑元件的应用2. 按钮元件的应用3. 多图层动作补间动画的创作【课时安排】6课时（含操作）【教学过程】1导入：我们已经掌握了逐帧动画和形状补间动画的创作方法，Flash中动画的另一种重要形式就是动作补间动画。今天开始，我们将一起来学习利用动作补间动画制作课件的方法。2新课：第一、二课时：在制作动作补间动画时，主要是对元件进行操作。那什么是元件呢？元件是一种可以重复使用的对象，被存储在当前文件的库里，从库里拖入舞台的是元件的实例，实例其实就是元件在舞台上的一次使用，重复使用实例不会增加文件的大小。元件简化了文档的编辑，也完善了文档的交互性。第3章 制作简单动态演示课件3.3 利用动作补间动画制作课件一、元件操作：演示实例旋转的星图 - 1首先请看一个实例“旋转的星”（运行效果如图-1所示）：一个星星渐渐出现，并伴随着旋转。在本例中，由暗到明、由小变大的星形就是一个图形元件的实例。现在，我们就通过本实例来学习有关元件及动作补间的概念及运用。图 - 2首先要做的事情是创建一个图形元件：单击“插入”菜单中的“新建元件”命令或者按键盘快捷键“Ctrl+F8”,创建一个新的元件。此时，弹出“创建新元件”对话框，如图-2所示，从对话中可以看出元件的类型可以分为影片剪辑元件、按钮元件和图形元件三大类。三类元件的作用分别为： 影片剪辑元件是Flash影片中的一个动画片段； 按钮元件可以创建用于响应鼠标单击、滑过或其他动作的交互式按钮； 图形元件可用于静态图像，并可用来创建连接到主时间轴的可重复使用的动画片段。为即将要创建的元件起个名字，当然起个见名知意的名字是非常重要的，然后根据需要选择合适的元件类型。我们即将完成的“旋转的星”案例中的星形只是一个图形，所以创建图形元件即可。现在，我们就创建一个名为“星形”的图形元件，单击“确定”进入元件编辑界面，运用“多角星形工具”绘制一个五角星。图 - 3元件编辑好后，单击时间轴上的“场景1”按钮返回主场景。创建好的元件都会自动在“库”面板中显示。面板结构如图-3所示。图 - 4现在，我们就运用“星形”元件的一个实例在创建一个旋转的星形动画。从库面板中选择“星形”元件并拖动的舞台上，创建一个实例，调整位置和大小，然后在第60帧处插入一个关键帧，再次调整该位置星形实例的大小和位置。准备工作完成，下面就是动画的实现了。在第1帧至59帧之间的任意位置右击鼠标，选择“创建补间动画”命令，创建动作补间，如图-4所示。测试就得到一个由小到大变化的星形动画，如何让该动画由暗到明变化呢？这就需要用到“Alpha”属性了。在第一个关键帧选择对象，这时属性面板为“实例：星形”的属性（如图-5所示），在“颜色”下拉列表框“Alpha”，并将其值设置为0%，这时候舞台中的元件实例就变成完全透明的了，而由于最后一个关键帧的图形仍然是清晰的，因此就实现了由暗到明的变化过程。图 - 5【注意】把元件从库面板中拖到舞台上，就创建了该元件一个实例，而同一元件的不同实例具有独立的属性，如色调、透明度、亮度、大小等，改变这些属性并不会影响元件和此元件的其他实例，但修改元件时，会对这个元件的所有实例产生影响。那星形的旋转又是如何实现的呢？这就要提到补间属性的设置了。选择补间帧，属性面板转换为帧属性，我们可以看到动作补间属性面板如图-6所示。其中缓动与前面的形状补间的作用相同，起到调节动画变化速率的作用。旋转选项就是用来控制动画运行时旋转方向和资料的。我们想让星形旋转出现，就要设置旋转选项。在本例中，将旋转设置为顺时针1周。图 - 6现在，我们旋转的星的动画就全部完成了，可以测试影片看一下运行效果了。学生操作完成本案例，教师巡视辅导刚才我们完成了一颗星星的运动，那如何完成多颗星星的运动呢？有同学说，我们在两个关键帧处多添加几个星形元件的实例不就可以了吗？现在我们试试是否可以？拖动一个元件实例到第一个关键帧，调整大小和位置，这时候我们注意一下时间轴的变化，原来的带箭头实线现在变成了如图-7所示的虚线了，原因何在？图 - 7我们再注意一下属性面板，在缓动后面出现了一个感叹号，点击该感叹号，出现提示如图-8所示，仔细阅读一下内容，我们明白了，原来在同一个图层上不能包含多个元件或者未组合形状的对象，否则就不会发生补间。那要如何解决这个问题呢？留空白，让学生稍做思考。不错，想完成多个星形的运动，就需要用到多层图了，让一个星形处在一个图层上就解决问题了。图 - 8下面就请同学们利用多图层来完成一个多颗星星运动的动画。参考效果如图-9所示。学生操作完成“多颗星星运动”的案例，教师巡视辅导【拓展实例】在部分学生完成了多图层渐变后，提出思考题：弹簧振子（运行效果如图-10所示）。并适应提示本例的要点如下：1小球和弹簧要独立作为元件完成，以便于渐变的生成。图 - 92辅助线和网格的适当运用：小球和弹簧的运动是有规律的，其左右运动的幅度应该相同，为了保证相同幅度的生成，辅助线和网格的运用是必须的。3弹簧的变动调整要注意运用任意变形工具，并注意变形中心点位置的调整。图 - 104为了保证小球的位置平行移动，最好的移动小球的方法是运用键盘光标键来实现。有能力的学生操作完成“弹簧振子”的案例，教师继续巡视辅导【技巧提示】有时候键盘光标的运用，能够很好的保证动画不产生抖动。第三、四课时：在前次课，我们已经掌握了动作补间动画的原理，并通过实际操作完成了两个实例，但在前次课上，我们都是运用图形元件来完成动画的，今天我们就通过实例“运动与静止的相对性”来了解一下影片元件的运用。首先，请先看下本实例的运行效果（如图-11所示），分析一下动画原理。图 - 11在本例中，运动的对象有：山和汽车。但两者运动的方法是不相同的，山是在移动，这可以应用动作补间来实现，将山制作成图形元件即可；而汽车确是在上下抖动，当然我们也可以使用动作补间来实现，但如果在整个山的运用过程中反复制作汽车抖动，有点繁杂，是否有其他简便一点的方法？当然是有的，就是将汽车制作在影片元件，然后将这个小动画应用的场景中，就会自动重复执行影片元件中的动画了。我们先来看一下图形元件和影片元件的概念： 图形元件 可用于静态图像，并可用来创建连接到主时间轴的可重用动画片段。 图形元件与主时间轴同步运行。 交互式控件和声音在图形元件的动画序列中不起作用。 由于没有时间轴，图形元件在 FLA 文件中的尺寸小于按钮或影片剪辑。 使用影片剪辑元件 可以创建可重用的动画片段。 影片剪辑拥有各自独立于主时间轴的多帧时间轴。您可以将多帧时间轴看作是嵌套在主时间轴内，它们可以包含交互式控件、声音甚至其它影片剪辑实例。 也可以将影片剪辑实例放在按钮元件的时间轴内，以创建动画按钮。 此外，可以使用 ActionScript 对影片剪辑进行改编。下面我们就来完成本实例：本例中“山”的绘制与前面咏叹调鹅课件相似，不同的是，本例中“山”制作成为元件，不再重复，请同学们自己完成。图 - 12下面，我们要制作一辆行驶中的汽车，要想达到汽车行驶的效果，我们将汽车元件制作成为影片元件，插入一个新的元件，命名为“汽车”，选择类型为“影片剪辑”，如图-12所示。现在，进入了影片元件“汽车”的编辑，将图层1改名为车身，利用各种绘图工具绘制汽车车身并填充适当的颜色，如图-13所示。增加一个图层，命名为车轮，利用椭圆形工具绘制车轮，与车身重合效果如图-14所示。图 - 13再增加一个图层，命名为影子，利用椭圆形工具绘制一个灰色填充的椭圆，放置在汽车的下方，形成影子，当然，要想影子处于汽车的下文，影子图层必须在位于车身和车轮两个图层的下文才能做到，最终组合效果如图-15所示。图 - 14图 - 15现在，要做的是让汽车抖动起来，这需要车身和车轮产生上下运动，因此在车身和车轮的第3帧处插入关键帧，并调整该两关键帧中对象的位置，使车身和车轮小幅向上或向下移动一点。为了保证抖动效果，在第5帧处，为所有图层添加一个普通帧，使关键帧产生必要的延续。到此为此，一辆运动的汽车元件制作完成。现在，回到场景1完成运动与静止的相对的课件实例。创建一个图层，命名为“背景”，绘制必要的的背景，注意各种绘图工具的综合运用。图 - 16在“背景”层上方创建一个图层，命名为“山”，从库中将图形元件“山”拖动到场景中，创建一个实例，并调整与“背景”图层中对象的相对位置，效果如图-16所示。现在要做的是让“山”移动起来，这需要为山在我们想要动画结束的位置添加一个关键帧（如第150帧处），并调整“山”的位置与背景层对象的左侧对齐。【提示】：当然，为了保证背景的完整性，也需要在“背景”图层的相应位置添加一个普通帧，以完成关键帧的延续。最后一个步骤，就是添加一个名为“汽车”的图层，并将影片元件“汽车”拖动到该图层的第一个关键帧处，创建一个实例。现在，我们就可以测试动画了。由此，我们可以看出，图形元件和影片剪辑元件的差别所在了吧？最后，添加一个图层，给课件加上适当的文字说明就完成整个课件了。学生操作完成 “运动与静止的相对性”的案例，教师继续巡视辅导【思考】有能力的同学，请思考如何让汽车的车轮也转动起来？【提示】在完成“汽车”影片剪辑时，为车轮单独创建一个图形元件，并将该图形元件应用到“汽车”影片剪辑中，为两个车轮分别创建动作补间，设置旋转。第五、六课时：通过前两次课的学习，我们掌握了图形元件、影片剪辑元件的使用，并学习了利用动作补间制作动画的方法，大部分同学能够独立完成一个动画作品。但我们目前所完成的动画都没有交互性，比如前面我们曾经尝试着在制作形状渐变时利用时间轴控制函数stop让动画完成后停留在固定的画面，那是否可以实现让动画根据需要重新播放的交互呢？当然可以，下面我们就来学习利用按钮元件制作交互动画的方法。 按钮元件可以创建响应鼠标点击、滑过或其它动作的交互式按钮。可以定义与各种按钮状态关联的图形，然后将动作指定给按钮实例。按钮元件的创建方法与图形元件、影片剪辑元件的创建方法相同，差别在于选择元件的类型时要选择按钮。图 - 17下面我们就通过一个实例来学习使用按钮元件的方法，先看实例按钮测试（效果如图-17所示）。在本例中，动画播放完成后，单击“replay”按钮，可以让动画重新播放，动画中的“replay”按钮就是我们利用按钮元件制作的。在本例中，完成圆形到文字的形状渐变我们已经能够完成了，关键是制作按钮。现在，请我们同学先自己完成任务圆形到文字的变化的部分。学生操作，制作圆形到文字的渐变动画【提示】要让动画播放完成后停下来，必须在最后一帧增加一个时间轴控制函数stop。接下来，要制作按钮了。创建一个名为“replay”的元件，选择类型为“按钮”，进入元件编辑界面，注意这时的时间轴（如图-18所示）：图 - 18在按钮元件编辑时，我们看到时间轴总共由四帧组成：弹起、指针经过、按下、点击。按钮实际上是四帧的交互影片剪辑。当为元件选择按钮行为时，Flash 会创建一个四帧的时间轴。前三帧显示按钮的三种可能状态；第四帧定义按钮的活动区域。时间轴实际上并不播放，它只是对指针运动和动作做出反应，跳到相应的帧。按钮元件的时间轴上的每一帧都有一个特定的功能： 第一帧是弹起状态，代表指针没有经过按钮时该按钮的状态。 第二帧是指针经过状态，代表当指针滑过按钮时，该按钮的外观。 第三帧是按下状态，代表单击按钮时，该按钮的外观。 第四帧是“点击”状态，定义响应鼠标单击的区域。此区域在 SWF 文件中是不可见的。现在，我们在按钮元件的各个帧中根据各个阶段的需要绘制相应的图形，完成按钮元件的制作。下面，回到场景，完成交互式按钮的应用。实际上要制作一个交互式按钮，是把该按钮元件的一个实例放在舞台上，然后给该实例指定动作。必须将动作指定给文档中按钮的实例，而不是指定给按钮时间轴中的帧。因此，动作是指定给场景中的按钮元件的实例，而不是在按钮元件中完成。在场景1中增加一个新的图层，命名为按钮，并在该图层对应的本动画的最后一个帧的位置插入一个关键帧，从库中将按钮元件拖动在舞台，创建一个实例，调整好该实例的位置及大小，结果如图-19所示。图 - 19现在测试，并不能实现点击按钮就重新播放动画的效果，要想达到交互效果，添加合适的ActionScript代码是必不可少的。那我们现在就来看一下，怎样让按钮实际发生作用。在场景中选择按钮，右击弹出快捷菜单选择“动作”，打开“动作-按钮”对话框，编辑ActionScript代码如下（如图-20所示）：图 - 20 on 处理函数on(mouseEvent:Object) / your statements here 指定触发动作的鼠标事件或按键。& 参数： mouseEvent:Object mouseEvent 是一个称为事件 的触发器。当事件发生时，执行该事件后面大括号 ( ) 中的语句。可以为 mouseEvent 参数指定下面的任一值： press 当鼠标指针滑到按钮上时按下鼠标按键。 release 当鼠标指针滑到按钮上时释放鼠标按键。 releaseOutside 当鼠标指针滑到按钮上时按下鼠标按键，然后滑出此按钮区域并释放鼠标按键。press 和 dragOut 事件始终在 releaseOutside 事件之前发生。【注意】仅当 System.capabilities.hasMouse 为 true 或 System.capabilities.hasStylus 为 true 时，Flash Lite 中才支持此事件。 rollOut 鼠标指针滑出按钮区域。【注意】仅当 System.capabilities.hasMouse 为 true 或 System.capabilities.hasStylus 为 true 时，Flash Lite 中才支持此事件。 rollOver 鼠标指针滑到按钮上。 dragOut 当鼠标指针滑到按钮上时按下鼠标按键，然后滑出此按钮区域。 dragOver 当鼠标指针滑到按钮上时按下鼠标按键，然后滑出该按钮区域，接着滑回到该按钮上。 keyPress 按下指定的键盘键。对于该参数的 key 部分，请指定一个键常数，如“动作面板”中的代码提示所示。可以使用这个参数来截取某个按键，也就是说，覆盖所指定键的任何内置行为。该按钮可以在您的应用程序中的任何地方，可以在舞台上或不在舞台上。此技术的一个局限是不能在运行时应用 on() 处理函数；您必须在创作时应用它。请确保选择“控制”“禁用快捷键”，否则在使用“控制”“测试影片”测试应用程序时某些具有内置行为的键不会被覆盖。 gotoAndPlay 函数gotoAndPlay(scene:String, frame:Object) : Void将播放头转到场景中指定的帧并从该帧开始播放。如果未指定场景，则播放头将转到当前场景中的指定帧。只能在根时间轴上使用 scene 参数，不能在影片剪辑或文档中的其它对象的时间轴内使用该参数。& 参数： scene:String 可选 - 一个字符串，指定播放头要转到其中的场景的名称。 frame:Object - 表示播放头转到的帧编号的数字，或者表示播放头转到的帧标签的字符串。学生操作，教师巡视辅导我们使用按钮元件可以制作按钮，但不能让按钮实现相应的交互，需要配合ActionScript代码才能实现交互，因此我们想要制作出交互性较好的课件，掌握一定的ActionScript是非常重要的。另外，按钮除了自己制作外，还可以通过“公用库”-“按钮”面板，使用系统自带的一些漂亮按钮。操作演示【拓展实例】有能力的同学完成拓展实例3小结：通过本部分内容的学习，我们理解并掌握了动作补间的创建方法及适用范围，并学会了应用三种元件来丰富的我们的动画，要灵活运用本部分内容还需要我们同学课后认真体会并主动学习、拓展，才能更好的掌握。4作业：1. 完成课堂要求各个案例2. 有能力的同学完成拓展要求案例并进行能力范围内的适当创作【教学反思】