flash入门培训教材

1.11.11.11.1Flash8Flash8Flash8Flash8工作环境工作环境工作环境工作环境Flash以便捷、完美、舒适的动画编辑环境，深受广大动画制作爱好者的喜爱，在制作动画之前，先对工作环境进行介绍，包括一些基本的操作方法和工作环境的组织和安排。1.1.11.1.11.1.11.1.11111．开始页．开始页．开始页．开始页运行Flash8，首先映入眼帘的是“开始页”，“开始页”将常用的任务都集中放在一个页面中，包括“打开最近项目”、“创建新项目”、“从模板创建”、“扩展”以及对官方资源的快速访问。如图1-10所示。图1-10开始页如果要隐藏“开始页”，可以单击选择“不再显示此对话框”，然后在弹出的对话框单击“确定”按钮。如果要再次显示开始页，可以通过选择“编辑”|“首选参数”命令，打开“首选参数”对话框，然后在“常规”类别中设置“启动时”选项为“显示开始页”即可。2222．工作窗口．工作窗口．工作窗口．工作窗口

在“开始页”，选择“创建新项目”下的“Flash文档”，这样就启动Flash8的工作窗口并新建一个影片文档。如图1-11所示。图1-11Flash8的工作窗口Flash8的工作窗口由标题栏、菜单栏、主工具栏、文档选项卡、编辑栏、时间轴、工作区和舞台、工具箱以及各种面板组成。窗口最上方的是“标题栏”，自左到右依次为控制菜单按钮、软件名称、当前编辑的文档名称和窗口控制按钮。“标题栏”下方是“菜单栏”，在其下拉菜单中提供了几乎所有的Flash8.0命令项，通过执行它们可以满足用户的不同需求。“菜单拦”下方是“主工具栏”，通过它可以快捷的使用Flash8.0的控制命令。“主工具栏”的下方是“文档选项卡”，主要用于切换当前要编辑的文档，其右侧是文档控制按钮。在“文档选项卡”上右击，还可以在弹出的快捷菜单中使用常用的文件控制命令。如图1-12所示。

图1-12文档选项卡“文档选项卡”下方是“编辑栏”，可以用于“时间轴”的隐藏或显示、“编辑场景”或“编辑元件”的切换、舞台显示比例设置等。如图1-13所示。“编辑栏”下方是“时间轴”，用于组织和控制文档内容在一定时间内播放的图层数和帧数。时间轴左侧是图层，图层就像堆叠在一起的多张幻灯胶片一样，在舞台上一层层地向上叠加。如果上面一个图层上没有内容，那么就可以透过它看到下面的图层。Flash中有普通层、引导层、遮罩层和被遮罩层4种图层类型，为了便于图层的管理，用户还可以使用图层文件夹。图1-13时间轴“时间轴”下方是“工作区”和“舞台”。Flash8扩展了舞台的工作区，可以在上面存储更多的项目。舞台是放置动画内容的矩形区域，这些内容可以是矢量插图、文本框、按钮、导入的位图图形或视频剪辑等。如图1-14所示。

图1-14舞台工作时根据需要可以改变“舞台“显示的比例大小，可以在“时间轴”右上角的“显示比例”中设置显示比例，最小比例为8%，最大比例为2000%，在下拉菜单中有三个选项，【符合窗口大小】选项用来自动调节到最合适的舞台比例大小；【显示帧】选项可以显示当前帧的内容；【全部显示】选项能显示整个工作区中包括在“舞台”之外的元素，如图1-15所示。图1-15舞台显示比例选择工具箱中的【手形工具】，在舞台上拖动鼠标可平移舞台；选择【缩放工具】，在舞台上单击可放大或缩放舞台的显示；选择【缩放工具】后，在工具箱的【选项】下会显示出两个按钮，分别为【放大】和【缩小】，分别单击它们可在“放大视图工具”与“缩小视图工具”之间切换，如图1-16所示。选择选择【缩放工具】后，按住键盘上的Alt键，单击舞台，可快捷缩小视图。

图1-16缩放工具的选项窗口左侧是功能强大的“工具箱”，它是Flash中最常用到的一个面板，由“工具”、“查看”、“颜色”和“选项”四部分组成。如图1-15所示。图1-15工具箱

多个“面板”围绕在“舞台”的下面和右面，包括常用的【动作】面板、【属性】/【滤镜】/【参数】面板组，还有【颜色】面板组和【库】面板等。面板是Flash工作窗口中最重要的操作对象，下面我们逐一进行介绍（这里只节选了部分重点内容，详细内容请看《中文版Flash8基础与实例教程（职业版）》）。1.1.21.1.21.1.21.1.21111．面板的基本操作．面板的基本操作．面板的基本操作．面板的基本操作（1）打开面板可以通过选择“窗口”菜单中的相应命令打开指定面板。（2）关闭面板在已经打开的面板标题栏上右击，然后在快捷菜单中选择“关闭面

板组”命令即可。（3）重组面板在已经打开的面板标题栏上右击，然后在快捷菜单中选择“将面板组合至”某个面板中即可。（4）重命名面板组在面板组标题栏上右击，然后在快捷菜单中选择“重命名面板组”命令，打开“重命名面板组”对话框。在定义完“名称”后，单击“确定”按钮即可。如果不指定面板组名称，各个面板会依次排列在同一标题栏上。（5）折叠或展开面板单击标题栏或者标题栏上的折叠按钮可以将面板折叠为其标题栏。再次单击即可展开。（6）移动面板可以通过拖动标题栏左侧的控点移动面板位置或者将固定面板移动为浮动面板。（7）恢复默认布局可以通过选择“窗口”菜单中的“工作区布局”|“默认”命令即可。2222．．．．““““帮助帮助帮助帮助””””面板面板面板面板“帮助”面板包含了大量信息和资源，对Flash的所有创作功能和ActionScript语言进行了详尽的说明。“帮助”面板可以随时对软件的使用或动作脚本语法进行查询，使用户更好地使用软件的各种功能。如图1-16所示。图1-16“帮助”面板如果从未使用过Flash，或者只使用过有限的一部分功能，可以从“Flash 入门”选项开始学习。在其上方有一组快速访问的工具按钮，在文本框中输入词条或短语，然后单击“搜索”按钮，包含该词条或短语的主题列表即会显示出来。单击“更新”按钮，可获得新的信息。如果有新的信息提示，确认连接到Internet，可按照说明下载帮助系统。3333．．．．““““动作动作动作动作””””面板面板面板面板“动作”面板可以创建和编辑对象或帧的ActionScript代码，主要由“动作工具箱”、“脚本导航器”和“脚本”窗格组成。如图1-17所示。关于此面板的详细应用，我们会在后面的章节中具体讲解。

图1-17“动作”面板4444．．．．““““属性属性属性属性””””面板面板面板面板使用【属性】面板可以很容易地设置舞台或时间轴上当前选定对象的最常用属性，从而加快了Flash文档的创建过程。如图1-18所示。当选定对象不同时，“属性”面板中会出现不同的设置参数，针对此面板的使用在后面的章节里会陆续介绍。图1-18“属性”面板5555．．．．““““滤镜滤镜滤镜滤镜””””面板面板面板面板Flash8新增了功能，从而大大增强了其设计方面的能力。这项新特性对制作Flash动画产生了便利和巨大影响。它们几乎颠覆了长期以来，对Flash设计能力欠缺的固有偏见，使大家不得不对其刮目相。默认情况下，“滤镜”面板和【属性】面板、“参数”面板组成一个面板组。如图1-19所示。针对此面板的使用在后面的章节里会详细介绍。

图1-19“滤镜”面板本课小结本课小结本课小结本课小结熟悉Flash8的操作界面主要包括系统菜单、绘图工具栏、舞台、时间轴、属性面板各其他一些浮动面板。Flash8.0新功能介绍本课实例：投影滤镜文字特效在计算机绘图领域中，根据成图原理和绘制方法的不同，分为矢量图和位图两种类型。矢量图形是由一个个单独的点构成的，每一个点都有其各自的属性，如位置、颜色等。因此，矢量图与分辨率无关，对矢量图进行缩放时，图形对象仍保持原有的清晰度和光滑度，不会发生任何偏差，如图2-0-1所示是放大了16倍的矢量图效果。图2-0-1矢量图放大到16倍时依然清晰

位图图像是由象素点构成的，象素点的多少将决定位图图像的显示质量和文件大小，位图图像的分辨率越高，其显示越清晰，文件所占的空间也就越大。因此，位图图像的清晰度与分辨率有关。对位图图像进行放大时，放大的只是象素点，位图图像的四周会出现锯齿状。如图2-0-2所示是放大了16倍的位图效果。图2-0-2位图放大16倍时模糊不清在Flash动画制作过程中，会大量的运用到矢量图形。虽然有一系列的功能强大的专门矢量图制作软件，如Corel公司的CorelDRAW软件、Macromedia公司的FreeHand软件和Adobe公司的Illustrator 软件等，而运用Flash自身的矢量绘图功能将会更方便，更快捷。在这一章里，我们将通过FLASH基本绘图工具的学习，绘制出一些简单的矢量图。另外，Flash也具备一定的位图处理能力，虽然比不上专业的位图处理软件，但是对于制作动画过程中需要对位图的一些简单除了，它还是能够胜任的。第一节第一节第一节第一节基本绘图工具（上）基本绘图工具（上）基本绘图工具（上）基本绘图工具（上）Flash提供了各种工具来绘制自由形状或准确的线

条、形状和路径，并可用来对填充对象涂色，如图2-1-1所示是Flash工具箱。

图2-1-1绘图工具面板我们将分两节来学习这些工具的使用方法。在本节里，我们学习线条工具、滴管工具、墨水瓶工具、箭头工具、刷子工具、任意变形工具、颜料桶等工具的基本用法。1111【线条工具】是Flash中最简单的工具。现在我们就来画一条直线。鼠标单击【线条工具】，移动鼠标指针到舞台上，在你希望直线开始的地方按住鼠标拖动，到结束点松开鼠标，一条直线就画好了。【线条工具】能画出许多风格各异的线条来。打开【属性】面板，在其中，我们可以定义直线的颜色、粗细和样式，如图2-1-2所示。

图2-1-2直线【属性】面板在图2-1-2所示的【属性】面板中，单击其中的【笔触颜色】按钮，会出现一个调色板对话框，同时光标变成滴管状。用滴管直接拾取颜色或者在文本框里直接输入颜色的16进制数值。颜色以#开头，如#99FF33，如图2-1-3所示。图2-1-3笔触调色板现在来画出各种不同的直线。单击【属性】面板中的【自定义】按钮，会弹出一个【笔触样式】对话框，如图2-1-4所示。图2-1-4【笔触样式】对话框

为了方便观察，我们把粗细定为3象素（pts），选择不同的线型和颜色，来看看我们画出的线条，如图2-1-5所示。图2-1-5不同类型的线条试一试改变它的各项参数，会对你的绘图有很大帮助。【滴管工具】和【墨水瓶工具】可以很快地将一条直线的颜色样式套用到别的线条上。用【滴管工具】单击上面的直线，看看【属性】面板，它显示的就是该直线的属性，而且工具也自动变成了【墨水瓶工具】，如图2-1-6所示。

