《网页设计与制作》-情境3：使用Flash CS3

好的工作环境是优秀软件成功的基础，首先介绍F1ashCS3的基本工作界面。启动F1ashCS3后，将出现F1ashCS3的工作界面，该界面与其他应用软件一样，由菜单栏、工具箱、时间轴、舞台、“属性”面板和面板组等部分组成，如图3-1-1所示。1.菜单栏菜单栏位于工作界面的顶部，包括文件、编辑、视图、插入、修改、文本、命令、控制、调试、窗口和帮助11个菜单。①文件：用于文件操作，如创建、打开和保存文件等。②编辑：用于动画内容的编辑操作，如复制、剪切和粘贴等。③视图：用于对开发环境进行外观和版式设置，包括放大、缩小、显示网格及辅助线等。④插入：用于插入操作，如新建元件、插入场景和图层等。下一页任务一：FIashCS3的工作环境简介返回

⑤修改：用于修改动画中各种对象的属性，如帧、图层、场景以及动画本身等。⑥文本：用于对文本的属性进行设置。⑦命令：用于对命令进行管理。⑧控制：用于对动画进行播放、控制和测试。⑨调试：用于对动画进行调试。⑩窗口：用于打开、关闭、组织和切换各种窗口或面板。帮助：用于快速获得帮助信息。2.工具箱通过选择菜单“窗口”→“工具”命令可以显示和隐藏工具箱。利用工具箱中的工具，可绘制、选择、修改图形，给图形填充颜色或者改变舞台的视图等。工具箱如图3-1-2所示。上一页下一页任务一：FIashCS3的工作环境简介返回

选择工具：用于选定舞台中的对象和拖动对象等操作。部分选取工具：可以选取对象部分区域。任意变形工具：对选取的对象进行变形。套索工具：选择一个不规则的图形区域，并且还可以处理位图图形。钢笔工具：可以使用此工具绘制曲线。文本工具：用于添加文本。线条工具：使用此工具可以绘制各种形式的线条。矩形工具：用于绘制矩形，也可以绘制正方形。铅笔工具：用于绘制折线、直线等。刷子工具：用于绘制填充图形。墨水瓶工具：用于编辑线条的属性。颜料桶工具：用于编辑填充区域的颜色。上一页下一页任务一：FIashCS3的工作环境简介返回

滴管工具：用于给图形的填充颜色或将线条属性复制到别的图形线条上，还可以采集位图作为填充内容。橡皮擦工具：用于擦除舞台上的内容。手形工具：当舞台上的内容较多时，可以用该工具平移舞台以及各个部分的内容。缩放工具：用于缩放舞台中的图形。笔触颜色工具：用于设置线条的颜色。填充颜色工具：用于设置图形的填充区域。3.“时间轴”面板“时间轴”面板是Flash界面中最重要和最核心的部分，用于管理动画中的图层和帧，如图3-1-3所示。从图中可以看出，影片中的图层位于“时间轴”面板的左侧，每个图层包含的帧位于该面板右侧的行中。上一页下一页任务一：FIashCS3的工作环境简介返回

“时间轴”面板中，其上方和下方的几个按钮用于调整图层的状态和创建图层。在帧区域中，其顶部的标题指示了帧编号，动画播放头指示了舞台中当前显示的帧。时间轴状态显示在“时间轴”面板的底部，它包括若干用于改变帧显示的按钮，指示当前帧编号、帧频和到当前帧为止的播放时间等。其中，帧频直接影响动画的播放效果，其单位是“帧／秒（fps）”，默认值是12帧／秒。4.舞台创建文档以后，可以看到文档窗口中的舞台，如图3-1-4所示。舞台是用于放置图形内容的矩形区域，包括矢量插图、文本框、按钮和导入的位图图形或视频剪辑。可以在工作时放大或缩小以及更改舞台，而网格、辅助线和标尺有助于在舞台上精确地放置内容。上一页下一页任务一：FIashCS3的工作环境简介返回

