网页设计与制作-13(续) flash基础动画制作.ppt

1 基础动画掌握逐帧动画、形状补间动画和运动补间动画的制作方法，以及遮罩层和引导层的使用，并能够制作出简单的动画 本例将制作红点线框勾边的中空文字，如图3-1 所示通过本例的学习，读者应掌握如何改变文档大小，以及 （文字工具）和 （墨水瓶工具）的使用方法 1.1 线框文字要点：图3-1 线框文字操作步骤：图3-2 设置文档属性图3-3 设置文本属性 1）启动Flash CS6 软件，新建一个Flash 文件（ActionScript 2.0） 2）改变文档大小方法：执行菜单中的“修改| 文档”（快捷键〈Ctrl+J〉）命令，在弹出的“文档属性”对话框中设置背景色为蓝色（#000066），文档尺寸为300 像素×75 像素，如图3-2 所示，然后单击“确定”按钮 3） 选择工具箱上的 （文字工具），然后在“属性”面板中设置参数如图3-3 所示，接着在工作区中单击鼠标，输入文字“CARTOON”提示：为了便于与背景观看，可以暂时将文字颜色设置为黄色（#FFFF00）图3-4 设置对齐参数图3-5 对齐效果 4）单击面板组缩略图中的 （对齐）按钮，调出“对齐”面板，然后勾选“与舞台对齐” 选项，接着单击 （水平中齐）和 （垂直中齐）按钮，如图3-4 所示，将文字中心对齐， 结果如图3-5 所示。

5）执行菜单中的“修改| 分离”（快捷键〈Ctrl+B〉）命令两次，将文字分离为图形提示：第1次执行“分离”命令，将整体文字分离为单个字母，如图3-6所示；第2次执行“分离”命令，将 单个字母分离为图形，如图3-7所示图3-6 将整体文字分离为单个字母 图3-7 将单个字母分离为图形图3-8 对文字描边后删除填充区域 6）对文字进行描边处理方法：单击工具栏上的 （墨水瓶）工具，将颜色设为绿色（#00CC00），然后对文字进行描边最后按键盘上的〈Delete〉键删除填充区域，结果如图3-8 所示提示：字母“A”、“R”、“O”的内边界也需要单击，否则内部边界将不会被加上边框 7） 对描边线段进行处理方法：选择工具箱上的 （选择工具）， 框选所有的文字，然后在“属性”面板中单击 （编辑笔触样式）按钮，如图3-9 所示接着在弹出的“笔触样式” 对话框中设置参数，如图3-10 所示，再单击“确定”按钮，结果如图3-11 所示提示：通过该对话框可以得到多种不同线型的边框 8）执行菜单中的“控制| 测试影片| 测试”（快捷键〈Ctrl+Enter〉）命令，即可看到效果。

图3-9 单击“编辑笔触样式”按钮图3-10 对描边线段进行处理图3-11 对描边线段处理后的效果 本例将制作色彩渐变的文字，如图3-12 所示通过本例的学习，读者掌握如何改变背景颜色， 以及 （文字工具）、（颜料桶工具）和 （墨水瓶工具）的使用方法1.2 彩虹文字要点：图3-12 彩虹文字  1）启动Flash CS6 软件，新建一个Flash 文件（ActionScript 2.0） 2）改变文档大小方法：执行菜单中的“修改| 文档”（快捷键〈Ctrl+J〉）命令，在弹出的“文档属性”对话框中设置背景色为蓝色（#000066），文档尺寸为450 像素×75 像素，如图3-13 所示，然后单击“确定”按钮操作步骤：图3-13 设置文档属性提示：如果需要以后新建文件的背景色继承深蓝色的属性，可以单击“设为默认值”按钮 3）选择工具箱上的 （文字工具），设置参数如图3-14 所示，然后在工作区中单击鼠标， 输入文字“动漫游戏产业”图3-14 设置文本属性图3-16 填充文字 4）利用“对齐”面板，将文字中心对齐，结果如图3-15 所示。

