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

《网页设计与制作-13(续) flash基础动画制作.ppt》由会员分享，可在线阅读，更多相关《网页设计与制作-13(续) flash基础动画制作.ppt（57页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、1 基础动画掌握逐帧动画、形状补间动画和运动补间动画的制作方法，以及遮罩层和引导层的使用，并能够制作出简单的动画。本例将制作红点线框勾边的中空文字，如图3-1 所示。通过本例的学习，读者应掌握如何改变文档大小，以及 （文字工具）和 （墨水瓶工具）的使用方法。1.1 线框文字要点：图3-1 线框文字操作步骤：图3-2 设置文档属性图3-3 设置文本属性 1）启动Flash CS6 软件，新建一个Flash 文件（ActionScript 2.0）。2）改变文档大小。方法：执行菜单中的“修改|文档”（快捷键Ctrl+J）命令，在弹出的“文档属性”对话框中设置背景色为蓝色（#000066），文档尺寸

2、为300 像素75 像素，如图3-2 所示，然后单击“确定”按钮。3）选择工具箱上的 （文字工具），然后在“属性”面板中设置参数如图3-3 所示，接着在工作区中单击鼠标，输入文字“CARTOON”。提示：为了便于与背景观看，可以暂时将文字颜色设置为黄色（#FFFF00）。图3-4 设置对齐参数图3-5 对齐效果 4）单击面板组缩略图中的 （对齐）按钮，调出“对齐”面板，然后勾选“与舞台对齐”选项，接着单击 （水平中齐）和 （垂直中齐）按钮，如图3-4 所示，将文字中心对齐，结果如图3-5 所示。5）执行菜单中的“修改|分离”（快捷键Ctrl+B）命令两次，将文字分离为图形。提示：第1次执行“分

3、离”命令，将整体文字分离为单个字母，如图3-6所示；第2次执行“分离”命令，将 单个字母分离为图形，如图3-7所示。图3-6 将整体文字分离为单个字母 图3-7 将单个字母分离为图形图3-8 对文字描边后删除填充区域 6）对文字进行描边处理。方法：单击工具栏上的 （墨水瓶）工具，将颜色设为绿色（#00CC00），然后对文字进行描边。最后按键盘上的Delete键删除填充区域，结果如图3-8 所示。提示：字母“A”、“R”、“O”的内边界也需要单击，否则内部边界将不会被加上边框。7）对描边线段进行处理。方法：选择工具箱上的 （选择工具），框选所有的文字，然后在“属性”面板中单击 （编辑笔触样式）按

4、钮，如图3-9 所示。接着在弹出的“笔触样式”对话框中设置参数，如图3-10 所示，再单击“确定”按钮，结果如图3-11 所示。提示：通过该对话框可以得到多种不同线型的边框。8）执行菜单中的“控制|测试影片|测试”（快捷键Ctrl+Enter）命令，即可看到效果。图3-9 单击“编辑笔触样式”按钮图3-10 对描边线段进行处理图3-11 对描边线段处理后的效果 本例将制作色彩渐变的文字，如图3-12 所示。通过本例的学习，读者掌握如何改变背景颜色，以及 （文字工具）、（颜料桶工具）和 （墨水瓶工具）的使用方法。1.2 彩虹文字要点：图3-12 彩虹文字 1）启动Flash CS6 软件，新建一

5、个Flash 文件（ActionScript 2.0）。2）改变文档大小。方法：执行菜单中的“修改|文档”（快捷键Ctrl+J）命令，在弹出的“文档属性”对话框中设置背景色为蓝色（#000066），文档尺寸为450 像素75 像素，如图3-13 所示，然后单击“确定”按钮。操作步骤：图3-13 设置文档属性提示：如果需要以后新建文件的背景色继承深蓝色的属性，可以单击“设为默认值”按钮。3）选择工具箱上的 （文字工具），设置参数如图3-14 所示，然后在工作区中单击鼠标，输入文字“动漫游戏产业”。图3-14 设置文本属性图3-16 填充文字 4）利用“对齐”面板，将文字中心对齐，结果如图3-15

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

7、并将它向上拖动，如图3-19 所示。图3-18 利用渐变变形工具单击文字图3-19 调整文字渐变方向 10）选择工具箱上的 （墨水瓶工具），设置填充色为白色，然后对每个文字边缘进行描边处理，结果如图3-20 所示。图3-20 对每个文字边缘进行描边处理后的效果 11）执行菜单中“控制|测试影片|测试”（快捷键Ctrl+Enter）命令，即可看到效果。本例将制作具有霓虹灯效果的文字，如图3-21 所示。通过本例的学习，读者应掌握将线条转换为可填充区域和柔化填充边缘的方法。1.3 霓虹灯文字要点：图3-21 霓虹灯文字 1）启动Flash CS6 软件，新建一个Flash 文件（ActionScr

