
3.5 综合案例——烟花绽放
学习目的
通过本案例的学习,使用户能够有效理解时间轴、图层与帧的概念,并加强对图层基本知识的理解与操作。帮助用户开发思维,使用户能够做一些自主性的实践操作。
重点难点
时间轴、图层和帧的关系
库的概念与应用
图层的管理与编辑
本实例效果如图3-45所示。

图3-45
操作步骤
Step 01 新建一个Flash文档,设置其舞台大小为550像素×400像素。按【Ctrl+Shift+S】组合键,以“烟花绽放”为名称保存文件。接着将所有素材导入到库中,如图3-46所示。

图3-46
Step 02 新建影片剪辑元件“背景”,并将库中的图片“背景”拖曳至影片剪辑元件“背景”的编辑区。将图片“背景”转换为影片剪辑元件“背景1”,如图3-47所示。

图3-47
Step 03 返回影片剪辑元件“背景”,在“图层1”的第110帧处插入普通帧。新建“图层2”,在第28帧处插入空白关键帧,在“图层2”的第1帧处,将库中图片“红”拖曳至舞台并居中对齐,如图3-48所示。

图3-48
Step 04 将图片“红”转换为影片剪辑“红1”。在第27帧处插入关键帧,依次将第1、第27帧上的影片剪辑“红1”的Alpha值设置为“50%”和“10%”。在第1~27帧之间创建传统补间动画,如图3-49所示。

图3-49
Step 05 在第57帧上插入空白关键帧,选择第28帧,将库中图片“蓝”拖曳至舞台并居中对齐。将图片“蓝”转换为影片剪辑“蓝1”,如图3-50所示。

图3-50
Step 06 在第56帧上插入关键帧,并依次将第28、第56帧上影片剪辑“蓝1”的Alpha值设置为“20%”和“50%”。在第28~56帧之间创建传统补间动画,如图3-51所示。

图3-51
Step 07 在第84帧处插入空白关键帧,在第57帧处,将库中的图片“绿”拖曳至舞台并居中对齐。将图片“绿”转换为影片剪辑“绿1”。如图3-52所示。

图3-52
Step 08 在第83帧处插入关键帧,依次将第57、第83帧上影片剪辑“绿1”的Alpha值设置为“50%”和“10%”。在第57~83帧之间创建传统补间动画,如图3-53所示。

图3-53
Step 09 选择第84帧,将库中图片“黄”拖曳至舞台并居中对齐。将图片“黄”转换为影片剪辑“黄1”,在第110帧处插入关键帧,如图3-54所示。

图3-54
Step 10 依次将第84、第110帧上影片剪辑“黄1”的Alpha值设置为“20%”和“50%”。在第84~110帧间创建传统补间动画,如图3-55所示。

图3-55
Step 11 返回主场景,将库中的影片剪辑元件“背景”拖曳至舞台并居中。新建影片剪辑元件“烟花1”,绘制一个50mm×50mm的径向渐变圆形图形,并将其转换为图形元件“圆”,如图3-56所示。

图3-56
Step 12 返回到影片剪辑元件“烟花1”,在第2帧处插入关键帧,将图形元件“圆”适当放大,依次往后适量放大,并调整其Alpha值各不相同,使其达到由小到大,逐渐消失的烟花效果,如图3-57所示。

图3-57
Step 13 新建“图层2”,在第30帧处插入关键帧,按照“图层1”的制作过程,再一次制作图形元件“圆”的运动过程,控制其在“图层1”的运动范围之内,如图3-58所示。

图3-58
Step 14 新建“图层3”,制作烟花飞溅的效果。在第6帧处插入关键帧,绘制烟花溅出的图形形状,并将其转换为图形元件“溅出”,如图3-59所示。

图3-59
Step 15 返回影片剪辑元件“烟花1”,在第30帧处插入关键帧,制作图形元件“溅出”的传统补间动画,使其由小变大,逐渐消失,如图3-60所示。

图3-60
Step 16 用同样的方法,新建“图层4、图层5”,以制作烟花飞溅的效果,使其运动自然、美观,如图3-61所示。

图3-61
Step 17 返回主场景,在“图层1”的第56帧处插入普通帧,新建“图层2”,将库中影片剪辑元件“烟花1”拖曳至舞台上,然后改变其显示的色彩效果,如图3-62所示。

图3-62
Step 18 新建“图层3~6”,依次在各图层的第11、24、38、1帧处插入关键帧,将库中影片剪辑元件“烟花1”拖曳至各帧,并改变其色彩效果,使其呈现出五颜六色的烟花效果,如图3-63所示。

图3-63
Step 19 新建影片剪辑“文字”,为了使整个画面看起来更加丰富,用制作烟花飞溅的方式,制作文字飞溅,按照个人喜好设计文字。返回主场景,新建“图层7~8”,如图3-64所示。

图3-64
Step 20 分别将库面板中的影片剪辑元件“文字”和“声音”文件拖曳至舞台。按【Ctrl+Enter】组合键对该动画进行测试,至此,完成烟花绽放的制作,如图3-65所示。

图3-65