7） 此时，填充是针对每一个字母进行的，这是不正确的为了解决这个问题，需要选择 （颜料桶工具）对文字进行再次填充，结果如图3-17 所示图3-15 将文字中心对齐 5）执行菜单中的“修改| 分离”（快捷键〈Ctrl+B〉）命令两次，将文字分离为图形 6） 选择工具箱上的 （颜料桶工具），设置填充色为 ，然后对文字进行填充，结果如图3-16 所示图3-17 对文字进行再次填充 8）调整渐变色的方向方法：选择工具箱上的 （渐变变形工具），在工作区中单击文字， 这时，在文字左、右两方将出现两条竖线，如图3-18 所示 9）将鼠标拖动到右上方的圆圈处，此时光标将变成4 个旋转的小箭头，然后按住鼠标并将它向上拖动，如图3-19 所示图3-18 利用渐变变形工具单击文字图3-19 调整文字渐变方向 10） 选择工具箱上的 （墨水瓶工具），设置填充色为白色，然后对每个文字边缘进行描边处理，结果如图3-20 所示图3-20 对每个文字边缘进行描边处理后的效果 11）执行菜单中“控制| 测试影片| 测试”（快捷键〈Ctrl+Enter〉）命令，即可看到效果。

 本例将制作具有霓虹灯效果的文字，如图3-21 所示通过本例的学习，读者应掌握将线条转换为可填充区域和柔化填充边缘的方法1.3 霓虹灯文字要点：图3-21 霓虹灯文字 1）启动Flash CS6 软件，新建一个Flash 文件（ActionScript 2.0） 2）执行菜单中的“修改| 文档”（快捷键〈Ctrl+J〉）命令，在弹出的“文档属性”对话框中设置背景色为深蓝色（#000066），文档尺寸为550 像素×300 像素，如图3-22 所示，然后单击“确定”按钮操作步骤：图3-22 设置文档属性 3）选择工具箱上的 （文字工具），然后在“属性”面板中设置字体为“汉仪大黑简”、大小为90.0，文字颜色为红色（#FF0000），如图3-23 所示，接着在工作区中单击鼠标，输入文字“奇妙小世界” 4）利用“对齐”面板，将文字中心对齐，结果如图3-24 所示图3-23 设置文本属性图3-24 输入文字 5）执行菜单中的“修改| 分离”（快捷键〈Ctrl+B〉）命令两次，将文字分离为图形。

6）对文字进行描边处理方法：选择工具箱上的 （墨水瓶工具），设置笔触颜色为明黄色（#FFFF00），然后对文字进行描边，如图3-25 所示接着按键盘上的〈Delete〉键删除填充区域， 结果如图3-26 所示图3-25 对文字进行描边处理提示：默认情况下笔触高度为1，此时使用的是默认高度图3-26 删除填充区域图3-27 对文字进行描边处理图3-28 删除填充区域 7）选择工具箱上的 （选择工具），框选所有明黄色外框然后将线宽设为1，实线接着执行菜单中的“修改| 形状| 将线条转换为填充”命令，将明黄色边框转换为可填充的区域 8）执行菜单中的“修改| 形状| 柔化填充边缘”命令，在弹出的“柔化填充边缘”对话框中设置参数，如图3-27 所示，使其向外模糊，然后单击“确定”按钮，结果如图3-28 所示提示：在对直线、图形线框和文字边框等线条进行柔化处理前，必须先执行菜单中的“修改| 形状| 将线段 转换为填充”命令，将线条转换为可填充的区域 9）执行菜单中“控制| 测试影片| 测试”（快捷键〈Ctrl+Enter〉）命令，即可看到文字效果。

 本例将用图片制作文字中的填充部分，且使文字外围是柔化的边框，如图3-29 所示通过本例的学习，读者应掌握如何将文档与导入的图片相匹配，以及柔化填充边缘的使用方法1.4 彩图文字要点：图3-29 彩图文字 1）启动Flash CS6 软件，新建一个Flash 文件（ActionScript 2.0） 2）执行菜单中的“文件| 导入| 导入到舞台”（快捷键〈Ctrl+R〉）命令，在弹出的“导入” 对话框中选择配套光盘中的“素材及结果\1.4 彩图文字\ 背景.bmp”图片，如图3-30 所示，然后单击“打开”按钮操作步骤：图3-30 选择导入图片  3）此时，填充图片比场景要大，为了使场景与填充图片等大，需执行菜单中的“ 修改|文档” （快捷键〈Ctlr+J〉）命令，在弹出的如图3-31 所示的“文档属性”对话框中，单击“内容”单选按钮然后将背景色为深蓝色（#000066），单击“确定”按钮 4）执行菜单中的“修改| 分离”（快捷键〈Ctrl+B〉）命令，将图片分离成图形，如图3-32 所示图3-31 单击“内容” 图3-32 分离后效果 5）选择工具箱上的 （文本工具），然后在“属性”面板中设置字体为“Arial”、大小为150.0，文字颜色为绿色（ #00FF00）， 如图3-33所示，接着在工作区中单击鼠标。