8、ipt 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）执行菜单中的“修改|分离”（快捷键

9、Ctrl+B）命令两次，将文字分离为图形。6）对文字进行描边处理。方法：选择工具箱上的 （墨水瓶工具），设置笔触颜色为明黄色（#FFFF00），然后对文字进行描边，如图3-25 所示。接着按键盘上的Delete键删除填充区域，结果如图3-26 所示。图3-25 对文字进行描边处理提示：默认情况下笔触高度为1，此时使用的是默认高度。图3-26 删除填充区域图3-27 对文字进行描边处理图3-28 删除填充区域 7）选择工具箱上的 （选择工具），框选所有明黄色外框。然后将线宽设为1，实线。接着执行菜单中的“修改|形状|将线条转换为填充”命令，将明黄色边框转换为可填充的区域。8）执行菜单中的“修改|

10、形状|柔化填充边缘”命令，在弹出的“柔化填充边缘”对话框中设置参数，如图3-27 所示，使其向外模糊，然后单击“确定”按钮，结果如图3-28 所示。提示：在对直线、图形线框和文字边框等线条进行柔化处理前，必须先执行菜单中的“修改|形状|将线段 转换为填充”命令，将线条转换为可填充的区域。9）执行菜单中“控制|测试影片|测试”（快捷键Ctrl+Enter）命令，即可看到文字效果。本例将用图片制作文字中的填充部分，且使文字外围是柔化的边框，如图3-29 所示。通过本例的学习，读者应掌握如何将文档与导入的图片相匹配，以及柔化填充边缘的使用方法。1.4 彩图文字要点：图3-29 彩图文字 1）启动Fl

11、ash CS6 软件，新建一个Flash 文件（ActionScript 2.0）。2）执行菜单中的“文件|导入|导入到舞台”（快捷键Ctrl+R）命令，在弹出的“导入”对话框中选择配套光盘中的“素材及结果1.4 彩图文字 背景.bmp”图片，如图3-30 所示，然后单击“打开”按钮。操作步骤：图3-30 选择导入图片 3）此时，填充图片比场景要大，为了使场景与填充图片等大，需执行菜单中的“修改|文档”（快捷键Ctlr+J）命令，在弹出的如图3-31 所示的“文档属性”对话框中，单击“内容”单选按钮。然后将背景色为深蓝色（#000066），单击“确定”按钮。4）执行菜单中的“修改|分离”（快捷

12、键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 将文字

13、分离为图形 7）执行菜单中的“修改|形状|柔化填充边缘”命令，在弹出的“柔化填充边缘”对话框中设置参数，如图3-36 所示，使其向外模糊，然后单击“确定”按钮。8）配合键盘上的Shift键，选中所有文字中的填充部分，然后按键盘上的Delete键删除，结果如图3-37 所示。图3-36 设置“柔化填充边缘”参数 图3-37 删除填充部分 9）将文字移到图片中，如图3-38 所示。然后按住键盘上的Shift键，点选图片文字外围部分和字母中多余的部分，按Delete键将它们删除，最终结果如图3-39 所示。图3-38 将文字移到图片中 图3-39 删除多余部分提示：在将文字线框移到图片中之前，必须先

14、将图片分离成图形，否则文字将被放置到图片的下层，从而 无法看到。另外，文字不能直接写入图片中，如果直接在图片中编辑文字，则文字的填充部分被删 除后将显示蓝色的背景，而不显示彩色图片。本例将制作花朵盛开的效果，如图3-55 所示。通过本例的学习，读者应掌握对图形制作变形过渡动画的方法。1.5 盛开的花朵要点：图3-55 盛开的花朵 操作步骤：图3-56 将圆形中心对齐工作区中心 1）启动Flash CS6 软件，新建一个Flash 文件（ActionScript 2.0）。2）执行菜单中的“修改|文档”（快捷键Ctrl+J）命令，在弹出的“文档属性”对话框中设置背景色为浅绿色（#00FF00），

15、然后单击“确定”按钮。3）选择工具箱上的 （椭圆工具），设置笔触颜色为 ，填充为深蓝色（#00FF00），然后按住键盘上的Shift键，在工作区中创建一个“宽”和“高”均为160 的正圆形。提示：不用激活“图形绘制”按钮。4）执行菜单中的“窗口对齐”（快捷键Ctrl+K）命令，调出“对齐”面板，将圆形中心对齐工作区中心，结果如图3-56 所示。5）右击时间轴的第30 帧，在弹出菜单中选择“插入关键帧”（快捷键F6）命令，在第20 帧插入一个关键帧，时间轴如图3-57 所示。图3-57 在第20 帧插入一个关键帧 6）选择工具箱上的 （任意变形工具），调整工作区中的圆形，结果如图3-58所示。然

