新标准中文版Flash+MX基础培训教程第4章.ppt

1、第4章 动画制作基础,本章要点 时间轴 制作补间动画 介绍帧,本章逻辑结构,4.1 时间轴和帧 4.1.1 时间轴概述 4.1.2 帧 4.2 帧的编辑 4.2.1 帧的选择 4.2.2 插入帧 4.2.3 帧的复制和粘贴 4.2.4 帧的移动和删除,4.2.5 动画帧的翻转 4.2.6 关键帧转换为普通帧 4.2.7 制作闪烁字母 4.3 逐帧动画 4.4 运动补间动画 4.4.1 创建运动补间动画 4.4.2 设置运动补间属性,4.5 形状补间动画 4.5.1 形状补间的创建 4.5.2 形状提示 4.6 绘图纸模式 4.6.1 绘图纸外观模式 4.6.2 绘图纸外观轮廓模式,4.6.3

2、编辑多帧模式 4.6.4 修改绘图纸标记,4.1 时间轴和帧,帧：一系列的单幅画面称为帧，动画的制作就是改变连续帧内容的过程。 时间轴：由帧组成的动画是通过【时间轴】面板实现的。面板主要由帧、层和播放指针组成。,4.1.1 时间轴概述,图所示为Flash的【时间轴】面板。,【时间轴】面板上各元素的具体内容： 标题栏： 播放头或当前帧指示器： 当前帧： 关键帧： 普通帧：,帧居中 ： 帧视图按钮 ： 帧频： 绘图纸按钮： 运行时间： 时间轴滚动条：,【时间轴】面板包括两个方面的内容： 时间 深度,4.1.2 帧,帧可分为以下两种： 关键帧 普通帧,下面介绍一下各种帧的标识： 图所示为新打开文件时

3、的状态，第1帧中带白背景的空心圆圈代表空白关键帧，即该帧中不包含任何内容。,如图所示，其中灰色背景带黑点的单元格为关键帧，关键帧之间的灰背景则表示这些帧与关键帧保持相同的内容，都是普通帧，最右侧带黑框的单元格表示普通帧中的结束帧。,图所示为设置了运动补间的帧视图，其中淡蓝背景的黑点所在单元格表示关键帧，关键帧之间淡蓝背景上的黑色箭头表示运动补间帧。,图所示为设置了形状补间的帧视图，其中淡绿背景的黑点所在的单元格表示关键帧，关键帧之间淡绿背景的黑色箭头表示形状补间帧。,关键帧之间如果有虚线，则表示未完成或中断的渐变，如图所示。,图所示为在已设置的至少两个关键帧后新加入一个图层后显示的空帧。,关键

4、帧上有个小写的字母a，表示此帧设置了交互动作，即使用【动作（Actions）】面板设置了动作语句，如图所示。,当关键帧上有一个小红旗，则表示该帧设置了标签，如图所示。,当关键帧上出现绿色的双斜杠，表示该帧设置了注释，如图所示。,4.2 帧的编辑,帧的编辑操作包括帧的选择、帧的复制、帧的粘贴、帧的移动等。,4.2.1 帧的选择,选择帧的方法如下： 在时间轴上单击某个单元格，则可以选中该方格代表的帧。当选择了一帧后，再按住【Shift】键单击另一帧，则可以选中这两帧之间包含的连续帧。选中的帧以黑色高亮显示。,按住【Ctrl】键并单击，可以选中不连续的多个帧。 如果需要选择【时间轴】面板中的所有帧，

5、可以执行【编辑(Edit)】 【选择所有帧(Select All Frames)】命令。,4.2.2 插入帧,用鼠标右击该帧，从弹出的快捷菜单中选择相应命令即可在某帧前插入一帧或将某帧设置为关键帧、空白关键帧，如图所示。,插入普通帧：从快捷菜单中选择【插入帧（Insert Frame）】命令或按【F5】键可插入一个普通帧时； 设置关键帧：可以从快捷菜单中选择【插入关键帧（Insert Keyframe）】命令或按【F6】键； 插入空白关键帧：从快捷菜单中选择【插入空白关键帧（Insert Black Keyframe）】命令或按【F7】键。,4.2.3 帧的复制和粘贴,复制帧时可按如下方法进行