输入文字“Adobe”，如图3-34 所示 6）将文字移到图片以外，然后执行菜单中的“修改| 分离”（快捷键〈Ctrl+B〉）命令两次， 将文字分离为图形，结果如图3-35 所示图3-34 输入文字图3-33 设置文本参数提示：将文字分离成图形的目的是为了与分离成图形的图片进行计算，以便删除不需要的部分图3-35 将文字分离为图形 7）执行菜单中的“修改| 形状| 柔化填充边缘”命令，在弹出的“柔化填充边缘”对话框中设置参数，如图3-36 所示，使其向外模糊，然后单击“确定”按钮 8） 配合键盘上的〈Shift〉键，选中所有文字中的填充部分，然后按键盘上的〈Delete〉键删除， 结果如图3-37 所示图3-36 设置“柔化填充边缘”参数 图3-37 删除填充部分 9）将文字移到图片中，如图3-38 所示然后按住键盘上的〈Shift〉键，点选图片文字外围部分和字母中多余的部分，按〈Delete〉键将它们删除，最终结果如图3-39 所示图3-38 将文字移到图片中 图3-39 删除多余部分提示：在将文字线框移到图片中之前，必须先将图片分离成图形，否则文字将被放置到图片的下层，从而 无法看到。

另外，文字不能直接写入图片中，如果直接在图片中编辑文字，则文字的填充部分被删 除后将显示蓝色的背景，而不显示彩色图片 本例将制作花朵盛开的效果，如图3-55 所示通过本例的学习，读者应掌握对图形制作变形过渡动画的方法1.5 盛开的花朵要点：图3-55 盛开的花朵 操作步骤：图3-56 将圆形中心对齐工作区中心 1）启动Flash CS6 软件，新建一个Flash 文件（ActionScript 2.0） 2）执行菜单中的“修改| 文档”（快捷键〈Ctrl+J〉）命令，在弹出的“文档属性”对话框中设置背景色为浅绿色（#00FF00），然后单击“确定”按钮 3）选择工具箱上的 （椭圆工具），设置笔触颜色为 ，填充为深蓝色（#00FF00），然后按住键盘上的〈Shift〉键，在工作区中创建一个“宽”和“高”均为160 的正圆形提示：不用激活“图形绘制”按钮 4）执行菜单中的“窗口｜对齐”（快捷键〈Ctrl+K〉）命令，调出“对齐”面板，将圆形中心对齐工作区中心，结果如图3-56 所示。

 5）右击时间轴的第30 帧，在弹出菜单中选择“插入关键帧”（快捷键〈F6〉）命令，在第20 帧插入一个关键帧，时间轴如图3-57 所示图3-57 在第20 帧插入一个关键帧 6） 选择工具箱上的 （任意变形工具），调整工作区中的圆形，结果如图3-58所示然后在“变形”面板中确认 和 均为100%，如图3-59 所示，接着在工作区中将变形后的圆形轴心点移到下方位置，如图3-60 所示 图3-58 调整圆形形状 图3-59 设置变形参数 图3-60 调整圆形轴心点位置  7） 在“变形”面板中设置旋转角度为30°，如图3-61 所示，然后单击 （重置选区和变形） 按钮11 次，制作出花朵图形接着利用“对齐”面板将其中心对齐，如图3-62 所示图3-61 设置旋转角度为30° 图3-62 将花朵图形中心对齐 8） 在“颜色”面板中调出红- 黄放射状渐变如图3-63 所示，然后填充花朵图形，结果如图3-64 所示图3-63 在第20 帧插入一个关键帧图3-64 填充花朵图形后的效果 9）右击时间轴中“图层1”的第1 帧，从弹出的快捷菜单中选择“创建补间形状”命令， 此时时间轴如图3-65 所示。