16、后在“变形”面板中确认 和 均为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

17、 填充花朵图形后的效果 9）右击时间轴中“图层1”的第1 帧，从弹出的快捷菜单中选择“创建补间形状”命令，此时时间轴如图3-65 所示。图3-65 时间轴分布 10）执行菜单中的“控制|测试影片|测试”（快捷键Ctrl+Enter）命令，打开播放器窗口，可以看到花朵盛开的效果。本例将制作彩虹文字从左旋转着运动到右方消失，然后再从右方运动到左方重现的效果，如图3-66 所示。通过本例的学习，读者掌握翻转帧、创建传统补间动画的方法。1.6 运动的文字要点：图3-66 运动的文字操作步骤：图3-67 设置文档属性 1）启动Flash CS6 软件，新建一个Flash 文件（ActionScript

18、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）选择工具箱上的 （颜料桶工具），设置填充色为 （彩虹

19、渐变），对文字进行填充，结果如图3-70 所示。6）执行菜单中的“修改|转换为元件”（快捷键F8）命令，在弹出的“转换为元件”对话框中设置参数，如图3-71 所示，然后单击“确定”按钮，结果如图3-72 所示。图3-71 “转换为元件”对话框 提示：将文字转换为元件的目的是为了后面创建传统补间动画。图3-72 转换为元件效果 7）右击“图层1”的第30 帧，从弹出的菜单中选择“插入关键帧”（快捷键F6）命令，插入一个关键帧。然后利用 （选择工具）向右移动text 元件，如图3-73 所示。8）右击时间轴中“图层1”的第1 帧，从弹出菜单中选择“创建传统补间”命令，此时时间轴如图3-74 所示。

20、下面按键盘上的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”，从而选中该层上的所有帧，然后单击鼠标右键，从弹出的快捷菜单中选择“复制帧”命令。接

21、着单击时间轴中的 （插入图层）按钮，新建一个“图层2”，再右键单击“图层2”的第30 帧，从弹出的快捷菜单中选择“粘贴帧”命令，此时时间轴分布如图3-77 所示。图3-77 时间轴分布 12）同时选择“图层2”第30 59 帧，然后右击，从弹出的快捷菜单中选择“翻转帧”命令。此时按键盘上的Enter键预览动画，可以看到文字从右向左直线运动并逐渐显现的效果。13）至此，运动的文字制作完毕。下面执行菜单中的“控制|测试影片|测试”（快捷键Ctrl+Enter）命令，打开播放器窗口，即可看到文字从左旋转着向右运动并逐渐消失，然后又从右向左直线运动并逐渐显现的效果。本例将制作小球落下时加速，弹起时减速

22、的效果，如图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 所示，然后单击“

23、确定”按钮。4）在工作区中调整小球的位置如图3-81所示。然后分别右击“图层1”的第5帧和第10帧，从弹出的快捷菜单中选择“插入关键帧”（快捷键F6）命令，插入两个关键帧。接着调整第5 帧中小球的位置，如图3-82 所示。图3-83 时间轴分布图3-81 调整小球的位置图3-82 调整第5 帧中小球的位置 5）选择时间轴中的“图层1”，然后在右侧帧控制区中单击右键，从弹出的快捷菜单中选择“创建传统补间”命令，此时时间轴分布如图3-83所示。6）按键盘上的Enter预览动画，会发现此时小球的运动是匀速的，不符合“落下时加速，弹起时减速”的自然规律，下面就来解决这个问题。方法：单击第1 帧，在“属

24、性”面板中设置“缓动”值为“-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 字母

25、变形要点：图3-86 字母变形效果 1）启动Flash CS6 软件，新建一个Flash 文件（ActionScript 2.0）。2）执行菜单中的“修改|文档”（快捷键Ctrl+J）命令，在弹出的“文档属性”对话框中设置背景色为浅蓝色（#3366FF），文档尺寸为550 像素400 像素，然后单击“确定”按钮。3）绘制字母外旋转的圆环。方法：选择工具箱上的 （椭圆工具），设置笔触颜色为嫩绿色（#00FF00），笔触高度为8，填充色为 ，如图3-87 所示。然后单击 （编辑笔触样式）按钮，在弹出的“笔触样式”对话框中设置参数，如图3-88 所示，单击“确定”按钮。操作步骤：图3-87 设置填充