6、操作： 1、在时间轴上先将需要复制的帧选中（可以 是单帧，也可是多帧）。,2、单击鼠标右键，从弹出的快捷菜单中选择 【拷贝帧（Copy Frames）】命令，如图 所示，即可将选中的帧复制到剪贴板上。,3、在时间轴上选取粘贴的目标帧，右击该帧，在 弹出的快捷菜单中选择【粘贴帧（Paste Frames）】命令，将复制的帧粘贴上去。如 果选择的是多帧，则执行【粘贴帧】命令后会 把选中的多个帧覆盖。,4.2.4 帧的移动和删除,选取一帧或多帧，用鼠标直接将其拖至需要的地方即可移动帧。 要删除一个或多个帧，需要先将其选中，然后从快捷菜单中选择【删除帧（Remove Frames）】命令，使用【剪切帧

7、】命令也可达到删除帧的目的。,4.2.5 动画帧的翻转,选择需要翻转的动画帧（可以包括多层，即选取一段动画）右击，从弹出的快捷菜单中选择【翻转帧（Reverse Frames）】命令，可以将动画的播放次序颠倒。,4.2.6 关键帧转换为普通帧,要把关键帧转换为普通帧，只需右击该关键帧，从弹出的快捷菜单中选择【清除关键帧（Clear Keyframe）】命令，即可将当前关键帧清除，原来的内容由前面帧的内容取代。,4.2.7 制作闪烁字母,具体操作如下： 1、新建一个文件，将背景色设置为深蓝色。 2、选择【文本工具】，将线条颜色设置为黄 色，然后在舞台上输入字母f。 3、用【箭头工具】选择文字，将

8、文字打散，使 其变成Flash可以处理的矢量图形。,4、执行【修改】 【形状（Shape）】 【柔化填 充边缘（Soften Fill Edges）】命令，打开 【柔化填充边缘】对话框，按图所示进行设 置。 效果如下图所示：,5、选择时间轴上的第5帧，插入关键帧，此时该 帧中的内容与第1帧保持相同的内容。 6、选择第6帧，插入空白关键帧。再选择第8帧 插入普通帧，时间轴如图所示。,7、将1至8帧选中，复制选中的帧。 8、右击第9帧，粘贴所复制的帧。,9、选择【箭头工具】，单击舞台上文字的中心 部分，然后拖动鼠标至右侧，如图所示，释 放鼠标。,10、选择第13帧文字的描边部分，再按【Delete

9、】 键删除选取部分。最后效果如图所示。,11、右击第17帧，从弹出的快捷菜单中选择【粘 贴帧】命令。 12、将第9帧至第16帧选中，对帧进行复制，然 后在第25帧处进行帧的粘贴，完成后的【时 间轴】面板如图所示。,13、将所有帧选中，然后拖动鼠标到第10帧处， 移动帧及其结果如图所示。,14、执行【控制】 【测试影片（Test Movie）】 命令测试动画效果。,4.3 逐帧动画,下面通过现有图片素材来介绍创建逐帧动画的制作方法，具体操作步骤如下： 1、新建一个文件，此时的时间轴上的第一帧是个 空白关键帧。 2、在其他图片处理程序（如Photoshop）中将准 备好的图片素材打开，选中后按【C

10、trl+C】组 合键进行复制。,3、在Flash中，选择第1帧，按【Ctrl+V】组合 键进行粘贴，如图所示。,4、用步骤2中同样的方法复制素材的第2幅图片。 5、在第2帧处插入一个关键帧，然后将复制的图 片粘贴到第2帧中，如图所示。,6、选择【预览（Preview）】模式，在时间轴 上显示每一帧的动画内容，如图所示。,7、执行【控制】 【测试影片】命令测试动画效 果。,4.4 运动补间动画,补间动画是相对于逐帧动画而言的，它通过定义动画某一部分的起点和终点的内容，然后由Flash自动生成两端点间各帧（一般称这些帧为补间帧）的内容。,在Flash中可以建立两种补间动画形状补间（Shape Tw