图3-65 时间轴分布 10）执行菜单中的“控制| 测试影片| 测试”（快捷键〈Ctrl+Enter〉）命令，打开播放器窗口， 可以看到花朵盛开的效果 本例将制作彩虹文字从左旋转着运动到右方消失，然后再从右方运动到左方重现的效果， 如图3-66 所示通过本例的学习，读者掌握翻转帧、创建传统补间动画的方法1.6 运动的文字要点：图3-66 运动的文字操作步骤：图3-67 设置文档属性 1）启动Flash CS6 软件，新建一个Flash 文件（ActionScript 2.0） 2）执行菜单中的“修改| 文档”（快捷键〈Ctrl+J〉）命令，在弹出的“文档属性”对话框中设置背景色为深蓝色（#000066），文档尺寸为550 像素×250 像素， 如图3-67 所示， 然后单击“确定”按钮 3）选择工具箱上的 （文本工具），设置参数如图3-68 所示，然后在工作区中单击鼠标， 输入文字“Flash 动画技术推动动漫产业发展 ”，结果如图3-69 所示图3-68 设置文本属性图3-70 对分离为图形的文字进行填充后的效果图3-69 输入文字 4）执行菜单中的“修改| 分离”（快捷键〈Ctrl+B〉）命令两次，将文字分离为图形。

5）选择工具箱上的 （颜料桶工具），设置填充色为 （彩虹渐变），对文字进行填充， 结果如图3-70 所示 6）执行菜单中的“修改| 转换为元件”（快捷键〈F8〉）命令，在弹出的“转换为元件”对话框中设置参数，如图3-71 所示，然后单击“确定”按钮，结果如图3-72 所示图3-71 “ 转换为元件”对话框 提示：将文字转换为元件的目的是为了后面创建传统补间动画图3-72 转换为元件效果 7）右击“图层1”的第30 帧，从弹出的菜单中选择“插入关键帧”（快捷键〈F6〉）命令， 插入一个关键帧然后利用 （选择工具）向右移动text 元件，如图3-73 所示 8）右击时间轴中“图层1”的第1 帧，从弹出菜单中选择“创建传统补间”命令，此时时间轴如图3-74 所示下面按键盘上的〈Enter〉键预览动画，可以看到文字从左向右运动 图3-73 在第30 帧向右移动文本 图3-74 创建传统补间动画 9） 制作文字旋转效果方法：单击“图层1”的第1 帧，然后在“属性”面板中设置参数， 如图3-75 所示。