26、和笔触颜色 图3-88 设置笔触样式 4）在工作区中拖动出一个圆形，然后选中圆形，在“属性”面板设置大小如图3-89 所示。接着利用“对齐”面板将圆形中心对齐，结果如图3-90 所示。5）选中圆形，执行菜单中的“修改|形状|将线条转换为填充”命令，然后执行菜单中的“修改|形状|柔化填充边缘”命令，在弹出的对话框中设置参数，如图3-91 所示，再单击“确定”按钮，结果如图3-92 所示。图3-89 设置圆形大小图3-90 将圆形中心对齐图3-91 设置“柔化填充边缘”参数图3-92 “柔化填充边缘”效果 6）选中柔化后的圆圈，执行菜单中的“修改|转换为元件”（快捷键F8）命令，在弹出的对话框中输

27、入元件的名称为“环”，如图3-93 所示，接着单击“确定”按钮，这时圆形和柔化边框被转换成了“环”图形元件。图3-93 设置圆形大小 7）右击时间轴中“图层 1”的第40 帧，在弹出菜单中选择“插入关键帧”（快捷键是F6）命令，插入关键帧。然后右击“图层 1”的第1 帧，在弹出的快捷菜单中选择“创建传统补间”命令。接着在属性面板中设置“旋转”为“顺时针”，次数为1，如图3-94 所示。8）按键盘上的Enter键预览动画，此时圆环会顺时针旋转一周。9）制作字母变形的动画。方法：单击时间轴下方的 （插入图层）按钮，在“图层 1”的上方增加一个“图层2”。10）选择工具箱上的 （文本工具），然后在“

28、属性”面板中设置字体“系列”为“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）选择工具箱上的 （文本工具），在“属性”面板中设置字体“颜色”为明黄色（#F

29、FFF00），设置其他参数与字母A 相同，然后在工作区中输入字母B。14）同理，将字母B 的中心与“环”元件中心对齐，并将它分离为图形，结果如图3-98 所示。15）分别在“图层 2”的第20、30 帧按快捷键F7（插入空白关键帧），插入空白关键帧，然后分别输入蓝色的字母“C”和紫色的字母“D”，并将它们与“环”元件的中心对齐，然后将它们分离为图形。16）右击“图层2”的第1 帧，然后从弹出的快捷菜单中选择“复制帧”命令，接着右击“图层2”的第40 帧，从弹出的快捷菜单中选择“粘贴帧”命令，结果如图3-99 所示。17）单击“图层2”，选中该层的所有帧，然后在右侧帧操作区中单击右键，从弹出的快

30、捷菜单中选择“创建补间形状”命令，此时时间轴分布如图3-100 所示。图3-98 在第10 帧输入字母B 并分离为图形 图3-99 将“图层2”的第1 帧粘贴到第40 帧图3-100 创建形状补间 18）执行菜单中的“控制|测试影片|测试”（快捷键Ctrl+Enter）命令，打开播放器窗口，即可看到字母变形的效果。提示：绿色的圆环必须转换为元件后才能加入旋转效果。另外，变形必须在图形之间进行，所以所有字母 都必须打碎成图形。本例将制作动画片中常见的结尾黑场动画，如图4-21 所示。通过本例的学习，读者应掌握利用“遮罩层”制作结尾黑场动画的方法。1.9 结尾黑场动画要点：图4-21 结尾黑场动画

31、 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

32、，插入普通帧，此时时间轴分布如图4-24 所示。5）单击时间轴下方的 （插入图层）按钮，新建“图层2”。然后利用工具箱中的 （椭圆工具），配合Shift键，绘制一个笔触颜色为 ，填充色为绿色（#00FF00）的正圆形，接着在“属性”面板中设置其“宽”和“高”均为180，并调整位置如图4-25 所示。图4-25 绘制正圆形提示：为了便于观看圆形所在位置，可以单击“图层2”后面的颜色框，将圆形以线框的方式进行显示，如图4-26 所示。6）执行菜单中的“修改|转换为元件（快捷键F8）”命令，然后在弹出的“转换为元件”对话框中设置参数如图4-27 所示，单击“确定”按钮，将其转换为图形元件。图4-26

33、 将圆形以线框显示图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键

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

35、元件”命令，在弹出的“转换为元件”对话框中设置参数，如图4-55 所示，然后单击“确定”按钮。4）右击时间轴的第30 帧，在弹出的快捷菜单中选择“插入关键帧”（快捷键F6）命令，从而在第30 帧处插入一个关键帧。然后右击第1 帧，从弹出菜单中选择“创建传统补间”命令，此时时间轴分布如图4-56 所示。图4-56 时间轴分布图4-57 添加引导层 5）右击时间轴左侧的“图层1”，从弹出的快捷菜单中选择“添加传统运动引导层”命令，添加引导线，如图4-57 所示。6）选择工具箱上的 （椭圆工具），设置笔触颜色为黑色（#000000），填充颜色为，然后在工作区中绘制椭圆形，结果如图4-58 所示。7）

36、选择工具箱上的 （选择工具），框选椭圆的下方部分，然后按键盘上的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 个椭圆运动的效果。