项目七 网站应用

项目七?网站应用Flash 动画作品具有播放速度快、交互性强、视觉冲击力好等特点，因此，被广泛应用在网站设计中。本项目以网页横幅和文具广告的
制作为例，介绍 Flash 动画在网站中的应用。任务 1　网页横幅1. 掌握滤镜的作用、种类和应用方法。2. 能综合应用动画技术、
滤镜以及 ActionScript 语句制作网页横幅。本任务是一个网页横幅制作实例，综合应用动画技术、滤镜以及 ActionScr
ipt 语句制作欢乐熊猫文具网站的横幅，效果如图所示。通过本任务的学习，掌握网页横幅的制作方法、滤镜在动画中的应用技巧，以及简单的
ActionScript 语句。网页横幅效果图一、滤镜的作用使用滤镜可以为文本、按钮和影片剪辑元件增添有趣的视觉效果。二、应用滤
镜的方法（1）在 Flash 中选定要添加滤镜效果的对象，打开“属性”面板，选择“滤镜”选项卡，然后单击“添加滤镜”按钮
，弹出下拉菜单，如图所示。滤镜下拉菜单（2）从下拉菜单中选择一种滤镜后，在“滤镜”选项卡中进行设置，如图所示，即可为对象添加滤镜效
果。设置滤镜三、滤镜种类Flash 滤镜有投影、模糊、发光、斜角、渐变发光、渐变斜角、调整颜色七种。（1）投影：投影滤镜可以模拟对
象在阳光照射下产生的阴影。（2）模糊：模糊滤镜可以使对象在 X和 Y轴上进行模糊，从而产生柔化效果。（3）发光：发光滤镜的作用是在
对象的周围产生光芒。（4）斜角：斜角滤镜的作用是使对象产生立体的浮雕效果。（5）渐变发光：渐变发光的效果和发光滤镜的效果基本一致，
只是用户可以调节发光的颜色为渐变颜色，还可以设置角度、距离和类型。（6）渐变斜角：渐变斜角的效果和斜角滤镜的效果基本一致，只是用户
可以调节斜角的颜色为渐变颜色，还可以设置角度、距离和类型。（7）调整颜色：调整颜色滤镜可以调整对象的亮度、对比度、饱和度和色相。1
. 创建网页横幅影片文档新建一个 Flash 文档，设置舞台大小为 800 像素 ×150 像素， 背景为橙色（#FF9933），
将文件保存为“网页横幅 .fla”。2. 复制文具广告库中的标志元件打开素材文件“文具广告库 .fla”，将“库”面板中的“标志”
元件粘贴到当前文档的“库”面板中备用。3. 绘制矩形条将图层 1 重命名为“矩形条”，在舞台底部绘制一个浅黄色（#FFCC66）的
矩形条，用来放置按钮，如图所示。在第 40 帧插入帧，锁定该图层。绘制矩形条4. 绘制圆新建“圆”图形元件，选择椭圆工具，设置笔触
颜色为白色，笔触高度为 3，填充颜色为无，绘制一个圆，如图所示。绘制圆5. 制作圆闪动效果（1）新建“圆闪动”影片剪辑元件，从“库
”面板中将“圆”元件拖动到编辑区中，在第 10 帧插入关键帧，将元件放大到 200%，Alpha 值设为 50%，选择第 1 帧，
在“属性”面板中创建动画补间动画。（2）选中图层 1 中所有帧，单击鼠标右键，从快捷菜单中选择“复制帧”选项。（3）新建图层 2，
选中第 5 帧，单击鼠标右键，从快捷菜单中选择“粘贴帧”选项，删除图层 2 中多余的帧。“圆闪动”元件的时间轴如图所示。“圆闪动”
元件的时间轴（4）圆闪动效果进舞台。返回场景 1，新建“圆闪动”图层，选择第 1 帧，从“库”面板中将“圆闪动”影片剪辑元件拖动到
舞台中，复制多个，适当调整大小，将Alpha 值降为 30%，如图所示。锁定“圆闪动”图层。舞台中的圆闪动6. 标志进舞台新建“标
志”图层，选择第 1 帧，从“库”面板中将“标志”元件拖动到舞台中，放在舞台左侧，如图所示，锁定“标志”图层。舞台中的标志7. 制
作文字效果（1）输入文字新建“文字”图形元件，输入文字“欢乐熊猫”，字体为华文琥珀，字体大小为40，颜色为白色。（2）添加滤镜1）
选中文字，打开“属性”面板，选择“滤镜”选项卡，然后单击“添加滤镜”按钮 ，弹出下拉菜单。2）从下拉菜单中选择“渐变发光”，
如图所示，在“滤镜”选项卡中设置距离为 3，其他不变，为对象添加滤镜效果，如图所示。文字效果如图所示。选择滤镜效果添加滤镜后的效果
滤镜设置（3）制作舞台文字效果1）返回场景 1，新建“文字”图层，选择第 1帧，从“库”面板中将“文字”元件拖动到舞台中，放置在如
图所示位置。2）在第 12 帧、第 19 帧插入关键帧，选择第 1 帧，将“文字”元件缩到很小，将Alpha 值设为 0%；选择第
19 帧，将“文字”元件放大到 200%，将 Alpha 值设为 0%。在第 1～12 帧、第 12～19 帧之间创建动画补间动
画。第 1 帧的文字3）在第 20 帧、第 22 帧插入空白关键帧。选中第 22 帧，选择文本工具，设置字体为华文琥珀，字体大小为
35，字体颜色为白色，输入文字“伴随你快乐成长”；设置字体为楷体，字体大小为 25，字体颜色为白色，输入文字“欢迎访问 www.
hlxm.com”，效果如图所示，锁定“文字”图层。“文字”图层的时间轴如图所示。第 22 帧的文字“文字”图层的时间轴操作演示8
. 制作亮条效果1）绘制亮条新建“亮条”图形元件，使用矩形工具，设置笔触颜色为无，填充类型为线性，在渐变色控制条上单击两次，添加两
个颜色滑块，将四个色块均设为白色，最左端、最右端色块的 Alpha 值设为 0%，中间两个色块的Alpha 值设为 100%，绘制
矩形，如图所示。绘制矩形（2）制作舞台亮条效果1）返回场景 1，新建“亮条 1”图层，移到“文字”图层下方，在第 15 帧插入空白
关键帧，将“亮条”元件从“库”面板中拖动到舞台右侧，适当调整大小，如图所示。第 15 帧的亮条 1在第 20 帧插入关键帧，将“亮
条”元件移到舞台中，位置如图所示。第 20 帧的亮条 1在第 26 帧插入关键帧，将亮条变细变长，Alpha 值设为 0%，如图所
示。在第 15～20 帧之间以及第 20～26 帧之间创建动画补间动画，在第 27 帧插入空白关键帧，锁定“亮条 1”图层。第 2
6 帧的亮条 12）新建“亮条 2”图层，在第 15 帧插入空白关键帧，将“亮条”元件从“库”面板中拖动到舞台左侧，适当调整大小，
如图所示。第 15 帧的亮条 2在第 20 帧插入关键帧，将“亮条”元件移到舞台中，位置如图所示。　第 20 帧的亮条 2在第 2
6 帧插入关键帧，将亮条变细变长，Alpha 值设为 0%，如图所示。　第 26 帧的亮条 2在第 15～20 帧之间以及第 20
～26 帧之间创建动画补间动画，在第 27 帧插入空白关键帧，锁定“亮条 2”图层。添加亮条后的“时间轴”面板如图所示。　添加亮条
后的“时间轴”面板9. 制作导航按钮（1）制作按钮1）新建“首页”按钮元件，设置字体为宋体，字体大小为 14，字体颜色为白色，在“
弹起”帧输入文字“首页”，效果如图所示。2）在“指针经过”帧插入关键帧，将文字颜色改为蓝色，如图所示。3）同样的方法，制作“企业信
息”“产品中心”“品牌推广”“客户服务”按钮元件。“弹起”帧“指针经过”帧（2）按钮进舞台返回场景 1，新建“按钮”图层，选择第
1 帧，将制作好的按钮元件拖动到舞台中，摆放好位置，如图所示。　按钮的位置（3）为按钮添加代码1）右键单击“首页”按钮，执行“动作
”命令，打开“动作 - 按钮”面板，输入代码，如图所示。　“首页”按钮代码2）右键单击“企业信息”按钮，执行“动作”命令，在“动作
- 按钮”面板中输入如下代码：on（press）｛ getURL（"http：//www.hlxm.com/files/qyxx
.html"）；｝3）右键单击“产品中心”按钮，执行“动作”命令，在“动作 - 按钮”面板中输入如下代码：on（press）｛ g
etURL（"http：//www.hlxm.com/files/cpzx.html"）；｝4）右键单击“品牌推广”按钮，执行“动
作”命令，在“动作 - 按钮”面板中输入如下代码：on（press）｛ getURL（"http：//www.hlxm.com/f
iles/pptg.html"）；｝5）右键单击“客户服务”按钮，执行“动作”命令，在“动作 - 按钮”面板中输入如下代码：on（
press）｛ getURL（"http：//www.hlxm.com/files/khfw.html"）；｝操作演示10. 测试
保存执行【控制】→【测试影片】命令，观察动画效果。如果满意，执行【文件】→【保存】命令保存文件。任务 2　文具广告1. 掌握时间轴
特效的类型以及添加时间轴特效的步骤。2. 能综合应用动画技术和时间轴特效制作多场景动画。本任务制作一个网络广告动画，综合应用动画技
术和时间轴特效制作欢乐熊猫文具广告，效果如图所示。通过此任务的学习，掌握时间轴特效的使用方法，并进一步掌握多场景动画的制作方法。文
具广告效果图一、时间轴特效Flash 为用户提供了一些常用的动画命令，只要选中命令，就会自动生成动画效果，从而简化动画的制作过程，
这些自动生成动画的功能就是时间轴特效。可以应用时间轴特效的对象有文本、图形、位图、按钮和影片剪辑元件等。二、添加时间轴特效的步骤（
1）选择要添加时间轴特效的对象。（2）执行【插入】→【时间轴特效】命令，从级联菜单中选择一种特效，如图所示。用户也可以在选取对象后
单击鼠标右键，从快捷菜单中选取“时间轴特效”中的相应特效。（3）在打开的特效对话框中，设置参数值，单击“更改预览”按钮预览特效效果
，设置完成后单击“确定”按钮。插入时间轴特效三、时间轴特效的类型Flash 内置的时间轴特效有变形、转换、分布式直接复制、复制到网
络、分离、展开、投影、模糊八种。（1）变形：通过调整对象的位置、缩放比例、旋转、Alpha 值和色调，产生淡入淡出、缩放以及旋转特
效。（2）转换：对选定对象进行擦除和淡入淡出处理，产生逐渐过渡的特效。（3）分布式直接复制：复制选定的对象，使对象按一定增量发生改
变。（4）复制到网络：按列数复制选定对象，然后乘以行数，创建元素的网格。（5）分离：将文本、元件、形状等元素分裂、自旋和向外弯曲，
使对象产生爆炸的效果。（6）展开：在一段时间内对指定的对象进行缩放。（7）投影：在对象的下方创建投影。（8）模糊：通过更改对象在一
段时间内的 Alpha 值、位置或缩放比例来产生运动模糊特效。1. 制作场景 1 动画（1）创建文具广告影片文档新建一个 Flas
h 文档，设置舞台大小为 700 像素 ×400 像素，背景为粉色（#FFCCCC），将文件保存为“文具广告 .fla”。（2）复
制文具广告库中的元件打开素材文件“文具广告库 .fla”，将“库”面板中所有元件粘贴到当前文档的“库”面板中备用。（3）创建背景层
将图层 1 重命名为“背景”，使用矩形工具，设置笔触颜色为无，填充类型为线性，左侧颜色滑块为粉色（#FCA783）、右侧颜色滑块为
黄色（#FFFF00），在舞台中绘制渐变矩形，设置宽为 670，高为 370，用渐变变形工具调整渐变方向，使用“对齐”面板将矩形放
置在舞台的中央，效果如图所示。在第 40 帧插入帧，锁定背景层。绘制背景（4）制作发散效果1）绘制发散点。新建“发散点”图形元件，
选择刷子工具，设置刷子的颜色为黄色（#FFFF00），在“刷子大小”选项中选择较小的刷子，在编辑区中绘制许多小点，如图所示。绘制小
圆点2）制作发散效果①新建“发散”影片剪辑元件，选择图层 1 的第 1 帧，从“库”面板中将“发散点”元件拖动到编辑区中，在第 1
5 帧插入关键帧，将元件放大到 400%。选择第 1 帧，在“属性”面板中创建动画补间动画。②选中图层 1 中所有帧，单击鼠标右键
，从快捷菜单中选择“复制帧”选项。③新建图层 2，选中第 5 帧，单击鼠标右键选择“粘贴帧”选项。选中图层 2 中多余的帧，单击鼠
标右键选择“删除帧”选项，删除多余的帧。“发散”元件的时间轴如图所示。“发散”元件的时间轴3）发散效果进舞台。返回场景 1，新建“
发散”图层，选择第 1 帧，从“库”面板中将“发散”影片剪辑元件拖动至舞台中央，锁定“发散”图层。（5）制作标志淡入效果1）绘制标
志遮罩条。新建“标志遮罩条”影片剪辑元件，选择矩形工具，设置笔触颜色为无，填充颜色为白色，在编辑区中绘制矩形，并将其倾斜，效果如图
所示。绘制标志遮罩条2）制作“标志遮罩”元件①新建“标志遮罩”影片剪辑元件，选择图层 1 的第 1 帧，从“库”面板中将“标志”元
件拖动到编辑区中，在第 20 帧插入帧。②新建图层 2，从“库”面板中将“标志遮罩条”元件拖动到编辑区，放置在“标志”元件左侧，添
加“模糊”滤镜，模糊值 X、Y均为 5，效果如图所示。在第 20 帧插入关键帧，将“标志遮罩条”元件移动到“标志”元件右侧，如图所
示。选择第 1 帧，在“属性”面板中创建动画补间动画。第 1 帧标志遮罩条第 20 帧标志遮罩条③右键单击图层 1 的第 1 帧，
选择“复制帧”选项。新建图层 3，将“标志”元件复制到图层 3 中的第 1 帧。④右键单击图层 3 选择“遮罩层”，完成“标志遮罩
”元件的制作。“标志遮罩”元件的时间轴如图所示。“标志遮罩”元件的时间轴3）制作标志淡入效果①返回场景 1，新建“标志”图层，右键
单击第 5 帧插入空白关键帧，从“库”面板中将“标志遮罩”影片剪辑元件拖动到舞台中，放置在如图所示位置。标志遮罩位置②在“标志”图
层第 10 帧插入关键帧，选择第 5 帧的“标志遮罩”元件，将 Alpha值设为 0%。选择第 5 帧，在“属性”面板中创建动画补
间动画。锁定“标志”图层。（6）制作文字标志淡入效果1）输入文字标志。新建“文字标志”图形元件，设置字体为华文琥珀，字体大小为 4
0，输入文字“欢乐熊猫文具”，颜色如图所示。添加“投影”滤镜，设置如图所示。　滤镜设置文字标志2）制作文字标志淡入效果①返回场景
1，新建“文字标志”图层，右键单击第 10 帧，插入空白关键帧，从“库”面板中将“文字标志”元件拖动到舞台，放置在如图所示位置。②
在第 15 帧插入关键帧，选择第 10 帧的“文字标志”元件，将 Alpha 值设为 0%。选择第 10 帧，在“属性”面板中创建
动画补间动画。锁定“文字标志”图层。至此，场景 1 动画制作完成，按【Enter】键测试效果。文字标志位置2. 制作场景 2 动画
（1）创建背景层1）新建场景 2，将图层 1 重命名为“背景”，选择矩形工具，设置笔触颜色为无，填充颜色为粉色（#FCA783），
在舞台中绘制矩形，按图调整大小和位置。场景 2 背景2）在第 5 帧插入关键帧，选择第 1 帧的矩形，使用任意变形工具将矩形向左收
缩成一条线。选择第 1 帧，在“属性”面板中创建形状补间动画。在第 70 帧插入帧，锁定背景层。（2）制作圆效果1）绘制圆。新建“
圆”图形元件，选择椭圆工具，设置笔触颜色为无，填充颜色为橙色（#FF9933），在舞台中绘制圆，设置宽和高均为 50，如图所示。绘
制圆2）制作“圆效果”元件①新建“圆效果”影片剪辑元件，选择图层 1 的第 1 帧，从“库”面板中将“圆”元件拖动到编辑区中，位置
为（X：52.5，Y：-67），分别在第 20 帧和第 40 帧插入关键帧。选择第 1 帧的圆，将宽和高改为 8，Alpha 值设
为 0%；选择第 20 帧的圆，将宽和高改为 35，Alpha 值设为 20%；选择第 40 帧的圆，将宽和高改为 60，Alph
a 值设为0%。选中图层 1 的所有帧，创建动画补间动画。②新建图层 2，从“库”面板中将“圆”元件拖入编辑区，位置为（X：2，Y
：-63），分别在第 25 帧和第 40 帧插入关键帧。选择第 1 帧的圆，将宽和高改为 8，Alpha 值设为 0%；选择第 2
5 帧的圆，将宽和高改为 60，Alpha 值设为 70%；选择第 40 帧的圆，将宽和高改为 88，Alpha 值设为 20%。
选中图层 2 的所有帧，创建动画补间动画。③新建图层 3，从“库”面板中将“圆”元件拖入编辑区，位置为（X：-20，Y：-82），
分别在第 8 帧和第 18 帧插入关键帧。选择第 1 帧的圆，将宽和高改为 35，Alpha 值设为 70%；选择第 8 帧的圆，
将宽和高改为 45，Alpha 值设为 20%；选择第 18 帧的圆，将宽和高改为 70，Alpha 值设为 0%。选中图层 3
的所有帧，创建动画补间动画。至此，“圆效果”元件制作完毕，其时间轴如图所示。　“圆效果”元件的时间轴3）圆效果进舞台。返回场景 2
，新建“圆”图层，右键单击第 5 帧，插入空白关键帧，从“库”面板中将“圆效果”元件拖入舞台，复制两个，按照图所示位置摆放，锁定“
圆”图层。圆效果进舞台（3）制作笔逐帧显示效果1）新建“笔”图层，右键单击第 10 帧，插入空白关键帧，从“库”面板中将“圆珠笔
1”元件拖入舞台，放置在图所示位置。2）右键单击第 13 帧，插入关键帧，从“库”面板中将“圆珠笔 2”元件拖入舞台，放置在图所示
位置。圆珠笔 1 位置?圆珠笔 2 位置3）依此方法，每隔两帧插入关键帧，从“库”面板中顺序将“圆珠笔 3”“铅笔1”“铅笔 2”
“铅笔 3”“毛笔 1”“毛笔 2”和“毛笔 3”元件拖动到舞台中摆放好位置，效果如图所示。笔元件摆放位置4）在第 47 帧插入空
白关键帧，“笔”图层的时间轴如图所示。锁定“笔”图层。“笔”图层的时间轴（4）制作橡皮出现效果1）新建“橡皮 1”图层，右键单击第
50 帧，插入空白关键帧，从“库”面板中将“橡皮 1”元件拖动到舞台中，放置在舞台下方，效果如图所示。第 50 帧的橡皮 12）
在第 56 帧插入关键帧，将“橡皮 1”元件垂直移动到舞台中央，效果如图所示。选择第 50 帧，在“属性”面板中创建动画补间动画，
实现“橡皮 1”元件上移效果。3）依此方法，新建“橡皮 2”和“橡皮 3”两个图层，并制作“橡皮 2”和“橡皮 3”元件从舞台下方
上移到舞台中央的效果。制作过程中要注意橡皮的摆放位置，锁定各橡皮图层。第 56 帧的橡皮 1（5）制作转笔刀出现效果1）新建“转笔
刀 1”图层，右键单击第 50 帧，插入空白关键帧，从“库”面板中将“转笔刀 1”元件拖动到舞台中，放置在舞台上方，效果如图所示。
第 50 帧的转笔刀 12）在第 56 帧插入关键帧，将“转笔刀 1”垂直移动到舞台中央，效果如图所示。选择第 50 帧，在“属性
”面板中创建动画补间动画，实现“转笔刀 1”元件下移效果。第 56 帧的转笔刀 13）依此方法，新建“转笔刀 2”和“转笔刀 3”
两个图层，并制作“转笔刀 2”和 “转笔刀 3”元件从舞台上方下移到舞台中央的效果。制作过程中要注意转笔刀的摆放位置，锁定各转笔刀
图层。至此，场景 2 动画制作完毕，按【Enter】键测试效果。3. 制作场景 3 动画（1）创建背景层新建场景 3，将场景 1
中的背景层复制到场景 3 图层 1 的第 1 帧，摆放好位置，调整大小，如图所示。在第 40 帧插入帧，锁定背景层。场景 3 背景
（2）制作标志淡入效果1）新建“标志”图层，从“库”面板中将“标志遮罩”影片剪辑元件拖动到舞台中，放置在如图所示位置。2）在第 5
帧插入关键帧，选择第 1 帧的“标志遮罩”元件，将 Alpha 值设为 0%。选择第 1 帧，在“属性”面板中创建动画补间动画。
锁定“标志”图层。标志遮罩位置（3）制作文字标志淡入效果1）新建“文字标志”图层，右键单击第 5 帧，插入空白关键帧，从“库”面板
中将“文字标志”元件拖动到舞台中，放置在如图所示位置。2）在第 10 帧插入关键帧，选择第 5 帧的“文字标志”元件，在“属性”面
板中将Alpha 值设为 0%。选择第 5 帧，在“属性”面板中创建动画补间动画。锁定“文字标志”图层。文字标志位置（4）制作广告
语变形特效1）新建图层 4，在第 10 帧插入空白关键帧，选择文本工具，设置字体为华文琥珀，字体大小为 25，字体颜色为红色（#F
F0033），输入广告语“伴随你快乐成长！”，使用渐变变形工具逆时针旋转文字，效果如图所示。广告语位置2）执行【插入】→【时间轴特
效】→【变形 / 转换】→【变形】命令，打开“变形”对话框，设置效果持续时间为 15 帧，缩放比例为 150%，勾选“更改颜色”复
选框，最终颜色设为红色，如图所示。“变形”对话框3）单击“确定”按钮回到舞台中，Flash 自动将图层 4 更名为“变形 1”，同时“库”面板中自动生成“变形 1”图形元件和特效文件夹。在舞台中选择广告语“伴随你快乐成长！”，在“属性”面板中设置为“播放一次”，如图所示。在第 40帧插入帧，锁定“变形 1”图层。　“属性”面板（5）制作欢欢乐乐转换特效1）新建图层 5，在第 15 帧插入空白关键帧，从“库”面板中将“欢欢乐乐”元件拖动到舞台中，放置在如图所示位置。欢欢乐乐位置操作演示2）执行【插入】→【时间轴特效】→【变形 / 转换】→【转换】命令，打开“转换”对话框，设置效果持续时间为 15 帧，如图所示。　“转换”对话框3）单击“确定”按钮回到舞台中，Flash 自动将图层 5 更名为“转换 2”，同时“库”面板中自动生成“转换 2”图形元件。在舞台上选择“欢欢乐乐”元件，在“属性”面板中设置为“播放一次”，如图所示。在第 40 帧插入帧，锁定“转换2”图层。　“属性”面板（6）输入公司名称新建“公司名称”图层，在第 30 帧插入空白关键帧，选择文本工具，设置字体为黑体，字体大小为 30，字体颜色为蓝色（#0000FF），粗体，在舞台底部输入“欢乐熊猫文化用品有限公司”，如图所示。至此，文具广告动画制作完毕。　输入公司名称（7）测试保存执行【控制】→【测试影片】命令，观察动画效果。如果满意，执行【文件】→【保存】命令保存文件。