10） 制作文字在30 帧消失效果方法：单击“图层1”的第30 帧，然后选择工作区中的文字， 在“属性”面板中设置Alpha 的数值为0%，如图3-76 所示图3-75 设置第1 帧的属性 图3-76 设置第30 帧的属性 11）制作文字从右往左逐渐显现的效果方法：选择“图层1”，从而选中该层上的所有帧， 然后单击鼠标右键，从弹出的快捷菜单中选择“复制帧”命令接着单击时间轴中的 （插入图层）按钮，新建一个“图层2”，再右键单击“图层2”的第30 帧，从弹出的快捷菜单中选择“粘贴帧”命令，此时时间轴分布如图3-77 所示图3-77 时间轴分布 12）同时选择“图层2”第30 ～ 59 帧，然后右击，从弹出的快捷菜单中选择“翻转帧”命令此时按键盘上的〈Enter〉键预览动画，可以看到文字从右向左直线运动并逐渐显现的效果 13）至此，运动的文字制作完毕下面执行菜单中的“ 控制|测试影片|测试”（快捷键〈Ctrl+Enter〉）命令，打开播放器窗口，即可看到文字从左旋转着向右运动并逐渐消失，然后又从右向左直线运动并逐渐显现的效果。

 本例将制作小球落下时加速，弹起时减速的效果，如图3-78 所示通过本例的学习，读者应掌握利用“缓动”值来调整动画中加速和减速的方法1.7 弹跳的小球要点：图3-78 弹跳的小球加速减速操作步骤：图3-79 绘制正圆形图3-80 转换为ball 元件 1）启动Flash CS6 软件，新建一个Flash 文件（ActionScript 2.0） 2）选择工具箱上的 （椭圆工具），设置笔触颜色为，填充色为绿- 黑放射状渐变，然后配合键盘上的〈Shift〉键在工作区中绘制一个正圆形，如图3-79 所示 3） 选中小球， 执行菜单中的“修改| 转换为元件”（快捷键〈F8〉）命令，在弹出的“转换为元件” 对话框中设置参数，如图3-80 所示，然后单击“确定”按钮 4） 在工作区中调整小球的位置如图3-81所示然后分别右击“ 图层1”的第5帧和第10帧， 从弹出的快捷菜单中选择“插入关键帧”（快捷键〈F6〉）命令，插入两个关键帧接着调整第5 帧中小球的位置，如图3-82 所示图3-83 时间轴分布图3-81 调整小球的位置图3-82 调整第5 帧中小球的位置 5） 选择时间轴中的“图层1”，然后在右侧帧控制区中单击右键，从弹出的快捷菜单中选择“ 创建传统补间”命令，此时时间轴分布如图3-83所示。

 6）按键盘上的〈Enter〉预览动画，会发现此时小球的运动是匀速的，不符合“落下时加速， 弹起时减速”的自然规律，下面就来解决这个问题方法：单击第1 帧，在“属性”面板中设置“缓动”值为“-100”，如图3-84 所示；然后单击第5 帧，在“属性”面板中设置“缓动”值为“100”， 如图3-85 所示图3-84 在第1 帧设置缓动值为“-100”图3-85 在第5 帧设置缓动值为“100” 7） 至此，整个动画制作完成执行菜单中的“控制| 测试影片| 测试”（快捷键〈Ctrl+Enter〉） 命令打开播放器，即可看到小球落下时加速，弹起时减速的动画效果 本例将制作红色字母A 到黄色字母B，再到蓝色字母C，再到紫色字母D，最后回到红色字母A 的字母变形动画，如图3-86 所示通过本例的学习，读者应掌握“创建补间形状”和“创建传统补间”动画的综合应用 1.8 字母变形要点：图3-86 字母变形效果 1）启动Flash CS6 软件，新建一个Flash 文件（ActionScript 2.0） 2）执行菜单中的“修改| 文档”（快捷键〈Ctrl+J〉）命令，在弹出的“文档属性”对话框中设置背景色为浅蓝色（#3366FF），文档尺寸为550 像素×400 像素，然后单击“确定”按钮。

3）绘制字母外旋转的圆环方法：选择工具箱上的 （椭圆工具），设置笔触颜色为嫩绿色（#00FF00），笔触高度为8，填充色为 ，如图3-87 所示然后单击 （编辑笔触样式） 按钮，在弹出的“笔触样式”对话框中设置参数，如图3-88 所示，单击“确定”按钮操作步骤：图3-87 设置填充和笔触颜色 图3-88 设置笔触样式 4）在工作区中拖动出一个圆形，然后选中圆形，在“属性”面板设置大小如图3-89 所示接着利用“对齐”面板将圆形中心对齐，结果如图3-90 所示 5）选中圆形，执行菜单中的“修改| 形状| 将线条转换为填充”命令，然后执行菜单中的“修改| 形状| 柔化填充边缘”命令，在弹出的对话框中设置参数，如图3-91 所示，再单击“确定” 按钮，结果如图3-92 所示图3-89 设置圆形大小图3-90 将圆形中心对齐图3-91 设置“柔化填充边缘”参数图3-92 “ 柔化填充边缘”效果 6）选中柔化后的圆圈，执行菜单中的“修改| 转换为元件”（快捷键〈F8〉）命令，在弹出的对话框中输入元件的名称为“环”，如图3-93 所示，接着单击“确定”按钮，这时圆形和柔化边框被转换成了“环”图形元件。

