Flash CS5中文版从新手到高手

Flash CS5中文版从新手到高手

158

Fla

sh

Flash

操作步骤：

STEP 01 新建文档，在【文档设置】对话框中设置舞台的【尺

寸】为“1020像素×400像素”。然后，使用【矩形工具】绘制一

个与舞台大小相同的矩形，并为其填充从上至下的渐变色。

STEP 02 新建图层，使用【椭圆工具】在舞台中绘制一个圆形，

并为其填充渐变色。然后，将其转换为“太阳”影片剪辑，并添加

“模糊”滤镜。

STEP 03 使用相同的方法，为“太阳”影片剪辑添加“发光”滤

镜，设置【模糊X】和【模糊Y】均为“255像素”；【强度】为

“50%”；【颜色】为“淡黄色”（#FFFFCC）。然后，再为该影

片剪辑添加“发光”滤镜，设置【强度】为“100%”；【颜色】为

“红色”（#FF0000）。

在【颜色】面板中，选择【颜色类型】为“径向渐变”，并在下面的颜色条中定义渐变色。填充渐变色后，需要使用【渐变变形工具】调整渐变色的位置。

提示

在“模糊”滤镜选项中，设置【模糊X】和【模糊Y】均为“10像素”。

提示

● 绘制矩形

● 填充渐变色

● 使用发光滤镜

● 使用模糊滤镜

● 设置滤镜参数

练习要点

首先使用【矩形工具】绘制一个矩形。然后，选择【颜料桶工具】，在【颜色】面板中选择【颜色类型】为“线性渐变”，并在下面的颜色条中定义渐变色。最后为矩形填充从上至下的渐变色。

提示

输入

绘制并

填充

添加“发

光”滤镜

添加“发

光”滤镜

选择

绘制

填充

转换为

影片剪辑

添加滤镜

第10章 设计动画特效 10

159

Flash

Flash

STEP 04 新建图层，在舞台中绘制“云朵”图形，并为其填充白

黄渐变色。然后，将其转换为影片剪辑，在【属性】检查器中添加

“模糊”滤镜，设置【模糊X】和【模糊Y】均为“10像素”，并调

整Alpha透明度为“60%”。

STEP 05 新建图层，执行【文件】|【导入】|【打开外部库】命

令，在弹出的对话框中选择“素材.fla”文件，并将“山脉”影片

剪辑拖入到舞台中。然后，为该影片剪辑添加“模糊”滤镜。

STEP 06 新建图层，将“小树”影片剪辑从【外部库】面板拖入

到舞台中，在【属性】检查器中为其添加“模糊”滤镜，并设置

其【模糊X】和【模糊Y】均为“3像素”。然后新建图层，将“大

树”影片剪辑拖入到“小树”的前面。

STEP 07 新建图层，在“小树”下面绘制一个与舞台宽度相同的

矩形，并为其填充绿色渐变。然后，将其转换为影片剪辑，并在

【属性】检查器中为其添加“模糊”滤镜，设置【模糊X】为“0像

素”；【模糊Y】为“3像素”。

为“云朵”图形填充渐变颜色后，需要使用【渐变变形工具】来调整渐变色的位置。

提示

因为“山脉”影片剪辑的宽度与舞台相同，所以在【属性】检查器中设置“山脉”的X坐标为0。

提示

操作【外部库】面板与操作当前文档的【库】面板的方法相同。

提示

在【颜色】面板中选择【颜色类型】为“径向渐变”，并在下面的颜色条中定义渐变色。

提示

第二次添加的“发光”滤镜，其【模糊X】和【模糊Y】的值同样为“255像素”。

提示

使用“发光”滤镜，可以模拟“太阳”的发光效果。

提示

拖入

添加模

糊滤镜

拖入 添加滤镜 拖入

调整

绘制

填充

转换

设置

Flash CS5中文版从新手到高手

Flash CS5中文版从新手到高手

160

Fla

sh

Flash

STEP 08 新建图层，将“房屋02”影片剪辑从【外部库】面板拖入

到“大树”的前面。然后，新建“道路”图层，在舞台中绘制“道

路”图形，并为其填充渐变色。

Flash CS

5

10.6　练习：制作导航条动画

导航条在网站中发挥极其重要的功能，用于引导访问者快速浏

览网站中的内容。通常所见的导航条都是静态的，效果较为单一，

为了解决这个问题，可以将导航条制作成动画。在Flash CS5中，使

用动画预设可以快速为按钮添加各种动画特效。

操作步骤：

STEP 01 新建一个800像素×250像素的文档，使用【矩形工具】绘

制一个与舞台大小相同的矩形。然后，使用【颜料桶工具】为矩形