图2-1-6使用【滴管工具】选取线条属性使用【墨水瓶工具】单击其它线条，看看什么结果：所有线条的属性都变成了和滴管工具选中的直线一样了。如果你需要更改这条直线的方向和长短，Flash也为我们提供了一个很便捷的工具：【箭头工具】。【箭头工具】的作用是选择对象、移动对象、改变线条或对象轮廓的形状。单击选择【箭头工具】，然后移动鼠标指针到直线的端点处，指针右下角变成直角状，这时拖动鼠标可以改变直线的方向和长短，如图2-1-7所示。图2-1-7鼠标移到端点处如果鼠标指针移动到线条中任意处，指针右下角会变成弧线状，拖动鼠标，可以将直线变成曲线。这是一个很有用处的功能，在我们鼠标绘图还不能随心所欲时，它可以帮助我们画出所需要的曲线，如图2-1-8所示。

图2-1-8鼠标移到线条中间2222现在我们就来实践一下，练习画一片树叶。打开FALSH软件，系统会自动建立一个FLASH文档，在这里我们不改变文档的属性，直接使用其默认值。（1）新建图形元件执行【插入】|【新建元件】命令，或者按快捷键CTRL+F8，弹出创建新元件对话框，在【名称】文本对话框中输入元件名称“树叶”，【行为】选择“图形”，单击【确定】按钮，如图2-1-9所示。图1-1-9创建图形元件这时工作区变为“树枝”元件的编辑状态，如图2-1-10所示。

图2-1-10“树叶”图形元件编辑场景说明：图形元件是Flash的基本元素，有关它的详细内容请参阅第4章的有关内容。（2）绘制树叶图形在“树叶”图形元件编辑场景中，首先用【线条工具】画一条直线，【笔触颜色】设置为深绿色，如图2-1-11所示。图2-1-11画直线然后用【箭头工具】将它拉成曲线，如图2-1-12所示。

图2-1-12拉成曲线再用【线条工具】绘制一个直线，用这条直线连接曲线的两端点，如图2-1-13所示。图2-1-13连接两端用【箭头工具】将这条直线也拉成曲线，如图2-1-14所示。图2-1-14拉成曲线一片树叶的基本形状已经出来了，现在我们画叶脉，在两端点间画直线，然后拉成曲线，如图2-1-15和图2-1-16所示。图2-1-15画叶脉线图2-1-16直线变曲再画旁边的细小叶脉，可以全用直线，也可以略加弯曲，这样，一片简单的树叶就画好了，如图2-1-17所示。

图2-1-17完成效果图（3）编辑和修改树叶如果在画树叶的时候出现错误，比如说，画出的叶脉不是你所希望的样子，你可以执行【编辑】|【撤销】命令撤销前面一步的操作，也可以选择下面更简单的方法：用【箭头工具】单击你想要删除的直线，这条直线变成网点状，

说明它已经被选取，你可以对它进行各种修改，如图2-1-18所示。图2-1-18被选取状态要移动它，就按住鼠标拖动，要删除它，就直接按DEL键。按住SHIFT键连续单击线条，可以同时选取多个对象。如果要选取全部的线条，是否得按住SHIFT键挨个点击呢？不需要，我们用黑色箭头工具拉出一个选取框来，就可以将其全部选中了，如图2-1-19所示。

图2-1-19框选对象说明：在一条直线上双击，也可以将和这条直线相连并且颜色、粗细、样式相同的整个线条范围全部选取。（4）给树叶上色接下来我们要给这片树叶填上颜色。在工具箱中看到这个【颜色】选项了吗？如图2-1-20所示。图2-1-20【颜色】选项单击【填充颜色】按钮，会出现一个调色板，同时光标变成吸管状，如图2-1-21所示。

图2-1-21调色板说明：你除了可以选择调色板中的颜色外，还可以点选屏幕上任何地方吸取你所需要的颜色。如果你觉得调色板的颜色太少不够选，单击一下调色板右上角的【颜色选择器】按钮，会弹出一个【颜色】对话框，其中有更多的颜色选项，在这里，你能把选到的颜色添加到自定义颜色中，如图2-1-22所示。图2-1-22【颜色】对话框在【自定义颜色】选项下单击一个自定义色块，该色块会被虚线包围，在【颜色】对话框右边的【调色板】中单击你喜欢的颜色，上下拖动右边颜色条上的箭头，移到你需要的深浅度上，单击【添加到自定义颜色】按钮，这个色块就被你收藏起来了。下一次要使用时，打开这个【颜色】面板，在自定义色中可以方便的选取你中意的颜色。好了，现在我们在调色板里选取绿色，单击工具箱里【颜料桶工具】，在画好的叶子上单击一下，看看什么效果，如图2-1-23所示。

图2-1-23填充颜色只有一小块颜色？原来，这个颜料桶只能在一个封闭的空间里填色。取消刚刚的填色，现在我们用【橡皮工具】将线条擦出一个缺口，再看效果，如图2-1-24所示。图2-1-24填充色在封闭空间内你看，残缺线条的两边都填上了颜色。好，我们还是一块一块的填上颜色吧。但是在填充颜色前，你一定要将树叶图形恢复到使用【橡皮工具】擦除操作前的模样哦。这时，你可能会想，如果我们刚才先填充颜色再画叶脉就省事多了。是的，你想得一点没错！没关系，随着操作的增加，我们的经验会越来越丰富的。最后填充完的效果如图2-1-25所示。

图2-1-25颜色填充后效果至此，一个树叶图形就绘制好了。请你执行【窗口】|【库】命令，打开【库】面板，你将发现【库】面板中出现一个“树叶”图形元件，如图2-1-26所示。图2-1-26【库】面板中的“树叶“图形元件说明：【库】面板是存储Flash元件的场所，我们所创建的元件对象以及从外部导入的图像、声音等对象都保存在这里，这里的元件可以拖放到场景中重复使用。有关【库】面板的详细内容请你参阅第4章的相关内容。（5）【颜料桶工具】选项单击【颜料桶工具】后，在工具箱下边的【选项】里有四个选项，可以根据自己的需要来确定，读者

可以自己试一下，如图2-1-26所示。图2-1-26颜料桶工具选项说明：【颜料桶工具】是对某一区域进行单色、渐变色或位图进行填充，注意不能作用于线条。选择【颜料桶工具】后，在【工具箱】下边的【选项】中单击【空隙大小】按钮,会弹出四个选项，如图1-2-11所示。其中，【不封闭空隙】表示要填充的区域必须在完全封闭的状态下才能进行填充；【封闭小空隙】表示要填充的区域在小缺口的状态下可以进行填充；【封闭中等空隙】表示要填充的区域在中等大小缺口状态下进行填充；【封闭大空隙】表示要填充的区域在较大缺口状态下也能填充。但在Flash中，即使中大缺口，值也是很小的，所在要对大的不封闭区域填充颜色，一般用笔刷。3333【刷子工具】可以随意地画色块。当你单击工具箱中的【刷子工具】后，工具箱下边就会显示它的【选项】，我们先看看它的【选项】，如图2-1-27所示。图2-1-27刷子工具选项在这里，我们可以选定画笔的大小和样式以及它的填色模式。读者可以自己选取不同的大小和样式练

习练习，先找一找感觉。下面我们利用刚刚画成的树叶来详细讲解它的填色模式。在图2-1-27所示的【选项】下单击【填充模式】按钮，则弹出填充模式下拉列表，如图2-1-28所示。

图2-1-28刷子的填色模式（1）标准绘画选择【刷子工具】，并将【填充颜色】设置为黄色，当然也可以是其它色。先选择【标准绘画】模式，移动笔刷（当选择了【刷子工具】后，鼠标指针就变为刷子形状）到舞台的树叶图形上，拖动鼠标在叶子上乱抹几下，观察一下效果，如图2-1-29所示。图2-1-29标准绘画模式你能发现，不管是线条还是填色范围，只要是画笔经过的地方，都变成了画笔的颜色。（2）颜料填充选择【颜料填充】模式，它只影响了填色的内容，不会遮盖住线条，如图2-1-30所示。

图2-1-30颜料填充模式（3）后面绘画选择【后面绘画】模式，无论你怎么画，它都在图像的后方，不会影响前景图像，如图2-1-3所示。图2-1-31后面绘画模式（4）颜料选择选择【颜料选择】模式，你先用画笔抹几下，好象丝毫不起作用。这是因为我们没有选择范围。用【箭头工具】选中叶片的一块，再使用画笔，你看，颜色

就上去了，如图2-1-32所示。图2-1-32颜料选择模式（5）内部绘画选择【内部绘画】模式，在绘画时，画笔的起点必须是在轮廓线以内，而且画笔的范围也只作用在轮廓线以内，如图2-1-33所示。图2-1-33内部绘画模式4444

现在我们要把这孤零零的一片树叶组合成树枝。你想一想，如果用这么一模一样的树叶，要把它组成树枝，是不是很难看呢？Flash为我们提供了一个很好的工具：【任意变形工具】。利用【任意变形工具】我们可以将前面绘制的那个树叶改变成需要的形状。【任意变形工具】可以旋转缩放元件，也可以对图形对象进行扭曲、封套变形。当你在工具箱中选择【任意变形工具】后，工具箱的下边就会出现相应的【选项】，如图2-1-34所示。图2-1-34任意变形工具选项说明：【任意变形工具】的【选项】中共包括5个按钮，从上向下依次是：【对齐对象】、【旋转与倾斜】、【缩放】、【扭曲】和【封套】。你可以用鼠标指向这些按钮，相应的按钮功能就会显示出来。另外，当你选择了【任意变形工具】后，【选项】中的按钮并不是马上都被激活，除了【对齐对象】按钮，其他按钮都是灰色显示，只有你在场景中选择了具体的对象以后，其他4个按钮才变成可用状态。（1）旋转树叶选择【任意变形工具】后，单击舞台上的树叶，这时树叶被一个方框包围着，中间有一个小圆圈，这就是变形点，当我们进行缩放旋转时，就以它为中心，如图2-1-35所示。

图2-1-35变形点这个点是可以移动的。将光标移近它，光标下面会多了一个圆圈，按住鼠标拖动，将它拖到叶柄处，我们需要它绕叶柄旋转，如图2-1-36和图2-1-37所示。图2-1-36选取变形点图2-1-37拖动变形点到叶柄处再把鼠标指针移到方框的右上角，鼠标变成状圆弧状，表示这时就可以进行旋转了。向下拖动鼠标，叶子绕控制点旋转，到合适位置松开鼠标，效果如图2-1-38所示。图2-1-38旋转后的树叶（2）复制树叶用【箭头工具】单击舞台上的树叶图形，执行【编辑】|【复制】命令，然后再执行【编辑】|【粘贴】命令，这样就复制得到一个同样的树叶，如图2-1-39所示。

图2-1-39复制树叶（3）变形树叶将粘帖好的树叶拖到旁边，再用【任意变形工具】进行旋转。使用【任意变形工具】时，也可以象使用【箭头工具】一样移动树叶的位置。拖动任一角上的缩放手柄，可以将对象放大或缩小。拖动中间的手柄，可以在垂直和水平方向上放大缩小，甚至翻转对象。请你将树叶适当变形，如图2-1-40所示。图2-1-40缩放对象说明：【任意变形工具】的各项功能也可以使用菜单栏中【修改】|【变形】命令来实现，如图2-1-41所示。

图2-1-41变形命令（4）创建“三片树叶”图形元件再复制一张树叶出来，我们用【任意变形工具】将三片树叶调整成如图2-1-42所示形状。在调整过程中请注意，当调整效果不满意时，也许你的树叶已经不在选取状态，有时要重新选取整片树叶范围很困难，这就需要多使用编辑撤销，以恢复选取状态。图2-1-42树叶组合如图2-1-42所示的三片树叶图形创建好以后，将它们全部选中，然后执行【修改】|【转换为元件】命令，将它们转换为名字为“三片树叶”的图形元件。（5）绘制树枝请注意，以上的绘图操作我们都是在“树叶”编辑场景完