图3-93 设置圆形大小 7）右击时间轴中“图层 1”的第40 帧，在弹出菜单中选择“插入关键帧”（快捷键是〈F6〉） 命令，插入关键帧然后右击“图层 1”的第1 帧，在弹出的快捷菜单中选择“创建传统补间”命令接着在属性面板中设置“旋转”为“顺时针”，次数为1，如图3-94 所示 8）按键盘上的〈Enter〉键预览动画，此时圆环会顺时针旋转一周 9）制作字母变形的动画方法：单击时间轴下方的 （插入图层）按钮，在“图层 1”的上方增加一个“图层2” 10） 选择工具箱上的 （文本工具）， 然后在“属性”面板中设置字体“系列”为“Arial”、“样式”为“Bold”、“大小”为“160”，“颜色”为红色（#FF0000），如图3-95 所示，接着在工作区中输入字母“A”，最后使用“对齐”面板将文字在水平和垂直方向上中心对齐图3-94 设置补间动画 图3-95 设置文本属性 11）按〈Ctrl+B〉组合键，将文字分离为图形，如图3-96 所示 12） 在“ 图层2 ” 的第10帧处， 按快捷键〈F7〉（插入空白关键帧）， 插入空白关键帧，如图3-97 所示。

图3-96 将文字分离为图形 图3-97 第10 帧处插入空白关键帧 13） 选择工具箱上的 （文本工具），在“属性”面板中设置字体“颜色”为明黄色（#FFFF00）， 设置其他参数与字母A 相同，然后在工作区中输入字母B 14） 同理， 将字母B 的中心与“环”元件中心对齐， 并将它分离为图形， 结果如图3-98 所示 15）分别在“图层 2”的第20、30 帧按快捷键〈F7〉（插入空白关键帧）， 插入空白关键帧， 然后分别输入蓝色的字母“C”和紫色的字母“D”，并将它们与“环”元件的中心对齐，然后将它们分离为图形 16）右击“图层2”的第1 帧，然后从弹出的快捷菜单中选择“复制帧”命令，接着右击“图层2”的第40 帧，从弹出的快捷菜单中选择“粘贴帧”命令，结果如图3-99 所示 17） 单击“图层2”，选中该层的所有帧，然后在右侧帧操作区中单击右键，从弹出的快捷菜单中选择“创建补间形状”命令，此时时间轴分布如图3-100 所示图3-98 在第10 帧输入字母B 并分离为图形 图3-99 将“图层2”的第1 帧粘贴到第40 帧图3-100 创建形状补间 18）执行菜单中的“控制| 测试影片| 测试”（快捷键〈Ctrl+Enter〉）命令，打开播放器窗口， 即可看到字母变形的效果。