5.“属性”面板“属性”面板默认情况下处于展开状态，在F1ashCS3中，“属性”面板、“滤镜”面板和“参数”面板整合到了一个面板中。“属性”面板的内容取决于当前选定的内容，可以显示当前文档、文本、元件、形状、位图、视频、帧或工具的信息和设置。例如，当选择工具箱中的椭圆工具时，在“属性”面板中将显示有关文本的一些属性设置，如图3-1-5所示。6.面板组FlashCS3的面板组如图3-1-6所示，大量的面板为操作提供了很大的便利。面板组包括许多面板。上一页任务一：FIashCS3的工作环境简介返回

项目1：制作逐隐逐现的文字【效果说明】下面一起制作从左至右逐字出现的现象，待到全部出现以后再逐字消失到上方和下方的文本动画，如图3-2-1所示。【操作步骤】（1）选择菜单“文件”→“新建”命令，弹出“新建文档”对话框，单击“确定”按钮，即可创建一个空白文档，选择菜单“文件”→“导入”→“导入到库”命令，弹出“导入到库”对话框，在对话框中选择图像文件，单击“打开”按钮，将图像导入到库中，把图像从库中拖放到舞台上，如图3-2-4所示。（2）选择菜单“修改”→“文档”命令，弹出“文档属性”对话框，在对话框中将“匹配”设置为“内容”，如图3-2-5所示，单击“确定”按钮，修改文档大小，调整图像使之与文档相吻合。下一页任务二：补间动画返回

（3）在“时间轴”面板，单击“插入图层”按钮，在工具箱中选择文本工具，单击工作区域输入文字WIND，在属性面板修改文字属性，如图3-2-6所示。（4）使用工具箱的选择工具，选中刚才输入的文字对象，按组合键Ctrl+B，如图3-2-7所示，把文本分离为“W”“I”“N”“D”这样四个独立的对象，然后选择其中一个对象右击，从弹出的快捷菜单中选择“转换为元件”命令，弹出“转换为元件”对话框，输入元件名称“W”，类型设置为“图形”，单击“确定”按钮，指定图形元件。剩余的文字对象也要转换为图形元件，F8键是快捷键。（5）选择这四个已经保存为元件的对象，右击，在弹出的快捷菜单中，选择“分散到图层”命令，这个命令能够自动创建与对象个数一样多的图层，把每个对象分到里面去，如图3-2-11所示，这是一个能够提高效率的操作。上一页下一页任务二：补间动画返回

（6）在时间轴上选择图层1的第30帧，右击，在弹出的快捷菜单中选择“插入帧”命令，如图3-2-12所示，快捷键是F5，这是为了把第1帧的背景图像一直显示到第30帧。（7）选择其他几个文字对象图层的第5帧右击，在弹出的快捷菜单中选择“插入关键帧”命令，快捷键是F6，如图3-2-13所示，选择全部第1帧，然后按住Shift键，把对象向左水平拖动。（8）选择这几个文字对象图层的第1～5帧，右击，在弹出的快捷菜单中选择“创建补间动画”命令，如图3-2-14所示。（9）为了使文字从第一个字符开始依次单个儿出现，就需要在开头的关键帧前面插入空白关键帧。选定“I”图层的全部帧（单击该帧所在图层就能一次选中这个图层的所有帧），然后把它们相对下面图层向右移动2帧，如图3-2-15所示。“N”和“D”图层也要依次向后拖动，如图3-2-16所示。上一页下一页任务二：补间动画返回

（10）拖动所有文字图层的第20帧，插入关键帧，如图3-2-17所示，然后在第25帧也插入关键帧，如图3-2-18所示。（11）选择“W”和“N”图层的第25帧，向下拖动，如图3-2-19所示，选择“I”和“D”图层的第25帧，向上拖动，如图3-2-20所示。（12）在工作区选中所有文字对象，在“属性”面板修改“颜色”的Alpha属性为0%，如图3-2-21所示。（13）在各文字图层的第20～25帧创建补间，并向后拖动，如图3-2-22所示。（14）在时间轴上不足30帧的图层都用普通帧填充，如图3-2-23所示。（15）按组合键Ctrl+Enter对制作好的动画进行测试，这个测试可以自动生成swf文件，或者最后选择菜单“文件”→“导出”→“导出到影片”命令，也可以把文件导出为swf文件。上一页下一页任务二：补间动画返回

