《网页设计》——网页动画的制作

null网页网页设计第11章 网页动画的制作 11.1 Flash 8概述 11.2 常用面板简介 11.3 在网页中添加特效文字 11.4 利用Flash 8制作常用的图案 11.5 元件和实例 11.6 逐帧动画 11.7 创建形状补间动画 11.8 遮罩动画 11.9　创建动画补间动画第11章 网页动画的制作 11.1 Flash 8概述 11.1 Flash 8概述 Flash是Macromedia公司推出的一种优秀的矢量动画编辑软件，Flash 8是其最新的版本。利用该软件制作的动画尺寸要比位图动画文件﹙如GLF动画﹚尺寸小很多，用户不但可以在动画中加入声音、视频和位图图像，还可以制作交互式的影片或者具有完备功能的网站。 Flash是一种创作工具，设计人员和开发人员可使用它来创建演示文稿、应用程序和其他允许用户交互的。Flash可以包含简单的动画、视频内容、复杂演示文稿和应用程序以及介于它们之间的任何内容。 Flash 特别适用于创建通过Internet提供的内容，因为它的文件非常小。Flash是通过广泛使用矢量图形做到这一点的。与位图图形相比，矢量图形需要的内存和存储空间小很多，因为它们是以数学公式而不是大型数据集来表示的。位图图形之所以更大，是因为图像中的每个像素都需要一组单独的数据来表示。11.1 Flash 8概述 11.1 Flash 8概述 Flash文档的文件扩展名为.fla(FLA)。Flash文档有四个主要部分： （1）舞台是在回放过程中显示图形、视频、按钮等内容的位置。在后面的章节中将对舞台做详细介绍。 （2）时间轴用来通知Flash显示图形和其他项目元素的时间，也可以使用时间轴指定舞台上各图形的分层顺序。位于较高图层中的图形显示在较低图层中的图形的上方。 （3）库面板是Flash显示Flash文档中的媒体元素列表的位置。 （4）ActionScript 代码可用来向文档中的媒体元素添加交互式内容。例如，可以添加代码以便用户在单击某按钮时显示一幅新图像，还可以使用 ActionScript向应用程序添加逻辑。逻辑使应用程序能够根据用户的操作和其他情况采取不同的工作方式。Flash包括两个版本的 ActionScript，可满足创作者的不同需要。11.1 Flash 8概述 11.1 Flash 8概述 完成Flash文档的创作后，可以使用“文件”→“发布”命令发布它。这会创建文件的一个压缩版本，其扩展名为.swf（SWF）。然后，就可以使用Flash Player 在Web浏览器中播放SWF文件，或者将其作为独立的应用程序进行播放。11.1 Flash 8概述 11.1 Flash 8概述 11.1.1 Flash 8的开始界面 运行Flash 8，首先映入读者眼帘的是操作的“开始”页面，左边是打开最近用过的项目，中间是创作各种类型的新项目，右边是从模板创建各种动画文件，如图11-1所示。 11.1 Flash 8概述 11.1 Flash 8概述 11.1.2 Flash 8的工作界面 启动Flash 8，并在“开始”页中选择一项进行，就可进入Flash的工作环境，如图11-2所示的工作界面，主要有舞台、主工具栏、工具箱、时间轴、属性面板和多个控制面板等部分。 图11-2 Flash 8的工作界面11.1 Flash 8概述 11.1 Flash 8概述 11.1.3 时间轴 时间轴用于组织和控制文档内容在一定时间内播放的图层数和帧数。与胶片一样，Flash 文档也将时长分为帧。图层就像堆叠在一起的多张幻灯胶片一样，每个图层都包含一个显示在舞台中的不同图像。时间轴的主要组件是图层、帧和播放头，如图11-3所示。 图11-3 时间轴11.1 Flash 8概述 11.1 Flash 8概述 11.1.4 工具箱 工具箱是Flash 8中最常用的面板，用鼠标单击能选中各种工具，如图11-4所示。用户可以自定义工具编排，执行“编辑”→“自定义工具面板”命令，打开“自定义工具栏”对话框，可根据需要重新安排和组合工具的位置，如图11-5所示，在“可用工具”列表中选择工具，单击“增加”按钮，就可以将选择的工具添加到“当前选择”列表中。单击“恢复默认值”按钮就可以恢复系统默认的工具设置。11.1 Flash 8概述 11.1 Flash 8概述 图11-4 工具箱 图11-5 “自定义工具栏”对话框11.2 常用面板简介11.2 常用面板简介 Flash 8中有很多面板，默认状态下，在“舞台”的正下方有四个比较常用的浮动面板，分别是“动作”面板，“属性”面板，“滤镜”面板，“参数”面板。单击面板的标题栏，可以依次展开它们，如图11-6所示。 图11-6 展开的常用面板11.2 常用面板简介11.2 常用面板简介 1 、“滤镜”面板 “滤镜”面板提供了七种滤镜效果，可以对文字、影片剪辑和按钮进行美化和修饰，使其更有趣味，如果与补间动画结合起来，还可以制作出各种丰富的动画效果 。 　2．“动作”面板 　“动作”面板是是动作脚本的编辑器。 　3．“属性”面板 　“属性”面板（如图11-8所示）可以很容易地访问舞台或时间轴上当前选定的最常用的属性，也可以在面板中更改对象或文档的属性，我们将在后面章节中详细介绍属性面板的应用。 　　　　　　　11.3 在网页中添加特效文字11.3 在网页中添加特效文字　在网页制作过程中，文字是最常用的对象，我们可以制作一些特效文字作为网页标题，如空心字、立体字、五彩字等，来增加网页的美观性，吸引浏览者。 　1．五彩字 　五彩字的制作方法，是先将输入的文本转换为图像对象，然后对它填充渐变色，最后再对渐变色稍加调整即可，五彩字的制作效果如图11-9所示。 　　　　　　　　图11-9 五彩字效果图11.3 在网页中添加特效文字11.3 在网页中添加特效文字　2．空心字 　空心字的制作方法是：先将输入的文字转换为图形对象，然后对它进行描边，最后将文字的实心部分删去，得到空心字，效果如图11-15所示。 　 　　　　　　　图11-15 空心字效果图11.3 在网页中添加特效文字11.3 在网页中添加特效文字　3．阴影字 　阴影字是网页中较为常用的一种特效文字，制作阴影字的方法是：先输入文字，然后将文字复制，并将复制后的文字与原文字错开一些，产生出阴影字的效果。为了增加阴影字的美观，完成后应该对文字进行描边，效果如图11-20所示。 　　　　　　　图11-20 制作阴影效果11.3 在网页中添加特效文字11.3 在网页中添加特效文字　4．立体字 　立体字的制作方法是：先输入文字，然后将文字复制，分别对它们填充不同的颜色，并描边；然后将复制后的文字和原文字重叠摆放，并错开一定的距离，擦除重叠部分多余的线条，再用直线连接它们的顶点，产生出立体的透视效果，立体效果如图11-23所示。 　　　　　　图11-23 “立体字”效果图 11.4 利用Flash 8制作常用的图案11.4 利用Flash 8制作常用的图案11.4.1 绘制四角星、五角星 在制作网页时，经常会遇到需要添加一些星形图案，如五角星、夜空中的星星（用这些图形还可以制作国旗、国徽和群星闪耀等）等。掌握星形图案的绘制方法，可以绘制出其他类似的几何图形，如正多边形等。下面以五角星、四角星为例，来介绍它们的绘制方法，效果如图11-30所示。 　　　　　图11-30 五角星和四角星的效果图11.4 利用Flash 8制作常用的图案11.4 利用Flash 8制作常用的图案11.4.2 绘制太极八卦图与二进制数 太极八卦图是中国古老的文化科学遗产，是我国劳动人民智慧文明的结晶。德国数学家莱布尼兹受此图的启发，完善、撰写了《二进制数与算术》一书，成为现代电子计算机二进制数的创始人。太极图就是一个圆，里面画着两条黑白相间、首尾相顾的鱼；八卦图是一个正八边形，每条边上都有一个特殊的符号，每个符号由三个或断或连的线段组成，效果图如图11-37所示。 　　　　　图11-37 “太极八卦与二进制数”效果图11.4 利用Flash 8制作常用的图案11.4 利用Flash 8制作常用的图案11.4.3 绘制香港特别行政区区旗 中华人民共和国香港特别行政区区旗是一面中间配有五颗星的动态紫荆花图案的红旗。红旗代表祖国，紫荆花代表香港，紫荆花红旗象征香港是祖国不可分割的一部分，在祖国的怀抱中兴旺发达。花蕊上的五颗星象征着香港同胞心中热爱祖国。花呈白色表示有别于代表祖国其他部分的红色，即象征“一国两制”。下面利用“钢笔工具”来绘制香港特别行政区区旗，效果图如图11-48所示。 　　　　　图11-48 香港特别行政区区旗11.5 元件和实例11.5 元件和实例　11.5.1 元件的简介 　元件（又称为图符或组建）是Flash创作中的资源单位，包括可重复使用的图形、动画或按钮。它的出现极大地方便了Flash的创作，使输入的影片文件体积大大缩小。学过OOP（面向对象编程）的读者都应该知道对象与实例。元件也是以各种形式存在的。在元件编辑环境中先把范例编辑好。作为对象存入元件库中，然后在场景中调用元件库中的元件，此时在场景中的元件就是该对象的一个实例。并可在场景环境中对实例的各个属性如颜色、坐标、声音、效果等进行编辑。没有学过OOP的读者可以把对象理解为底片，而实例就是相片，即实例是对象的一个具体实现。修改实例的属性相当于对底片放大或缩小成为相片。11.5 元件和实例11.5 元件和实例　1．元件分类 　在Flash 8中有三种元件，分别是图形元件、影片剪辑元件和按钮元件。 　（1）图形元件。图形元件一般是静止的图形，如图11-61所示。它可以由多个层构成，但只有一帧，图形元件不能捕获鼠标信息，也不能完成Action动作和声音控制。 　（2）影片剪辑元件。影片剪辑元件是Flash 创作的基本资源之一。顾名思义，影片剪辑就是一个影片片断。它的制作过程与制作动画没用什么差别，只不过最终集成为一个元件。 　（3）按钮元件。按钮元件是用于响应鼠标事件的元件，它可以按照相应显示的不同图像状态。在按钮中可以放置图像元件或影片剪辑，但是不能在一个按钮中放入另外一个按钮元件。 11.5 元件和实例11.5 元件和实例按钮元件由四个关键帧组成，因而有四种不同的状态，如图11-63所示。 　　　　图11-63 按钮编辑模式下的时间轴 　 　1）弹起帧：代表鼠标指针不在按钮上时的状态。如果不定义点击帧，该状态下的对象就会被作为鼠标响应区域。 　2）指针经过帧：代表鼠标指针在按钮上时的状态。 　3）按下帧：代表鼠标单击按钮时的状态。 　4）点击帧：定义鼠标相应的区域，该帧的状态在影片中是看不见的。如果不需要定义响应帧就可以不定义该帧。11.5 元件和实例11.5 元件和实例2．元件的创建 　创建元件的方法有如下三种： 　第一种：对象转换为元件，在舞台上选取对象来创建元件，被选取的对象仍然在舞台上，但已经变成了元件的实例。被选择的对象还会复制一个新的元件放在库窗口中。 　第二种：创建新元件 　第三种：从共享库中选取。Flash自带的例子以及常用元件都能从通用的元件库中找到。选择“窗口”→“其他面板”→“公用库”命令，然后在子菜单中寻找可用的实例即可。还可以将找到的元件放进当前场景的“库”面板中以方便使用。 11.5 元件和实例11.5 元件和实例11.5.2 实例 　元件创建后，它就自动存入该文件的“库”面板中。将元件从“库”面板中拖动到舞台上，就生成了元件的一个实例。实例是元件的实际运用，在舞台上对实例进行各种操作，如缩放、修改实例的颜色效果、变形等操作都不会影响“库”面板中的元件，对根据同一元件创建的不同实例可以进行不同的设置和修改。 　1．创建实例 　创建实例的方法比较简单，只需要在“库”面板中，选择需要的元件，按住鼠标左键拖动舞台上释放即可。 　2．编辑实例 　将元件从“库”面板中拖到舞台上，创建与之对应的实例，可以根据实际制作需要来调整实例的大小和旋转角度。 11.5 元件和实例11.5 元件和实例11.5.3 几种特殊的元件和实例的介绍 （1）位图被导入“舞台”后，在“库”中直接为其创建一个“元件”对象，而它在“舞台”上的图片也就被称为“某元件的实例”，但这种“实例”的能力有限，它实际上是一种“成组的元素”，除了可以做“动作变形”及改变位置、大小和方向，其他什么也干不了，要想将位图图形转换为万能的元件，必须选中它，然后按住键盘上的F8键，把它重新定义为一个新的元件。 （2）声音被导入“舞台”后，在“舞台”上什么也看不到，在“库”面板中，声音自动被定义为“元件”，它在“舞台”上的“实例”应用，可以在帧的“属性”面板中设置，对于声音在“舞台”上的每个“实例”，可以“斩头去尾”并进行其他的特效处理，而不影响声音“元件”在“库”元件中的原来特征。利用这一特点，可以仅用一个声音文件就能在动画中得到不同的声音效果，由于声音文件一般比较大，从而节约了大量的资源。11.5 元件和实例11.5 元件和实例（3）视频被导入“舞台”后，同样在“库”中为其定义了个格“元件”，它在“舞台”上的实例仅能改变位置、大小，它实际上是一个“封装”了的“动画系列”。 （4）矢量图被导入“舞台”后，仅出现在“舞台”中，“库”中没有其对应“元件”，舞台中矢量图形保留了原来创作过程中的全部“路径”结构，这是动画制作过程中最为得心应手的动画元素。 （5）当在“场景”中输入一段文字后，它以一种特殊的“组合”方式出现，在你未能把“组合”解散前，仍然可以编辑它，包括文字内容、字体、字号和颜色等属性。更为重要的是，还可以赋予文本对象以特定“角色”（“静态文本”、“动态文本”和“输入文本”等，缺省的是“静态文本”）。而一经解散“组合”，它就与一般的图形“素材”一样。11.5 元件和实例11.5 元件和实例11.5.4 元件库 （1）使用“元件项目列表”。Flash 8“库”中的“元件项目列表”采用“可折叠文件夹”树状结构，一个较大的动画作品，往往拥有几百个元件，利用“库”中的“项目列表”这一特性可为动画中所有元件作有序归类 。 （2）元件的排序。当向“库”内添加新元件时，它不时出现在列表的上面，它在列表中的位置似乎是随机安排的，因为默认时，“库”的“元件项目列表”是按“元件名称”排列的，英文名与中文名混杂时，英文在前，中文按照其对应的字符码排列，显然这种排列方式不利于查找元件。 （3）用“图形”识别元件类型。Flash 8的“元件列表”中，除了“类型”这一列“名称”外，还提供了更详细的元件“类型图标”。11.5 元件和实例11.5 元件和实例3．元件库的使用 （1）清理多余项目。随着动画制作的进展，“库”项目将变得越来越杂乱。这样将浪费很多宝贵的源文件空间，从“库”菜单中单击“选择未用项目”命令，Flash 会把这些未用的元件全部选中，这时可以单击菜单中的“删除”命令，也可以直接单击按钮，将它们删除。 （2）公用元件库。在“窗口”→“公用元件库”菜单列表中，可以看到Flash 8为用户提供“学习交互”、“按钮”和“类”三个类别的常用“元件”，选择其中之一，在“舞台”上就会出现一些相应的“公用元件库”。 11.5 元件和实例11.5 元件和实例　11.5.5 按钮元件 　按钮元件是Flash 中较为特殊的元件之一，通过编辑按钮的4个关键帧，可以产生丰富多彩的特殊效果，从而为动画或网页增添光彩，按钮在动画中可以实现场景的跳转，动画的播放与停止和输入的确认，按钮的组合还可以组成菜单。按钮的应用非常广泛。下面将通过几个实例来介绍按钮的制作、按钮动作的使用方法、按钮控制动画等基本用法。 　1．水晶按钮 　水晶按钮是Flash 中应用最为普遍的按钮元件。有弹起、指针经过、按下和点击四种状态。本例主要说明按钮在不同状态下的不同效果，如图11-74所示。 　　　　　　　　图11-74 水晶按钮11.5 元件和实例11.5 元件和实例　2．链接按钮 　链接按钮主要是网页中添加交互效果的一种基本工具，按钮的“弹起”状态是按钮的一般状态，“指针经过”状态是指针经过按钮的效果，“按下”状态是鼠标按下时的效果，“点击”则是鼠标对按钮的反应区。 　3．动态按钮 　本例在制作按钮的过程中，在“指针经过”状态下加入一个影片剪辑。当指针经过时会自动播放影片剪辑，这是多种元件相互嵌套的结果。在动画制作中会有更多的元件加入到按钮中，如声音、程序等。 　4．播放按钮 　对于Flash来说，应用最广泛的部分就是动画的交互性，下面介绍使用按钮来控制动画的播放。11.6 逐帧动画11.6 逐帧动画　逐帧动画是一种常见的动画形式，它的原理是在“连续的关键帧”中分解动画动作，也就是在每一帧中设置不同的画面，连续播放而形成的动画。 　11.6.1 逐帧动画的概念及表现形式 　在时间帧上逐帧绘制帧内容称为逐帧动画，由于是一帧一帧地画，所以逐帧动画具有很大的灵活性，几乎可以表现任何想表现的内容。逐帧动画在时间轴上表现为连续出现的关键帧，如图11-115所示。 　　　　　　图11-115 逐帧动画在时间轴上的表现11.6 逐帧动画11.6 逐帧动画　11.6.2 逐帧动画的制作方法 　创建逐帧动画的常见方法有以下几种： 　（1）用导入的静态图片建立逐帧动画。用jpg、png等各式的静态图片连续导入到Flash中，就会建立一段逐帧动画。 　（2）绘制矢量逐帧动画。用鼠标或压感笔在场景中一帧一帧地画出每帧的内容。 　（3）文字逐帧动画。用文字作为帧中的内容，实现文字跳跃、旋转等效果。 　（4）指令逐帧动画。在时间帧面板上，逐帧写入动作脚本语句来完成元件的变化。 　（5）导入序列图像。可以导入gif序列图像、swf动画文件或者利用第三方软件（Swish、Swift、3D等）产生动画系列。 11.6 逐帧动画11.6 逐帧动画11.6.3 倒数数字逐帧动画实例 操作步骤： （1）执行“文件”→“新建”命令，弹出“新建文档”对话框，新建一个“Flash文档”，单击“确定”按钮。 （2）单击时间轴上的图层1的第1帧，使用文字输入工具在绘图区域输入数字9，如图11-116所示，将数字颜色设置为红色，大小设置为200，如图11-117所示。 　　　　　　 　　　　　　　图11-116 输入数字911.6 逐帧动画11.6 逐帧动画 图11-117 设置文本 （3）这时可以看到，在时间轴上的第1帧变成一个黑色的小圆点，这说明已经有对象加入第1帧。在第2帧的位置右击，选择“插入关键帧”命令，在第2帧的位置插入关键帧，这时可以看到，第2帧也变成了一个黑色的小圆点，这说明：在插入关键帧的同时将第1帧的对象也复制到了第2帧上。继续添加其余的关键帧，如图11-118所示。 　　　　　　图11-118 添加第2帧到第9帧11.6 逐帧动画11.6 逐帧动画（4）使用“文本工具”，选择第2帧，双击鼠标左键，选中文字，将9改为8，并将颜色设置为粉红色，如图11-119所示。 　　　　　　　　　图11-119 修改文本 （5）以同样的方式依次将其余各关键帧的内容修改为11、6、5、4、3、2、1、0。颜色依次为蓝色、绿色、黄色、橙色、黑色、紫色、淡蓝色、黑绿色。 （6）单击Enter键，播放动画，可以看到数字的倒数功能出现了，这时执行“控制”→“测试影片”命令，查看动画的执行情况。执行“文件”→“导出”→“导出影片”命令，在弹出的“导出影片”对话框中将动画保存为“倒数文字.fla”。11.7 创建形状补间动画11.7 创建形状补间动画1．形状补间动画的概念 　在一个关键帧中绘制一个形状，然后在另一个关键帧中改变形状或绘制另一个形状，Flash根据二者之间的形状来创建的动画被称为“形状补间动画”。 2．构成形状补间动画的元素 　形状补间动画可以实现两个图形之间颜色、形状、大小和位置的相互变化，其变形的灵活性介于逐帧动画和动画补间动画两者之间，使用的元素多为用鼠标或压感笔绘制出的形状，如果使用图形元件、按钮或文字，则必须先“分离”，才能创建变形动画。 11.7 创建形状补间动画11.7 创建形状补间动画3.形状补间动画在时间轴面板上的表现 　形状补间动画建好后，时间帧面板上的背景色变为淡绿色，在起始帧和结束帧之间有一个箭头，如图11-120所示。 　　 图11-120 形状补间动画在时间轴面板上的表示标记 4．创建形状补间动画的方法 　在动画开始播放的地方创建或选择一个关键帧，并设置要开始变化的形状，一般一帧中以一个对象为好，在动画结束处创建或选择一个关键帧并设置要变成的形状，再单击开始帧，在“属性”面板上单击“补间”旁边的下拉按钮，在弹出的菜单中选择“形状”，此时，时间轴上的变化如图11-120所示，一个形状补间动画就创建好了。11.7 创建形状补间动画11.7 创建形状补间动画5．形状补间动画的属性面板 　Flash的“属性”面板随鼠标选定的对象不同而发生相应的变化，当建立了一个形状补间动画后，单击帧，属性面板如图11-121所示。 　　　　　图11-121 形状补间动画的属性面板11.7 创建形状补间动画11.7 创建形状补间动画6．形状提示的使用 （1）形状提示的作用。在“起始形状”和“结束形状”中添加相应的“参考点”，使Flash在计算变形过渡时依一定的规则进行，从而较有效地控制变形过程。 （2）添加形状提示的方法。单击形状补间动画的开始帧，执行“修改”→“形状”→““添加形状提示”命令，该帧在形状上就会增加一个带字母的红色圆圈。相应地，在结束帧形状中也会出现一个“提示圆圈”。用鼠标左键单击并分别按住两个“提示圆圈”，放置在适当的位置，拖放成功后开始帧上的“提示圆圈”变成黄色，结束帧上的“提示圆圈”变为绿色，拖放不成功或不在一条曲线上的时候，“提示圆圈”颜色不变，如图11-122所示。 　　　　图11-122 添加形状提示后各帧的变化效果11.7 创建形状补间动画11.7 创建形状补间动画7．形状渐变动画实例——变矩形为五角星 （1）制作无提示点动画。 　1）新建一个Flash文档，在时间轴上插入一个新的图层将两个图层分别命名为“文字”和“无提示点”，然后在“文字”层用文本工具输入相关的文字，在“无提示点”层用矩形工具绘制出一个无边框的矩形，如图11-123所示。 　　　　　　　图11-123 初始化制作11.7 创建形状补间动画11.7 创建形状补间动画2）选择“无提示点”层的第1帧，打开“属性”面板，在“补间”下拉列表中选择“形状”选项，如图11-124所示。 　　　　　　　图11-124 选择“形状”选项 3）在“无提示点”层的第50帧按F6功能键插入关键帧，在“文字”层的第50帧按F5功能键插入帧，此时时间轴如图11-125所示。 　　　　　　　　图11-125 时间轴窗口11.7 创建形状补间动画11.7 创建形状补间动画4）将“文字”层锁定，然后选择“无提示点”层的第50帧，在舞台上绘制一个无边框的五角星，并将矩形删掉，如图11-126所示。 5）此时按回车键或者拖动播放指针测试动画，可以看到矩形以Flash默认的方式，逐渐变成一个五角星，如图11-127所示。 　　　　　　　　　　　　　　　　第1帧 第25帧 第50帧 图11-126 绘制一个五角星　　　　　图11-127 测试动画11.7 创建形状补间动画11.7 创建形状补间动画（2）制作有提示点的动画 1）在时间轴上新建一个图层，命名为“有提示点”。用同样的方法制作由矩形渐变到五角星的形状渐变动画，时间轴窗口如图11-128所示。 　　　　　　　　图11-128 时间轴窗口 　2）将“文字”层和“无提示点”层锁定，选择“有提示点”层的第1帧，然后选择菜单栏的“修改”→“形状”→“添加形状提示”命令，或者用Ctrl+Shift+H组合键，为形状添加提示点，此时舞台中的矩形中增加了一个红色的字母a，如图11-129所示。 　3）用鼠标单击字母a，并拖曳至矩形的一个角上，如图11-130所示。11.7 创建形状补间动画11.7 创建形状补间动画 图11-129 添加提示点 图11-130 拖动提示点至边缘 　4）选择时间轴的第50帧，可以看到五角星的中央也多了一个字母a，用鼠标单击并拖曳至五角星的拐角处，会发现字母a有原来的红色变成了绿色，如图所示。再回到第1帧，发现矩形边界上的字母a有原来的红色变成了黄色，如图11-131所示。 　a拖动至拐角处 b相应的变色 c设置其余提示点 　 图11-131 给矩形和五角星添加提示点11.7 创建形状补间动画11.7 创建形状补间动画　5）用同样的方法设置另外3个提示点。 　6）此时按回车键测试动画便发现原来形状渐变动画发生了改变，如图11-132所示。 　设置4个提示点在渐变前后一一对应，不再像“无提示点”那样由Flash自动生成了。 　　　　第1帧 　　第25帧 　第50帧 　　　　　　图11-132测试动画的效果11.7 创建形状补间动画11.7 创建形状补间动画7）保存并测试动画，得到如图11-133所示的效果。 　　　　　图11-133测试最终的效果11.8 遮罩动画11.8 遮罩动画11.8.1 遮罩动画的概念 1．遮罩图层的概念 　遮罩图层动画是Flash中的一个很重要的动画类型，很多效果丰富的动画都是通过遮罩动画来完成的，在Flash的图层中有一个遮罩图层类型，为了得到特殊的显示效果，可以在遮罩图层上创建一个人字形状的视窗，遮罩层下方的对象就可以通过该“视窗”显示出来，而视窗之外的对象就将不会显示。 2．遮罩图层的作用 　在Flash动画中，“遮罩”主要有两种用途，一个作用是用在整个场景或一个特定的区域，使场景外的对象或特定区域外的对象不可见；另一个作用是用来遮罩某一元件的一部分，从而实现一些特殊的效果。11.8 遮罩动画11.8 遮罩动画11.8.2 遮罩动画的创建方法 1．创建遮罩 　在Flash中设有一个专门的按钮来创建遮罩层，遮罩层其实就是由普通图层转化而来的。只要在某个图层上右击，在弹出菜单中选择“遮罩层”，该图层就会生成遮罩层，“层图标”就会从普通层图标变成遮罩层图标，系统就会把遮罩层下面的一层关联为“被遮罩层”，在缩进的同时图标变为，如果想关联更多层被遮罩，只要把这些图层拖到被遮罩层就可以了，如图11-133所示。 　　　　图11-133 一个遮罩层下面有多个被遮罩层11.8 遮罩动画11.8 遮罩动画2．构造遮罩层和被遮罩层的元素 　遮罩层的图形对象播放时是看不到的，遮罩层中的内容可以是按钮、影片剪辑、图形、位图、文字等，但不能使用线条。如果一定要用线条，可以将线条转化为“填充”。 　被遮罩层中的对象只能透过遮罩层中的对象被看到。在被遮罩层，可以使用按钮、影片剪辑、图形、位图、文字、线条。 3．遮罩中可以使用的动画形式 　可以在遮罩层和被遮罩层中分别同时使用形状渐变动画、动画补间动画引导线动画等动画手段，从而使遮罩动画变成一个可以施展无限想象力的创作空间。11.8 遮罩动画11.8 遮罩动画11.8.3 应用遮罩时的技巧 （1）遮罩层的基本原理是：能够透过该图层中的对象看到“被遮罩层”中的对象及其属性（包括它们的变形效果），但是遮罩层对象中的许多属性如渐变色、透明度、颜色和线条样式等却是被忽略的。比如说不能通过遮罩层的渐变色来实现被遮罩层的渐变色变化。 （2）要在场景中显示遮罩效果，可以锁定遮罩层和被遮罩层。 （3）不能用一个遮罩层试图遮罩另一个遮罩层。 （4）遮罩可以应用在GIF动画上。 （5）在制作过程中，遮罩层经常挡住下层的元件，影响视线，无法编辑。这时可以按下遮罩层“时间轴”面板上的显示图层轮廓按钮，使之变成使遮罩层显示边框形状，在这种情况下，还可以拖动边框调整遮罩图形的外形和位置。 （6）在被遮罩层中不能放置动态文本。 11.8 遮罩动画11.8 遮罩动画11.8.4 实践技能训练——探照灯效果 （1）新建一个Flash文档，设定大小为500×200px，设定背景颜色为黑色。 （2）按Ctrl+F8组合键插入一个图形元件，命名为mask。单击工具箱中的椭圆工具，按住Shift键，在其中绘制一个正圆，并且以元件的中心十字为中心点放置。 （3）单击按钮，添加图层2，右键图层2，在快捷菜单中选择“遮罩层”命令，将其定义为遮罩层，同时图层1成为被遮罩层。 （4）单击按钮，取消图层锁定，按Ctrl+L组合键，打开库，选取图层2的第1帧，将库中的元件mask拖到场景图层1的第1帧中。 （5）选取图层1的第1帧，用文本工具在场景中输入“探照灯效果”，设置字体为黑体，字号为58号，颜色为#FFFF00，置于中央位置。11.8 遮罩动画11.8 遮罩动画（6）在图层2的第1帧中，调整其中元件mask的大小和位置，使其位于文字的左侧，如图11-134所示。 　　　　　　　 　　　　　　　图11-134 第1帧的状态图11.8 遮罩动画11.8 遮罩动画（7）单击图层1的第40帧，按“F5”键插入普通帧，使文字保持40帧。 （8）分别单击图层2的第20帧和第40帧，按F6插入关键帧。 （9）单击图层2的第20帧，选择其中的元件mask，将其移动至文字的右侧。 （10）在图层2的第1帧和第20帧，在属性菜单中设置补间为“动画”，创建动画，如图11-136所示。 　　　　　　　　　　　　　　图11-136 创建动画的时间轴效果 （11）保存文档并测试影片。11.9 创建动画补间动画11.9 创建动画补间动画11.9.1 动画补间动画的概念 （1）动画补间动画的概念。在一个关键帧上放置一个元件，然后在另一个关键帧改变这个元件的大小、颜色、位置、透明度等，Flash根据二者之间的帧创建的动画被称为动画补间动画。 （2）构成动画补间动画的元素。构成动画补间动画的元素是元件，包括影片剪辑、图形元件、按钮、文字、位图和组合等，但不能是形状，只有把形状“组合”转换成“元件”后才能作动画补间动画的素材。11.9　创建动画补间动画11.9　创建动画补间动画（3）动画补间动画在时间帧面板上的表现。动画补间动画建立后，时间轴面板的背景色变为淡紫色，在起始帧和结束帧之间有一个箭头，如图11-137所示。 　　　　图11-137 动画补间动画在时间轴上的表现 （4）创建动画补间动画的方法。在动画开始播放的地方创建或选择一个关键帧并设置一个元件，一帧中只能播放一个项目，在动画要结束的地方创建或选择一个关键帧并设置该元件的属性。再单击开始帧，在“属性”面板上单击“补间”旁边的下拉按钮，在弹出的菜单中选择“动画”，或用鼠标右键单击帧，在弹出的菜单中选择“创建补间动画”，就建立了“动画补间动画”。 11.9 创建动画补间动画11.9 创建动画补间动画11.9.2 动画补间动画的属性面板 在时间线“动画补间动画”的起始帧上单击，帧属性面板如图11-138所示。 　　　　图11-138 动画补间动画的“属性”面板 （1）单击“缓动”右边的按钮，弹出拉动滑杆，拖动上面的滑块或直接输入数值，可设置参数值，设置完后，动画补间动画的效果会按照下面的设置作出相应的变化： 　1）在-1～-100之间的负值，动画运动的速度从慢到快，朝运动结束的方向加速补间。 　2）在1～100之间的正值，动画运动的速度从快到慢，朝运动结束的方向减慢补间。11.9 创建动画补间动画11.9 创建动画补间动画　默认的情况下，补间帧之间的变化速率是不变的。 （2）单击“编辑”按钮，可以打开“自定义缓入/缓出”对话框，设置更丰富的变化。 （3）在“旋转”下拉列表框中有四个选项，选择“无”（默认设置）可静止元件旋转；选择“自动”可使元件在需要最小动作的方向上旋转一次；选择“顺时针”（CW）或“逆时针”（CCW），并在后面输入数字，可使元件在运动时顺时针或逆时针旋转相应的圈数。 （4）选择“调整到路径”复选框，将补间元素的基线调整到运动路径。此项功能主要用于引导线运动。 （5）选择“同步”复选框，将使图形元件实例的动画和主时间轴同步。 （6）选择“对齐”复选框后，根据其注册点将补间元素附加到运动路径，此功能也用于引导线运动。11.9 创建动画补间动画11.9 创建动画补间动画11.9.3 实践技能训练——蜜蜂采蜜 该实例的最终效果如图11-139所示。蜜蜂从舞台的右侧飞入，弯弯曲曲落到花丛中。 　　　　　　　　图11-139 蜜蜂飞舞