《网页交互设计基础与实例教程（本书配dvd-rom光盘）教学课件作者严晨唐琳杨虹编著flash篇第13章 创建动画》由会员分享，可在线阅读，更多相关《网页交互设计基础与实例教程（本书配dvd-rom光盘）教学课件作者严晨唐琳杨虹编著flash篇第13章 创建动画（58页珍藏版）》请在金锄头文库上搜索。
1、第 13 章 创建动画,13.1 图层 13.2 逐帧动画 13.3 形变动画 13.4 运动动画 13.5 轨迹动画和遮罩动画的原则,返回,13.1 图层,通常，根据制作方法的不同可将Flash动画分为五大类型：逐帧动画、形变动画、运动动画、轨迹动画以及遮罩动画。它们基本都与图层有关。 图层就像透明的醋酸纤维薄片一样，一层一层地向上叠加。图层可以帮助用户组织文档中的各种对象。可以在图层上绘制和编辑对象，而不会影响其他图层上的对象。如果某个图层上没有任何内容，那么就可以透过它直接看到下面的图层。 新建文档后，在时间轴中就会包含一个图层。用户可以添加更多的图层，以便在文档中组织各种动画对象。 另
2、外，使用引导层可以使运动物体沿着特定轨迹移动，而使用遮罩层可以创建出更为复杂的动画效果。,下一页,返回,13.1 图层,13.1.1 图层编辑 图层编辑包括一些比较常用的图层操作，如图层的选择、重命名、新建、复制以及删除等。 1选择图层 要选择一个图层，可以进行下述的任一操作： 单击时间轴中要选择的图层的名称。 在时间轴中单击要选择的图层的任意一帧。 在舞台中选择要选择的图层上的任意一个对象。 要选择多个图层，可以进行下述操作： 选择连续的多个图层，按住Shift键单击时间轴中的图层名称。 选择不连续的多个图层，按住Ctrl键单击时间轴中的图层名称。,上一页,下一页,返回,13.1 图层,2重
3、命名图层 默认情况下，图层名称以“图层1”“图层2”“图层3”命名，为了清楚地了解相应图层中的大概内容，应该对图层名称进行具体的命名。 要对图层进行重命名，只要双击相应图层的图层名称，反白显示后输入新的图层名称即可。虽然重命名图层极为简单，但是对于日后动画的修改相当有益。 3新建图层 要新建图层，可以进行下述的任一操作： 单击时间轴左下角的“新建图层”按钮。 选择“插入”|“时间轴”|“图层”命令。 右击时间轴中的图层名称，在弹出的快捷菜单中选择“插入图层”命令。,上一页,下一页,返回,13.1 图层,4复制图层 如果要创建一系列相似的图层，可以复制图层，操作步骤如下： （1）单击相应的图层名
4、称选择图层。 （2）选择“编辑”|“时间轴”|“复制帧”命令。 （3）单击“新建图层”按钮 新建图层。 （4）选中新建的图层，选择“编辑”|“时间轴”|“粘贴帧”命令。 5删除图层 在动画制作过程中，难免会创建多余的图层，此时应该予以删除。应注意的是，删除图层后所有包含的内容都将被删除。删除图层必须先选择图层，然后进行下述的任一操作：,上一页,下一页,返回,13.1 图层, 单击时间轴底端的“删除图层”按钮。 将选定图层拖动到“删除图层”按钮上，然后松开鼠标。 右击选定的图层名称，在弹出的快捷菜单中选择“删除图层”命令。 13.1.2 图层状态 在动画创建过程中，为了消除动画中相互重叠对象之间
5、的影响，通常需要隐藏相应的图层，以便查看该图层下被覆盖的动画对象。隐藏的图层或文件夹名称旁将显示红色的 标志，但是在发布动画时将会自动取消图层的隐藏状态，以完整地显示整个动画内容。 如果要显示或隐藏图层，请执行以下任一操作：,上一页,下一页,返回,13.1 图层, 单击图层名称右侧的“眼睛”列 隐藏该图层，再次单击即可显示该图层。 单击“眼睛”图标 可以隐藏所有的图层，再次单击则显示所有的图层。 在“眼睛”列 中拖动可以显示或隐藏多个图层。 按住Alt键单击图层名称右侧的“眼睛”列可以隐藏所有其他的图层，按住Alt键再次单击可以显示所有的图层。 为了防止对图层中的对象做修改，可以将相应的图层进
6、行锁定 ；当对其他图层中的对象调整完毕后，再将该图层解除锁定即可。锁定或解除锁定的操作方法与显示或隐藏图层基本相似。,上一页,下一页,返回,13.1 图层,为了帮助区分各个图层中的对象，可以采用轮廓显示 图层中的所有对象。当然，用户可以更改各个图层所使用的轮廓颜色，相关内容将在下一小节的“图层属性”中进行讲解。轮廓显示或取消轮廓显示的操作方法与显示或隐藏图层基本相似。 图13-1所示的是图层或文件夹的各种状态隐藏、锁定或轮廓显示。关于文件夹状态的设置与图层操作基本相同，所不同的是，对文件夹设置状态时，该文件夹中的所有图层都将被设置为相应的状态。,上一页,下一页,返回,13.1 图层,13.1.
7、3 图层属性 图层的各种状态也可以在“图层属性”对话框中进行设置。在该对话框中可以更改图层的类型，如轨迹动画中的引导层和被引导层、遮罩动画中的遮罩层和被遮罩层，并且还可以控制图层高度。 如果要调用“图层属性”对话框，可以执行以下任一操作： 双击时间轴中图层名称左侧的图层图标。 右击图层名称，在弹出的快捷菜单中选择“属性”命令。 选中时间轴中的图层，选择“修改”|“时间轴”|“图层属性”命令。 弹出的“图层属性”对话框，如图13-2所示。 更改该对话框中的各项参数，单击“确定”按钮后，查看改变参数前后所发生的变化。,上一页,返回,13.2 逐帧动画,或许，您也曾经痴迷于动画王国之中，可以如数家珍
8、地说出一些经典动画，如米老鼠与唐老鸭哪吒闹海大闹天宫宝莲灯等。其实，这些动画的制作基本都是采用逐帧动画的方法，将大量的静态图片在时间轴中进行合成。由于相邻的图片之间的变化极其微小，而眼睛对于所看到的画面具有暂时保留的特点，因此，快速且连续地切换这些图片就会观看到动画效果。 就逐帧动画来说，时间轴用于记载动画播放过程中的所有画面。为了了解时间轴与动画之间的关系，可以在Flash中导入GIF动画，观看GIF动画中各个画面在时间轴中的分布情况。具体操作步骤如下：,下一页,返回,13.2 逐帧动画,（1）按Ctrl+N组合键新建文档，选择“文件”|“导入”|“导入到舞台”命令，在弹出的“导入”对话框中
9、选中GIF动画，单击“打开”按钮。此时，GIF动画中的各个画面自动以关键帧的形式分布在时间轴上，如图13-3所示。拖动时间轴中红色的播放头，就可以看到动画效果。 （2）选择“修改”|“文档”命令，弹出“文档设置”对话框，设置尺寸为150像素150像素，如图13-4所示，将舞台尺寸调整为与动画尺寸接近，单击“确定”按钮确认。 （3）单击时间轴右上角的按钮 ，弹出时间轴下拉菜单，如图13-5所示，选择其中的“预览”命令。 （4）此时，时间轴显示发生较大变化，各个关键帧不再以黑色圆点作为标识，取而代之的是GIF动画中的各个画面，如图13-6所示。,上一页,返回,13.3 形变动画,13.3.1 形变
10、动画的原则 创建形变动画时，只要确定首、末两个关键帧中的图形即可（而不必像逐帧动画那样在每个关键帧中绘制图形），随后再利用“形状补间”在首、末关键帧之间自动生成图形转换的中间帧，从而缩短了制作时间。 但是，放置在形变动画首、末关键帧中的对象是有条件的必须是形状，这也是形变动画创建成功与否的必要条件。所以，创建形变动画前应该先对形变动画首、末关键帧中的对象进行检验，确定其中所放置的对象是形状。,下一页,返回,13.3 形变动画,有效的检验方法是，单击形变动画的关键帧，选中该关键帧中的所有对象后，查看其选中状态，如果呈现点状显示则表明该关键帧中的对象为形状，如图13-7所示。此时再在选中的对象上单
11、击，如果选中的对象为形状，“属性”面板中将会给出提示文字“形状”及相应的图标，如图13-8所示。 13.3.2 基本变形动画 清楚形变动画的原则后，现在就来熟悉一下形变动画创建的基本步骤。概括来说，形变动画的制作只要3步就能够完成：确定形变动画的首、末关键帧；检验关键帧中的对象；创建形变动画。 然而，在形变动画的实际制作过程中通常忽略第步操作，因为确定关键帧时已经同时完成了关键帧中对象的检验。,上一页,下一页,返回,13.3 形变动画,为了清楚形变动画的制作过程，在下面的范例动画中采用最简单的图形，整个动画表现为：由圆变为五角星形，再变为五边形，最后变回圆的过程，如图13-9所示。 具体操作步
12、骤如下： （1）按Ctrl+N组合键新建文档，按Ctrl+J组合键弹出“文档设置”对话框，调整尺寸为300像素300像素，单击“确定”按钮确认，将文档保存为“形变动画.fla”。 （2）按O键选择椭圆工具 ，在舞台中央绘制填充的圆形，如图13-10所示。然后在第10帧处按F7键插入空白关键帧，使用多角星形工具，在舞台中央绘制填充的五角形，如图13-11所示。,上一页,下一页,返回,13.3 形变动画,（3）右击首、末关键帧间的任意一帧，在弹出的快捷菜单中，选择“创建补间形状”命令，如图13-12所示。这样，形变动画就制作完成了。此时，时间轴中显示带有箭头的直线段，并且舞台上的图形也发生相应的变
13、化，如图13-13所示。 （4）按Enter键在场景编辑状态下测试动画播放情况，此时会看到一段由圆形向五角形变形的动画，也就是说，形变动画制作成功。下面就继续制作形变动画的其余部分。 （5）在第16帧处按F6键插入关键帧，使五角形在舞台上持续一段时间。在第25帧处按F6键插入关键帧，然后把舞台中的五角形删除，再绘制一个五边形，完成五角形变为五边形的首、末关键帧的确定。右击第20帧，在弹出的快捷菜单中选择“创建补间形状”选项。,上一页,下一页,返回,13.3 形变动画,（6）在第31帧处按F6键插入关键帧，使五边形在舞台上停留一段时间。为了使动画循环变形，在第1帧上右击，在弹出的快捷菜单中选择“
14、复制帧”命令复制该关键帧，然后在第40帧处右击，在弹出的快捷菜单中选择“粘贴帧”命令粘贴刚才复制的关键帧，在第45帧处按F6键插入关键帧。用同样的方法创建第3140帧之间的形变动画，如图13-14所示。,上一页,下一页,返回,13.3 形变动画,13.3.3 转动的三棱锥 在上一小节制作的形变动画中，完全自动生成过渡画面，基本上没有太多的人工干涉。但是有些形变动画如果没有人为控制，过渡帧中的画面几乎是乱作一团，根本不能达到设计意图。下面就尝试制作三棱锥围绕其中轴线进行转动的动画效果。为了更加清楚动画的制作过程，先完成线框三棱锥的转动，然后再对三棱锥进行渐变填充，使之更加真实。具体操作步骤如下：
15、 （1）按Ctrl+N组合键新建文档，并将文档保存为“转动的三棱锥.fla”。按Ctrl+J组合键弹出“文档设置”对话框，调整尺寸为400像素300像素。选择“视图”|“网格”|“编辑网格”命令，弹出“网格”对话框，选中“显示网格”和“贴紧至网格”复选框，同时设置网格尺寸为20像素20像素，如图13-15所示。单击“确定”按钮确认后，舞台上显示灰色网格。,上一页,下一页,返回,13.3 形变动画,（2）选择“线条工具” ，在“属性”面板中设置笔触颜色为红色（#FF0000）、笔触样式为“极细线”，在舞台上绘制等腰三角形，并以右侧腰为边绘制一窄条三角形，如图13-16所示。 （3）在第24帧处按
16、F6键插入关键帧，此时关键帧中的三棱锥线条均为选中状态，选择“修改”|“变形”|“水平翻转”命令翻转图形，最后创建两个关键帧间的形状补间动画，如图13-17所示。 （4）按Enter键在场景编辑状态中测试动画，结果是大失所望三棱锥的所有线条都像散了架似的乱作一团，根本没有预期绕中心轴转动的一丝踪迹。其实，上述步骤只是本例动画创建的部分内容，主要是奠定基本框架，而下面的步骤才是最为重要的。,上一页,下一页,返回,13.3 形变动画,（5）切换到“选择工具” 后单击第1帧，选择“修改”|“形状”|“添加形状提示”命令，此时在舞台上出现标识为“a”的小圆点，也就是所谓的“形状提示”。连续按Ctrl+Shift+H组合键4次，再增加4个形状提示，将这5个形状提示分别放置在三棱锥的4个顶点以及中间那条边上，具体分布如图13-18所示。 （6）单击第24帧，此时会发现舞台上也给出了5个形状提示，与第1帧中的形状提示一一对应地布置该关键帧中的形状提示，如图13-19所示。这样，