项目2：制作水滴文字【效果说明】下面来制作像水珠一样从上方落下，然后又消失恢复平静的文本动画。为了追求滴落动作的自然效果，此处将使用“缓动”选项，效果如图3-2-24所示。操作步骤（1）把背景文件图导入到库，然后拖动到工作区，在“属性”面板修改文件的大小，把“宽”、“高”左边的锁头锁上，如图3-2-25所示，可以使文件的宽、高成比例缩放。并且修改工作区文档的大小与背景图相同。（2）选择文本工具输入文字“水滴文字”，如图3-2-26所示。上一页下一页任务二：补间动画返回

（3）把刚刚输入的文字按组合键Ctrl+B分离为单独的文字，然后选择“分散到图层”命令，并把这些分散开的单独文字转换为元件，如图3-2-27所示。（4）在时间轴图层1中第40帧处右击，在弹出的快捷菜单中选择“插入帧”命令，可以使背景图片从第1帧显示到第40帧。（5）选择各文字对象图层的第8帧，右击，在弹出的快捷菜单中选择“插入关键帧”命令，如图3-2-28所示。把这几层的第1帧都选中，将这四个元件向上方移动。然后把这四个图层的第1～8帧创建补间动画，如图3-2-29所示。（6）给四个元件图层的补间“属性”面板中“缓动”属性，设置值为-70，如图3-2-30所示。“缓动”是设定运动加速度的部分，以“0”为基准，正值越大，运动的速度越快，负值越大，运动速度越慢。上一页下一页任务二：补间动画返回

（7）给四个元件图层的第9帧添加关键帧，并把它们全部上移几个像素。如果按住Shift键的同时按方向键，那么一次移动的距离是只用方向键移动的10倍。（8）选择四个元件图层的第28帧，插入关键帧，然后在第34帧也同样插入关键帧，如图3-2-31所示。（9）在时间轴第34帧的位置选定全部对象，在“属性”面板修改“颜色”中的Alpha值为0%，并从第28～34帧创建补间动画，如图3-2-32所示。（10）选择四个元件图层，在第40帧处插入帧，选择“滴”图层的第1～34帧把它们向后拖动两帧，使得“滴”图层比“水”图层晚出来两帧。“文”和“字”图层也依次向后拖动，如图3-2-33所示。（11）选择时间轴第15帧的位置，在工作区选中四个元件对象，右击，在弹出的快捷菜单中选择“复制”命令，如图3-2-34所示，上一页下一页任务二：补间动画返回

然后把这四个图层锁定，保护起来。新建一个图层，在新图层的第15帧右击，在弹出的快捷菜单中选择“插入关键帧”命令，在工作区上右击，在弹出的快捷菜单中选择“粘贴到当前位置”命令，如图3-2-35所示，或者按组合键Ctrl+Shift+V。（12）对被粘贴的对象选择菜单“修改”→“变形”→“垂直翻转”命令，然后把翻转过的对象移到原图像的下方，并把“颜色”中的Alpha属性设置为20%，如图3-2-36所示。（13）选择时间轴上新建的这层，在第15帧右击，在弹出的快捷菜单中选择“复制帧”命令，粘贴在第9帧、第11帧和第13帧，如图3-2-37所示。在第9帧中删除“水”之外的文字，在第13帧处删除“水”和“滴”之外的文字，在第15帧处删除“字”。上一页下一页任务二：补间动画返回

（14）在时间轴上选择倒影图层的第32帧、第34帧、第36帧插入关键帧，在第38帧插入空白关键帧，然后在第32帧处删除“水”，在第34帧处删除“水”、“滴”，在第36帧处删除“文”，如图3-2-38所示。（15）保存文件后，按组合键Ctrl+Enter测试影片。项目3：常用的窗帘摆动效果【效果说明】窗帘摆动效果是网页中图像常见的技巧效果如图3-2-39所示。下面来制作几个白色长条在图像上方随意摇动的窗帘效果动画。虽然也可以利用动作脚本进行制作，但此处将利用动作补间和影片剪辑元件的属性来完成制作。效果如图3-2-40所示。上一页下一页任务二：补间动画返回

