- Flash 8商业案例精粹（中文版）
- 览众编著
- 3985字
- 2020-08-28 08:25:08
1.2 游戏网站广告动画制作
在众多网站中，有很多形形色色的商业广告。内容丰富，视觉效果极佳，所以在网站中特别抢眼，Flash 8中可以制作出很多这样的商业广告。
案例分析
游戏类网站广告动画，当然要以游戏为主。使用不同游戏中的人物形象作为动画的元件能够更好地表达出就游戏的主题。
在色彩方面，就多以颜色较为新鲜的色调为主，这样能够使动画充满活力，表现出现代人的特点，丰富页面的整体效果。
最终的效果如图1-4所示。
图1-4 最终效果
技术点睛：
（1）椭圆形工具——用来绘制椭圆和圆形。绘制圆形时需要按住“Ctrl”键，从中心点绘制椭圆或者圆时需要同时按住“Ctrl”键和“Shift”键（如图1-5所示）。
图1-5 调整后的椭圆
（2）滤镜效果——在Flash中可以对元件使用滤镜效果，常用的滤镜效果有投影、模糊等，滤镜在Flash中的应用非常广泛。例如，在本实例中，应用模糊效果实现了图形移动的速度感，这样会大大增加画面的视觉效果，给人以冲撞的效果，达到想要表达的气氛（如图1-6所示）。
图1-6 滤镜的应用
（3）文字效果——使用“文本工具”可以在场景中输入文字，文字在Flash中起到很大的作用，更好地应用文字，会使得Flash更加生动，富有生命力（如图1-7所示）。
图1-7 文字的应用
1.2.1 制作步骤
STEP 01 执行“文件→新建”命令，新建一个Flash文档。单击“属性”面板上的“大小”尺寸按钮
，设置打开的“文档属性”（面板）的“尺寸”为“982px×210px”，“帧频”设置为“40”，其他设置如图1-8所示。
图1-8 设置“文档属性”面板
STEP 02 执行“插入→新建元件”命令，新建一个元件，设置“类型”为“图形”，“名称”为“星”，如图1-9所示。单击“工具”面板上的“椭圆形工具”按钮，设置“笔触颜色”为“无”，“填充色”为“#FFFFFF”，按住键盘上的“Shift”键，在场景中绘制一个40px× 40px的正圆，如图1-10所示。
图1-9 设置“创建新元件”面板
图1-10 绘制椭圆
STEP 03 单击“工具”面板上的“任意变形工具”按钮，选中场景中的图形，按住键盘上的“Alt”键，将场景中的图形调整为如图1-11所示形状。
图1-11 图形效果
STEP 04 单击“工具”面板上的“选择工具”按钮，选中场景中的图形，按住“Alt”键进行复制。单击“工具”面板上的“任意变形工具”按钮，选中场景中的图形，按住键盘上的“Shift”键，将场景中的图形调整为如图1-12所示形状。
图1-12 图形效果
STEP 05 单击“工具”面板上的“选择工具”按钮，选中场景中的图形，按住“Alt”键进行复制，如图1-13所示。
图1-13 复制图形
STEP 06 单击“工具”面板上的“任意变形工具”按钮，选中场景中的图形，对场景中的图形进行缩放及旋转，将场景中的图形调整为如图1-14所示形状。
图1-14 旋转及缩放图形
STEP 07 用同样的方法制作其他元件，该元件的最终效果如图1-15所示。
图1-15 元件最终效果
STEP 08 执行“插入→新建元件”命令，新建一个元件，设置“类型”为“影片剪辑”，“名称”为“星动画”，如图1-16所示。
图1-16 新建元件
STEP 09 单击“时间轴”面板上的“图层1”第1帧位置，将“星”元件拖入场景中，如图1-17所示。
图1-17 将元件拖入场景
STEP 10 单击“时间轴”面板上的“图层1”第50帧位置，按“F6”键插入关键帧，单击第25帧位置，按“F6”键插入关键帧，单击“工具”面板上的“任意变形工具”按钮，选中图形，按住键盘上的“Shift”键，将图形等比放大，如图1-18所示。
图1-18 等比放大元件
STEP 11 单击“时间轴”面板上的“图层1”第1帧位置，设置“属性”面板上的“补间”类型为“动画”，“缓动”值为“100”，“旋转”选项为“顺时针”，旋转数为“1”，如图1-19所示，时间轴效果如图1-20所示。
图1-19 设置“属性”面板
图1-20 时间轴效果
STEP 12 为“动画”，“缓动”值为“-100”，“旋转”选项为“顺时针”，旋转数为“1”，如图1-21所示，时间轴效果如图1-22所示。
图1-21 设置“属性”面板
图1-22 时间轴效果
STEP 13 执行“插入→新建元件”命令，新建一个元件，设置“类型”为“影片剪辑”，“名称”为“人物动画”，如图1-23所示。
图1-23 新建元件
STEP 14 单击“时间轴”面板上的“图层1”第1帧位置，执行“文件→导入→导入到舞台”命令，将图片“CD/源文件/第1章/1.1.2.png”导入到场景中，如图1-24所示。
图1-24 导入图片
STEP 15 选中图片，执行“修改→转换为元件”命令，打开“转换为元件”面板，设置“类型”为“影片剪辑”，“名称”为“人物1”，如图1-25所示。
图1-25 设置“转换为元件”面板
STEP 16 单击“时间轴”面板上的“图层1”第15帧位置，按“F6”键插入关键帧。单击“工具”面板上的“选择工具”按钮，将元件移至如图1-26所示位置。
图1-26 时间轴效果
STEP 17 单击“图层1”第1帧位置，执行“窗口→属性→滤镜”命令，打开“滤镜”面板，选中元件，单击“滤镜”面板上的“添加滤镜”按钮，在弹出的快捷菜单中选择“模糊”选项，设置如图1-27所示，效果如图1-28所示。
图1-27 设置“滤镜”面板
图1-28 元件效果
STEP 18 单击“图层1”第1帧位置，设置“属性”面板上的“补间”类型为“动画”。单击第45帧位置，按“F5”键插入帧，时间轴效果如图1-29所示。
图1-29 时间轴效果
STEP 19 用同样的方法制作其他动画效果，如图1-30所示，时间轴效果如图1-31所示。
图1-30 元件效果
图1-31 时间轴效果
STEP 20 单击“时间轴”面板上的“插入图层”按钮，新建“图层7”，单击“图层7”第45帧位置，按“F6”键插入关键帧，执行“窗口→动作”命令，打开“动作-帧”面板，输入“stop：()”this._parent.wenzi.gotoAndPlay(2);语句，如图1-32所示。
图1-32 添加动作
STEP 21 执行“插入→新建元件”命令，新建一个元件，设置“类型”为“图形”，“名称”为“文字”，如图1-33所示。
图1-33 新建元件
STEP 22 单击“工具”面板上的“文本工具”按钮，设置“属性”面板上的“字体大小”为“30”，“字体颜色”为“#98E2FA”，在场景中输入文字，如图1-34所示。
图1-34 输入文字
STEP 23 单击“工具”面板上的“文本工具”按钮，设置“属性”面板上的“字体大小”为“40”，“字体颜色”为“#98E2FA”，在场景中输入文字，如图1-35所示。
图1-35 输入文字
STEP 24 单击“工具”面板上的“选择工具”按钮，选中场景中的文字，执行两次“修改→分离”命令，如图1-36所示。
图1-36 分离文本
STEP 25 选中文字，执行“编辑→复制”命令，单击“时间轴”面板上的“插入图层”按钮，新建“图层2”，单击“图层2”第1帧位置，执行“编辑→粘贴到当前位置”命令，如图1-37所示。
图1-37 复制文字
STEP 26 单击“图层1”第1帧位置，单击“工具”面板上的“墨水瓶工具”按钮，设置“笔触颜色”为“#0D3567”，对场景中的图形添加笔触，如图1-38所示。
图1-38 添加笔触
STEP 27 执行“插入→新建元件”命令，新建一个元件，设置“类型”为“图形”，“名称”为“文字”。如图1-39所示。
图1-39 新建元件
STEP 28 单击“时间轴”面板上的“图层1”第2帧位置，按“F6”键插入关键帧，执行“文件→导入→导入到舞台”命令，将图片“CD/源文件/第1章/1.1.8.png”导入到场景中，如图1-40所示。
图1-40 导入图片
STEP 29 选中图片，执行“修改→转换为元件”命令，打开“转换为元件”面板，设置“类型”为“影片剪辑”，“名称”为“文字2”，如图1-41所示。
图1-41 “转换为元件”面板
STEP 30 单击“时间轴”面板上的“图层1”第10帧位置，按“F6”键插入关键帧。单击“工具”面板上的“选择工具”按钮，调整元件的位置，如图1-42所示。
图1-42 调整元件位置
STEP 31 单击“时间轴”面板上的“图层1”第17帧位置，按“F6”键插入关键帧，单击“工具”面板上的“任意变形工具”按钮，调整元件的位置及形状，如图1-43所示。
图1-43 调整元件的位置及形状
STEP 32 单击“时间轴”面板上的“图层1”第17帧位置，按“F6”键插入关键帧，单击“工具”面板上的“任意变形工具”按钮，调整元件的位置及形状，如图1-44所示。
图1-44 调整元件的位置及形状
STEP 33 用同样的方法制作其他帧的图形。
STEP 34 分别单击“图层1”中第2帧、第10帧、第17帧、第23帧、第29帧、第33帧和第41帧位置。设置“属性”面板上的“补间”类型为“动画”。单击第65帧位置，按“F5”键插入帧，时间轴效果如图1-45所示。
图1-45 时间轴效果
STEP 35 单击“时间轴”面板上的“插入图层”按钮，新建“图层2”，单击第47帧位置，按“F6”键插入关键帧，将“文字1”元件拖入场景，如图1-46所示。
图1-46 拖入元件
STEP 36 单击“时间轴”面板上的“图层2”第17帧位置，按“F6”键插入关键帧，单击“工具”面板上的“选择工具”按钮，调整元件的位置，如图1-47所示。
图1-47 调整元件位置
STEP 37 用同样的方法制作其他帧的图形。
STEP 38 分别单击“图层2”中第47帧、第54帧、第58帧、第61帧位置。设置“属性”面板上的“补间”类型为“动画”，时间轴效果如图1-48所示。
图1-48 时间轴效果
STEP 39 单击“时间轴”面板上的“插入图层”按钮，新建“图层3”，单击第47帧位置，按“F6”键插入关键帧，单击“工具”面板上的“矩形工具”按钮，在场景中绘制如图1-49所示图形。
图1-49 绘制图形
STEP 40 用鼠标右键单击“图层3”，在弹出的快捷菜单中选择“遮照层”命令，时间轴效果如图1-50所示。
图1-50 时间轴效果
STEP 41 单击“时间轴”面板上的“插入图层”按钮，新建“图层4”，单击第1帧位置，执行“窗口→动作”命令，打开“动作-帧”面板，输入“stop();”语句。单击第65帧位置，执行“窗口→动作”命令，打开“动作-帧”面板，输入“stop();”语句，时间轴效果如图1-51所示。
图1-51 时间轴效果
STEP 42 单击“时间轴”面板上的“场景1”标签，返回场景。单击“图层1”第1帧位置，执行“文件→导入→导入到场景”命令，将图片“CD/源文件/第1章/1.1.1.png”导入到场景中，如图1-52所示。
图1-52 导入图片
STEP 43 单击“时间轴”面板上的“插入图层”按钮，新建“图层2”， 单击第1帧位置，将“人物动画”元件拖入场景，如图1-53所示。
图1-53 拖入元件
STEP 44 单击“时间轴”面板上的“插入图层”按钮，新建“图层3”，单击第1帧位置，将“文字动画”元件拖入场景，如图1-54所示。
图1-54 拖入元件
STEP 45 选中元件，设置“属性”面板上的“实例名称”为“wenzi”，如图1-55所示。
图1-55 修改实例名称
STEP 46 执行“文件→保存”命令，按键盘上的“Enter+Ctrl”组合键测试动画，效果如图1-56所示。
图1-56 效果预览
1.2.2 案例总结
游戏广告在设计制作上需要把握以下重点。
● 使用“模糊滤镜”效果时要注意模糊的方向和大小。
● 应用“遮照”动画时要将元件对齐。
● 注意导入图片时的格式。