成的，现在我们返回到主场景【场景1】。请你单击时间轴右上角的【场景1】按钮，如图2-1-43所示。

图2-1-43切换到【场景1】单击【刷子工具】，选择【画笔形状】为圆形，大小自定，选择【后面绘画】模式，移动鼠标指针到场景中，画出树枝形状，如图2-1-44所示。图2-1-44画出树枝（6）组合树叶和树枝执行【窗口】|【库】命令，或者使用快捷键CTRL+L，打开【库】面板，你可以看到，【库】面板中出现两个图形元件，这两个图形元件就是我们前面绘制的“树叶”图形元件和“三片树叶”图形元件，如图2-1-45所示。

图2-1-45元件库单击“树叶”图形元件，将其拖放到场景的树枝图形上，用【任意变形工具】进行调整。元件【库】里的元件可以重复使用，你只要改变它的长短大小方向就能表现出纷繁复杂的效果来，完成效果如图2-1-46所示。图2-1-46完成后的树枝效果

1.51.51.51.5情人节贺卡情人节贺卡情人节贺卡情人节贺卡本节要制作一个综合范例――情人节贺卡。在这个范例的制作过程中会使用前面学习的很多绘图工具，并且讲解一些新的绘图方法和技巧。另外，由于这个范例图形比较复杂，我们还使用了“图形元件”这个对象类型，利用“图形元件”可以更加方便的制作复杂图形。范例最终效果如图2-105所示。图2-105情人节贺卡1.1.1.1.““““””””（1）新建一个Flash8影片文档。设置舞台背景颜色为蓝色，其他保持默认设置。（2）执行【插入】|【新建元件】命令，或者按快捷键Ctrl+F8，弹出【创建新元件】对话框，在【名称】文本框中输入元件名称为“烛焰”，选择【行为】为【图形】。如图2-106所示。图2-106新建图形元件

（3）单击“确定”按钮，进入到“烛焰”元件的编辑场景。使用【椭圆工具】绘制一个仅有边框无填充色的椭圆，使用【选择工具】调整，如图2-107所示。图2-107绘制烛焰边框（4）执行【窗口】|【混色器】命令，填充样式设为放射状。在渐变条上将左边色标设置为白色，并拖动到偏右方以加大白色在整个渐变色中的比例。将右边色标设置为黄色，如图2-108所示。图2-108混色器设置（5）将场景中的图形填充渐变色后，烛焰的色彩并不尽如人意，需要使用【填充变形工具】进行调整。选择【填充变形工具】单击填充色，会出现一个边上带有三个手柄的环形边框。我们用鼠标分别按住中心的圆圈或边上的手柄里推外拉、上下左右的进行调整，现在将烛焰的颜色调整为上下略带一点黄色，上边黄色略多，如图2-109所示。

图2-109调整填充色2.2.2.2.““““””””（1）执行【插入】|【新建元件】命令，或者按快捷键Ctrl+F8，弹出【创建新元件】对话框，在【名称】文本框中输入元件名称为“烛身”，选择【行为】为【图形】。（2）单击“确定”按钮，进入到“烛身”元件的编辑场景。使用【椭圆工具】绘制一个仅有边框无填充色的椭圆，使用【选择工具】略加调整，并使用【任意变形工具】进行旋转，如图2-110所示。图2-110绘制烛身元件（3）打开【混色器】面板，填充样式设为放射状。在渐变条上将左边色标设置为黄色（#F5DD38），并拖动到偏右方；将右边色标设置为红色（#F76648），如图2-111所示。

图2-111设置填充色（4）填充渐变色后，使用【填充变形工具】调整，如图2-112所示。图2-112调整填充色（5）为使烛身更漂亮，在刚刚作好的图形旁边画一个无边框的椭圆，颜色填充设置如图2-113所示。左边色标设置为#F76648，右边色标设置为#F5DD38。

图2-113设置填充色（6）椭圆画好后用【任意变形工具】调整倾斜，如图2-114所示。图2-114绘制椭圆（7）使用【选择工具】将画好的椭圆拖放到烛身上，如图2-115所示。图2-115调整椭圆位置（8）选择【刷子工具】，在选项中将刷子大小选择略小一点的笔刷，填充色设为淡黄色，在烛身上添加高光，删除边框线条，完成烛身元件造型。如图2-116所示。图2-116绘制高光3.3.3.3.““““””””（1）执行【插入】|【新建元件】命令，或者按快捷键Ctrl+F8，弹出【创建新元件】对话框，在【名称】文本框中输入元件名称为“烛光”，选择【行为】为【图形】。（2）单击“确定”按钮，进入到“烛光”元件的编辑场景。打开【混色器】面板，填

充样式设为放射状。将鼠标移近渐变条，当鼠标指针右下角出现一个加号时，单击鼠标，在渐变条上增加一个色标。将左边色标设置为黄色，并稍向右移；中间色标为红色；右边色标为白色，为使光焰呈模糊虚幻而不突兀，将右边白色色标的Alpha值调整为零，如图2-117所示。图2-117设置填充色（3）使用【椭圆工具】绘制一个无边框的正圆，如图2-118所示。

图2-118绘制无边框正圆（4）使用【任意变形工具】将其纵向收缩。如图2-119所示。图2-119收缩变形4.4.4.4.““““””””（1）新建一个名字为“蜡烛”的图形元件。进入到这个元件的编辑场景中。（2）“蜡烛”元件共分三层。先制作烛身层。双击时间轴上“图层1”，将“图层1”改名为“烛身”。如图2-120所示。图2-120修改图层名（3）按Ctrl+L组合键打开【库】面板，将“烛身”元件拖放到舞台上。选中该元件按住Alt键向下拖放进行复制，如图2-121所示。

图2-121复制烛身元件（4）选中所有元件，执行【修改】|【对齐】|【左对齐】命令，再执行【按高度均匀分布】命令，效果如图2-122所示。图2-122对齐元件（5）使用【任意变形工具】旋转最上面和最下面的元件，如图2-123所示。

图2-123旋转上下元件（6）将鼠标指向“烛身”图层上，单击右键，在弹出的快捷菜单中选择【插入图层】命令。系统默认插入图层为“图层2”，双击“图层2”，改名为“烛焰”。将【库】面板中“烛焰”元件拖放到合适位置。如图2-124所示。图2-124放置烛光元件（7）插入一个新图层，将图层改名为“烛光”。将“烛光”元件拖放到舞台上。因为烛光在蜡烛的后面，所以用鼠标选择“烛光”层，将它拖放到“烛身”层下方。现在三层的排列顺序如图2-125所示。图2-125图层顺序（8）在【属性】面板中将背景色改为黑色，使蜡烛的色彩更明亮。完成后的蜡烛如图2-126所示。图2-126蜡烛完成效果5.5.5.5.““““””””（1）执行【插入】|【新建元件】命令，或者按快捷键Ctrl+F8，弹出【创建新元件】对话框，在【名称】文本框中输入元件名称为“心”，选择【行为】为【图形】。（2）单击“确定”按钮，进入到“心”元件的编辑场景。使用【线条工具】绘制一条竖线，再使用【选择工具】将其调整为曲线，如图2-127所示。

图2-127将直线调整为曲线（3）选择【部分选取工具】，单击曲线端点，端点上会出现调节手柄。上下左右移动手柄，将该曲线调整为如图2-128所示形状。图2-128调整曲线形状（4）选中该该曲线，执行【编辑】|【复制】命令，再执行【编辑】|【粘贴到中心位置】命令，选择粘帖得到的曲线，执行【修改】|【变形】|【水平翻转】命令，如图2-129所示。

图2-129复制曲线后水平翻转（5）将该两条曲线拖放连接好，成为一个心形，如图2-130所示。图2-130完成心形（6）打开【混色器】面板，填充样式设为线性。在渐变条上将左边色块设置为#AF057C，将右边色块设置为#E207C8，如图2-131所示。

图2-131设置填充色（7）使用【颜料桶工具】从右下向左上拖动鼠标填充颜色，并删除白色边框线，如图2-132所示。图2-132填充颜色（8）选中这个心形，右击它，在弹出的快捷菜单中选择“复制”命令，然后在时间轴上将此层锁定。（9）插入新图层，系统默认为“图层2”，执行“编辑”|“粘贴到当前位置”命令。创建此层的目的是为使心形下方边上呈现白色高光，所以此层的心形比图层1上的心形略小。如果使用【任意变形工具】来调节是很不容易达到这个目的。这里执行【窗口】|【设计面板】|【变形】命令，弹出【变形】面板，设置变形宽度为97%，约束默认为打勾状态，按回车键确定，就可以使图形实现精确的变形。变形面板设置如图2-133所示。

图2-133“变形”面板（10）打开【混色器】面板，填充样式设为放射状。在渐变条上将左边色块设置为玫红色（#F91CEE），将右边色块设置为白色，白色的Alpha值为78%，如图2-134所示。图2-134设置填充色（11）将“图层2”的心形填充上述调整好的填充色，并使用【填充变形工具】进行调整，按住方形手柄向外拖动，使填充色变为椭圆状，再按住中心点向上

移动。为了使大家能够清楚观察调整的情况，特将背景色暂改为蓝色，如图2-135所示。图2-135调整填充色

（12）现在只是使这一层的心形下方颜色变亮了，但并未因此而形成高光状态，所以我们还得在此层上再加一层，掩盖住多余的白色，只留出两边的高光。复制“图层2”的心形，然后锁定“图层2”。（13）插入一个新图层，系统默认为“图层3”，执行“编辑”|“粘贴到当前位置”命令。（14）将此层的心形填充新的渐变色。设置渐变色样式为放射状，左边色块为#FA3AF0，右边色块为#F444C9，Alpha值为62%，如图2-136所示。图2-136设置填充色（15）填充此色后会发现并没有出现我们希望的效果。因为填充的色彩虽然外周是半透明的，但这个透明色是圆形，无论怎么样调整都无法达到心形状态。执行【修改】|【形状】|【柔化填充边缘】命令，弹出“柔化填充边缘”对话框，设置距离30px，步骤数为10，如图2-137所示。图2-137柔化填充边缘设置现在看效果已经出来了。如图2-138所示。

图2-138柔化后效果（16）目前这个心形的立体感并不强，因为主要的高光部分还没添加上去。锁定“图层3”，插入新图层，在“图层4”中将刚刚复制的“图层2”的心形再次执行【编辑】|【粘帖到当前位置】命令，使用【选择工具】框选心形的下半部分并将其删除，如图2-139所示。图2-139删除心形下半部分（17）使用【部分选取工具】将下端的直线调整为曲线，并使两端尽量圆滑。如图2-140所示。图2-140调整圆滑

（18）打开“混色器”面板，将填充色样式改变线性，设置两边色块均为白色，右边色块Alpha 为0%，如图2-141所示。图2-141设置填充色填充颜色后，使用【填充变形工具】进行调整，如图2-142所示。图2-142调整填充色到此为止，“心”元件制作完毕。6.6.6.6.““““””””（1）“珍珠”元件的制作很简单，关键是填充色的设置。使用【椭圆工具】画一个无填充色的正圆。（2）打开【混色器】面板，填充样式设为放射状。左边色块设置为灰色（#A09696），并稍向右移，右边色块为浅黄色（#F5F0D8），如图2-143所示。

图2-143设置填充色（3）使用【颜料桶工具】在靠圆心左上的地方单击鼠标，或者在任意地方单击鼠标后再用【填充变形工具】进行调整。如图2-144所示。图2-144调整填充色（4）复制该圆形，插入新图层，在“图层2”执行【编辑】|【粘贴到当前位置】命令。将填充色更改为如图2-145所示设置。样式放射状，左边色块白色，右边色块浅黄色（#F4F1CC），Alpha 为0%。