【操作步骤】（1）把背景图导入到库，然后拖放到工作区，修改文档大小与背景图一致。（2）在工具箱中选择矩形工具，并设定笔触颜色为无色，填充颜色为白色，然后在新建的图层上绘制一个矩形，如图3-2-41所示，并把这个矩形转换为元件，名称为“bar”，如图3-2-42所示。（3）使用工具箱中的选择工具选中bar元件，按住Alt键向左拖动，复制一个对象，如图3-2-43所示，在此对象上按F8键把此对象转换为影片，如图3-2-44所示，名称为“左”。（4）双击影片“左”进入编辑状态，在第15帧插入关键帧，并把对象移到图像最右边；在第45帧插入关键帧；然后在第35帧插入关键帧，并把对象移到最左边，如图3-2-45所示，使用工具箱中的任意变形工具把对象拉宽，如图3-2-46所示。上一页下一页任务二：补间动画返回

（5）从第1～45帧创建补间动作。（6）回到“场景1”，如图3-2-47所示，把右边的对象转换为影片，名称为“右”，并双击它，使“右”影片进入编辑状态。（7）在第55帧插入关键帧；第20帧插入关键帧，并将对象移动到图像最左边；在第45帧插入关键帧，并将对象移动到图像最右边；然后从第1～55帧创建补间动作，如图3-2-48所示。（8）至此“左”、“右”两个影片就做好了，回到“场景1”把这两个影片剪辑复制多个放到不同的位置，并使用任意变形工具调整成不同宽度的矩形条，然后改变它们的Alpha值（设置不同的透明度），最后按组合键Ctrl+Enter就可以观看了。上一页下一页任务二：补间动画返回

项目4：不用代码实现漂浮效果【效果说明】下面只使用简单的影片剪辑制作出气泡上升效果的动画，如图3-2-49所示，用这样的方法还可以制作下雨或下雪的效果。【创作要点】本项目是对“渐变变形工具”、“任意变形工具”和颜色面板的使用练习。【操作步骤】（1）在工具箱中选取椭圆工具绘制一个椭圆，颜色设置如图3-2-50所示。在工具箱选择渐变变形工具可以调整光源的中心点位置和光照范围，调整后如图3-2-51和图3-2-52所示。上一页下一页任务二：补间动画返回

（2）使用工具箱中的选择工具选定对象，然后按住Alt键拖动可以复制一个对象，拖动多次复制多个，然后使用任意变形工具调整它们的大小就可以得到不同大小和位置关系的许多对象了，如图3-2-53所示，把这一组对象转化为图形元件，名称为“气泡”作为存底，然后再把它们转换为影片剪辑，名称为“气泡1”，如图3-2-54所示。（3）双击影片剪辑“气泡1”，使其进入编辑状态，把Alpha属性改为30%，并把对象移到下方。然后在第40帧插入关键帧，并把对象移到上方。选择第1～40帧创建补间动画。（4）然后回到“场景1”，将“气泡1”对象复制几个放在背景图上，如图3-2-55所示，这样就制作好了。上一页任务二：补间动画返回

项目5：百叶窗转换场景效果【效果说明】制作人物如百叶窗般地实现如图3-3-1所示，这种技术还可以用于两张图片的场景切换效果。本项目使用了遮罩技术。【操作步骤】（1）向库中导入两张图片，然后分别拖到工作区中的两个图层上，女孩图层在上，星球图层在下。然后使用工具箱中的矩形工具在图像坐标绘制一个矩形条，如图3-3-2所示。（2）把图层3的矩形条转换为影片剪辑元件，名称为“矩形影片”，然后双击此元件，进入编辑状态，把矩形转换为图形元件，名称为“矩形”，双击此图形元件进入编辑状态，如图3-3-3所示。（3）在时间轴第10帧插入关键帧，把矩形条适当调宽，如图3-3-4所示，并向右移动；下一页任务三：遮罩返回