填充蓝色渐变，并通过【渐变变形工具】向上移动渐变色。

在【属性】检查器中，设置矩形的【宽度】为“1020像素”；【高度】为“100像素”。

提示

在【颜色】面板中选择【颜色类型】为“线性渐变”，并在下面的颜色条中设置从白色（#FFFFFF）到黄色（#FBB606）的渐变。

提示

● 绘制矩形

● 填充渐变色

● 使用【渐变变形工具】

● 创建补间动画

● 应用动画预设

练习要点

在绘制矩形之前，可以为其定义任意填充颜色，因为之后要重新为其填充渐变色。

提示

绘制

转换 添加滤镜

设置

拖入

绘制

第10章 设计动画特效 10

161

Flash

Flash

STEP 02 执行【文件】|【导入】|【导入到库】命令，将所有素材

图像导入到【库】面板。新建“首页按钮”按钮元件，将“首页

.png”素材图像拖入到舞台，并转换为“首页-初始状态”影片剪

辑。然后，在下面输入“首页”文本，为其添加“发光”滤镜，并

设置【颜色】为“白色”（#FFFFFF）。

STEP 03 新建“首页-鼠标经过”影片剪辑，将“首页-初始状

态”影片剪辑拖入到舞台中。选择第50帧，执行【插入】|【时间

轴】|【帧】命令，在此位置插入普通帧。然后右击任意一帧，在弹

出的快捷菜单中执行【创建补间动画】命令，创建补间动画。

STEP 04 右击第50帧，在弹出的快捷菜单中执行【3D补间】命

令，此时影片剪辑将会出现三维坐标指针。然后再次右击第50帧，

执行【插入关键帧】|【旋转】命令，创建旋转补间动画。

在【属性】检查器中设置文本的【系列】为“微软雅黑”；【大小】为“14点”；【颜色】为“白色”

（#FFFFFF）。

提示

选择【颜料桶工具】，在【颜色】面板中选择【颜色类型】为“线性渐变”，然后在下面的颜色条中定义蓝色渐变。

提示

右击第50帧，在弹出的快捷菜单中执行【插入帧】命

令，或者按 键，也可以

在该位置插入普通帧。

技巧

在【属性】检查器中设置“首页-初始状态”影片剪辑的X坐标和Y坐标均为0。

提示

将补间动画转换为3D补间，则可以创建基于三维空间的动画。

提示

执行【窗口】|【变形】命令，可以打开【变形】面板。

提示

绘制

填充

创建

拖入并转换为元件

输入

添加滤镜

创建

拖入 插入帧

右击

执行

右击

执行

右击

执行

移动

Flash CS5中文版从新手到高手

Flash CS5中文版从新手到高手

162

Fla

sh

Flash

STEP 05 选择第25帧，使用相同的方法，插入“旋转”属性关键

帧。打开【变形】面板，在【3D旋转】选项中设置Y为180。然后新

建图层，在最后一帧处插入关键帧。右击该帧，在弹出的快捷菜单

中执行【动作】命令，打开【动作一帧】面板，并输入停止播放动

画命令“stop();”。

STEP 06 打开“首页按钮”按钮元件，在【指针经过】帧处插入

空白关键帧，将“首页-鼠标经过”影片剪辑拖入到舞台中。然

后，在下面输入“首页”文字，并为其添加“发光”滤镜和“投

影”滤镜。

STEP 07 右击【弹起】帧，执行【复制帧】命令。右击【按下】

帧，执行【粘贴帧】命令，将【弹起】帧中的内容复制到【按下】

帧中。然后，选择【点击】帧，按 键插入帧。

STEP 08 返回场景。新建图层，将“首页按钮”按钮元件拖入到

舞台的右侧。然后，打开【动画预设】面板，选择“从右边飞入”

选项，并单击面板底部的【应用】按钮，将该动画应用到“首页按

钮”按钮元件上面。

在【变形】面板中设置【3D旋转】属性后，可以使影片剪辑发生3D旋转变化。

提示

选择“首页-鼠标经过”影片剪辑，在【属性】检查器中设置其X坐标和Y坐标均为0。

提示

【指针经过】帧与【弹起】帧中的“首页”文本属性相同，且“发光”滤镜的参数也相同。

提示

在“投影”滤镜选项中，设置【模糊X】和【模糊Y】均为“2像素”；【距离】为“1像素”。

提示

插入属

性关键帧

设置

新建

插入

关键帧

输入

插入空

白关键帧

拖入

输入

添加

复制帧 插入帧

第10章 设计动画特效 10

163

Flash

Flash

STEP 09 使用相同的方法，创建其他4个按钮元件。然后返回场