图2-145设置填充色完成后的珍珠如图2-146所示。图2-146珍珠效果7.7.7.7.““““””””（1）新建一个名字为“项链”的图形元件。（2）这个元件分两层。图层1画上心形曲线，如图2-147所示。

图2-147绘制心形曲线（3）在“图层2”上沿上面的曲线将“珍珠”元件均匀的放置好。如图2-148所示。图2-148放置珍珠元件8.8.8.8.““““””””（1）新建一个名字为“情人节”的图形元件。（2）在这个元件的编辑场景中。选择【文字工具】，在“属性”面中设置文本类型为【静态文本】，【字体】为方正行楷简体，字体大小、颜色随意，因为后面还会再作调整。（3）在舞台上输入“情人节”三字，连续执行两次【修改】|【分离】命令，使其呈网点状成为可编辑形状的图形状态。如图2-149所示。

图2-149分离文字（4）用【橡皮擦工具】擦去“情”字两点，再使用【选择工具】将鼠标放到“节”字下端向左下方拖动将其拉长。如图2-150所示。图2-150使文字变化（5）使用【选择工具】将“节”字下方被拉长部分调整为曲线状。（6）在【混色器】面板中设置填充样式为线性，左边和右边色块为红色，中间色块为白色，如图2-151所示。图2-151设置填充色（7）使用【选择工具】框选所有文字，使用【颜料桶工具】在文字上从上向下拖动鼠标填充颜色，然后将笔触颜色设为白色，使用【墨水瓶工具】，挨个单击文字，给文字加上白色边框。效果2-152如图所示。图2-152填充颜色（8）插入新图层，打开“库”面板。在“图层2”上拖放入“心”元件，用【任意变形工具】调整到适合大小，分别放到情字和节字上，如图2-153

所示。图2-153放置心形元件9.9.9.9.（1）单击“时间轴”上的按钮，返回到“场景1”。（2）新建2个图层，并将所有图层分别重新命名为“蜡烛”、“心”和“项链”。（3）在“蜡烛”图层放入“蜡烛”元件，在“心”图层放入“心”和“情人节”元件，在“项链”图层放入“项链”元件。将这些对象摆放成合适的位置。（4）还可以绘制一些光影元件（这里不再详述制作方法，请参看源文件）放在“蜡烛”图层中，以增加效果。范例最终如图2-105所示。至此，本范例制作完毕。第四课第四课第四课第四课逐帧动画逐帧动画逐帧动画逐帧动画

点击下载素材从本单元起，我们将逐渐给大家介绍Flash8.0中的五种常见的动画形式：逐帧动画、形状补间动画、动作补间动画、遮罩动画、引导线动画。本节着重介绍逐帧动画（FrameByFrame），这是一种常见的动画手法，它的原理是在“连续的关键帧”中分解动画动作，也就是每一帧中的内容不同，连续播放而成动画。由于逐帧动画的帧序列内容不一样，不仅增加制作负担而且最终输出的文件量也很大，但它的优势也很明显：因为它相似与电影播放模式，很适合于表演很细腻的动画，如3D效果、人物或动物急剧转身等等效果。1111在时间帧上逐帧绘制帧内容称为逐帧动画，由于是一帧一帧的画，所以逐帧动画具有非常大的灵活性，几乎可以表现任何想表现的内容。逐帧动画在时间帧上表现为连续出现的关键帧，如图3-2-1所示。图3-2-1逐帧动画2222（1）用导入的静态图片建立逐帧动画用jpg、png 等格式的静态图片连续导入Flash中，就会建立一段逐帧动画。（2）绘制矢量逐帧动画用鼠标或压感笔在场景中一帧帧的画出帧内容。（3）文字逐帧动画用文字作帧中的元件，实现文字跳跃、旋转等特效。（4）导入序列图像可以导入gif序列图像、swf动画文件或者利用第3方软件（如swish、swift3D等）产生的动画序列。3333

（1）绘画纸的功能绘画纸是一个帮助定位和编辑动画的辅助功能，这个功能对制作逐帧动画特别有用。通常情况下，Flash在舞台中一次只能显示动画序列的单个帧。使用绘画纸功能后，你就可以在舞台中一次查看两个或多个帧了。如图3-2-2所示，这是使用绘画纸功能后的场景，可以看出，当前帧中内容用全彩色显示，其它帧内容以半透明显示，它使我们看起来好像所有帧内容是画在一张半透明的绘图纸上，这些内容相互层叠在一起。当然，这时你只能编辑当前帧的内容。图3-2-2同时显示多帧内容的变化（2）绘图纸各个按钮的介绍1绘图纸外观按钮按下此按钮后，在时间帧的上方，出现绘图纸外观标记。拉动外观标记的两端，可以扩大或缩小显示范围。2绘图纸外观轮廓按下此按钮后，场景中显示各帧内容的轮廓线，填充色消失，特别适合观察对象轮廓，另外可以节省系统资源，加快显示过程。3.3绘图纸显示多帧按钮，按下后可以显示全部帧内容，并且可以进行“多帧同时编辑”。4修改绘图纸标记按下后，弹出菜单，菜单中有以下选项：“总是显示标记”选项会在时间轴标题中显示绘图纸外观标记，无论绘图纸外观是否打开。“锚定绘图纸外观标记”选项会将绘图纸外观标记锁定在它们在时间轴标题中的当前位置。通常情况下，绘图纸外观范围是和当前帧的指针以及绘图纸外观标记相关的。通过锚定绘图纸外观标记，可以防止它们随当前帧的指针移动。“绘图纸2”选项会在当前帧的两边显示两个帧。

“绘图纸5”选项会在当前帧的两边显示五个帧。“绘制全部”选项会在当前帧的两边显示全部帧。上面，我们全面介绍了逐帧动画的特点和创建方法，现在，我们来动手制作二个逐帧动画实例，以加深对逐帧动画的认识。4444茫茫雪原上，有一只矫健的豹子在奔跑跳跃，这是一个利用导入连续位图而创建的逐帧动画，如图3-2-3所示。图3-2-3奔跑的豹子1111、、、、创建影片文档创建影片文档创建影片文档创建影片文档执行【文件】|【新建】命令，在弹出的面板中选择【常规】|【Flash文档】选项后，点击【确定】按钮，新建一个影片文档，在【属性】面板上设置文件大小为400*260象素，【背景色】为白色，如图3-2-4所示。

图3-2-4创建新文档2222选择第一帧，执行【文件】|【导入到场景】命令，将本实例中的名为“雪景.bmp”图片导入到场景中。在第8帧按F5，加过渡帧使帧内容延续。新建一层，选择第一帧，执行【文件】|【导入到场景】命令，将本教程中的“奔跑的豹子”系列图片导

入。此时，会弹出一个对话框，如图3-2-5所示。3-2-5系列图片导入选择【是】按钮，Flash 会自动把gif中的图片序列按序以逐帧形式导入场景的左上角，如图3-2-7所示。3-2-7导入的gif动画在场景的上方形成帧帧动画如图3-2-8所示是导入后的动画序列，它们被Flash 自动分配在8个关键帧中。

图3-2-8导入的8张图片此时，时间帧区出现连续的关键帧，从左向右拉动播放头，就会看到一头勇猛的豹子在向前奔跑，但是，被导入的动画序列位置尚未处于我们需要的地方，缺省状况下，导入的对象被放在场景坐标“0，0”处，我们必须移动它们。你当然可以一帧帧调整位置，完成一幅图片后记下其坐标值，再把其它图片设置成相同坐标值，如果你有足够耐性和时间，也无妨，那么，我们何不试试“多帧编辑”功能呢？先把“雪景”图层加锁，然后按下时间轴面板下方的【绘图纸显示多帧】按钮，再单击【修改绘图纸标记】按钮，在弹出的菜单中选择【显示全部】选项，如图3-2-9所示。图3-2-9选择显示全部选项最后执行【编辑】|【全选】命令，此时时间轴和场景效果如图3-2-10所示。

图3-2-10选取多帧编辑用鼠标左键按住场景左上方的豹子拖动，就可以一次把8帧中的图片一次全移动到场景中了。5555在场景中新建一个图层，单击工具栏上的文字工具按钮,设置【属性】面板上的文本参数如下，【文本类型】为静态文本；【字体】为隶书；【字体大小】35；【颜色】为深蓝色。如图3-2-11所示。图3-2-11字体【属性】面板参数设置在文本框输入“奔跑的豹子”五个字，居中放置。测试存盘测试存盘测试存盘测试存盘执行【控制】|【测试影片】命令，观察本例swf文件生成的动画有无问题，如果满意，执行【文件】|【保存】命令，将文件保存成“奔跑的豹子.fla”文件存盘，如果要导出Flash的播放文件，执行【导出】|【导出影片】命令保存成“奔跑的豹子.swf”文件。第五课第五课第五课第五课形状补间动画形状补间动画形状补间动画形状补间动画点击下载素材形状补间动画是Flash中非常重要的表现手法之一，运用它，你可以变幻出各种奇妙的不可思议的变

形效果。本节从形状补间动画基本概念入手，带你认识形状补间动画在时间帧上的表现，了解补间动画的创建方法，学会应用“形状提示”让图形的形变自然流畅，最后，提供了二个实例练手，帮助你更深地理解形状补间动画。1111在Flash的时间帧面板上，在一个时间点（关键帧）绘制一个形状，然后在另一个时间点（关键帧）更改该形状或绘制另一个形状，Flash 根据二者之间的帧的值或形状来创建的动画被称为“形状补间动画”。形状补间动画可以实现两个图形之间颜色、形状、大小、位置的相互变化，其变形的灵活性介于逐帧动画和动作补间动画二者之间，使用的元素多为用鼠标或压感笔绘制出的形状，如果使用图形元件、按钮、文字，则必先“打散”再变形。形状补间动画建好后，时间帧面板的背景色变为淡绿色，在起始帧和结束帧之间有一个长长的箭头，如图3-3-1所示。图3-3-1形状补间动画在时间帧面板上的标记在时间轴面板上动画开始播放的地方创建或选择一个关键帧并设置要开始变形的形状，一般一帧中以一个对象为好，在动画结束处创建或选择一个关键帧并设置要变成的形状，再单击开始帧，在【属性】面板上单击【补间】旁边的小三角，在弹出的菜单中选择【形状】，此时，时间轴上的变化如图3-3-1所示，一个形状补间动画就创建完毕。2222Flash 的【属性】面板随鼠标选定的对象不同而发生相应的变化。当我们建立了一个形状补间动画后，点击时间帧，【属性】面板如图3-3-2所示。

图3-3-2形状补间动画【属性】面板形状补间动画的【属性】面板上只有二个参数：在“0”边有个滑动拉杆按钮，单击后上下拉动滑杆或填入具体的数值，形状补间动画会随之发生相应的变化。1在1到-100的负值之间，动画运动的速度从慢到快，朝运动结束的方向加速度补间。2在1到100的正值之间，动画运动的速度从快到慢，朝运动结束的方向减慢补间。3默认情况下，补间帧之间的变化速率是不变的。“混合”选项中有二项供选择：4“角形”选项：创建的动画中间形状会保留有明显的角和直线，适合于具有锐化转角和直线的混合形状。5“分布式”选项：创建的动画中间形状比较平滑和不规则。至此，“形状补间动画”的相关知