提示：绿色的圆环必须转换为元件后才能加入旋转效果另外，变形必须在图形之间进行，所以所有字母 都必须打碎成图形 本例将制作动画片中常见的结尾黑场动画，如图4-21 所示通过本例的学习，读者应掌握利用“遮罩层”制作结尾黑场动画的方法1.9 结尾黑场动画要点：图4-21 结尾黑场动画 1）启动Flash CS6 软件，新建一个Flash 文件（ActionScript 2.0） 2）执行菜单中的“修改| 文档”（快捷键〈Ctrl+J〉）命令，在弹出的“文档属性”对话框中设置背景色为黑色（#000000），文档尺寸为860 像素×600 像素，如图4-22 所示，然后单击“确定”按钮操作步骤：图4-22 设置文档尺寸 3）执行菜单中的“文件| 导入| 导入到舞台”命令，导入配套光盘中的“素材及结果\4.2 结尾黑场动画\ 背景.jpg”文件，并利用“对齐”面板将其居中对齐，如图4-23 所示图4-23 将图片居中对齐图4-24 时间轴分布 4） 选择“ 图层1”的第60 帧， 按快捷键〈 F5〉， 插入普通帧， 此时时间轴分布如图4-24 所示。

 5） 单击时间轴下方的 （插入图层）按钮，新建“图层2”然后利用工具箱中的 （椭圆工具）， 配合〈Shift〉键，绘制一个笔触颜色为 ，填充色为绿色（#00FF00）的正圆形， 接着在“属性”面板中设置其“宽”和“高”均为180，并调整位置如图4-25 所示图4-25 绘制正圆形提示：为了便于观看圆形所在位置，可以单击“图层2”后面的颜色框，将圆形以线框的方式进行显示， 如图4-26 所示 6） 执行菜单中的“修改| 转换为元件（快捷键〈F8〉）”命令， 然后在弹出的“转换为元件” 对话框中设置参数如图4-27 所示，单击“确定”按钮，将其转换为图形元件图4-26 将圆形以线框显示图4-27 设置“转换为元件”参数 7）选择“图层2”的第35 帧，按快捷键〈F6〉，插入关键帧 8） 利用工具箱中的 （任意变形工具）， 将第1帧的“ 圆形遮罩”元件放大， 如图4-28所示 9）在“图层2”的第1 帧和35 帧之间单击右键，从弹出的快捷菜单中选择“创建传统补间” 命令，此时时间轴分布如图4-29 所示。

然后按键盘上的〈Enter〉键，播放动画，即可看到圆形从大变小的动画图4-28 在第1 帧将圆形元件放大图4-29 时间轴分布 10）右击“图层2”，从弹出的快捷菜单中选择“遮罩层”命令，此时时间轴分布如图4-30 所示图4-30 时间轴分布 11） 按键盘上的〈Enter〉键，播放动画，即可看到图片可视区域逐渐变小的效果 12） 至此， 本例制作完成 执行菜单中的“ 控制|测试影片|测试”（快捷键〈 Ctrl+Enter〉） 命令，即可观看到遮罩动画效果 本例将制作一个沿路径运动的小球，如图4-54 所示通过本例的学习，读者应掌握运动引导层的使用方法1.10 引导线动画要点：图4-54 引导线动画 操作步骤：图4-55 将圆转换为ball 元件 1）启动Flash CS6 软件，新建一个Flash 文件（ActionScript 2.0） 2）选择工具箱上的 （椭圆工具），设置笔触颜色为 ，填充颜色为黑- 绿径向渐变， 然后在工作区中绘制正圆形。

3）执行菜单中的“修改| 转换为元件”命令，在弹出的“转换为元件”对话框中设置参数， 如图4-55 所示，然后单击“确定”按钮 4）右击时间轴的第30 帧，在弹出的快捷菜单中选择“插入关键帧”（快捷键〈F6〉）命令， 从而在第30 帧处插入一个关键帧然后右击第1 帧，从弹出菜单中选择“创建传统补间”命令， 此时时间轴分布如图4-56 所示图4-56 时间轴分布图4-57 添加引导层 5）右击时间轴左侧的“图层1”，从弹出的快捷菜单中选择“添加传统运动引导层”命令， 添加引导线，如图4-57 所示 6）选择工具箱上的 （椭圆工具），设置笔触颜色为黑色（#000000），填充颜色为， 然后在工作区中绘制椭圆形，结果如图4-58 所示 7）选择工具箱上的 （选择工具），框选椭圆的下方部分，然后按键盘上的〈Delete〉键将其删除，结果如图4-59 所示图4-58 绘制椭圆形 图4-59 删除椭圆形下方部分图4-60 在第1 帧放置小球提示：每两个椭圆间只能有一个点相连接，如果相接的不是一个点而是一条线，则小球会沿直线运动而不 是沿圆形路径运动。

图4-61 在第30 帧放置小球 8）同理，绘制其余的3 个椭圆并删除下半部分 9） 利用工具箱上的 （选择工具），将4 个圆相接然后回到“图层1”，在第1 帧放置小球， 如图4-60 所示接着在第30 帧放置小球，如图4-61 所示 10）执行菜单中的“控制| 测试影片| 测试”（快捷键〈Ctrl+Enter〉）命令，即可看到小球依次沿4 个椭圆运动的效果。