11、een）和运动补间（Motion Tween），每种都有其自己的特性。本节我们先介绍运动补间动画的制作。,4.4.1 创建运动补间动画,下面先通过一个例子来说明创建运动补间的方法，具体操作步骤如下：,1、新建一个文件，然后利用工具箱的工具制作 一幅图片，如图所示。,2、新建一个图层【图层 2】。 3、用【画笔工具】在舞台上绘制一面红旗，将 颜色设置为红色，如图所示。,4、选择图层 1中的第15帧，插入普通帧。 5、选择图层 2，在第1帧上将红旗拖到旗杆的下 方，按【Ctrl+G】组合键使其成组。,6、选择第15帧，插入关键帧，将红旗拖至旗杆 上方，如图所示，然后释放鼠标。,7、用鼠标右击图层

12、2的第1帧，从弹出的快捷菜 单中选择【创建补间动画（Create Motion Tween）】命令，此时的【时间轴】面板如 图所示。,8、下面来制作降旗的动画。在图层 1的第60帧 处插入普通帧。 9、在图层 2的第45帧处插入关键帧，然后选中 第1帧到第15帧，复制选中的帧。 10、用鼠标右击第46帧，将复制的帧粘贴到此 处。,11、选择第46至60帧，翻转动画帧，使升旗过 程变为降旗过程。此时的【时间轴】面板及 画面如下图所示。,4.4.2 设置运动补间属性,当选中【时间轴】面板中的某帧（尚未创建补间动画的帧）后，属性面板即显示为帧属性面板，如图所示。,该面板中各选项功能如下所述： 帧：

13、补间：,当在时间轴上选择设置了运动补间的帧，帧属性面板会有所变化，如图示。,以下是对应于运动补间模式的选项设置： 【简易(Ease)】： 【旋转（Rotate）】： 【调整到路径（Orient to path）】： 【同步（Sync）】： 【吸附】：,运动补间属性面板中各选项的使用具体操作步骤如下： 1、 接上例中的文件，新建图层3。,2、选择新建的图层 3的第1帧，按【Ctrl+R】组 合键导入一幅图片，如图所示。 3、按【Ctrl+B】组合键将导入的图形打散。,4、从工具箱中选择【套索工具】，从其选项区 中选择【魔术棒】工具，单击导入图片的白 色背景部分，将其选中，按【Delete】键删

14、除，效果如图所示。,5、将图层 3的第1帧中的内容全部选中，按 【Ctrl+G】组合键使所有图像成组，成组后 的对象会被蓝框框住。将成组后的对象移到 舞台的右上角。,6、在第60帧处插入关键帧，并将图像移到舞台 的左下角，如图所示。,7、选择第1帧，然后在帧属性面板中进行如图所 示的设置。 8、按【Ctrl+Enter】组合键测试动画效果。,4.5 形状补间动画,形状补间动画是指形状逐渐发生变化的动画，一般称为变形动画。,4.5.1 形状补间的创建,建立变形动画的般步骤如下： 1、新建一个文件，将该文件背景设置为深蓝色。 2、用【直线工具】在舞台的左侧绘制一个长方体 轮廓，用填充工具为长方体三

15、个面填充上不同 的颜色，如图所示。,3、在第40帧处插入关键帧，然后将该帧的长方体删除。 4、选择【椭圆工具】，将填充颜色设置为渐变填充色，如图所示。,5、在舞台的右侧绘制一个圆形，用【填充变 形】调整渐变填充，结果如图所示。,6、在【时间轴】面板中的第80帧处插入关键 帧，将该帧中的圆球删除，选择【矩形工 具】，将【笔触颜色】设置为无色，【填充颜 色】设置如上图所示，只是将【填充样式】设 置为【线性】，绘制一个矩形。接下来在舞台 左侧绘制一个矩形。,7、用【箭头工具】将矩形变形为图所示的箭头形状。,8、单击第1帧，将【补间】设置为【形状】，如 图所示。,在形状补间的【属性】面板中还可设置如下