识大家都已经有所了解，下面动手个实例，体会一下形状补间动画的奇妙。::::国庆的夜空绚丽多彩，朵朵礼花在天空中绽放，远处传来礼炮的轰鸣声，让我们来给这美丽的夜晚增加点喜庆，挂几个大红灯笼来庆祝祖国的生日吧。实例播放效果如图3-3-4所示。

图3-3-4庆祝国庆实例画面6创建矢量图形7创建形状补间动画8将文字转变为形状9用混色器设置颜色1、创建新文档执行【文件】|【新建】命令，在弹出的面板中选择【常规】|【Flash文档】选项后，点击【确定】按钮，新建一个影片文档，在【属性】面板上设置文件大小为400*330象素，【背景色】为白色，如图3-3-5所示。图3-3-5文档属性2、创建背景图层

执行【文件】|【导入到场景】命令，将本实例中名为“节日夜空.jpg”图片导入到场景中，在第80帧处按下F5，加普通帧。如图3-3-6所示。图3-3-6插入背景图片3、创建灯笼形状我们先来画灯笼，执行【窗口】|【设计面板】|【混色器】命令，打开混色器面板，如图3-3-7所示设置混色器面板的各项参数。图3-3-7混色器面板设置之一选择工具栏上的椭圆工具，去掉边线，在场景中画一个椭圆做灯笼的主体，大小为65*40象素。接着我们来画灯笼上下的边，打开【混色器】面板，按照如图3-3-8设置参数。

图3-3-8混色器面板设置之二选择工具栏上的矩形工具，去掉边线，画一个矩形，大小为30*10象素，复制这个矩形，分别放在灯笼的上下方，再画一个小的矩形，长宽为7*10象素，作为灯笼上面的提手。最后用直线工具在灯笼的下面画几条黄色线条做灯笼穗，一个漂亮的灯笼就画好了。如图3-3-9所示（为了能清楚的显示灯笼，可暂时将背景色改为蓝色）。图3-3-9画好的灯笼4、复制粘贴四个灯笼复制刚画好的灯笼，新建三个图层，在每个图层中粘贴一个灯笼，调整灯笼的位置，使其错落有致的排列在场景中。在第20、40帧处为各图层添加关键帧，如图3-3-10所示。

图3-3-10错落有致的灯笼及时间轴面板5、把文字转为形状取代灯笼选取第一个灯笼，在第40帧处用文字“庆”取代灯笼，文字的的【属性】面板上的参数：【文本类型】为静态文本，【字体】为隶书，【字体大小】为60，【颜色】为红色。对“庆”字执行【修改】|【分散】命令，把文字转为形状。如图3-3-11上半部分所示。依照以上步骤，在第40帧处的相应图层上依次用“祝”、“国”、“庆”三个字取代另外三个灯笼，并执行【分散】操作，其结果如图3-3-11下半部分所示。图3-3-11用文字形状取代灯笼形状及文字打散

6、设置文字形状到灯笼形状的转变。在“灯笼”各图层的第60帧及80帧处，分别添加关键帧，现在，在80帧处各“灯笼”图层中的内容为“文字图形”，应该把它们换成“灯笼”。具体办法可以分别选择第20帧中的“灯笼”图形，再一个个“粘贴”进第80帧中，当然，你先应该清除第80帧处4个“灯笼”图层中的内容哦！

7、创建形状补间动画。在“灯笼”各图层的第20、60帧处单击帧，在【属性】面板上单击【补间】旁边的小三角在弹出的菜单中选择【形状】，建立形状补间动画，如图3-3-12所示。图3-3-12创建形状补间动画

8、测试存盘执行【控制】|【测试影片】命令，观察本例swf文件生成的动画有无问题，如果满意，执行【文件】|【保存】命令，将文件保存成“庆祝国庆.fla”文件存盘，如果要导出Flash的播放文件，执行【导出】|【导出影片】命令保存成“庆祝国庆.swf”文件。形状补间动画看似简单，实则不然，Flash在“计算”2个关键帧中图形的差异时，远不如我们想象中的“聪明”，尤其前后图形差异较大时，变形结果会显得乱七八糟，这时，“形状提示”功能会大大改善这一情况。10在“起始形状”和“结束形状”中添加相对应的“参考点”，使Flash在计算变形过渡时依一定的规则进行，从而较有效地控制变形过程。先在形状补间动画的开始帧上单击一下，再执行【修改】|【形状】|【添加形状提示】命令，该帧的形状就会增加一个带字母的红色圆圈，相应地，在结束帧形状中也会出现一个“提示圆圈”，用鼠标左键单击并分别按住这2个“提示圆圈”，在适当位置安放，安放成功后开始帧上的“提示圆圈”变为黄色，结束帧上的“提示圆圈”变为绿色，安放不成功或不在一条曲线上时，“提示圆圈”颜色不变，如图3-3-3所示。

图3-3-3添加形状提示后各帧的变化11“形状提示”可以连续添加，最多能添加26个。12按逆时针顺序从形状的左上角开始放置形状提示，它们的工作效果最好。13确保“形状提示”是符合逻辑的。例如，前后关键帧中有2个三角形，我们使用3个“形状提示”，那么2个三角形中的“形状提示”顺序必须是一致的，而不能第一个形状是abc，而在第二个形状是acb，14形状提示要在形状的边缘才能起作用，在调整形状提示位置前，要打开工具栏上【选项】下面的【吸咐开关】，这样，会自动把“形状提示”吸咐到边缘上，如果你发觉“形状提示”仍然无效，则可以用工具栏上的放大工具点击形状，放大到2000倍，以确保“形状提示”位于图形边缘上。15另外，要删除所有的形状提示，选择【修改】|【形状】|【删除所有提示】。删除单个形状提示，单击右键，在弹出菜单中选择【删除提示】。::::上面我们曾谈到，为得到流畅自然的形状变形动画，可以添加形状提示，本例是专为此而设计的练习。请你在光盘的相关目录中找到“添加形状提示练习.swf”文件，如图3-3-15所示。这2个同样是“形状变形”，其中右边的变形用了变形“参考点”，从中，我们可以看出变形效果有明显的差异。

图3-3-15添加形状提示实例界面16添加形状提示17创建形状补间动画1、创建新文档执行【文件】|【新建】命令新建一个影片文档，设置舞台尺寸为300*200象素，【背景色】为蓝色#0000FF。2、创建变形对象。我们要在场景中写二个数字“1”，让它们同时变形，一个加形状提示，一个不加形状提示，看看这二个变形有什么不同。先在图层一的场景左边中写入数字“1”，【属性】面板上设置【文本格式】为静态文本、【字体】为隶书、【字号】100、【颜色】白色。再建一个图层二，在场景右边写入数字“1”，参数同上，此层是添加形状提示层。然后在二层各40帧的地方加关键帧，各写入数字“2”,在第60帧处加普通帧，使变形后的文字稍做停留。3、把字符转为形状逐一选取各层数字的第1、40帧，执行【修改】|【分散】命令，把数字打散转为形状。4、创建补间动画在图层一、二的第一帧处各自建立形状补间动画。5、添加形状提示在图层二的第一帧处，执行【修改】|【形状】|【添加形状提示】命令二次，如图3-3-16所示。

图3-2-16添加形状提示菜单确认工具栏上的对齐对象按钮已按下选中，调整第1、40帧处的形状提示如图3-3-17所示。图3-3-17添加形状提示的第1、40帧6、添加文字说明新建一层，在二个渐变的下面分别写上“未加形状提示”、“加用形状提示”的说明。在第60帧处加普通帧。至此，这个实例制作完成，测试一下，看看效果，你能体会到添加形状提示的巧妙之处了吧。第六课第六课第六课第六课动作补间动画动作补间动画动作补间动画动作补间动画动作补间动画也是Flash中非常重要的表现手段之一，与“形状补间动画”不同的是，动作补间动画的对象必需是“元件”或“成组对象”。运用动作补间动画，您可以设置元件的大小、位置、颜色、透明度、旋转等种种属性，配合别的手法，

您甚至能做出令人称奇的仿3D的效果来。本实例详细讲解了动作补间动画的特点及创建方法，并分析了动作补间动画和形状补间动画的区别，我们精心设计的一个实例将带您进一步加深对动作补间动画的了解。11111111在Flash的时间帧面板上，在一个时间点（关键帧）放置一个元件，然后在另一个时间点（关键帧）改变这个元件的大小、颜色、位置、透明度等等，Flash根据二者之间的帧的值创建的动画被称为动作变形动画。构成动作补间动画的元素是元件，包括影片剪辑、图形元件、按钮等等，除了元件,其他元素包括文本都不能创建补间动画的,其他的位图、文本等等都必须要转换成元件才行，只有把形状“组合”或者转换成“元件”后才可以做“动作补间动画”。动作补间动画建立后，时间帧面板的背景色变为淡紫色，在起始帧和结束帧之间有一个长长的箭头，如图3-4-1所示。图3-4-1动作补间动画在时间帧上的表现形状补间动画和动作补间动画都属于补间动画。前后都各有一个起始帧和结束帧，二者之间的区别如下表所示。区别之处动作补间动画形状补间动画在时间轴上的表现淡紫色背景加长箭头淡绿色背景加长箭头组成元素影片剪辑、图形元件、按钮形状，如果使用图形元件、按钮、文字，则必先打散再变形。完成的作用实现一个元件的大小、位置、

颜色、透明等的变化。实现二个形状之间的变化，或一个形状的大小、位置、颜色等的变化。在时间轴面板上动画开始播放的地方创建或选择一个关键帧并设置一个元件，一帧中只能放一个项目，在动画要结束的地方创建或选择一个关键帧并设置该元件的属性，再单击开始帧，在【属性面板】上单击【补间】旁边的“小三角”，在弹出的菜单中选择【动作】，或单击右键，在弹出的菜单中选择【新建补间动画】，就建立了“动作补间动画”。2222在时间线“动作补间动画”的起始帧上单击，帧属性面板会变成如图3-4-2所示。图3-4-2动作补间动画属性面板在“0”边有个滑动拉杆按钮，单击后上下拉动滑杆或填入具体的数值，补间动作动画效果会以下面的设置作出相应的变化：1在1到-100的负值之间，动画运动的速度从慢到快，朝运动结束的方向加速补间。2在1到100的正值之间，动画运动的速度从快到慢，朝运动结束的方向减慢补间。3默认情况下，补间帧之间的变化速率是不变的。2222有四个选择，选择“无”（默认设置）禁止元件旋转；选择“自动”可以使元件在需要最小动作的方向上旋转对象一次；选择“顺时针”(CW)或“逆时针”(CCW)，并在后面输入数字，可使元件在运动时顺时针或逆时针旋转相应的圈数。将补间元素的基线调整到运动路径，此项功能主要用于引导线运动，我们在下一节中要谈到此功能。