景，新建图层，并在不同的补间范围制作相同的动画效果。最后，

新建名称为ActionScript的图层，在最后一帧处插入关键帧，打开

【动作一帧】面板，并输入停止播放动画命令“stop();”。

Flash CS

5

10.7　练习：设计网站进入动画

在Flash中，用户通过将多种特效和补间动画结合起来使用，可

以制作出效果更加丰富多彩的动画。本练习将利用滤镜、色彩效果

等制作一个网站进入动画。

操作步骤：

STEP 01 新建文档，在【文档设置】对话框中设置舞台的【尺

寸】为“1003像素×600像素”。然后，在图层的第25帧处插入关

键帧，执行【文件】|【导入】|【打开外部库】命令，打开“素材

.fla”文件，将“背景”影片剪辑拖入到舞台中。

在应用动画预设之前，延长“背景”图层的帧数至第150帧。

提示

网站的进入动画主要应用于网页中，因此，其尺寸需要使用标准网页的大小。

提示

动画总长240帧/10秒。其中第一秒的24帧预留给加载影片的进度条使用。

提示

● Flash滤镜

● 色彩效果

● 使用滤镜

● 动画预设

练习要点

拖入

选择

单击

设置

插入关键帧

拖入

Flash CS5中文版从新手到高手

Flash CS5中文版从新手到高手

164

Fla

sh

Flash

STEP 02 选择第25帧，在【属性】检查器中设置“背景”影片剪

辑的Alpha为0。右击该帧，执行【创建补间动画】命令，创建补间

动画。然后，右击第48帧，执行【插入关键帧】|【颜色】命令，在

【属性】检查器中更改其Alpha为100。

STEP 03 新建图层2，将“进度条”影片剪辑拖入到舞台，在第1帧

至第48帧之间制作渐隐的补间动画。新建图层3，在“进度条”上

面绘制一个矩形，并转换为影片剪辑，在第1帧至第24帧之间制作

横向变宽的补间动画。然后，将图层3转换为遮罩层。

STEP 04 新建图层4，在第49帧处插入关键帧，并将“矩形背景”

影片剪辑拖曳到影片的中心位置，在【属性】检查器中为其添加投

影和模糊滤镜。然后在第49至72帧之间创建补间动画，制作影片剪

辑由模糊到清晰的动画。

STEP 05 新建3个图层，分别在每个图层的第73帧处插入关键帧，

将“箭头”影片剪辑拖入到舞台的右上方。然后创建补间动画，在

第96帧处插入关键帧，将“箭头”移动到舞台的左下方。

在拖入“背景”影片剪辑后，在该图层的第240帧处插入普通帧，以延长背景所显示的时间。

提示

制作加载进度的动画，需要先为图层2导入“进度条”影片剪辑，然后在图层3中绘制一个同样大小的遮罩层，制作遮罩层逐渐由中间向两边延伸的动画。

提示

用户也可以使用传统补间动画来制作“背景”影片剪辑的显示动画。

提示

在第49帧处，元件的【模糊X】和【模糊Y】值为255；在第72帧处，元件的【模糊X】和【模糊Y】值为0。

提示

设置

创建补间动画

设置

插入关键帧

拖入 创建补间动画

创建补间动画 转换为遮罩层

设置滤镜

拖入元件

插入关键帧

插入关键帧

创建补间

设置滤镜

第10章 设计动画特效 10

165

Flash

Flash

STEP 06 新建图层，在第73帧处插入关键帧，在舞台中绘制一个矩

形，其与“矩形背景”影片剪辑的大小和位置相同。然后，右击该

图层，执行【创建遮罩层】命令，将其转换为遮罩层。

STEP 07 新建图层，在第109帧处插入关键帧，拖入“向下箭头”

影片剪辑。然后，在【动画预设】面板中选择“从顶部飞入”选

项，将其应用到该影片剪辑，并删除图层第193帧之后的所有帧。

STEP 08 新建图层，在第121帧处插入关键帧，在舞台中输入

“迅”字，并为其添加“模糊”滤镜，设置【模糊X】和【模糊Y】

均为255。然后创建补间动画，选择第144帧，更改文本的【模糊

X】和【模糊Y】均为0。

在制作3个“箭头”影片剪辑自“矩形背景”影片剪辑的右上方向左下方移动的动画时，需要使用【选择工

具】 将元件的运动轨迹

由直线修改为曲线。

提示

将“箭头”影片剪辑所在图层转换为被遮罩层。

提示

“迅”文本的字体为“方正粗活意简体”，大小为60点，颜色为“天蓝色”（#3299FF）。

提示

创建图层

插入关键帧

拖入 移动