在第25帧插入关键帧，把矩形条适当调窄，并向右移动，如图3-3-5所示；在第35帧插入关键帧，把矩形条适当调宽，位置处于能够遮住人物最左边为准，如图3-3-6所示。把第1～35帧都创建补间动画，然后在第80帧处插入帧。（4）回到“矩形影片”的编辑状态上，在第10帧处插入帧，然后在工作区选中矩形条，按住Alt键拖动矩形条复制，复制的这些矩形条要求能把女孩的图像从左到右覆盖，每个矩形条之间留一点点空隙，如图3-3-7所示。在第80帧插入帧，然后选中时间轴第1帧，这些矩形条就都处于选中状态了，在工作区右击，在弹出的快捷菜单中选择“分散到图层”命令。（5）把分散开的矩形条图层在时间轴上以两帧间隔向后移动，如图3-3-8所示。（6）回到“场景1”，在图层3右击，在弹出的快捷菜单中选择“遮罩层”命令，如图3-3-9所示，至此全部制作完毕。上一页任务三：遮罩返回

项目6：彩蝶飞舞【效果说明】此前制作的动作补间只能进行直线运动，如果利用运动引导层就能够制作出沿着任意曲线运动的动作补间。下面就在扇着翅膀飞舞的蝴蝶身上运用运动引导层，制作出自然的蝴蝶动画，如图3-4-1所示。【操作步骤】（1）把背景图和蝴蝶的图片都导入到库中，然后放到工作区上。为了给蝴蝶添加好似在天空飞舞扇动翅膀的动作，需要把对象制作成影片剪辑。使用右击对象并在弹出的快捷菜单中选择“转换元件”命令，把蝴蝶转换为影片剪辑元件，名称为“fly”（2）双击影片剪辑fly，进入编辑状态，在时间轴第5帧和第10帧处插入关键帧，然后使用工具箱中的任意变形工具选择第5帧把蝴蝶缩小，如图3-4-2所示，并且在第1～10帧创建补间动作。下一页任务四：引导运动引导层返回

（3）回到“场景1”，在蝴蝶图层，右击，在弹出的快捷菜单中选择“添加引导层”命令，如图3-4-3所示，使用工具箱中的铅笔工具，模式选择光滑，如图3-4-4所示，绘制一条路径。（4）选择所有图层的第50帧，插入帧，然后使用工具箱中的选择工具将蝴蝶对象放到路径一端，当焦点出现圆圈时，如图3-4-5所示，释放鼠标，蝴蝶就吸附在路径端点了，如图3-4-6所示。（5）旋转蝴蝶到适当的角度，在蝴蝶图层第50帧插入关键帧，把蝴蝶放到路径终点，如图3-4-7所示，在第1～50帧创建补间动画。（6）选择蝴蝶图层的某一帧，在“属性”面板上选中“调整到路径”复选框，如图3-4-8所示，这样蝴蝶就会对路径配合角度运动了。上一页任务四：引导运动引导层返回

图3-1-1F1ashCS3工作界面返回

图3-1-2工具箱返回

图3-1-3“时间轴”面板返回

图3-1-4舞台返回

图3-1-5“属性”面板返回

图3-1-6面板组返回

图3-2-1从左至右逐字出现返回

图3-2-4拖图像到舞台返回

图3-2-5“文档属性”对话框返回

图3-2-6输入文字返回

图3-2-7分离文字返回

图3-2-11分散效果返回图3-2-12插入帧返回

图3-2-13插入关键帧返回

图3-2-14选择“创建补间动画”命令返回

图3-2-15图层右移返回

图3-2-16向右移动（“N”和“D”）返回

图3-2-17插入关键帧（20帧处）返回

图3-2-18插入关键帧（25帧处）返回

图3-2-19向下拖动图层返回

图3-2-20向上拖动图层返回

图3-2-21修改Alpha的值返回

图3-2-22创建补间返回

图3-2-23用普通帧填充时间轴返回

图3-2-24水滴文字返回

图3-2-25设置“宽”和“高”返回

图3-2-26输入文字返回

图3-2-27将独字转换为元件返回图3-2-28选择“插入关键帧”命令返回图3-2-29创建补间动画返回图3-2-30设置“缓动”值返回图