使图形元件实例的动画和主时间轴同步。可以根据其注册点将补间元素附加到运动路径，此项功能主要也用于引导线运动。BannerBannerBannerBanner当您访问一个网站时，最先吸引您的目光的可能是网站上方的广告了吧？这就是Banner,它具有灵活的实时性、强烈的交互性与感官性，您可以用它来说明自己网站的特点，提升网站的形象，如果您能用Flash做成动画的形式，那无疑会大大增加对眼球的吸引力。我们来看看“闪客启航”网站(https://www.360docs.net/doc/4416593479.html,/)的Banner，“闪客启航”这是一个提供免费学习Flash及网页制作等知识的网站，“闪客启航视频语音教室”(UC合作专区-合作免费教学专区-闪客启航)是提供免费语音视频教学的网上教室，本例通过动画手段，使“Banner”较好地显示了网站的性质与特点，播放效果如图3-4-7所示。图3-4-7启航网站的Banner4创建文字变色效果5创建文字改变大小效果6创建文字改变透明度效果1、设置影片文档属性执行【文件】|【新建】命令，在弹出的面板中选择【常规】|【Flash文档】选项后，点击【确定】按钮，新建一个影片文档，在【属性】面板上设置文件大小为520*60象素，【背景色】为白色。如图3-4-8所示。

图3-4-8启航Banner文档属性2、设置背景图层执行【文件】|【导入到场景】命令，将本实例中名为“启航banner.bmp”图片导入到场景中，在第205帧处按F5，加普通帧，如图3-4-9所示。3-4-93-4-93-4-93-4-922221、创建“电脑动画”元件执行【插入】|【新建元件】命令，新建一个图形元件，名称为“电脑动画”。在“新元件编辑窗口”中选择第一帧，单击工具栏上的文字工具，在场景中点击一下，然后在【属性】面板上设置【文本类型】为静态文本、【字体】为隶书、【字体大小】32、【颜色】#FF9900，最后在场景中写下“电脑动画”四个字，如图3-4-10所示。

图3-4-10创建“电脑动画元件”2、创建“网页设计”元件执行【插入】|【新建元件】命令，新建一个图形元件，名称为“网页设计”。在编辑窗口选择第一帧，按上面的方法,在场景中写下“网页设计”四个字，参数同上。3、创建“图象制作”元件执行【插入】|【新建元件】命令，新建一个图形元件，名称为“图象制作”。在编辑窗口选择第一帧，按上面的方法，在场景中写下“图象制作”四个字，参数同上。4、创建“闪客启航”元件执行【插入】|【新建元件】命令，新建一个图形元件，名称为“闪客启航”。在编辑窗口选择第1帧，单击工具栏上的文字工具，在【属性】面板上设置【文本类型】为静态文本、【字体】为隶书、【字体大小】为50、【颜色】为#FF6600,在场景中写下“闪客沙龙”四个字，如图3-4-11所示。图3-4-11创建“闪客沙龙”元件5、创建“语音教学”执行【插入】|【新建元件】命令，新建一个图形元件，名称为“语音教学”。在编辑窗口选择第1帧，单击工具栏上的文字工具，文字属性不变,在场

景中写下“语音教学”四个字。1、创建“电脑动画”文字效果在场景中新建一个图层。先在第1帧中，把库里的“电脑动画”元件拖到场景的外面，在【属性】面板上设置元件的【W】值为300，【H】值为76,【X】值为47，【Y】值为27,【Alpha】值为3％，然后在第20帧处加关键帧，把“电脑动画”元件拖到场景的中间，设置【属性】面板的【W】值为141,【H】值为36，【X】值为127，【Y】值为12,【颜色】选项为“无”。图3-4-12是“电脑动画”元件在【属性】面板的第1、20帧处的位置设置。

图3-4-12“电脑动画”属性设置在第28帧处加关键帧，不改参数，这是为了给该文字对象一个停顿，让别人能看清楚。在第48帧加关键帧，设置【属性】面板上参数【W】值84，【H】值21,【X】值9,【Y】值3，【颜色】选色调，黑色。在第1和第28帧处分别动建立动作补间动画，在第205帧添加普通帧使帧内容延续。2、创建“网页设计”文字效果在场景中新建一个图层。在此图层的第49帧加关键帧，把库里的“网页设计”元件拖到场景的外面，在【属性】面板上设置元件的【W】值为300，【H】值为83,【X】值为43，【Y】值为20,【Alpha】值为6％,然后在第71帧处加关键帧，把“网页设计”元件拖到场景的中间，设置【属性】面板的【W】值为135,【H】值为36，【X】值为131，【Y】值为11,【颜色】选项为“无”，如图3-4-13所示。图3-4-13“网页设计”元件在第49、71帧的位置再在第78帧处加关键帧，不改参数，在第97帧加关键帧，设置【属性】面板上参数【W】值81，【H】值22,【X】值18,【Y】值20，【颜色】选色调，黑色。最后在第49和第78帧处分别建立动作补间动画，在

第205帧添加普通帧。3、创建“图象制作”文字效果在场景中新建一个图层。先在第98帧加关键帧，把库里的“图象制作”元件拖到场景的外面，在【属性】面板上设置元件的【W】值为360，【H】值为90,【X】值20,【Y】值23，【Alpha】值为5％,然后在第119帧处加关键帧，把“图象制作”元件拖到场景的中间，设置【属性】面板的【W】值为144,【H】值为36，【X】值128,【Y】值10，【颜色】选项为“无”,再在第126帧处加关键帧，不改参数，在第146帧加关键帧，设置【属性】面板上参数【W】值86，【H】值22,【X】值27,【Y】值35，【颜色】选色调，黑色，最后在第98和第126帧处分别建立动作补间动画，在第205帧添加普通帧，如图3-4-14所示。图3-4-14“图象制作”元件在第126、146帧的位置4、创建“闪客启航”文字效果在场景中新建一个图层。先在第147帧处加关键帧，把库里的“闪客启航”元件拖到场景的外面，在【属性】面板上设置元件的【W】值为487，【H】值为124,【X】值-28,【Y】值-144，【Alpha】值为3％，然后在第166帧处加关键帧，把“闪客启航”元件拖到场景的中间，设置【属性】面板的【W】值为212,【H】值为54，【X】值123,【Y】值5，【颜色】选项无。最后在第147帧处建立动作补间动画，在第173帧添加普通帧。5、创建“语音教学”文字效果在场景中新建一个图层。先在第174帧处加关键帧，把库里的“语音教学”元件拖到场景的外面，在【属性】面板上设置元件的【W】值为450，【H】值为115,【X】值-20,【Y】值29，【Alpha】值为3％。然后在第194帧处加关键帧，把“语音教学”元件拖到场景的中间，设置【属性】面板的【W】值为210,【H】值为54，【X】值123,【Y】值3，【颜色】选项无。最后在第174帧处动作建立补间动画，顺时钟旋转一圈，在第205帧添加普通帧，如图3-4-15所示。

图3-4-15“语音教学”元件在第174帧的【属性】面板参数完成后的部分时间线情况如图3-4-16所示。图3-4-16时间帧面板上的各层在实际制作中，本例中各图形元件的大小、位置均不必拘束于书中所示的数字，您可自行调整至满意为止。第七课第七课第七课第七课遮罩动画遮罩动画遮罩动画遮罩动画在Flash8.0的作品中，我们常常看到很多眩目神奇的效果，而其中不少就是用最简单的“遮罩”完成的，如水波、万花筒、百页窗、放大镜、望远镜……等等。那么，“遮罩”如何能产生这些效果呢？在本节，我们除了给大家介绍“遮罩”的基本知识，还结合我们的实际经验介绍一些“遮罩”的应用技巧，最后，提供二个很实用的范例，以加深对

“遮罩”原理的理解。在Flash8.0中实现“遮罩”效果有二种做法，一种是用补间动画的方法，一种是用actions指令的方法，在本节中，我们只介绍第一种做法。1111“遮罩”，顾名思义就是遮挡住下面的对象。

在Flash8.0中，“遮罩动画”也确实是通过“遮罩层”来达到有选择地显示位于其下方的“被遮罩层”中的内容的目地，在一个遮罩动画中，“遮罩层”只有一个，“被遮罩层”可以有任意个。在Flash8.0动画中，“遮罩”主要有2种用途，一个作用是用在整个场景或一个特定区域，使场景外的对象或特定区域外的对象不可见，另一个作用是用来遮罩住某一元件的一部分，从而实现一些特殊的效果。2222在Flash8.0中没有一个专门的按钮来创建遮罩层，遮罩层其实是由普通图层转化的。你只要在要某个图层上单击右键，在弹出菜单中把“遮罩”前打个勾，该图层就会生成遮罩层，“层图标”就会从普通层图标变为遮罩层图标，系统会自动把遮罩层下面的一层关联为“被遮罩层”,在缩进的同时图标变为，如果你想关联更多层被遮罩，只要把这些层拖到被遮罩层下面就行了，如图3-5-1所示。图3-5-1多层遮罩动画2222遮罩层中的图形对象在播放时是看不到的，遮罩层中的内容可以是按钮、影片剪辑、图形、位图、文字等，但不能使用线条，如果一定要用线条，可以将线条转化为“填充”。被遮罩层中的对象只能透过遮罩层中的对象被看到。在被遮罩层，可以使用按钮，影片剪辑，图形，位图，文字，线条。3333可以在遮罩层、被遮罩层中分别或同时使用形状补间动画、动作补间动画、引导线动画等动画手段，从而使遮罩动画变成一个可以施展无限想象力的创作空间。33331遮罩层的基本原理是：能够透过该图层中的对象看到“被遮罩层”中的对象及其属性（包括它们的变形效果），但是遮罩层中的对象中的许多属性如渐

变色、透明度、颜色和线条样式等却是被忽略的。比如，我们不能通过遮罩层的渐变色来实现被遮罩层的渐变色变化。2要在场景中显示遮罩效果，可以锁定遮罩层和被遮罩层。3可以用“AS”动作语句建立遮罩，但这种情况下只能有一个“被遮罩层”，同时，不能设置_alpha 属性。4不能用一个遮罩层试图遮蔽另一个遮罩层。5遮罩可以应用在gif动画上。6在制作过程中，遮罩层经常挡住下层的元件，影响视线，无法编辑，可以按下遮罩层时间轴面板的显示图层轮廓按钮，使之变成，使遮罩层只显示边框形状，在种情况下，你还可以拖动边框调整遮罩图形的外形和位置。7在被遮罩层中不能放置动态文本。图3-5-2红星闪闪8将线条转化为填充9创建遮罩动画10使用变形面板11任意变形工具中“注册点”的应用12学习使用橡皮工具中的“水笼头”工具和擦除线条

11111、设置影片文档属性执行【文件】|【新建】命令，在弹出的面板中选择【常规】|【Flash 文档】选项后，点击【确定】按钮，新建一个影片文档，在【属性】面板上设置文件大小为400*400象素，【背景色】为黑色。（在教程中，我们为了更好的显示场景中的内容，背景色设为了深蓝色），如图3-5-3所示。图3-5-3文档【属性】面板22221、创建“闪光线条”元件执行【插入】|【新建元件】命令，新建一个图形元件，名称为“闪光线条”。选择工具栏上的直线工具，在场景中画一直线，在【属性】面板上作如图3-5-5设置。图3-5-5闪光线条的【属性】面板参数设置2、创建“闪光线条组合”元件执行【插入】|【新建元件】命令，新建一个图形元件，名称为“闪光线条组合”，如图3-5-6所示。

图3-5-6创建闪光线条元件从库中将名为“闪光线条”的元件拖入新元件编辑窗口的场景中，在X轴上的位置为-200，Y轴为20。然后单击工具栏上的任意变形工具，此时元件的中心会出现一个小白点，它就是对象的“注册点”，用鼠标左键按住它，拖到场景的中心处松手。图3-5-7中的“1”显示的是注册点在元件的中心时的情形，“2”显示的是注册点已拖到场景中心时的情形。图3-5-7移动注册点到场景的中心然后执行【窗口】|【设计面板】|【变形】命令，打开变形面板，选中【旋转】，角度为15度，连续按下【复制并应用变形】按钮，在场景中复制出的效果如图3-5-8所示。图3-5-8变形面板及复制好的元件

在时间轴的关键帧上点一下，选中全部图形，执行【修改】|【分散】命令，把线条打散，

再执行【修改】|【形状】|【将线条转化为填充】命令，将线条转变为形状。3、创建“闪光”元件执行【插入】|【新建元件】命令，新建一个影片剪辑，名称为“闪光”，如图3-5-9所示。图3-5-9创建“闪光”元件单击【确定】后进行“新元件编辑窗口”，接着把库里名为“闪光线条组合”的元件拖到场景中，对齐中心点，复制此元件，在第30帧处加关键帧，再回到第1帧中建立补间动作动画，【属性】面板上设置顺时针旋转一周。然后新建一层，在第1帧中执行【编辑】|【粘贴到当前位置】命令，使二层中的“闪光线条组合”完全重合，再执行【修改】|【变形】|【水平翻转】命令，让复制过来的线条和第一层的线条方向相反，在场景中形成交叉的图形。在第30帧处建立关键帧，在第1帧中建立动作补间动画，【属性】面板上设置逆时针旋转一周，最后将此层设为遮罩层，如图3-5-10所示。图中显示的是“闪光”元件的时间轴面板和各图层中的动画设置。图3-5-10“闪光”元件编辑界面

4、创建“红星”元件执行【插入】|【新建元件】命令，新建一个图形元件，名称为“红星”。我们要在这个元件中画一个漂亮的红星，为了画好红星，我们分九步来叙述具体的画法，图3-5-11中的“1-9”的数字表示这九个步骤。图3-5-11红星的九步画法第一步，按住shift键，从场景中心向上画一根黄色的线条，如图3-5-11中的“1”所示。第二步，选择工具箱中的任意变形工具,在画好的线条上点一下，这里，线条的中心出现一个白色的小园点，我们叫它“注册点”。如图3-5-11中的“2”所示。第三步，鼠标左键按住这个小白点，拖到线条的最下端，这是因为我们要让线条要以下端为中心旋转复制。如图3-5-11中“3”所示。第四步，执行【窗口】|【设计面板】|【变形】，打开变形面板，各参数设置如图3-5-12。按下【复制并应用变形】按钮四次，就会在场景中每隔72度复制出一根线条，五个线条的顶端构成五角星的五个顶点。如图3-5-11中的“4”所示。

图3-5-12变形面板第五步，用绿色线条分别连接五根线条的顶端，五角星的模样已经出来了，如图3-5-11中“5”所示。第六步，用白色线条分别连接五角星中心和上一步连线的中点，如图3-5-11中“6”所示。第七步，选择工具栏上的橡皮工具，在工具栏下面的选项中选择“水笼头”工具，在多余的线段上点一下，去除线段，修整好的五角星如图3-5-11中的“7”所示。第八步，用油漆筒工具给五角星上色，每个角的左右颜色可略有区别，增加立体感，如图3-5-11中的“8”所示。第九步：再选择橡皮工具，点开旁边的小三角，在“擦除线条”前打勾，如图3-5-13所示。图3-5-13擦除线条用橡皮工具擦去红星上的线条，一颗漂亮的红星就做成了，如图3-2-11中“9”所示。：在Flash8.0中，还可以用更简单的方法画红星，选择工具栏上的多角星形工具，如图3-5-14。

图3-5-14多角星形工具-图3-5-15多角星形工具选项设置面板-回到主场景中，把“闪光”元件拖入第二层，新建二层，第三层中拖入“红星”元件，在场景的下方写下白色的“闪客启航电影制片厂”的文字，完成后的时间帧面板及场景如图3-5-16所示。图3-5-16时间轴及场景按Ctrl+Enter组合键，测试动画。此时，你欣赏着自己亲手做的“闪闪红星”动画，心中再回想一下“遮罩”在动画中的作用，是否已经感受到“遮罩”这一功能的神奇？第八课引导路径动画第八课引导路径动画第八课引导路径动画第八课引导路径动画点击下载素材单纯依靠设置关键帧，有时仍然无法实现一些复杂的动画效果，有很多运动是弧线或不规则的，如月亮围绕地球旋转、鱼儿在大海里遨游等，在Flash中能不能做出这种效果呢？答案是肯定的，这就是“引导路径动画”。

将一个或多个层链接到一个运动引导层，使一个或多个对象沿同一条路径运动的动画形式被称为“引导路径动画”。这种动画可以使一个或多个元件完成曲线或不规则运动。11111111一个最基本“引导路径动画”由二个图层组成，上面一层是“引导层”，它的图层图标为，下面一层是“被引导层”，图标同普通图层一样。在普通图层上点击时间轴面板的“添加引导层”按钮，该层的上面就会添加一个引导层，同时该普通层缩进成为“被引导层”，如图3-6-1所示。图3-6-1引导路径动画2222引导层是用来指示元件运行路径的，所以“引导层”中的内容可以是

用钢笔、铅笔、线条、椭圆工具、矩形工具或画笔工具等绘制出的线段。而“被引导层”中的对象是跟着引导线走的，可以使用影片剪辑、图形元件、按钮、文字等，但不能应用形状。由于引导线是一种运动轨迹，不难想象，“被引导”层中最常用的动画形式是动作补间动画，当播放动画时，一个或数个元件将沿着运动路径移动。3333“引导动画”最基本的操作就是使一个运动动画“附着”在“引导线”上。所以操作时特别得注意“引导线”的两端，被引导的对象起始、终点的2个“中心点”一定要对准“引导线”的2个端头，如图3-6-2所示。

图3-6-2元件中心十字星对准引导线在图3-6-2中，我们特地把“元件”的透明度设为50%，使你可以透过元件看到下面的引导线，“元件”中心的十字星正好对着线段的端头，这一点非常重要，是引导线动画顺利运行的前提。2222（1）“被引导层”中的对象在被引导运动时，还可作更细致的设置，比如运动方向，把【属性】面板上的【路径调整】前打上勾，对象的基线就会调整到运动路径。而如果在【对齐】前打勾，元件的注册点就会与运动路径对齐，如图3-6-3所示。图3-6-3路径调整和对齐（2）引导层中的内容在播放时是看不见的，利用这一特点，可以单独定义一个不含“被引导层”的“引导层”，该引导层中可以放置一些文字说明、元件位置参考等，此时，引导层的图标为。（3）在做引导路径动画时，按下工具栏上的【对齐对象】功能按钮，可以使“对象附着于引导线”的操作更容易成功。（4）过于陡峭的引导线可能使引导动画失败，而平滑圆润的线段有利于引导动画成功制作。（5）被引导对象的中心对齐场景中的十字星，也有助于引导动画的成功。（6）向被引导层中放入元件时，在动画开始和结束的关键帧上，一定要让元件的注册点对准线段的开始和

结束的端点，否则无法引导，如果元件为不规则形，可以按下工具栏上的任意变形工具，调整注册点。（7）如果想解除引导，可以把被引导层拖离“引导层”，或在图层区的引导层上单击右键，在弹出的菜单上选择【属性】，在对话框中选择“正常”作为图层类型，如图3-6-4所示。图3-6-4图层【属性】面板（8）如果想让对象作圆周运动，可以在“引导层”画个圆形线条，再用橡皮擦去一小段，使圆形线段出现2个端点，再把对象的起始、终点分别对准端点即可。（9）引导线允许重叠，比如螺旋状引导线，但在重叠处的线段必需保持圆润，让Flash能辨认出线段走向，否则会使引导失败。::::海底是很多人向往的神秘世界，今天，我们就用Flash来试着描绘这个世界。这个实例中包括了补间运动动画、补间形状动画、遮罩动画、引导路径动画等四种动画形式，制作上要比前面几课中的实例难度大一些，不过，它能综合复习前面学过的内容，操作原理也是我们熟悉的，相信你一定能顺利完成这个实例，其运行效果如图3-6-19所示。

图3-6-19海底1综合应用四种动画形式2创建透明水泡3创建多层遮罩1111新建一个影片文档，舞台尺寸设置为450*300象素，【背景色】设置为深蓝色，如图3-6-20所示。图3-6-20文档属性2222本例中的元件较前面的实例要多一些，我们把它们分成“水泡部分”、“海底部分”、“游鱼部分”三个部分来叙述。先来创建和水泡有关的部分。1、创建“单个水泡”元件执行【插入】|【新建元件】命令，新建一个图形元件，名称为“单个水泡”。先在场景中画一个无边

的园，颜色任意，大小为30*30，再设置混色器面板的参数，四个调节手柄全为白色，Alpha 值从左向右依次为100％、40％、10％、100％，如图3-6-21所示，用油漆筒工具在画好的圆的中心偏左上的地方点一下，如对填充的颜色不满意，可以用填充变形工具进行调整。图3-6-21水泡（放大400倍）、填充位置及混色器面板参数2、创建“一个水泡及引导线”元件执行【插入】|【新建元件】命令，新建影片剪辑，名称为“一个水泡及引导线”。点击添加引导层按钮添加一个引导层，在此层中用铅笔工具从场景的中心向上画一条曲线并在第60帧处加普通帧。在其下的被引导层的第一帧，拖入库中的名为“单个水泡”的元件，放在引导线的下端，在第60帧加关键帧，把“单个水泡”元件移到引导线的上端并设置Alpha值为50％，如图3-6-22所示。图3-6-22水泡及引导线3、创建“成堆的水泡”元件

执行【插入】|【新建元件】命令，新建一个影片剪辑，名称为“成堆的水泡”。从库里拖入数个“一个水泡及引导线”元件，任意改变大小位置，图3-6-23仅供参考。图3-6-23成堆的水泡（放大200倍）4、创建“鱼及引导线”元件执行【插入】|【新建元件】命令，新建一个影片剪辑，名称为“鱼及引导线”。此元件只有引导层和被引导层二层，点击时间轴面板上的添加引导层图标，新建引导层，在引导层中用铅笔工具画一条曲线作鱼儿游动时的路径，在被引导层中执行【文件】|【导入到场景】命令，将本实例中的名为“鱼”的元件导入到场景中，在第1帧及第100帧中分别置于引导线的两端，在第一帧中建立补间运动动画，在【属性】面板上的【路径调整】、【同步】、【对齐】三项前均打勾，如图3-6-25所示。图3-6-25鱼及引导线下面我们来创建海底实例中“水波荡漾”效果所需的元件。5、创建“海底”元件执行【插入】|【新建元件】命令，新建一个图形元件，名称为“海底”。选择第一帧，然后再执行【文件】|【导入到场景】命令，将本实例中的名为“海底.bmp”的图片导入到场景中。

6、创建“遮罩矩形”元件执行【插入】|【新建元件】命令，新建一个图形元件，名称为“遮罩矩形”。在场景中画一个500*4的无边矩形，因为“遮罩层”中的图形在播放时不会显示，所以颜色任意。复制并粘贴这个矩形，向下移一点位置，使其变成二个，再复制并粘贴这二个矩形，再向下移一点位置，使其变为四个，如此循环，直至创建出一个500*540的矩形，如图3-6-26所示。图3-6-26遮罩矩形

7、创建“水波效果”元件水波荡漾的效果是用遮罩动画的手法做的，看着挺漂亮，实际制作却很简单，只用三层就完成了，里面有二个小技巧，在下面的讲解过程中会着重介绍。执行【插入】|【新建元件】命令，新建一个影片剪辑，名称为“水波效果”，如图3-6-27所示。图3-6-27创建“水波效果”元件先把最下面图层作为当前编辑图层，从库里拖入名为“海底”的图形元件，在【属性】面板上设置元

件的X值为0，Y值为0，在时间帧上点一下右键，在弹出菜单中选择【复制帧】，在第100帧加普通帧。然后新建一个图层，在这层的第一帧上点一下右键，在弹出菜单中选择【粘贴帧】，就把刚才的元件粘到第二层里了，在【属性】面板上设置此元件的X值为0，Y值为1，Alpha值为80％，在第100帧加普通帧。注意：这里是一个技巧：第二层图片与第一层图片的位置差决定水波荡漾的大小！位置差越大，水波越大，其Alpha值的大小决定水波的清晰程度，Alpha值越大，水波越清晰，反之越模糊。图3-6-28是第一层和第二层中两张图片在X，Y轴的位置的不同的对比。图3-6-28两张图片在场景中的位置对比要实现水波荡漾，光有二层图片是不行的，还要用遮罩动画实现光线的明暗变化才行,这样，才能产生水的流动感。新建一层，在第1帧上拖入库中名为“遮罩矩形”的元件，注意下面的边缘对着“海底图片”的下边缘。在第100帧上加关键帧，拖动“遮罩矩形”，使其上边缘对着“海底图片”的上边缘，在第1帧创建补间动作动画。如图3-6-29所示。图3-6-29遮罩层中矩形元件的位置至此，这个动画所需的基本构件已经制作完成，大功告成，接下来还必需在场景中把各个构件“组装”

起来。在主场景中一共需要5个图层，我们由下而上一层一层地叙述，请随时参考图3-6-32。

1、创建背景层从库中把名为“水波效果”的元件拖到场景中，在第134帧加普通帧，该层命名为“背景”。

2、创建水泡层新建名为“水泡”的图层，在第1帧，第30帧从库里把名为“成堆的水泡”的元件拖到场景中来，数目、大小、位置任意，在第134帧加普通帧。

3、创建游鱼层新建名为“鱼”的图层，从库里把名为“鱼及引导线”的元件拖放到场景的左侧，数目、大小、位置任意，在第134帧加普通帧。图3-6-31图片、鱼、水泡的位置从场景中你是否发现，我们在制作过程中免不了会在场景外放置一些对象（图3-6-32所示在场景外就有一条鱼），这些“场外对象”在本地播放器中不会出现，而当你在网上发布swf文件时，由于网站（尤其各种论坛）默认的swf文件的尺寸不尽相同，有的会显示出“场外对象”，这好比一个舞台剧演出时，幕后候台演员的情况也暴露出来，非常不美观，怎么办呢？记得在谈到“遮罩动画”时，我们曾提到过“遮罩”的另外一个作用是“用来遮罩全部场景或某个特殊区域”，

那么，下面就试试用遮罩来为我们管理舞台界面！步骤5创建遮罩层在场景中画一个无边矩形，大小为450*300，盖住全部场景，设此层为遮罩层，此时下面的声音层自动缩进被遮罩了，用鼠标左键分别按住下面的各层，向上略移一点点，松手，各层就会自动缩进被遮罩了，如图3-6-32所示。这样，在播放时，我们就只能看到场景中的情形了，场景外的元件被遮罩了。图3-6-32遮罩层遮住下面各层////――――――――本小节我们利用自定义缓入/缓出动画制作一个逼真弹跳的球范例，范例效果如图3-96所示。图3-96范例效果下面讲解制作过程。（1）为了方便本范例的制作，笔者已经事先制作好了一些图形元件。我们直接打开本实例中的提供素材的原始文件，在这个文件的基础上进行操作。如图3-97所示是事先制作好的三个图形元件。

图3-97事先制作的图形元件（2）将“图层1”重新命名为“背景”。在这个图层上，将“库”中的“背景”图形元件拖放到舞台上。在“属性”面板上设置坐标为（0，0）。（3）新建一个图层，将其重新命名为“球”。在这个图层上将“库”中的“球”图形元件拖放到舞台正上方。如图3-98所示。图3-98“球”图层第1帧（4）在“球”图层的第60帧插入一个关键帧，并将60帧上球移动到舞台中央。在“背景”图层的第

60帧插入一个帧。如图3-99所示。图3-99“球”图层第60帧（5）选择“球”图层第1帧，在“属性”面板中，选择“补间”下拉菜单中的“动画”选项。这样定义了从第1帧到第60帧的补间动画。（6）单击“缓动”右边的“编辑”按钮，弹出“自定义缓入/缓出”对话框。如图3-100所示。图3-100“自定义缓入/缓出”对话框（7）在弹出“自定义缓入/缓出”对话框中，在对角线上单击添加一个节点（水平位置在20帧）。向上拖动这个节点到100％的位置。如图3-101所示。图3-101增加一个节点分别水平拖动节点左右两个切点，让两个切点和节点重合。如图3-102所示。图3-102调节两个切点（8）再增加一个切点（水平位置在30帧），然后向下拖动切点到80％的垂直位置。如图3-103所示。

图3-103添加第二个节点（9）按照第（7）步骤的方法，再添加第三个节点。如图3-104所示。图3-104添加第三个节点（10）按照第（8）步骤的方法，再添加第四个节点。如图3-105所示。

图3-105添加第四个节点至此，缓动曲线就设置好了，单击“确定”按钮。（11）按下Ctrl＋Enter键测试影片，可以看到球来回弹跳的动画效果。为了使球弹跳更逼真，下面添加球的投影效果。（12）新建一个图层，将其重新命名为“投影”。在这个图层上将“库”中的“投影”图形元件拖放到舞台上。调整投影图形的位置，使之与球相符。如图3-106所示。图3-106投影图形（13）在“投影”图层的第60帧插入一个关键帧。（14）选择“投影”图层第1帧上的投影，在“属性”面板中设置它的Alpha为15％。（15）选择“投影”图层第1帧，在“属性”面板中定义补间动画。

（16）选择“球”图层第1帧，在“属性”面板中单击“编辑”按钮打开“自定义缓入/缓出”对话框。按Ctrl+C键复制缓动曲线。单击“确定”按钮。（17）选择“投影”图层第1帧，在“属性”面板中单击“编辑”按钮打开“自定义缓入/缓出”对话框。按Ctrl+V键粘贴复制的缓动曲线。单击“确定”按钮。至此，本范例制作完毕。赶快测试一下动画效果吧。通过自定义缓入/缓出动画功能，我们制作得小球弹跳效果十分逼真。第十课第十课第十课第十课按钮元件按钮元件按钮元件按钮元件按钮元件是Flash的基本元件之一，它具有多种状态，并且会响应鼠标事件，执行指定的动作，是实现动画交互效果的关键对象。从外观上，按钮可以是任何形式。比如，可能是一幅位图，也可以是矢量图；可以是矩形，也可以是多边形；可以是一根线条，也可以是一个线框；甚至还可以是看不见的“透明按钮”。本小节要制作一个放电的按钮，当鼠标放到按钮上，发出夺目的光芒，炫耀无比。效果如图4-40所示。图4-40放电按钮1111．创建．创建．创建．创建““““放电放电放电放电””””影片剪辑元件影片剪辑元件影片剪辑元件影片剪辑元件（１）新建一个Flash8影片文档，设置舞台尺寸为200×50像素，背景颜色设

置为蓝色，其他保持默认设置。（2）新建一名为“放电”的影片剪辑元件。在这个元件的编辑场景中，选择“线条工具”，笔触颜色为“白色”，在场景中画一段约20像素折线。如图4-41所示。图4-41绘制折线

（3）在第３帧插入关键帧，用“任意变形工具”将场景中的折线向左拉约至60像素。（4）单击第1帧，打开“属性”面板，创建“补间形状”。在第５帧插入帧。（5）新建“图层2”。在第３帧插入空白关键帧。选择“椭圆工具”，无笔触颜色。打开“混色器”面板，设置填充样式为“放射状”，左色标为白色，Alpha值100％，右色标也为白色，Alpha值0％，如图4-42所示。图4-42“混色器”面板在场景中画一个圆。打开“属性”面板，将其大小设定为（120×126）。将其拖放到折线的左端。如图4-43所示。图4-43放电图2222．创建．创建．创建．创建““““放电按钮放电按钮放电按钮放电按钮””””元件元件元件元件（１）新建一名为“放电按钮”的按钮元件。在这个元件编辑场景中，将“图层1”更名为“按钮”。双击“矩形工具”，在弹出的“矩形设置”对话框中设置“边角半径”为“20点”，如图4-44所示。

图4-44设置矩形的边角半径设置“笔触颜色”为无，“填充色”任意，在场景中画一个矩形。打开“属性”面板，设置这个矩形的大小为250×45像素，坐标为（0，0）。（２）选中矩形，打开“混色器”面板，填充类型为“线性”，增加一个色标，自左向右三个色标颜色值为“#000000、#AFB5FA、#333333”，对矩形进行填充。设置如图4-45所示。图4-45按钮填充色设置（３）选中矩形，单击“填充变形工具”，旋转“旋转手柄”90度，向下拉动“缩放”手柄，调整填充色如图4-46所示。图4-46调整渐变填充（４）在“点击”帧按F6插入关键帧。（５）新建一名为“发光”的图层。右击“按钮”层“弹起”帧，在弹出的快捷菜单中选“复制帧”命令；右击“发光”图层“弹起”帧，在弹出的快捷菜单中选“粘贴帧”命令。选中“发光”层的矩形，打开“混色器”面板，设置如图4-47所示。自左向右色标颜色值为“#FFFFFF、#B7C7FF、#858ABF”。

图4-47发光填充色设置在“指针经过”帧按F6插入关键帧，选中矩形，选择“填充变形工具”，向右稍稍拖动“缩放”手柄。在“点击”帧按F7插入空白关键帧。（６）新建一名为“白光”的图层。在该图层“弹起”帧，选用“椭圆工具”绘制一个无笔触颜色的圆。选中圆，打开“混色器”面板，设置如图4-48所示，自左向右色标颜色值为“#000000、#AFB5FA、#333333”。打开“属性”面板，设置圆的大小为60×60像素，坐标为（-87，-7）。在“点击”帧按F7插入空白关键帧。图4-48白光填充色设置（7）新建一名为“圆球”的图层。在该图层“弹起”帧，选用“椭圆工具”绘制一个无笔触颜色的圆。选中圆，打开“混色器”面板，设置如图4-49所示。自左向右色标颜色值为“#DDDFFC、#ABB2FA、

#424366”。打开“属性”面板，设置圆的大小为50×50像素，坐标为（-81,-2）。在“点击”帧按F7插入空白关键帧。图4-49圆球填充色设置（8）新建一名为“动画”的图层。在“指针经过”、“点击”帧按F7插入空白关键帧。选择“指针经过”帧，打开“库”面板，将库中的“放电”元件拖入场景。打开“属性”面板，设置其坐标为（-19，11）。（9）新建一名为“文字”的图层，在“弹起”帧输入文字“Button”。打开“属性”面板，设置字体为“ArialBlack”，字母间距“12”，字体大小“24”，文本颜色“#000000”；在“指针经过”帧插入关键帧，改变字体颜色“#444444”；在“按下”帧插入关键帧，改变字体颜色“#808080”；在“点击”帧插入空白关键帧。至此，按钮元件制作完毕，其时间轴图层结构如图4-50所示。图4-50图层结构转回“场景1”，将“放电按钮”元件从库中拖入主场景中央，即完成本节范例。

本小节制作按钮，主要是在按钮某个帧上添加动画效果（影片剪辑元件），从而组合成一款炫丽的动态按钮。第十一课第十一课第十一课第十一课在在在在FlashFlashFlashFlash中应用声音中应用声音中应用声音中应用声音Flash提供了许多使用声音的方式。可以使声音独立于时间轴连续播放，或使动画与一个声音同步播放。还可以向按钮添加声音，使按钮具有更强的感染力。另外，通过设置淡入淡出效果还可以使声音更加优美。由此可见，Flash对