创建补间动画

绘制

创建图层

插入关键帧

转换为遮罩层

拖入元件

插入关键帧

选择预设

输入

添加滤镜 更改滤镜

插入关键帧

创建补间

选择

Flash CS5中文版从新手到高手

Flash CS5中文版从新手到高手

166

Fla

sh

Flash

STEP 09 新建图层16，在第193帧处插入关键帧，将logo影片剪辑

拖入到舞台的左上方。然后创建补间动画，在第216帧处插入“位

置”和“缩放”关键帧，制作logo影片剪辑自舞台中心向左上方移

动的动画。

STEP 10 新建图层17、图层18和图层19，分别将3个按钮拖入到相

应图层的舞台中，制作3个按钮自舞台右上方移动到中间的动画。

然后，新建图层20，第240帧处插入关键帧，在【动作一帧】面板

中输入“stop();”命令。

问题1：在【动画编辑器】面板中，是否可以

调整每条属性曲线的显示大小？

解答：通过在【动画编辑器】面板底部设置【图形大小】和【展开的图形大小】的属性值，可以调整展开视图和折叠视图的大小。大尺寸显示的属性曲线更易于编辑。

Flash CS

5

10.8　高手答疑

用同样的方式，制作其他4个文本的显示动画，分别放置在图层11、图层12、图层13和图层14中。

提示

其中，“首页”按钮在“图层17”，自第205帧开始移动，到第228帧停止；“镜像”按钮在“图层18”，自第211帧开始移动，到第234帧停止；“关于”按钮在“图层19”，自第217帧开始移动，到第240帧停止。“stop( );”语句的作用是停止影片的播放。

提示

拖入 移动

插入关键帧 创建补间

插入关键帧

创建补间动画

输入

新建图层

插入关键帧

设置

第10章 设计动画特效 10

167

Flash

Flash

除了可以通过鼠标拖动来改变图形大小的值外，还可以在文本框中直接输入指定的数值。

技巧

问题2：如何控制【动画编辑器】面板中可显

示的补间帧数？

解答：通过设置【动画编辑器】面板底部【可查看的帧】的属性值，可以控制要显示的帧数。最大的帧数是补间范围内的总帧数。

用户可以通过鼠标拖曳或者直接输入数值，来改变【动画编辑器】面板中可显示的帧数。

提示

问题3：在【动画编辑器】面板中，如何使播

放头快速跳转至上一关键帧或下一关键帧的

位置？

解答：单击【转到上一个关键帧】按钮可以使播放头跳转至当前帧的上一个关键帧；而单击【转到下一个关键帧】按钮可以使播放头跳转至当前帧的下一关键帧。

多次单击【转到上一个关键帧】按钮或【转到下一个关键帧】按钮，可连续向上或向下跳转多个关键帧。

提示

问题4：如何初始化【动画编辑器】面板中的

曲线图？

解答：当定义的曲线图并不能满意设计者的要求时，可以通过单击【重置值】按钮 来初始化曲线图。初始化曲线后，设计者可以重新在曲线上添加控制点，以及调整曲线控制点的位置。

问题5：是否可以将Flash中的动画预设导出到

本地计算机中，以便与其他用户共享？

解答：可以。在【动画预设】面板中选择要导出的动画预设，单击面板右上角的选项按钮，在弹出的菜单中执行【导出】命令。然后，在打开的【另存为】对话框中选择存储路径，并输入名称，单击【保存】按钮即可将动画预设存储为XML文件。

问题6：如何清除【动画预设】面板中已经存

在的动画预设？

解答：从【动画预设】面板中删除动画预设时，Flash将会从本地计算机删除其XML文件。

在【动画预设】面板中选择要删除的动画

预设名称，然后单击左下角的【删除项目】按

钮 ，在弹出的对话框中单击【删除】按钮即

可将该动画预设删除。

输入

单击

单击

单击

执行

输入 选择

Flash CS5中文版从新手到高手

Flash CS5中文版从新手到高手

168

Fla

sh

Flash

如果单击【删除】按钮，则同时将本地磁盘中存储动画预设的XML文件删除，该操作无法撤销，因此在删除之前务必要考虑清楚。

注意

问题7：如何根据类别将创建的自定义预设动

画分组？

解答：单击【动画预设】面板底部的【新建文件夹】按钮 ，在列表中新建一个文件夹，此时可以输入文件夹的名称。

然后，选择列表中想要分类存放的动画预

设，并拖动到文件夹上，此时放开鼠标即可将

这些动画预设移动至该文件夹中。

按住 键不放，再单击动画预设名称，可一次

选择多个动画预设。

技巧

单击

单击

选择

单击

输入

拖动