16、选项： 【简易】： 【混合（Blend）】：,9、用同样的方法将第40帧处的【补间】设置为【形状】，此时的时间轴及舞台如下图所示。,10、按【Ctrl+Enter】组合键，测试动画效果， 图所示为变形动画中的两个画面。,4.5.2 形状提示,形状提示是一个有颜色的实心小圆，上面写着一个英文字母，表示物体部位的名称，最多可以用26个英文字母来代表图形上的部位。,利用形状提示来制作开门变形动画的具体操作步骤： 1、新建一个文件，导入一幅图片，用【任意 变形工具】将导入图片的大小调整为合适 大小，如下图所示。,2、新建【图层 2】和【图层 3】。选择【矩形工 具】，将【笔触颜色】设置为无色，【填充

17、颜色】设置为红色，在舞台中绘制一个矩形 块，如下图所示。,3、在第60帧处插入关键帧，选择【任意变形工 具】，将矩形向左压缩，如图所示。,4、选择第1帧，接着将【属性】面板中的【补 间】设置为【形状】。 5、选择第1帧，执行【修改】 【形状】 【添加 形状提示（Add Shape Hint）】命令，添加 形状提示，在舞台上会出现一个写着字母a的 红色形状提示。,6、按【Ctrl+Shift+H】组合键再多添加三个图形 提示，然后用鼠标将形状提示移动到矩形的 四个角上，如图所示。,7、选择渐变的结束帧。将上面的提示移动到变 形后的目的位置，此时效果如图所示。,8、选择红色矩形块，复制到【图层 3

18、】，并将 其移动到背景图片的右侧。 9、在图层 3的第60帧处插入关键帧，将图层 2 第60帧中的图片复制到图层 3的第60帧。,10、选择图层 3的第1帧，在其属性面板中将 【补间】设置为【形状】，然后采用步骤5 和步骤6中的方法为该层中的对象添加形状 提示。图下页所示为在第60帧处的形状提 示。,11、再新建一个层，用【矩形工具】在舞台上绘 制两个长条矩形，并用渐变色进行填充，形 成立体的门柱。在第60帧处插入关键帧，如 图所示。,12、执行菜单命令【控制】 【播放】播放影 片，查看变形效果。,4.6 绘图纸模式,Flash MX中提供的绘图纸模式按钮有4个，如图所示。当单击【时间轴】面板

19、下方的前三个绘图纸按钮中的任意一个时，“绘图纸标记”会出现在时间轴上，如图所示。,4.6.1 绘图纸外观模式,单击【绘图纸外观（Onion Skin）】按钮 ，在时间轴标尺上会出现一对黑括号，位于时间轴标尺上的起始游标和终止游标之间的帧在画板上从深到浅显示出来（如图所示）。,用鼠标移动任意一个游标可同时看到更多的帧，如图所示。,4.6.2 绘图纸外观轮廓模式,与【绘图纸外观】模式惟一区别：【绘图纸外观轮廓】模式只能显示其他图层的轮廓线，画面比较单一，而在【绘图纸外观】模式下，其他帧显示的内容与实际帧没有多少的差别，显示的是一个整体。,单击【绘图纸外观轮廓（Onion Skin Outlines

20、）】按钮 ，位于时间轴标尺上的起始游标和终止游标之间的帧以轮廓模式显示，如下页图所示。,4.6.3 编辑多帧模式,单击【编辑多帧】按钮，会看到位于游标之间的各关键帧，如下页图所示。,调整上图所示各帧中图片的间距并将它们移到舞台的中央，具体操作步骤如下： 1、单击【编辑多帧】按钮，使文件处于【编辑 多帧】模式下。 2、拖动时间轴标尺上的显示游标，将所有要移 动的帧都包括在游标之间。,3、选取显示在画板的所有对象和时间轴游标之 间所有的帧，如图所示。,4、单击工具栏中的【对齐】按钮，打开【对齐】 面板，单击其中的【垂直中齐】按钮和【水平 中间分布】按钮，得到如图所示的效果。,5、用鼠标拖动选中的对象，将其移到舞台的中 央，如图所示。,4.6.4 修改绘图纸标记,单击【修改绘图纸标记】按钮，弹出下拉菜单，如图所示。,菜单各选项介绍： 总是显示标记（Always Show Markers）： 锚定绘图纸（Anchor Onion）： 绘图纸 2（Onion 2）： 绘图纸5（Onion 5）