天添资源网 http://www.ttzyw.com/
天添资源网 http://www.ttzyw.com/
目 录
第一章 遨游 Flash 海洋………………………………………6
第一节 走进新天地——认识 flash 界面………………………6
第二节 我是小画家——绘图工具……………………………8
第三节 五彩斑斓的文字世界——文字效果…………………13
第二章 小试身手——简单动画………………………………16
第一节 步步为营——逐帧动画………………………………16
第二节 形状渐变动画…………………………………………19
第三节 移形幻影——移动渐变动画…………………………23
第四节 多姿多彩——多图层动画……………………………25
第三章 FLASH 特效动画………………………………………29
第一节 请跟我来——引导层动画……………………………29
第二节 不识庐山真面目——遮罩动画………………………34
第四章 你来我往、交互动画…………………………………39
第一节 一触即发——制作按钮…………………………………39
第二节 跟着感觉走——简单 Action……………………………41
第三节 绘声绘色——声音的操作………………………………44
第四节 教你做游戏………………………………………………49天添资源网 http://www.ttzyw.com/
天添资源网 http://www.ttzyw.com/
第一章 遨游 Flash 海洋
第一节 走进新天地——认识 flash 界面
一、教学目标
知识目标
1、了解 Flash 的功能特点。
2、掌握 Flash 启动方法。
能力目标
了解 Flash 中各面板的组成及各部分主要功能。
情感目标
培养学生对 Flash 更浓厚的兴趣。
二、 教学重点与难点:
1、 Flash 动画产生原理
2、掌握 Flash 的工作环境
三、教学方法:
演示法、观察法、自学法
四、教学课时:1 课时
五、教学过程:
导入：
1.什么是 FLASH
Flash 是美国 Macromedia 公司出品的一个矢量图形和交互式动画
制作软件.主要应用于网页设计和多媒体动画创作领域.它可以将文字、图
画、声音和视频融于一体，最终构成有声有色，品位独特的具有交互功能
的动画效果。使用 Flash 可以作出梦幻般的动画效果.2、Flash 动画的特
点：
a.动画文件非常小，适合在网络上传输。
b.易学易用，功能强大。
c.交互功能强大，使用 flash 制作出的影片可以是观赏者轻松地参与到故
事情节中，因此使用 flash 可开发出许多好玩的游戏。
d.流媒体格式。可以边下载边观看（无需完全下载完在进行播放）
e.用 Flash 作出来的动画是矢量动画(当把它放大时,它依然很清晰),而
不象一般的 gif 格式和 jpf 格式的图象,放大时,看到的是一个个方形
的色块.
3、Flash 动画的应用：
a、引领多媒体课件制作的新概念。b.Flash 还可以应用于产品展示，宣传
广告方面。天添资源网 http://www.ttzyw.com/
天添资源网 http://www.ttzyw.com/
c.制作 MTV。
d.开发各种交互式游戏
4、Flash 动画产生的原理：
一幅幅静态图象(帧)————形成连续运动的动画。
快速播放
原理：图象迅速播放使得人眼很难觉察出短暂的时间间隔。
5、FlashMX 的三种文件格式：
a.fla 源文件，可在 flash 中打开修改。
b.swf 发布文件，不包括原始的冗余的信息，只包含与动画播放有的必
要信息。所以，swf 文件不可用 flash 在重新打开修改.
c.exe 文件中包含了 flash 播放器和 swf 内容的程序，它不需要播放器就
可直接浏览。
组织教学
复习提问
上节课所学的内容。
1.菜单栏
菜单栏位于主界面的顶部，它由 9 组菜单命令组成。掌握了菜单栏
中命令的使用，就掌握了 FLASH MX 饿基本操作。
2.工具箱
工具箱位于主界面的左侧。工具箱中提供了选择、绘画、文字及修
改的常用工具。以后我们在学习中不断对工具箱中的工具做介绍。
3.时间轴
时间轴位于菜单栏的下面，它由两部分组成，左边的不凡用来对图
层进行操作；右边的部分对帧进行操作。在时间轴中可以很方便地对层或
帧进行选择、编辑、控制以及设置。
4.舞台
舞台是进行动画创作的工作区域，它位于主界面的中央，占据了比
较大的空间。在舞台中可以对当前帧的内容进行编辑。
5.面板
面板位于主界面的底部和右侧，每一个面板都提供某一方面的功能。
其中，位于主界面底部的是属性面板，是我们经常用到的面板，它可以根
据当前对象的不一样，显示不同的属性面板。
六、练习
1. 观察 FLASH 菜单与 WORD 菜单的区别与联系。
2. 熟悉 FLASH MX 的工作环境
七、小结：
教学后记：天添资源网 http://www.ttzyw.com/
天添资源网 http://www.ttzyw.com/
第二节 我是小画家——绘图工具
一、教学目标:
知识目标：
1.绘图工具的种类
2.绘图工具的使用方法
能力目标
能够熟练使用各种绘图工具
情感目标
培养学生浓厚的学习兴趣，引导学生探索性自主学习，培养学生创新精神
及能力。
二、教学重点与难点:
学习使用绘图工具
三、教学方法:
实例演示法
四、教学手段与教学媒体
多媒体网络教室。
五、教学课时:
1 课时
五、教学过程:
导入：
Flash 基础绘图工具
在计算机绘图领域中，根据成图原理和绘制方法的不同，分为矢量图和位
图两种类型。
矢量图形是由一个个单独的点构成的，每一个点都有其各自的属性，如位
置、颜色等。因此，矢量图与分辨率无关，对矢量图进行缩放时，图形对
象仍保持原有的清晰度和光滑度，不会发生任何偏差.
如位图图像是由象素点构成的，象素点的多少将决定位图图像的显示
质量和文件大小，位图图像的分辨率越高，其显示越清晰，文件所占的空
间也就越大。
基
Flash 提供了各种工具来绘制自由形状或准确的线条、形状和路径，并可
用来对填充对象涂色。
在本节里，我们学习线条工具、滴管工具、墨水瓶工具、箭头工具、刷
子工具、任意变形工具、颜料桶等工具的基本用法。
1．绘制和处理线条
【线条工具】是 Flash 中最简单的工具。现在我们就来画一条直线。鼠标天添资源网 http://www.ttzyw.com/
天添资源网 http://www.ttzyw.com/
单击【线条工具】 ，移动鼠标指针到舞台上，在你希望直线开始的地方
按住鼠标拖动，到结束点松开鼠标，一条直线就画好了。
【线条工具】能画出许多风格各异的线条来。打开【属性】面板，在其中，
我们可以定义直线的颜色、粗细和样式，如图 2-1-2 所示。
在图 2-1-2 所示的【属性】面板中，单击其中的【笔触颜色】按钮 ，会出
现一个调色板对话框，同时光标变成滴管状。用滴管直接拾取颜色或者在
文本框里直接输入颜色的 16 进制数值。颜色以#开头，如#99FF33。
现在来画出各种不同的直线。单击【属性】面板中的【自定义】按钮，会
弹出一个【笔触样式】对话框，如图 2-1-4 所示。
方便观察，我们把粗细定为 3 象素（pts），选择不同的线型和颜色，来
看看我们画出的线条，如图 2-1-5 所示。
试一试改变它的各项参数，会对你的绘图有很大帮助。
【滴管工具】和【墨水瓶工具】可以很快地将一条直线的颜色样式套用到
别的线条上。用【滴管工具】单击上面的直线，看看【属性】面板，它显
示的就是该直线的属性，而且工具也自动变成了【墨水瓶工具】，如图 2-1-6
所示。
使用【墨水瓶工具】 单击其它线条，看看什么结果：所有线条的属性都
变成了和滴管工具选中的直线一样了。
如果你需要更改这条直线的方向和长短，Flash 也为我们提供了一个很便捷
的工具：【箭头工具】 。
【箭头工具】的作用是选择对象、移动对象、改变线条或对象轮廓的形状。
单击选择【箭头工具】，然后移动鼠标指针到直线的端点处，指针右下角
变成直角状 ，这时拖动鼠标可以改变直线的方向和长短，如图 2-1-7 所示。
如果鼠标指针移动到线条中任意处，指针右下角会变成弧线状，拖动鼠标，
可以将直线变成曲线。这是一个很有用处的功能，在我们鼠标绘图还不能
随心所欲时，它可以帮助我们画出所需要的曲线，如图 2-1-8 所示。
2．实例演练——画一片树叶
现在我们就来实践一下，练习画一片树叶。
打开 FALSH 软件，系统会自动建立一个 FLASH 文档，在这里我们不改变
文档的属性，直接使用其默认值。
（1）新建图形元件
执行【插入】|【新建元件】命令，或者按快捷键 CTRL+F8，弹出创建新
元件对话框，在【名称】文本对话框中输入元件名称“树叶”，【行为】选
择“图形”，单击【确定】按钮，如图 2-1-9 所示。
这时工作区变为“树枝”元件的编辑状态，如图 2-1-10 所示。
说明：图形元件是 Flash 的基本元素，有关它的详细内容请参阅第 4 章的
有关内容。天添资源网 http://www.ttzyw.com/
天添资源网 http://www.ttzyw.com/
（2）绘制树叶图形
在“树叶”图形元件编辑场景中，首先用【线条工具】画一条直线，【笔
触颜色】设置为深绿色，如图 2-1-11 所示。
然后用【箭头工具】将它拉成曲线，如图 2-1-12 所示。
再用【线条工具】绘制一个直线，用这条直线连接曲线的两端点，如图
2-1-13 所示
用【箭头工具】将这条直线也拉成曲线，如图 2-1-14 所示。
一片树叶的基本形状已经出来了，现在我们画叶脉，在两端点间画直线，
然后拉成曲线，如图 2-1-15 和图 2-1-16 所示。
边的细小叶脉，可以全用直线，也可以略加弯曲，这样，一片简单的
树叶就画好了，如图 2-1-17 所示。
（3）编辑和修改树叶
如果在画树叶的时候出现错误，比如说，画出的叶脉不是你所希望的样子，
你可以执行【编辑】|【撤销】命令撤销前面一步的操作，也可以选择下面
更简单的方法：用【箭头工具】单击你想要删除的直线，这条直线变成网
点状，说明它已经被选取，你可以对它进行各种修改，如图 2-1-18 所示。
要移动它，就按住鼠标拖动，要删除它，就直接按 DEL 键。按住 SHIFT
键连续单击线条，可以同时选取多个对象。如果要选取全部的线条，是否
得按住 SHIFT 键挨个点击呢？不需要，我们用黑色箭头工具拉出一个选取
框来，就可以将其全部选中了，如图 2-1-19 所示。
说明：在一条直线上双击，也可以将和这条直线相连并且颜色、粗细、样
式相同的整个线条范围全部选取。
（4）给树叶上色
接下来我们要给这片树叶填上颜色。在工具箱中看到这个【颜色】选项了
吗？如图 2-1-20 所示
单击【填充颜色】按钮 ，会出现一个调色板，同时光标变成吸管状，如
图 2-1-21 所示。
说明：你除了可以选择调色板中的颜色外，还可以点选屏幕上任何地方吸
取你所需要的颜色。
如果你觉得调色板的颜色太少不够选，单击一下调色板右上角的【颜色选
择器】按钮 ，会弹出一个【颜色】对话框，其中有更多的颜色选项，在
这里，你能把选到的颜色添加到自定义颜色中，如图 2-1-22 所示。
在【自定义颜色】选项下单击一个自定义色块，该色块会被虚线包围，在
【颜色】对话框右边的【调色板】中单击你喜欢的颜色，上下拖动右边颜
色条上的箭头，移到你需要的深浅度上，单击【添加到自定义颜色】按钮，
这个色块就被你收藏起来了。下一次要使用时，打开这个【颜色】面板，
在自定义色中可以方便的选取你中意的颜色。天添资源网 http://www.ttzyw.com/
天添资源网 http://www.ttzyw.com/
好了，现在我们在调色板里选取绿色，单击工具箱里【颜料桶工具】，在
画好的叶子上单击一下，看看什么效果，如图 2-1-23 所示。
只有一小块颜色？原来，这个颜料桶只能在一个封闭的空间里填色。取消
刚刚的填色，现在我们用【橡皮工具】将线条擦出一个缺口，再看效果，
如图 2-1-24 所示。
你看，残缺线条的两边都填上了颜色。
好，我们还是一块一块的填上颜色吧。但是在填充颜色前，你一定要将树
叶图形恢复到使用【橡皮工具】擦除操作前的模样哦。
这时，你可能会想，如果我们刚才先填充颜色再画叶脉就省事多了。是的，
你想得一点没错！没关系，随着操作的增加，我们的经验会越来越丰富的。
最后填充完的效果如图 2-1-25 所示。
至此，一个树叶图形就绘制好了。请你执行【窗口】|【库】命令，打开
【库】面板，你将发现【库】面板中出现一个“树叶”图形元件，如图 2-1-26
所示。
说明：【库】面板是存储 Flash 元件的场所，我们所创建的元件对象以及
从外部导入的图像、声音等对象都保存在这里，这里的元件可以拖放到场
景中重复使用。有关【库】面板的详细内容请你参阅第 4 章的相关内容。
（5）【颜料桶工具】选项
单击【颜料桶工具】后，在工具箱下边的【选项】里有四个选项，可以根
据自己的需要来确定，读者可以自己试一下，如图 2-1-26 所示。
说明：【颜料桶工具】是对某一区域进行单色、渐变色或位图进行填充，
注意不能作用于线条。选择【颜料桶工具】后，在【工具箱】下边的【选
项】中单击【空隙大小】按钮,会弹出四个选项，如图 1-2-11 所示。其中，
【不封闭空隙】表示要填充的区域必须在完全封闭的状态下才能进行填充；
【封闭小空隙】表示要填充的区域在小缺口的状态下可以进行填充；【封
闭中等空隙】表示要填充的区域在中等大小缺口状态下进行填充；【封闭
大空隙】表示要填充的区域在较大缺口状态下也能填充。但在 Flash 中，
即使中大缺口，值也是很小的，所在要对大的不封闭区域填充颜色，一般
用笔刷。
3．【刷子工具】的用法
【刷子工具】 可以随意地画色块。当你单击工具箱中的【刷子工具】后，
工具箱下边就会显示它的【选项】，我们先看看它的【选项】，如图 2-1-27
所示。
在这里，我们可以选定画笔的大小和样式以及它的填色模式。读者可以自
己选取不同的大小和样式练习练习，先找一找感觉。
下面我们利用刚刚画成的树叶来详细讲解它的填色模式。在图 2-1-27 所示天添资源网 http://www.ttzyw.com/
天添资源网 http://www.ttzyw.com/
的【选项】下单击【填充模式】按钮，则弹出填充模式下拉列表，如图 2-1-28
所示。
（1）标准绘画
选择【刷子工具】，并将【填充颜色】设置为黄色，当然也可以是其它色。
先选择【标准绘画】模式，移动笔刷（当选择了【刷子工具】后，鼠标指
针就变为刷子形状）到舞台的树叶图形上，拖动鼠标在叶子上乱抹几下，
观察一下效果，如图 2-1-29 所示。
你能发现，不管是线条还是填色范围，只要是画笔经过的地方，都变成了
画笔的颜色。
（2）颜料填充
选择【颜料填充】模式，它只影响了填色的内容，不会遮盖住线条，如图
（3）后面绘画
选择【后面绘画】模式，无论你怎么画，它都在图像的后方，不会影响前
景图像，如图 2-1-3 所示。
（4）颜料选择
选择【颜料选择】模式，你先用画笔抹几下，好象丝毫不起作用。这是因
为我们没有选择范围。用【箭头工具】选中叶片的一块，再使用画笔，你
看，颜色就上去了，如图 2-1-32 所示。
（5）内部绘画
选择【内部绘画】模式，在绘画时，画笔的起点必须是在轮廓线以内，而
且画笔的范围也只作用在轮廓线以内.
小结
教学后记：天添资源网 http://www.ttzyw.com/
天添资源网 http://www.ttzyw.com/
第三节 五彩斑斓的文字世界——文字效果
一、教学目标:
知识目标：
学习 Flash 中文本工具和渐变色的使用，掌握文字制作的一些基本技巧。
能力目标
能够学会各种文字制作的方法
情感目标
培养学生浓厚的学习兴趣，引导学生探索性自主学习.
二、教学重点与难点:
掌握文字制作的基本技巧
三、教学方法:
实例演示法
四、教学手段与教学媒体
多媒体网络教室。
五、教学课时:
3 课时
六、教学过程:
导入：
彩虹文字
第一步：打开 Flash 建立一个新文档，把舞台设为黑色。建立二个图层，
把图层 1 命名为“彩虹条”，图层 2 命名为“文字”。（因为文字不动一
定要把它放在一层，我们要条动，通过彩虹条动过把文字秀出来，所以要
把它放在下层）。
第二步：单击“文字”图层第一帧，单击“文本工具”转入文字，我这
里转入的是“欢迎来到山里人网站”，然后调整好文字大小和位置，然后
在 15 帧处“插入帧”（不是关键帧啊，因为文字不动又不用建立动画，
不必要插入关键帧的）。
第三步：单击“彩虹条”图层第一帧，单击“矩形工具”在“颜色”
栏中“笔触颜色”选无，“填充色”选“五彩色”画出一块彩虹条（画好
的彩虹条宽要能复盖住文字，长要长出文字一点），然后打开“混色器”
按照你的爱好增加色彩块。我做的是下面这个样子的，见下图：
第四步：把制作好的“彩虹条”放在文字上，让它复盖住文字，右边横的
一头长出文字一点。然后在 15 帧处插入“关键帧”，第 5 帧、第 10 帧处
同样插入“关键帧”，并分别创建“补间动画”。单击“第二个关键
帧”，把“彩虹条”向左移动一点，单击“第四个关键帧”把“彩虹条”天添资源网 http://www.ttzyw.com/
天添资源网 http://www.ttzyw.com/
向右移动一点。（注意：移动“彩虹条”时不要让“彩虹条”超出文字，
最好你用键盘“方向键”来操作。我这里是加了 4 个关键帧，你也可以加
3 个就得了。你想要文字闪动快点，你就选短点帧数，想要闪慢点你就选
长点帧数啰）。
第五步：导出影片看结果。是不是很爽？不像我制作的？呵呵，差点忘
记，请你在“文字”图层上右击，在弹出的菜单中选“庶罩层”，好 OK
了，（一般制作歌词时，最好在后台里做好 MC 然后天添资源网 http://www.ttzyw.com/
天添资源网 http://www.ttzyw.com/
第 2 课时
中空文字
组织教学
复习提问
上节课所学的内容。
知识点：1 文字工具的使用：
2 墨水瓶的应用。
制作过程：
1.新建一个 FLA 文档，属性 400*150，背景黑色，其他默认，确定。
2.点一下时间轴中图层 1 的第一贞，然后再点一下工具栏里的文字
工具‘A’，在属性中选‘黑体’字，大小 90，颜色红色。如图：
3.在工作区输入‘缘分天空’四个字。点窗口———对齐面版，
水平中齐，垂直中齐。
4.选黑尖头工具，到场景中选中这四个字。点修改——分离——分离
（或 CTRL+B 2 次），打散。如图：
5.点墨水瓶工具，属性笔触颜色‘绿色’，实线，笔触高度‘2’。
6.在工作区中每一个字的边缘点一下，效果如图
7.选黑尖头工具，将文字中间的填充部分删除，只留下文字边框。
8.保存 FLASH 文件和 SWF 文件。天添资源网 http://www.ttzyw.com/
天添资源网 http://www.ttzyw.com/
第 3 课时
组织教学
复习提问
上节课所学的内容。
此实例的实现的是带荧光文字效果，在制作过程中主要使用了渐变填充
等工具，通过简简单单几样工具便创造出了漂亮的文字特效。难点就在于
图形、色彩编辑的技巧和填充工具的使用。通过对文字边框进行柔化处理，
产生具有霓虹灯效果的荧光文字。最终播放效果如图 1 所示，要实现这一
效果，具体制作过程如下：
1.新建一个电影，在属性面板中设置其尺寸为 480pxX150px,选择一种颜色
（本例为#000099）作为背景色。
2. 从 工 具 箱 中 选 取 文 本 工 具 ， 在 属 性 面 板 中 设 置 字 体 类 型 设 置 成
VladimirScrD，字体大小设置成 100,在舞台上输入 “Flashghost”。选择工
具栏中箭头工具，将文字移动到工作区中间。按键盘的“Ctrl+B”键，将
文字打碎。
分离文本
3.选择工具栏中墨水瓶工具，将墨水瓶工具参数栏中线条颜色设置成明黄
色，线条宽度设置成 1.0,将鼠标移动到工作区中，鼠标光标将变成墨水瓶
形状，用鼠标依次点击文字边框，文字周围将出现明黄色边框。
为文本描边
2.按 Delete 删除填充区域
删除坛区域
4.选择工具栏中的箭头工具，按住键盘上的 Shift 键，依次双击每个字母外
的明黄色边框，将他们全部选中，选择菜单“修改/形状/将线条转换为扩
充”菜单命令，黄色边框被转变成可填充区域。
5.选择菜单“修改/形状/柔化填充边缘”，再按照如图所示的参数设“置柔
化填充边缘”对话框，进行如图 5 所示，点击“确定”按钮，关闭对话框。
6.选择工具栏中箭头工具，在工作区的空白处点击鼠标，取消对文字边框
的选择。这时可以看到，明黄色边线两边出现了模糊渐变，保存作品，按
“Ctrl+Enter”预览最终效果，就可以看见漂亮的荧光文字效果。
小结
本章通过学习 Flash 的设计工具，再结合一个个生动有趣的案例来熟悉
Flash 工具箱中各种工具的使用方法及相关属性的设置，通过对这些案例
的学习，使学生在乐趣中学到知识，掌握知识，运用知识 ，为将后的动天添资源网 http://www.ttzyw.com/
天添资源网 http://www.ttzyw.com/
画制作打下牢固的基础。
教学后记：天添资源网 http://www.ttzyw.com/
天添资源网 http://www.ttzyw.com/
第二章 小试身手——简单动画
第一节 步步为营——逐帧动画
一、教学目标:
知识目标：
1.创建逐帧动画的几种方法教学
2.简单动画的制作方法
能力目标
学会用绘制的图形来制作“逐帧动画
情感目标
体会创作的乐趣，进一步培养制作动画的兴趣；培养学生创新能力与探究
问题的能力；培养创造性思维能力。
二、教学重点与难点:
简单动画的制作方法
三、教学方法:
演示教学法
四、教学手段与教学媒体
多媒体网络教室。
五、教学课时:
2 课时
六、教学过程:
导入：
从本单元起，我们将逐渐给大家介绍 Flash 中的五种常见的动画形式：逐
帧动画、形状补间动画、动作补间动画、遮罩动画、引导线动画。
本节着重介绍逐帧动画（FrameBy Frame），这是一种常见的动画手法，它
的原理是在“连续的关键帧”中分解动画动作，也就是每一帧中的内容不
同，连续播放而成动画。
由于逐帧动画的帧序列内容不一样，不仅增加制作负担而且最终输出的文
件量也很大，但它的优势也很明显：因为它相似与电影播放模式，很适合
于表演很细腻的动画，如 3D 效果、人物或动物急剧转身等等效果。
1．逐帧动画的概念和在时间帧上的表现形式
在时间帧上逐帧绘制帧内容称为逐帧动画，由于是一帧一帧的画，所以逐
帧动画具有非常大的灵活性，几乎可以表现任何想表现的内容。
逐帧动画在时间帧上表现为连续出现的关键帧。
逐帧动画
2．创建逐帧动画的几种方法天添资源网 http://www.ttzyw.com/
天添资源网 http://www.ttzyw.com/
（1）用导入的静态图片建立逐帧动画
用 jpg、png 等格式的静态图片连续导入 Flash 中，就会建立一段逐帧动画。
（2）绘制矢量逐帧动画
用鼠标或压感笔在场景中一帧帧的画出帧内容。
（3）文字逐帧动画
用文字作帧中的元件，实现文字跳跃、旋转等特效。
（4）导入序列图像
可以导入 gif 序列图像、swf 动画文件或者利用第 3 方软件（如 swish、swift
3D 等）产生的动画序列。
3．绘图纸功能
（1）绘画纸的功能
绘画纸是一个帮助定位和编辑动画的辅助功能，这个功能对制作逐帧
动画特别有用。通常情况下，Flash 在舞台中一次只能显示动画序列的单
个帧。使用绘画纸功能后，你就可以在舞台中一次查看两个或多个帧了。
如图 3-2-2 所示，这是使用绘画纸功能后的场景，可以看出，当前帧中内
容用全彩色显示，其它帧内容以半透明显示，它使我们看起来好像所有帧
内容是画在一张半透明的绘图纸上，这些内容相互层叠在一起。当然，这
时你只能编辑当前帧的内容。
（2）绘图纸各个按钮的介绍
1、 绘图纸外观按钮 按下此按钮后，在时间帧的上方，出现 绘图纸
外观标记。拉动外观标记的两端，可以扩大或缩小显示范围。
2、 绘图纸外观轮廓 按下此按钮后，场景中显示各帧内容的轮廓线，填
充色消失，特别适合观察对象轮廓，另外可以节省系统资源，加快显示过
程。3.
3、 绘图纸显示多帧按钮，按下后可以显示全部帧内容，并且可以进行
“多帧同时编辑”。
4、 修改绘图纸标记 按下后，弹出菜单，菜单中有以下选项：
“总是显示标记”选项会在时间轴标题中显示绘图纸外观标记，无论绘
图纸外观是否打开。
“锚定绘图纸外观标记”选项会将绘图纸外观标记锁定在它们在时间轴标
题中的当前位置。通常情况下，绘图纸外观范围是和当前帧的指针以及绘
图纸外观标记相关的。通过锚定绘图纸外观标记，可以防止它们随当前帧
的指针移动。
“绘图纸 2”选项会在当前帧的两边显示两个帧。
“绘图纸 5”选项会在当前帧的两边显示五个帧。
“绘制全部”选项会在当前帧的两边显示全部帧。
上面，我们全面介绍了逐帧动画的特点和创建方法，现在，我们来动手制天添资源网 http://www.ttzyw.com/
天添资源网 http://www.ttzyw.com/
作二个逐帧动画实例，以加深对逐帧动画的认识。 天添资源网 http://www.ttzyw.com/
天添资源网 http://www.ttzyw.com/
第 2 课时
组织教学
复习提问
上节课所学的内容。
奔跑的豹子
茫茫雪原上，有一只矫健的豹子在奔跑跳跃，这是一个利用导入连续
位图而创建的逐帧动画.
1、 创建影片文档
执行【文件】|【新建】命令，在弹出的面板中选择【常规】|【Flash 文档】
选项后，点击【确定】按钮，新建一个影片文档，在【属性】面板上设置
文件大小为 400*260 象素，【背景色】为白色，如图 3-2-4 所示。
2、 创建背景图层
选择第一帧，执行【文件】|【导入到场景】命令，将本实例中的名为“雪
景.bmp”图片导入到场景中。在第 8 帧按 F5，加过渡帧使帧内容延续。
3、 导入 gif 动画
新建一层，选择第一帧，执行【文件】|【导入到场景】命令，将本教程中
的“奔跑的豹子”系列图片导入。此时，会弹出一个对话框，如图 3-2-5
所示。
选择【是】按钮，Flash 会自动把 gif 中的图片序列按序以逐帧形式导入场
景的左上角，如图 3-2-7 所示。
导入的 gif 动画在场景的上方形成帧帧动画
导入后的动画序列，它们被 Flash 自动分配在 8 个关键帧中。
4 、调整对象位置
此时，时间帧区出现连续的关键帧，从左向右拉动播放头，就会看到一头
勇猛的豹子在向前奔跑，但是，被导入的动画序列位置尚未处于我们需要
的地方，缺省状况下，导入的对象被放在场景坐标“0，0”处，我们必须
移动它们。
你当然可以一帧帧调整位置，完成一幅图片后记下其坐标值，再把其它图
片设置成相同坐标值，如果你有足够耐性和时间，也无妨，那么，我们何
不试试“多帧编辑”功能呢？
先把“雪景”图层加锁，然后按下时间轴面板下方的【绘图纸显示多帧】
按钮 ，再单击【修改绘图纸标记】按钮 ，在弹出的菜单中选择【显
示全部】选项.
最后执行【编辑】|【全选】命令，此时时间轴和场景效果如图 3-2-10 所示。天添资源网 http://www.ttzyw.com/
天添资源网 http://www.ttzyw.com/
用鼠标左键按住场景左上方的豹子拖动，就可以一次把 8 帧中的图片一次
全移动到场景中了。
5、 设置标题文字
在场景中新建一个图层，单击工具栏上的文字工具按钮 ,设置【属性】
面板上的文本参数如下，【文本类型】为静态文本；【字体】为隶书；【字
体大小】35；【颜色】为深蓝色。如图 3-2-11 所示。
在文本框输入“奔跑的豹子”五个字，居中放置。
6、 测试存盘
执行【控制】|【测试影片】命令，观察本例 swf 文件生成的动画有无问题，
如果满意，执行【文件】|【保存】命令，将文件保存成“奔跑的豹子.fla”
文件存盘，如果要导出 Flash 的播放文件，执行【导出】|【导出影片】命
令保存成“奔跑的豹子.swf”文件。
教学后记：天添资源网 http://www.ttzyw.com/
天添资源网 http://www.ttzyw.com/
第二节 形状渐变动画
一、教学目标:
知识目标：
1. 掌握形状渐变动画制作的原理
2. 制作简单的三形互变动画
3. 自由变形工具
能力目标
1.根据形变类型分析，能完成典型形变小动画制作
2. 根据技能掌握程度，能力争完成综合应用实例
3. 能在实践过程中学会思考并归纳小结
情感目标
1.增加学生对课程的专业情感，为后面的技能学习作铺垫
2.在技能实践中，增强同学间的互助意识，培养合作精神
二、教学重点与难点:
形状渐变动画制作的原理
三、教学方法:
演示比较法
自主探究法、总结归纳法
四、教学手段与教学媒体
多媒体网络教室。
五、教学课时:
2 课时
五、教学过程:
导入：
实例说明:本例制作一个三形互变的动画。其效果是手形变成圆形，圆形变
成方形。实例中应用了形变动画的制作技巧，如果掌握了本例就掌握了形
变动画的制作方法。
技术要点:使用直线工具，椭圆工具和颜料桶工具绘制手形，圆形、方形；
自由变形工具的功能和形变动画制作的方法
教学步骤:
一、形状渐变动画原理
形状渐变是动画制作的常用手法，它只能应用于打散的图形。其计算方法
是在相近的特征处平滑变换。作者可以充分发挥想象力，创作出构思巧妙
的动画作品。
原理：Flash 自动变形技术可以将一种形状自动变形为另一种形状.制天添资源网 http://www.ttzyw.com/
天添资源网 http://www.ttzyw.com/
作者只需要指定起始的图形和结束的图形,中间的过渡部分就可由 Flash 自
动完成.
二、自由变形工具(Free Transform Tool)
自由变形工具用来对选中的对象进行各种变形,包括缩放、旋转、歪斜
及扭曲，等等。该工具有 5 种变形模式，分别是：自由变形模式、 旋转
和歪斜变形模式、缩放变形模式、扭曲模式和环绕变形模式。
三、操作步骤：
1. 新建一个 Flash 文件，
2. 选中第 1 帧，然后选择铅笔工具 ，在舞台中央绘制一手形轮廓，填
充颜色为橘黄色，并将其打散。
3. 选中第 10 帧，插入关键帧，然后选择椭圆工具，在舞台中央绘制一
圆，填充颜色为橘黄色。
4. 选中第 20 帧，插入关键帧，然后选择正方形工具，在舞台中央绘制
一正方形，填充颜色为橘黄色。
5. 选中第 30 帧，插入帧，使得方形在屏幕上停顿几秒钟。
6. 选中第 1 帧，在属性面板中设置如下：Tween----Shape（设置形状渐
变动画）
7. 依次在第 10、20 帧处设置运动属性为：shape（形状渐变动画）
8. 按住 Ctrl+Enter，预览动画。
四、练习
1. 做一个三形互变动画。
2. 练习使用自由变形工具，将图形做缩放，扭曲变形。天添资源网 http://www.ttzyw.com/
天添资源网 http://www.ttzyw.com/
第 2 课时 颜色形状渐变动画
教学目标:
1. 掌握颜色形状渐变动画的制作
2. 了解由大变小、由小变大动画的制作方法
3. 填充调整工具的使用
教学重点与难点:
1. 颜色渐变动画的制作
2. 填充调整工具的使用
实例说明:
本例制作一个颜色不断变化的球体。颜色由绿色变为红色，在从红色变为
兰色，反光部分随之移动。
技术要点:绘制基本图形，填色及使用填充调整工具调整填充效果；使用形
变动画技术制作色彩变化效果
教学方法:
实例演示法
教学课时:
1 课时
教学步骤:
一、填充调整工具（Fill Transform Tool）
填充调整工具可以编辑的填充方式有 3 种：线性渐变填充、辐射渐变填充
和位图填充。下面以线性渐变填充的调整为例来说明该工具的使用方法。
1. 从工具箱中选择填充调整工具
2. 在舞台中选中要调整填充的对象，这时在该对象上将会出现控制柄，
3. 拖动中心控制柄可以调整填充中心的位置。（在 flash 中为学生演示起
效果）
4. 拖动旋转控制柄可以调整填充的方向
5. 拖动比例控制柄可以调整线型的填充范围。
二、操作步骤：
1. 新建 flash 文档
2. 选中第 1 帧，从工具箱中选择椭圆工具，在属性面板中选择颜色按钮，
打开拾色器。按住 shift 键在场景中绘制一个圆形。
3. 选择颜料桶工具，打开拾色器。选择拾色器底部第 2 个色块，然后将
鼠标移动到圆形上方为图形填色。
4. 选择填充调整工具，单击场景中的圆形。这时在圆形周围出现调节句
柄，使用鼠标移动句柄，就可以修改图形反光部分。天添资源网 http://www.ttzyw.com/
天添资源网 http://www.ttzyw.com/
5. 选中第 15 帧，插入关键帧
6. 打开颜料桶工具的拾色器。选择拾色器底部第 3 个色块，然后将鼠标
移动到图形上方为图形填色。使用填充调整工具修改图形反光部分。
7. 选中第 1 帧，在属性面板中设置运动属性为 Shape，在第 1 帧和第 15
帧之间创建形变动画。
8. 在第 30 帧插入关键帧。打开颜料桶工具的拾色器。选择拾色器底部
第 4 个色块，然后将鼠标移动到圆形上方为图形填色。使用填充调整工具
修改图形的反光部分。在第 15 帧和第 30 帧之间创建形变动画。
9. 在第 45 帧插入关键帧。打开颜料桶工具的拾色器。选择拾色器底部
第 5 个色块，然后将鼠标移动到圆形上方为图形填色。使用填充调整工具
修改图形的反光部分。在第 3 帧和第 45 帧之间创建形变动画。
10. 按住 Ctrl+Enter，预览动画。
三、练习
1.按教师所讲，制作动感球体动画。
小结.
教学后记：天添资源网 http://www.ttzyw.com/
天添资源网 http://www.ttzyw.com/
第三节 移形幻影——移动渐变动画
一、教学目标:
知识目标：
1. 掌握 FLASH 动画的分类；
2、掌握渐变动画的制作方法；
3、理解关键帧在动画制作中的作用；
4、理解帧面板参数的设置对动画的影响。
能力目标
1、培养学生自主学习的能力；
２、培养学生的动手操作、综合实践的能力；
３、培养学生的创新能力。
情感目标
1.增加学生对课程的专业情感，为后面的技能学习作铺垫
2.在技能实践中，增强同学间的互助意识，培养合作精神
二、教学重点与难点:
１、渐变动画的制作思想；
2、根据动画效果设置帧面板参数；
三、教学方法:
演示比较法、自主探究法、作品点评法
四、教学手段与教学媒体
多媒体网络教室。
五、教学课时:
1 课时
六、教学过程:
一、复习旧知
1、点评上次课的作业
（1）以网页方式显示全班同学的ＦＬＡＳＨ作业及成绩
（2）表扬作品合符要求或具有创意的同学；
（3）指出并纠正学生作品普遍存在的不足。
利用ＡＳＰ技术制作的“作品评分系统”，让学生了解自己及其他同学的
作业情况，通过对比，互相学习、互相促进。
2、复习上次课的主要内容：
（１）帧、关键帧的概念
（２）打字效果的实现思路
上一节课，我们制作的打字效果动画，使用了传统的动画制作方式，每天添资源网 http://www.ttzyw.com/
天添资源网 http://www.ttzyw.com/
个关键帧放置不同的内容（即，每个关键帧中，增加一个文字），形成了
一个关键帧序列，按一定的时间顺序播放，形成了动画。这种动画制作方
法称为逐帧法，所制作出的动画称为帧并帧动画。如图（2）、图（3）所
示：
从“帧并帧动画”的不足，引入“渐变动画”
二、引入渐变动画
帧并帧动画的优点是变化复杂，可以制作出任何效果，但制作过程比较繁
琐，生成的动画比较大，并没有体现 Flash 的的真正实力，Flash 之所以博
得众人青睐，在于 Flash 的特色------渐变动画。（由此引出 FLASH 动画的
两种类型：帧并帧动画与渐变动画）
1、FLASH 动画分类：帧并帧动画；渐变动画（移动渐变动画、形状渐变
动画）
2、渐变动画欣赏
运用渐变动画轻易就能制作出具有移动、缩放、旋转、形状渐变、色彩渐
变效果的动画，还能控制动画行进的速度，看是要变慢或变快，都随您的
意思。
下面，请大家欣赏运用移动渐变方法制作出来的动画。
三、移动渐变动画的制作方法
1、渐变动画所形成的时间轴
渐变动画是采用了一种独特的过渡变形技术，在动画制作时只需要做出第
一帧与最后一帧的内容，中间帧的动画过程 flash 会自动为您完成渐变动画
有移动渐变和形状渐变两种类型，各自有不同的动画效果以及作用的对象。
本节课，我们来学习移动渐变动画。
2、制作移动渐变动画的三个必要条件
（１）至少存在两个关键帧；
（２）在关键帧中包含必要的实体、组合体、文字等；
（３）设定移动渐变的动画过渡。
3、教师示范（以文字对象为例）
提示：文字对象由一个方框包围，是一个组合体。
具体步骤：
（１）设置背景：新建一个 FLASＨ文件，设置“影片属性”：背景：深
蓝色；高度：400 px 宽度：200 px
（２）编辑第一个关键帧：选择“文字”工具，在场景的第一帧输入文字
“冬”，并把文字拖到场景顶部；
（３）编辑最后一个关键帧：右击时间轴的第２０帧，插入关键帧，并把
文字“冬”拖到场景的底部；
（４）设置移动渐变过渡： 天添资源网 http://www.ttzyw.com/
天添资源网 http://www.ttzyw.com/
①在时间轴的第１到１９帧任意位置右击鼠标，选择弹出菜单“面板”／
“帧”；
②“帧”面板选择“运动”过渡；
③“帧”面板中，设置“加减速”和“旋转”属性：加减速：－100 旋
转：顺时针 2 次
借助“洋葱皮”工具，让学生了解文字运动的轨迹。
演示一些制作精良、效果眩目的渐变动画，从而激发学生的学习兴趣。
通过时间轴,可以明显看出”帧并帧动画”与”渐变动画”的区别,从而使
学生对两者的区别有感性认识。
教师以文字对象作示例，而让学生以图形对象做练习，目的是让学生加深
记忆：文字对象是组合体，而纸飞机是散状的图形，必须组合才能成功生
成动画。
以“洋葱皮工具”强调中间过程会自动生成，不必像“帧并帧动画”那样
---每个状态都设立一个关键帧，“渐变动画”简化了制作步骤。
4、学生模仿练习
要求：一架纸飞机从左上角向右下角俯冲
5、教师纠错并示范：
◇错误：有些同学没有把纸飞机组合，因此生成动画失败，帧格以虚线显
示，所形成的动画无法实现；
◇解决方法：把纸飞机"编组"，形成组合体。
四、实例演练
１、出示任务：一朵飘零的雪花
２、分析任务：
（1）在第一个关键帧制作雪花，并转换成组件；
（2）编辑最后一个关键帧，设置雪花的透明度，并缩小；
小结.
教学后记：天添资源网 http://www.ttzyw.com/
天添资源网 http://www.ttzyw.com/
第四节 多姿多彩——多图层动画
一、教学目标:
知识目标：
１、运动动画的初步掌握
２、层概念的理解以及重命名
能力目标
培养学生的动手操作、综合实践的能力；
情感目标
增加学生对课程的专业情感，为后面的技能学习作铺垫
二、教学重点与难点:
多层动画的理解
三、教学方法:
演示比较法、自主探究法、作品点评法
四、教学手段与教学媒体
多媒体网络教室。
五、教学课时:
1 课时
六、教学过程:
导入：
一、运动动画
运动动画就是 Motion 动画，它是一种常见的动画形式。制作运动动画
的要点是如何控制物体沿路径作不规则运动。
引导层（Motion Guide）可以在引导层中绘制一条任意形状的路径，
然后把其它层链向引导层，使该层中的物体沿引导层中所绘制的路径运动。
当然也可以将多个层链向同一个引导层，使多个对象沿同一路径运动。
二、1.层的概念
层可以看成是叠放在一起的透明胶片，如果层上没有任何东西的话，
就可以透过它直接看到下一层。所以我们可以根据需要，在不同层上编辑
不同的动画而互不影响，并在放映时得到合成的效果。使用图层并不会增
加动画文件的大小，相反它可以更好地帮助我们安排和组织图形。
3. 层的属性
4. 隐藏和显示层：当层处于显示状态时，该层名称右边位于 图
标的那列显示为小黑点；当层处于隐藏状态时，则相应位置显示天添资源网 http://www.ttzyw.com/
天添资源网 http://www.ttzyw.com/
为 。单击处于显示状态的层中的 图标那列的小黑点，小黑
点将会变为 ，层中的内容就隐藏起来。相反，单击层中的 ，
相应的位置将会出现小黑点，层中的内容将会显示出来。
锁定和解锁层：当层处于解锁状态时，该层名称的右边位于 图标的那列
显示为小黑点，这时该层的内容可以被编辑。单击该小黑
点，这时小黑点变成 ，层被锁定，该层中的内容无法进
行编辑。在单击 图标，即可将该层解锁。
3.层的重命名：
双击层的名称，这时层的名称变为可编辑的文本框，在文本框中输入层的
名称，然后按 Enter 键即可。三、操作步骤：
1. 新建 Flash 文档，单击舞台，在属性面板中设置背景颜色为：黑色。
帧速率为：6。
2、修改第 1 层的名字为：地球；选中第 1 帧，单击椭圆工具，在拾色器
中选择第 1 个颜色，在舞台中画入一个圆；选中该圆，按住组合键
CTRL+G（组合功能），将圆组合为一个整体，用兰色矩形选中。
3. 在第 10、15、20、30、40 帧处插入关键帧。并在第 1—10、10—15、
15—20、20—30、30—40 之间创建运动动画。方法：单击第 1 帧，在
属性面板中设置 Tween—Motion。
4. 单击菜单栏上的 Insert---Motion Guide，创建引导层。
5.锁住地球层，选中引导层，单击工具箱中的铅笔工具，将颜色设置为黑
色，然后在舞台中央绘制一个椭圆。
1. 锁住引导层，解锁地球层；选中地球层，分别将第 1、10、15、20、
30、40 帧处的地球放置在椭圆的不同的位置处，使得椭圆和引导线相
交。
单 击 引 导 层 ， 单 击 菜 单 栏 上 的
Insert——layer，插入新的一层：layer3，并将 layer3 重命名为太阳。
2. 锁住引导层和地球层；选中太阳层，在第 1 帧处，单击椭圆工具，边
框颜色为兰色，绘制一个椭圆，并将其填充删除；然后移动到与引导
层中椭圆相重合的位置。最后在轨道的中间利用椭圆工具绘制一个太
阳，太阳的填充颜色为拾色器中的第二个颜色。
3. 在第 10、15、20、30、40 帧处插入关键帧。并在每一帧中调整太阳的
填充位置（目天添资源网 http://www.ttzyw.com/
天添资源网 http://www.ttzyw.com/
的：使得太阳随着阴影的变换形成动的感觉，类似动感球体的制作）。
并在第 1—10、10—15、15—20、20—30、30—40 之间创建形状渐变
动画。
4. 锁住引导层、地球层和太阳层；单击菜单栏上的 Insert——layer，
插入新的一层：layer4，并将 layer4 重命名为星星。
5. 在星星层中的第 1 帧，单击工具箱中的刷子工具，刷子样式选择最小，
颜色为：黄色；然后在舞台中绘制一个十字；
6. 选中该十字，将鼠标放在选中的十字上，按住左键同时按住 Ctrl 键，
移动鼠标到不同的位置，复制出一个星星。依法在舞台中复制多个星
星。
7. 在第 20、40 帧处插入关键帧；并在第 1—20，20—40 之间建立形状渐
变动画。
8. 选中第 20 帧，选中全部星星，设置填充颜色为白色。不规则的选中星
星，按住小键盘上的箭头键作微小移动。美丽星空图到此完成。
9. 按住 Ctrl+Enter，预览动画。天添资源网 http://www.ttzyw.com/
天添资源网 http://www.ttzyw.com/
第二课时
图层的基本操作
图层是什么，它在 Flash 中起到什么作用？这是初学者迷惑的问题。形象
地说，图层可以看成是叠放在一起的透明胶片，如果层上没有任何东西的
话，你就可以透过它直接看到下面的层。所以我们可以根据需要，在不同
的层上编辑不同的动画而互相不影响，并在放映时得到合成的效果。使用
图层不会增加动画文件的大小，相反它可以更好地帮助我们安排和组织图
形，文字和动画。图层的概念是 Flash 中最基本而且重要的内容，因而需
要很好的掌握。
1.新增图层
添加图层的方法是执行【插入】/【时间轴】/【图层】菜单命令，或者在
【时间轴】面板上，点击插入图层按钮 ，这样就会在事先选定的图层上
方出现新建的图层。
2.图层重命名
图层重命名的方法很简单，只要在你想要命名的图层名称上双击两下鼠标
左键，就可以更改这个图层的名字了，不难吧？
3.选取图层
图层的选取，只要你将鼠标放到你所需要的图层上，轻轻点击一下鼠标左
键就可以了。
4.删除图层
当遇到你不需要的图层时，你可以在【时间轴】面板上，点击删除图层按
钮 ，这样就会将事先选定的图层丢掉了。
5.隐藏图层
在有些时候我们需要临时隐藏某些图层上的效果，如果这样的话，你可以
将该层右边的眼睛图标 关掉，那样你就看不到它了。
6.锁定图层
这个功能一般在图层文件比较繁多的情况下使用，它可以防止我们在修改
过程中不小心破坏其它图层效果的意外发生。
我们在图层的右边找到锁定图层按钮 ，点选它就可以锁定图层了。
7．图层文件夹
图层文件夹主要的作用是用来管理和归类图层用的，合理的利用它可以让
你在有限的空间里管理大量的图层，它的作用和磁盘上的文件夹的作用一
我们在【时间轴】面板上，点击 图标，这样就会在时间轴面板上增加图
层文件夹了，然后你可以将图层文件拖入到文件夹中。
图层是 Flash 动画制作中不可缺少的一个环节，图层的管理尤显得非常重天添资源网 http://www.ttzyw.com/
天添资源网 http://www.ttzyw.com/
要，如果你能养成良好的图层管理和使用的习惯，那将是你迈进 Flash 大
门的关键一步。
四、小结：
教学后记：天添资源网 http://www.ttzyw.com/
天添资源网 http://www.ttzyw.com/
第三章 FLASH 特效动画
第一节 请跟我来——引导层动画
一、教学目标:
知识目标：
引导层与链接层的理解
能力目标
培养学生的动手操作、综合实践的能力；
情感目标
通过实践操作和评价作品，充分激活学生探究思维和创新思维。培养学的
探究精神。
二、教学重点与难点:
１、引导图层的含义和建立方法、作用。
２、运用引导图层，解决径向运动问题
三、教学方法:
演示比较法、自主探究法、作品点评法
四、教学手段与教学媒体
多媒体网络教室。
五、教学课时:
1 课时
六、教学过程:
导入：
单纯依靠设置关键帧，有时仍然无法实现一些复杂的动画效果，有很多运
动是弧线或不规则的，如月亮围绕地球旋转、鱼儿在大海里遨游等，在 Flash
中能不能做出这种效果呢？
答案是肯定的，这就是“引导路径动画”。
将一个或多个层链接到一个运动引导层，使一个或多个对象沿同一条路径
运动的动画形式被称为“引导路径动画”。这种动画可以使一个或多个元
件完成曲线或不规则运动。
1．创建引导路径动画的方法
（1）创建引导层和被引导层
一个最基本“引导路径动画”由二个图层组成，上面一层是“引导层”，
它的图层图标为 ，下面一层是“被引导层”，图标 同普通图层一样。
在普通图层上点击时间轴面板的“添加引导层”按钮 ，该层的上面就会
添加一个引导层 ，同时该普通层缩进成为“被引导层”，如图 3-6-1 所示。
（2）引导层和被引导层中的对象 天添资源网 http://www.ttzyw.com/
天添资源网 http://www.ttzyw.com/
引导层是用来指示元件运行路径的，所以“引导层”中的内容可以是用钢
笔、铅笔、线条、椭圆工具、矩形工具或画笔工具等绘制出的线段。
而“被引导层”中的对象是跟着引导线走的，可以使用影片剪辑、图形元
件、按钮、文字等，但不能应用形状。
由于引导线是一种运动轨迹，不难想象，“被引导”层中最常用的动画形
式是动作补间动画，当播放动画时，一个或数个元件将沿着运动路径移动。
（3）向被引导层中添加元件
“引导动画”最基本的操作就是使一个运动动画“附着”在“引导线”上。
所以操作时特别得注意“引导线”的两端，被引导的对象起始、终点的 2
个“中心点”一定要对准“引导线”的 2 个端头，如图 3-6-2 所示。
我们特地把“元件”的透明度设为 50%，使你可以透过元件看到下面的
引导线，“元件”中心的十字星正好对着线段的端头，这一点非常重要，
是引导线动画顺利运行的前提。
2．应用引导路径动画的技巧
（1）“被引导层”中的对象在被引导运动时，还可作更细致的设置，比如
运动方向，把【属性】面板上的【路径调整】前打上勾，对象的基线就会
调整到运动路径。而如果在【对齐】前打勾，元件的注册点就会与运动路
径对齐，
（2）引导层中的内容在播放时是看不见的，利用这一特点，可以单独定
义一个不含“被引导层”的“引导层”，该引导层中可以放置一些文字说
明、元件位置参考等，此时，引导层的图标为 。
（3）在做引导路径动画时，按下工具栏上的【对齐对象】功能按钮 ，可
以使“对象附着于引导线”的操作更容易成功。
（4）过于陡峭的引导线可能使引导动画失败，而平滑圆润的线段有利于
引导动画成功制作。
（5）被引导对象的中心对齐场景中的十字星，也有助于引导动画的成功。
（6）向被引导层中放入元件时，在动画开始和结束的关键帧上，一定要
让元件的注册点对准线段的开始和结束的端点，否则无法引导，如果元件
为不规则形，可以按下工具栏上的任意变形工具 ，调整注册点。
（7）如果想解除引导，可以把被引导层拖离“引导层”，或在图层区的引
导层上单击右键，在弹出的菜单上选择【属性】，在对话框中选择“正常”
作为图层类型. 图层【属性】面板
（8）如果想让对象作圆周运动，可以在“引导层”画个圆形线条，再用
橡皮擦去一小段，使圆形线段出现 2 个端点，再把对象的起始、终点分别
对准端点即可。
（9）引导线允许重叠，比如螺旋状引导线，但在重叠处的线段必需保持
圆润，让 Flash 能辨认出线段走向，否则会使引导失败。天添资源网 http://www.ttzyw.com/
天添资源网 http://www.ttzyw.com/
制作步骤
（1）创建影片文档
新建一个影片文档，舞台尺寸设置为 450*300 象素，【背景色】设置为深
蓝色.
文档属性
（2）创建元件
本例中的元件较前面的实例要多一些，我们把它们分成“水泡部分”、“海
底部分”、“游鱼部分”三个部分来叙述。先来创建和水泡有关的部分。
1、 创建“单个水泡”元件
执行【插入】|【新建元件】命令，新建一个图形元件，名称为“单个水
泡”。先在场景中画一个无边的园，颜色任意，大小为 30*30，再设置混色
器面板的参数，四个调节手柄全为白色，Alpha 值从左向右依次为 100％、
40％、10％、100％，如图 3-6-21 所示，用油漆筒工具 在画好的圆的中心
偏左上的地方点一下，如对填充的颜色不满意，可以用填充变形工具 进
行调整。
水泡（放大 400 倍）、填充位置及混色器面板参数
2、 创建“一个水泡及引导线”元件
执行【插入】|【新建元件】命令，新建影片剪辑，名称为“一个水泡及引
导线”。点击添加引导层按钮 添加一个引导层，在此层中用铅笔工具
从场景的中心向上画一条曲线并在第 60 帧处加普通帧。在其下的被引导
层的第一帧，拖入库中的名为“单个水泡”的元件，放在引导线的下端，
在第 60 帧加关键帧，把“单个水泡”元件移到引导线的上端并设置 Alpha
值为 50％，
水泡及引导线
3、 创建“成堆的水泡”元件
执行【插入】|【新建元件】命令，新建一个影片剪辑，名称为“成堆的水
泡”。从库里拖入数个“一个水泡及引导线”元件，任意改变大小位置，。
成堆的水泡（放大 200 倍）
4 、创建“鱼及引导线”元件
执行【插入】|【新建元件】命令，新建一个影片剪辑，名称为“鱼及引导
线”。此元件只有引导层和被引导层二层，点击时间轴面板上的添加引导
层图标 ，新建引导层，在引导层中用铅笔工具 画一条曲线作鱼儿游动时
的路径，在被引导层中执行【文件】|【导入到场景】命令，将本实例中的
名为“鱼”的元件导入到场景中，在第 1 帧及第 100 帧中分别置于引导线
的两端，在第一帧中建立补间运动动画，在【属性】面板上的【路径调
整】、【同步】、【对齐】三项前均打勾，
鱼及引导线 天添资源网 http://www.ttzyw.com/
天添资源网 http://www.ttzyw.com/
下面我们来创建海底实例中“水波荡漾”效果所需的元件。
5、 创建“海底”元件
执行【插入】|【新建元件】命令，新建一个图形元件，名称为“海底”。
选择第一帧，然后再执行【文件】|【导入到场景】命令，将本实例中的名
为“海底.bmp”的图片导入到场景中。
6、创建“遮罩矩形”元件
执行【插入】|【新建元件】命令，新建一个图形元件，名称为“遮罩矩
形”。在场景中画一个 500*4 的无边矩形，因为“遮罩层”中的图形在播
放时不会显示，所以颜色任意。
复制并粘贴这个矩形，向下移一点位置，使其变成二个，再复制并粘贴这
二个矩形，再向下移一点位置，使其变为四个，如此循环，直至创建出一
个 500*540 的矩形，如图 3-6-26 所示。
遮罩矩形
7、创建“水波效果”元件
水波荡漾的效果是用遮罩动画的手法做的，看着挺漂亮，实际制作却
很简单，只用三层就完成了，里面有二个小技巧，在下面的讲解过程中会
着重介绍。
执行【插入】|【新建元件】命令，新建一个影片剪辑，名称为“水波效
果”，。
创建“水波效果”元件
先把最下面图层作为当前编辑图层，从库里拖入名为“海底”的图形元
件，在【属性】面板上设置元件的 X 值为 0，Y 值为 0，在时间帧上点一
下右键，在弹出菜单中选择【复制帧】，在第 100 帧加普通帧。
然后新建一个图层，在这层的第一帧上点一下右键，在弹出菜单中选择
【粘贴帧】，就把刚才的元件粘到第二层里了，在【属性】面板上设置此
元件的 X 值为 0，Y 值为 1，Alpha 值为 80％，在第 100 帧加普通帧。
注意：这里是一个技巧：第二层图片与第一层图片的位置差决定水波荡漾
的大小！位置差越大，水波越大，其 Alpha 值的大小决定水波的清晰程度，
Alpha 值越大，水波越清晰，反之越模糊。
是第一层和第二层中两张图片在 X，Y 轴的位置的不同的对比。
两张图片在场景中的位置对比
要实现水波荡漾，光有二层图片是不行的，还要用遮罩动画实现光线的明
暗变化才行,这样，才能产生水的流动感。
新建一层，在第 1 帧上拖入库中名为“遮罩矩形”的元件，注意下面的边
缘对着“海底图片”的下边缘。在第 100 帧上加关键帧，拖动“遮罩矩
形”，使其上边缘对着“海底图片”的上边缘，在第 1 帧创建补间动作动
画。 天添资源网 http://www.ttzyw.com/
天添资源网 http://www.ttzyw.com/
遮罩层中矩形元件的位置
至此，这个动画所需的基本构件已经制作完成，大功告成，接下来还必
需在场景中把各个构件“组装”起来。
在主场景中一共需要 5 个图层，我们由下而上一层一层地叙述，请随时参
考图.
（3）创建动画
1、 创建背景层
从库中把名为“水波效果”的元件拖到场景中，在第 134 帧加普通帧，该
层命名为“背景”。
2、 创建水泡层
新建名为“水泡”的图层，在第 1 帧，第 30 帧从库里把名为“成堆的水
泡”的元件拖到场景中来，数目、大小、位置任意，在第 134 帧加普通帧。
3、 创建游鱼层
新建名为“鱼”的图层，从库里把名为“鱼及引导线”的元件拖放到场景
的左侧，数目、大小、位置任意，在第 134 帧加普通帧。
图片、鱼、水泡的位置
从场景中你是否发现，我们在制作过程中免不了会在场景外放置一些对
象，这些“场外对象”在本地播放器中不会出现，而当你在网上发布 swf
文件时，由于网站（尤其各种论坛）默认的 swf 文件的尺寸不尽相同，有
的会显示出“场外对象”，这好比一个舞台剧演出时，幕后候台演员的情
况也暴露出来，非常不美观，怎么办呢？
记得在谈到“遮罩动画”时，我们曾提到过“遮罩”的另外一个作用是
“用来遮罩全部场景或某个特殊区域”，那么，下面就试试用遮罩来为我
们管理舞台界面！
步骤 5 创建遮罩层
在场景中画一个无边矩形，大小为 450*300，盖住全部场景，设此层为遮
罩层，此时下面的声音层自动缩进被遮罩了，用鼠标左键分别按住下面的
各层，向上略移一点点，松手，各层就会自动缩进被遮罩了，这样，在播
放时，我们就只能看到场景中的情形了，场景外的元件被遮罩
教学后记：天添资源网 http://www.ttzyw.com/
天添资源网 http://www.ttzyw.com/
第二节 不识庐山真面目——遮罩动画
一、教学目标:
知识目标：
1.遮罩动画的概念
2.遮罩”的应用技巧
能力目标
１、通过师生共同分析遮罩的实例，加深学生对于遮罩原理的理解；
２、让学生自主实践，使学生能够迅速掌握遮罩效果的制作方法；
３、培养学生自主学习能力、探索创新能力和综合运用知识的能力。
情感目标
１、感受运用 Flash 动画软件创造作品的乐趣；
２、体验信息技术蕴含的文化内涵，形成和保持对信息技术的求知欲。二、
二、教学重点与难点:
遮罩”的应用技巧
三、教学方法:
演示比较法、自主探究法、作品点评法
四、教学手段与教学媒体
多媒体网络教室。
五、教学课时:
1 课时
六、教学过程:
导入：
在 Flash 的作品中，我们常常看到很多眩目神奇的效果，而其中不少就是
用最简单的“遮罩”完成的，如水波、万花筒、百页窗、放大镜、望远
镜……等等。
那么，“遮罩”如何能产生这些效果呢？
在本节，我们除了给大家介绍“遮罩”的基本知识，还结合我们的实际经
验介绍一些“遮罩”的应用技巧，最后，提供二个很实用的范例，以加深
对“遮罩”原理的理解。
在 Flash 中实现“遮罩”效果有二种做法，一种是用补间动画的方法，一
种是用 actions 指令的方法，在本节中，我们只介绍第一种做法。
1．遮罩动画的概念
（1）什么是遮罩
“遮罩”，顾名思义就是遮挡住下面的对象。
在 Flash8.0 中，“遮罩动画”也确实是通过“遮罩层”来达到有选择地显示天添资源网 http://www.ttzyw.com/
天添资源网 http://www.ttzyw.com/
位于其下方的“被遮罩层”中的内容的目地，在一个遮罩动画中，“遮罩
层”只有一个，“被遮罩层”可以有任意个。
（2）遮罩有什么用
在 Flash8.0 动画中，“遮罩”主要有 2 种用途，一个作用是用在整个场景或
一个特定区域，使场景外的对象或特定区域外的对象不可见，另一个作用
是用来遮罩住某一元件的一部分，从而实现一些特殊的效果。
2．创建遮罩的方法
（1）创建遮罩
在 Flash8.0 中没有一个专门的按钮来创建遮罩层，遮罩层其实是由普通图
层转化的。你只要在要某个图层上单击右键，在弹出菜单中把“遮罩”前
打个勾，该图层就会生成遮罩层，“层图标”就会从普通层图标 变为遮罩
层图标 ，系统会自动把遮罩层下面的一层关联为“被遮罩层”,在缩进的
同时图标变为 ，如果你想关联更多层被遮罩，只要把这些层拖到被遮罩
层下面就行了，如图 3-5-1 所示。
（2）构成遮罩和被遮罩层的元素
遮罩层中的图形对象在播放时是看不到的，遮罩层中的内容可以是按钮、
影片剪辑、图形、位图、文字等，但不能使用线条，如果一定要用线条，
可以将线条转化为“填充”。
被遮罩层中的对象只能透过遮罩层中的对象被看到。在被遮罩层，可以使
用按钮，影片剪辑，图形，位图，文字，线条。
（3）遮罩中可以使用的动画形式
可以在遮罩层、被遮罩层中分别或同时使用形状补间动画、动作补间动画、
引导线动画等动画手段，从而使遮罩动画变成一个可以施展无限想象力的
创作空间。
3．应用遮罩时的技巧
1、遮罩层的基本原理是：能够透过该图层中的对象看到“被遮罩层”中
的对象及其属性（包括它们的变形效果），但是遮罩层中的对象中的许多
属性如渐变色、透明度、颜色和线条样式等却是被忽略的。比如，我们不
能通过遮罩层的渐变色来实现被遮罩层的渐变色变化。
2、要在场景中显示遮罩效果，可以锁定遮罩层和被遮罩层。
3、可以用“AS”动作语句建立遮罩，但这种情况下只能有一个“被遮罩
层”，同时，不能设置_alpha 属性。
4、不能用一个遮罩层试图遮蔽另一个遮罩层。
5、遮罩可以应用在 gif 动画上。
6、在制作过程中，遮罩层经常挡住下层的元件，影响视线，无法编辑，
可以按下遮罩层时间轴面板的显示图层轮廓按钮 ，使之变成 ，使遮罩层
只显示边框形状，在种情况下，你还可以拖动边框调整遮罩图形的外形和天添资源网 http://www.ttzyw.com/
天添资源网 http://www.ttzyw.com/
位置。
7、 层中不能放置动态文本。
知识提要
1、 线条转化为填充
2、 建遮罩动画
3、使用变形面板
4、任意变形工具中“注册点”的应用
5、学习使用橡皮工具中的“水笼头”工具和擦除线条
（1）创建影片文档
1、设置影片文档属性
执行【文件】|【新建】命令，在弹出的面板中选择【常规】|【Flash 文档】
选项后，点击【确定】按钮，新建一个影片文档，在【属性】面板上设置
文件大小为 400*400 象素，【背景色】为黑色。（在教程中，我们为了更好
的显示场景中的内容，背景色设为了深蓝色），如图 3-5-3 所示。
文档【属性】面板
（2）创建元件
1、 创建“闪光线条”元件
执行【插入】|【新建元件】命令，新建一个图形元件，名称为“闪光线
条”。选择工具栏上的直线工具 ，在场景中画一直线，在【属性】面板上
作如图 3 设置。
闪光线条的【属性】面板参数设置
2、 创建“闪光线条组合”元件
执行【插入】|【新建元件】命令，新建一个图形元件，名称为“闪光线条
组合”
创建闪光线条元件
从库中将名为“闪光线条”的元件拖入新元件编辑窗口的场景中，在 X 轴
上的位置为-200，Y 轴为 20。然后单击工具栏上的任意变形工具 ，此时
元件的中心会出现一个小白点，它就是对象的“注册点”，用鼠标左键按
住它，拖到场景的中心处松手。
中的“1”显示的是注册点在元件的中心时的情形，“2”显示的是注册点
已拖到场景中心时的情形。
移动注册点到场景的中心
然后执行【窗口】|【设计面板】|【变形】命令，打开变形面板，选中
【旋转】，角度为 15 度，连续按下【复制并应用变形】按钮，在场景中复
制出的效果。
变形面板及复制好的元件
在时间轴的关键帧上点一下，选中全部图形，执行【修改】|【分散】命令，天添资源网 http://www.ttzyw.com/
天添资源网 http://www.ttzyw.com/
把线条打散，再执行【修改】|【形状】|【将线条转化为填充】命令，将线
条转变为形状。
3、 创建“闪光”元件
执行【插入】|【新建元件】命令，新建一个影片剪辑，名称为“闪光”，
创建“闪光”元件
单击【确定】后进行“新元件编辑窗口”，接着把库里名为“闪光线条组
合”的元件拖到场景中，对齐中心点，复制此元件，在第 30 帧处加关键
帧，再回到第 1 帧中建立补间动作动画，【属性】面板上设置顺时针旋转
一周。
然后新建一层，在第 1 帧中执行【编辑】|【粘贴到当前位置】命令，使二
层中的“闪光线条组合”完全重合，再执行【修改】|【变形】|【水平翻转】
命令，让复制过来的线条和第一层的线条方向相反，在场景中形成交叉的
图形。
在第 30 帧处建立关键帧，在第 1 帧中建立动作补间动画，【属性】面板上
设置逆时针旋转一周，最后将此层设为遮罩层，如图 3-5-10 所示。图中显
示的是“闪光”元件的时间轴面板和各图层中的动画设置。
“闪光”元件编辑界面
4、 创建“红星”元件
执行【插入】|【新建元件】命令，新建一个图形元件，名称为“红星”。
我们要在这个元件中画一个漂亮的红星，为了画好红星，我们分九步来叙
述具体的画法中
红星的九步画法
第一步，按住 shift 键，从场景中心向上画一根黄色的线条，如图 3-5-11 中
的“1”所示。
第二步，选择工具箱中的任意变形工具 ,在画好的线条上点一下，这里，
线条的中心出现一个白色的小园点，我们叫它“注册点”。如图 3-5-11 中
的“2”所示。
第三步，鼠标左键按住这个小白点，拖到线条的最下端，这是因为我们要
让线条要以下端为中心旋转复制。如图 3-5-11 中“3”所示。
第四步，执行【窗口】|【设计面板】|【变形】，打开变形面板，各参数设
置如图 3-5-12。
按下【复制并应用变形】按钮四次，就会在场景中每隔 72 度复制出一根
线条，五个线条的顶端构成五角星的五个顶点。如图 3-5-11 中的“4”所
示。
变形面板
第五步，用绿色线条分别连接五根线条的顶端，五角星的模样已经出来了，
如图 3-5-11 中“5”所示。 天添资源网 http://www.ttzyw.com/
天添资源网 http://www.ttzyw.com/
第六步，用白色线条分别连接五角星中心和上一步连线的中点，如图 3-5-11
中“6”所示。
第七步，选择工具栏上的橡皮工具 ，在工具栏下面的选项中选择“水笼
头”工具 ，在多余的线段上点一下，去除线段，修整好的五角星如图 3-5-11
中的“7”所示。
第八步，用油漆筒工具给五角星上色，每个角的左右颜色可略有区别，增
加立体感，。
第九步：再选择橡皮工具 ，点开 旁边的小三角，在“擦除线条”前打勾，
用橡皮工具擦去红星上的线条，一颗漂亮的红星就做成了，
技巧：在 Flash8.0 中，还可以用更简单的方法画红星，选择工具栏上的多
角星形工具，
（3）创建动画
回到主场景中，把“闪光”元件拖入第二层，新建二层，第三层中拖入
“红星”元件，在场景的下方写下白色的“闪客启航电影制片厂”的文字，
完成后的时间帧面板及场景
时间轴及场景
按 Ctrl+Enter 组合键，测试动画。此时，你欣赏着自己亲手做的“闪闪红
星”动画，心中再回想一下“遮罩”在动画中的作用，是否已经感受到
“罩这一功能的神奇.
教学后记：天添资源网 http://www.ttzyw.com/
天添资源网 http://www.ttzyw.com/
第四章 你来我往、交互动画
第一节 一触即发——制作按钮
一、教学目标:
知识目标：
制作按钮的方法
能力目标
培养学生自主学习能力、探索创新能力和综合运用知识的能力。
情感目标
体验信息技术蕴含的文化内涵，形成和保持对信息技术的求知欲。
二、教学重点与难点:
如何制作按钮
三、教学方法:
演示比较法、自主探究法
四、教学手段与教学媒体
多媒体网络教室。
五、教学课时:
1 课时
六、教学过程:
导入：
按钮元件
按钮元件是 Flash 的基本元件之一，它具有多种状态，并且会响应鼠标事
件，执行指定的动作，是实现动画交互效果的关键对象。
从外观上，按钮可以是任何形式。比如，可能是一幅位图，也可以是矢量
图；可以是矩形，也可以是多边形；可以是一根线条，也可以是一个线框；
甚至还可以是看不见的“透明按钮”。
影片剪辑在按钮元件中的应用范例－放电按钮
本小节要制作一个放电的按钮，当鼠标放到按钮上，发出夺目的光芒，炫
耀无比。
放电按钮
1．创建“放电”影片剪辑元件
（１）新建一个 Flash8 影片文档，设置舞台尺寸为 200×50 像素，背景颜
色设置为蓝色，其他保持默认设置。天添资源网 http://www.ttzyw.com/
天添资源网 http://www.ttzyw.com/
（2）新建一名为“放电”的影片剪辑元件。在这个元件的编辑场景中，
选择“线条工具”，笔触颜色为“白色”，在场景中画一段约 20 像素折线。
3）在第３帧插入关键帧，用“任意变形工具”将场景中的折线向左拉约
至 60 像素。
（4）单击第 1 帧，打开“属性”面板，创建“补间形状”。在第５帧插入
帧。
（5）新建“图层 2”。在第３帧插入空白关键帧。选择“椭圆工具”，无笔
触颜色。打开“混色器”面板，设置填充样式为“放射状”，左色标为白
色，Alpha 值 100％，右色标也为白色，Alpha 值 0％，如图 4-42 所示。
混色器”面板
在场景中画一个圆。打开“属性”面板，将其大小设定为（120×126）。
将其拖放到折线的左端。
2．创建“放电按钮”元件
（１）新建一名为“放电按钮”的按钮元件。在这个元件编辑场景中，将
“图层 1”更名为“按钮”。双击“矩形工具”，在弹出的“矩形设置”对
话框中设置“边角半径”为“20 点”，
设置矩形的边角半径
设置“笔触颜色”为无，“填充色”任意，在场景中画一个矩形。打开“属
性”面板，设置这个矩形的大小为 250×45 像素，坐标为（0，0）。
（２）选中矩形，打开“混色器”面板，填充类型为“线性”，增加一个
色标，自左向右三个色标颜色值为“#000000、#AFB5FA、#333333”，对
矩形进行填充。
３）选中矩形，单击“填充变形工具”，旋转“旋转手柄”90 度，向下拉
动“缩放”手柄，调整填充色如图 4-46 所示。
调整渐变填充
（４）在“点击”帧按 F6 插入关键帧。
（５）新建一名为“发光”的图层。右击“按钮”层“弹起”帧，在弹出
的快捷菜单中选“复制帧”命令；右击“发光”图层“弹起”帧，在弹出
的快捷菜单中选“粘贴帧”命令。选中“发光”层的矩形，打开“混色器”
面 板 ， 设 置 如 图 4-47 所 示 。 自 左 向 右 色 标 颜 色 值 为 “ #FFFFFF 、
#B7C7FF、#858ABF”。
发光填充色设置
在“指针经过”帧按 F6 插入关键帧，选中矩形，选择“填充变形工具”，
向右稍稍拖动“缩放”手柄。在“点击”帧按 F7 插入空白关键帧。
（６）新建一名为“白光”的图层。在该图层“弹起”帧，选用“椭圆工天添资源网 http://www.ttzyw.com/
天添资源网 http://www.ttzyw.com/
具”绘制一个无笔触颜色的圆。选中圆，打开“混色器”面板，设置如图
4-48 所示，自左向右色标颜色值为“#000000、#AFB5FA、#333333”。打
开“属性”面板，设置圆的大小为 60×60 像素，坐标为（-87，-7）。在
“点击”帧按 F7 插入空白关键帧。
白光填充色设置
（7）新建一名为“圆球”的图层。在该图层“弹起”帧，选用“椭圆工
具”绘制一个无笔触颜色的圆。选中圆，打开“混色器”面板，设置如图
4-49 所示。自左向右色标颜色值为“#DDDFFC、#ABB2FA、#424366”。
打开“属性”面板，设置圆的大小为 50×50 像素，坐标为（-81,-2）。在
“点击”帧按 F7 插入空白关键帧。
圆球填充色设置
（8）新建一名为“动画”的图层。在“指针经过”、“点击”帧按 F7 插入
空白关键帧。选择“指针经过”帧，打开“库”面板，将库中的“放电”
元件拖入场景。打开“属性”面板，设置其坐标为（-19，11）。
（9）新建一名为“文字”的图层，在“弹起”帧输入文字“Button”。打
开“属性”面板，设置字体为“Arial Black”，字母间距“12”，字体大小
“24”，文本颜色“#000000”；在“指针经过”帧插入关键帧，改变字体
颜色“#444444”；在“按下”帧插入关键帧，改变字体颜色“#808080”；
在“点击”帧插入空白关键帧。
至此，按钮元件制作完毕，其时间轴图层结构。
图层结构
转回“场景 1”，将“放电按钮”元件从库中拖入主场景中央，即完成本节
范例。
本小节制作按钮，主要是在按钮某个帧上添加动画效果（影片剪辑元件），
从而组合成一款炫丽的动态按钮。
教学后记：天添资源网 http://www.ttzyw.com/
天添资源网 http://www.ttzyw.com/
第二节 跟着感觉走——简单 Action
一、教学目标:
知识目标：
掌握简单 Action 命令的基本操作方法
能力目标
培养学生的探究能力和钻研精神。
情感目标
让学生通过成功的作品，更多地体验成就感，进一步激发他们的创造欲望。
二、教学重点与难点:
１、简单 Action 命令的基本操作方法
２、学生在教师的组织、帮助和指导下自主探究及利用教学网络进行交流。
三、教学方法:
演示比较法、自主探究法
四、教学手段与教学媒体
多媒体网络教室。
五、教学课时:
1 课时
教学过程:
导入：
1.停止命令 stop
格式： stop()
功能： 停止正在播放的动画。此命令没有参数。
2.播放命令 play
格式： play()
功能： 当动画被停止播放之后，使用 play 命令使动画继续播放。
此命令没有参数。
3.停止播放声音命令 stopAllSounds
格式： stopAllSounds()天添资源网 http://www.ttzyw.com/
天添资源网 http://www.ttzyw.com/
功能： 在不停止播放头的情况下停止 SWF 文件中当前正在播放的
所有声音。此命令没有参数
4.跳转播放命令 gotoAndPlay
格式： gotoAndPlay([scene,] frame)
参数： scene （场景），可选字符串，指定播放头要转到的场景的
名称；如果无此参数，则为当前场景。 frame(帧） 表示将
播放头转到的帧编号的数字，或者表示将播放头转到指定的帧标签。返
回
功能：将播放头转到场景中指定的帧并从该帧开始播放。如果未指
定场景，则播放头将转到当前场景中的指定帧。
用于在 Flash 动画作品中创建链接，使得在动画播放时，通过动画中的
按钮等控件打开互联网目标的 URL 地址中的 Web 站点、网页或 Email 地
址。
格式： getURL(url [, window [, "variables"]])
参数： url（地址）：链接文档的网络地址，可以是绝对地址，也可
以是相对地址。
window（窗口）： 可选参数，指定文档应加载到其中的窗口
或 HTML 框架。可输入特定窗口的名称，或从保留目标名称中选择。
· _self 指定当前窗口中的当前框架。
· _blank 指定一个新窗口。
·_parent 指定当前框架的父级。
·_top 指定当前窗口中的顶级框架。
variables（变量）： 如果没有变量，则省略此参数。
功能：建立超级链接， 将指定 URL 文档加载到窗口中。若要测试此动
作，应确保要加载的文件位于指定的位置。若要使用绝对 URL（例如，
http://www.myserver.com），则需要网络连接。
案例：制作漫天飞舞的雪景——了解 Flash 8.0 制作交互式动画的基本流程
本节用 Flash 来制作一个 Flash 交互式动画，使读者对制作交互式动画的
基本流程有一个整体的了解，有利于以后的学习。
【任务】: 漫天飞舞的雪景动画是：在雪屋与雪人的雪天背景下，雪花漫
天飞舞的画面。其静态图如图 6.1 所示。
【目标】：学习 Flash 的 ActionScript 编程技术，掌握制作交互式动画的一
些基本技巧。
【技术要点】：天添资源网 http://www.ttzyw.com/
天添资源网 http://www.ttzyw.com/
1、动作面板的使用。
2、ActionScript 编程语言的功能
3、事件与动作。
4、交互式动画的制作的基本技巧。
教学后记：天添资源网 http://www.ttzyw.com/
天添资源网 http://www.ttzyw.com/
第三节 绘声绘色——声音的操作
一、教学目标:
知识目标：
1、将声音导入 Flash
2、几种声音压缩模式
3、声音效果设置
能力目标
培养学生的探究能力和钻研精神。
情感目标
体会创作的乐趣，进一步培养制作动画的兴趣
二、教学重点与难点:
１声音效果设置
三、教学方法:
演示比较法、自主探究法
四、教学手段与教学媒体
多媒体网络教室。
五、教学课时:
2 课时
六、教学过程:
导入：
Flash 提供了许多使用声音的方式。可以使声音独立于时间轴连续播放，
或使动画与一个声音同步播放。还可以向按钮添加声音，使按钮具有更强
的感染力。另外，通过设置淡入淡出效果还可以使声音更加优美。由此可
见，Flash 对声音的支持已经由先前的实用，转到了现在的既实用又求美的
阶段。
1. 将声音导入 Flash
只有将外部的声音文件导入到 Flash 中以后，才能在 Flash 作品中加入声音
效果。能直接导入 Flash 的声音文件，主要有 WAV 和 MP3 两种格式。另
外，如果系统上安装了 QuickTime 4 或更高的版本，就可以导入 AIFF 格式
和只有声音而无画面的 QuickTime 影片格式。
下面介绍如何将声音导入 Flash 动画中。
（1）新建一个 Flash 影片文档或者打开一个已有的 Flash 影片文档。
（2）执行【文件】｜【导入】｜【导入到库】命令，弹出【导入到库】天添资源网 http://www.ttzyw.com/
天添资源网 http://www.ttzyw.com/
对话框，在该对话框中，选择要导入的声音文件，单击【打开】按钮，将
声音导入.
【导入到库】对话框
（3）等声音导入后，就可以在【库】面板中看到刚导入的声音文件，今
后可以像使用元件一样使用声音对象了，如图 5-9 所示。
【库】面板中的声音文件
2. 引用声音
将声音从外部导入 Flash 中以后，时间轴并没有发生任何变化。必须引用
声音文件，声音对象才能出现在时间轴上，才能进一步应用声音。
接着上一小节继续操作。
（1）将“图层 1”重新命名为“声音”，选择第 1 帧，然后将【库】面板
中的声音对象拖放到场景中，如图 5-10 所示。
图 5-10 将声音引用到时间轴上
（2）这时会发现“声音”图层第 1 帧出现一条短线，这其实就是声音对
象的波形起始，任意选择后面的某一帧，比如第 30 帧，按下 F5 键，就可
以看到声音对象的波形，如图 5-11 所示。这说明已经将声音引用到“声音”
图层了。这时按一下键盘上的回车键，可以听到声音了，如果想听到效果
更为完整的声音，可以按下快捷键 Ctrl+Enter。
图层上的声音
3. 声音属性设置和编辑
选择“声音”图层的第 1 帧，打开【属性】面板，可以发现，【属性】面
板中有很多设置和编辑声音对象的参数，如图 5-12 所示。
图 5-12 声音的【属性】面板
面板中各参数的意义如下。
【声音】选项：从中可以选择要引用的声音对象，这也是另一个引用库中
声音的方法。
【效果】选项：从中可以选择一些内置的声音效果，比如让声音的淡入、
淡出等效果。
【编辑】按钮：单击这个按钮可以进入到声音的编辑对话框中，对声音进
行进一步的编辑。
【同步】：这里可以选择声音和动画同步的类型，默认的类型是【事件】
类型。另外，还可以设置声音重复播放的次数。
引用到时间轴上的声音，往往还需要在声音的【属性】面板中对它进行适
当的属性设置，才能更好地发挥声音的效果。下面详细介绍有关声音属性
设置以及对声音进一步编辑的方法。
1．【效果】选项天添资源网 http://www.ttzyw.com/
天添资源网 http://www.ttzyw.com/
在时间轴上，选择包含声音文件的第一个帧，在声音【属性】面板中，打
开【效果】菜单，可以用该菜单设置声音的效果，如图 5-13 所示。
声音效果设置
以下是对各种声音效果的解释。
1、【无】：不对声音文件应用效果，选择此选项将删除以前应用过的效果。
2、【左声道】/【右声道】：只在左或右声道中播放声音。
3、【从左到右淡出】/【从右到左淡出】：会将声音从一个声道切换到另一
个声道。
4、【淡入】：会在声音的持续时间内逐渐增加其幅度。
5、【淡出】：会在声音的持续时间内逐渐减小其幅度。
6、【自定义】：可以使用“编辑封套”创建声音的淡入和淡出点。
2．【同步】属性
打开【同步】菜单，这里可以设置【事件】、【开始】、【停止】和【数据流】
四个同步选项，
【事件】选项会将声音和一个事件的发生过程同步起来。事件与声音在它
的起始关键帧开始显示时播放，并独立于时间轴播放完整的声音，即使
SWF 文件停止执行，声音也会继续播放。当播放发布的 SWF 文件时，事
件与声音混合在一起。
【开始】与【事件】选项的功能相近，但如果声音正在播放，使用【开始】
选项则不会播放新的声音实例。
【停止】选项将使指定的声音静音。
【数据流】选项将强制动画和音频流同步。与事件声音不同，音频流随着
SWF 文件的停止而停止。而且，音频流的播放时间绝对不会比帧的播放时
间长。当发布 SWF 文件时，音频流混合在一起。
通过【同步】弹出菜单还可以设置【同步】选项中的【重复】和【循环】
属性。为【重复】输入一个值，以指定声音应循环的次数，或者选择【循
环】以连续重复播放声音.
设置重复或者循环属性
3．【编辑】按钮
单击该按钮可以利用 Flash 中的声音编辑控件编辑声音。虽然 Flash 处理声
音的能力有限，无法与专业的声音处理软件相比，但是在 Flash 内部还是
可以对声音做一些简单的编辑，实现一些常见的功能，比如控制声音的播
放音量、改变声音开始播放和停止播放的位置等。
编辑声音文件的具体操作如下。
（1）在帧中添加声音，或选择一个已添加了声音的帧，然后打开【属性】
面板，单击右边的【编辑】按钮，如图 5-16 所示。
图 5-16 单击【编辑】按钮 天添资源网 http://www.ttzyw.com/
天添资源网 http://www.ttzyw.com/
（2）弹出【编辑封套】对话框，如图 5-17 所示。
图 5-17 【编辑封套】对话框
【编辑封套】对话框分为上下两部分，上面的是左声道编辑窗口，下面的
是右声道编辑窗口，在其中可以执行以下操作：
要改变声音的起始和终止位置，可拖动【编辑封套】中的“声音起点控制
轴”和“声音终点控制轴”，如图 5-18 所示为调整声音的起始位置。天添资源网 http://www.ttzyw.com/
天添资源网 http://www.ttzyw.com/
第二课时
编辑声音的起始位置
1、 对话框中，白色的小方框成为节点，用鼠标上下拖动它们，改变音量
指示线垂直位置，这样，可以调整音量的大小，音量指示线位置越高，声
音越大，用鼠标单击编辑区，在单击处会增加节点，用鼠标拖动节点到编
辑区的外边，
2、 击【放大】 或【缩小】按钮 ，可以改变窗口中显示声音的范围。
3、 在秒和帧之间切换时间单位，请单击【秒】 和【帧】 按钮。
4、单击【播放】按钮 ，可以试听编辑后的声音。
4. 给按钮加上声效
Flash 动画最大的一个特点是交互性，交互按钮是 Flash 中重要的元素，如
果给按钮加上合适的声效，一定能让作品增色不少。给按钮加上声效的步
骤如下：
（1）按照前面讲解的方法导入一个合适的声音文件，这里不在详述。
（2）打开【库】面板，用鼠标双击需要加上声效的按钮元件，这样就进
入到这个按钮元件的编辑场景中，下面要将导入的声音加入到这个元件中。
（3）新插入一个图层，重新命名为“声效”。选择这个图层的第 2 帧，按
F7 键插入一个空白关键帧，然后将【库】面板中的“按钮声效”声音拖放
到场景中，这样，【声效】图层从第 2 帧开始出现了声音的声波线，如图
5。
给按钮添加声音（4）打开【属性】面板，将【同步】选项设置为【事
件】，并且重复 1 次。再测试一下动画吧，当鼠标移动到按钮上时，声效
就出现了。
这里必须将【同步】选项设置为【事件】，如果还是【数据流】同步类型，
那么声效将听不到。给按钮加声效时一定要使用【事件】同步类型。
5. 压缩声音
Flash 动画在网络上流行的一个重要原因就是因为它的体积小，这是因为当
我们输出动画时，Flash 会采用很好的方法对输出文件进行压缩，包括对文
件中的声音的压缩。但是，如果对压缩比例要求得很高，那么就应该直接
在【库】面板中对导入的声音进行压缩了。
在【库】面板中直接将声音“减肥”的具体操作方法如下：
（1）双击【库】面板中的声音图标 ，打开【声音属性】对话框，如图 5-20
所示。天添资源网 http://www.ttzyw.com/
天添资源网 http://www.ttzyw.com/
【声音属性】对话框
在这个【声音属性】对话框中，我们就可以对声音进行“压缩”了，在
“压缩”下拉菜单中有【默认】、【ADPCM】、【MP3】、【原始】和【语音】
压缩模式，如图 5-21 所示。
几种声音压缩模式
在这里，我们重点介绍【MP3】压缩选项，因为这个选项最为常用而且对
其他的设置也极具代表性，通过对它的学习可以达到举一反三，掌握其他
压缩选项的设置。
（2）进行 MP3 压缩设置。如果要导出一个以 MP3 格式导入的文件，可
以使用与导入时相同的设置来导出文件，在【声音属性】对话框中，从
【压缩】菜单中选择【MP3】，选择【使用导入的 MP3 品质】复选框。
大家切记这是一个默认的设置，如果不在【库】里对声音进行处理的话，
声音将以这个设置导出。
如果不想使用与导入时相同的设置来导出文件，那么可以在【压缩】下拉
菜单中选择【MP3】后，只要取消对【使用导入的 MP3 品质】复选框的选
择，就可以重新设置 MP3 压缩设置了，如图 5-22 所示。
使用 MP3 压缩功能
（3）设置比特率。【比特率】这个选项，确定导出的声音文件中每秒播放
的位数。Flash 支持 8 Kbps 到 160 Kbps（恒定比特率）的比特率，如图 5-23
所示。
设置【比特率】
（4）设置【预处理】选项。选择【将立体声转换为单声道】复选框，表
示将混合立体声转换为单声（非立体声）。这里需要注意的是，【预处理】
选项只有在选择的比特率为 20 Kbps 或更高时才可用。
（5）设置【品质】选项。选择一个【品质】选项，以确定压缩速度和声
音品质：
1、【快速】：压缩速度较快，但声音品质较低。
2、【中】：压缩速度较慢，但声音品质较高。
3、【最佳】：压缩速度最慢，但声音品质最高。
（6）进行压缩测试。在【声音属性】对话框里，单击【测试】按钮，播
放声音一次。如果要在结束播放之前停止测试，请单击【停止】按钮。
如果感觉已经获得了理想的声音品质，就可以单击【确定】按钮了。
除了采样比特率和压缩外，还可以使用下面几种方法在文档中有效地使用
声音并减小文件的大小：
1、 置切入和切出点，避免静音区域保存在 Flash 文件中，从而减小声音
文件的大小。
2、 过在不同的关键帧上应用不同的声音效果（例如音量封套，循环播放天添资源网 http://www.ttzyw.com/
天添资源网 http://www.ttzyw.com/
和切入/切出点），从同一声音中获得更多的变化。只使用一个声音文件就
可以得到许多声音效果。
3、 环播放短声音，作为背景音乐。
教学后记：天添资源网 http://www.ttzyw.com/
天添资源网 http://www.ttzyw.com/
第四节 教你做游戏
一、教学目标:
知识目标：
用 FLASH 制作拼图
能力目标
培养学生的创新能力。
情感目标
体会创作的乐趣，进一步培养制作动画的兴趣
二、教学重点与难点:
熟练使用 FLASH 制作拼图
三、教学方法:
演示比较法、自主探究法
四、教学手段与教学媒体
多媒体网络教室。
五、教学课时:
1 课时
六、教学过程:
导入：
是否想过用 flash 制作一个拼图游戏？如果想的话就跟我做一个吧，一切完
成后你就会发现原来是如此简单！
1、准备一张喜欢的图片，我用的图片大小设定为宽 400 像素点、高 300
像素点。
2、打开 flash，新建一个文件，按默认值，当然背景颜色可以选自己喜欢
的，这里采用白色。
3、由于是拼图游戏，图像自然要一块一块的，实现这一方法有很多，比
如用 fireworks 预先切割成很多块再导入 flash，不过为了方便大家，这里
还是直接用 flash 制作。
4、按 file 下的 import，导入刚才准备好的那幅图像，然后选中这幅图像按
ctrl+b 把它转换成矢量图形。
5、用黑色箭头工具画一个方块，选中图像其中的一部分（如图 1），然后
按 f8，在弹出的框中选择 button，名字为 1，后确定，这样这块图像就转
换成了按钮符号，为了方便选取其他图像块，我们选中刚才那个按钮符号
按 delete 把它删除
6、操作同以上步骤，为了节约时间，这里我只将图像分成 5 块。为了方天添资源网 http://www.ttzyw.com/
天添资源网 http://www.ttzyw.com/
便讲解，5 块按钮符号分别取名为 1、2、3、4、5。
7、因为刚才叫大家每转换一块图像成按钮后就删除它，因此现在场景上
应什么都没有。下面按 ctrl+f8,选中其中的 MovieClip，名字取 1，后确定，
在新出现的 MovieClip 编辑场景，打开库文件（ctrl+L），将名字为 1 的按
钮拖入其中，鼠标右健单击该按钮，选择 properties，再选择 actions 标签，
然后按“加号”，选择 drag movie clip，然后再用鼠标左健单击上方的 On
(Release)，在右边将 Release 前面的勾去掉，在 press 前面打勾，然后用鼠
标左健单击 end on，再按“加号”选择 drag movie clip，在右边出现的 stop
drag operation 前面打勾，现在设置完毕，确定。（
8、按 ctrl+f8,选中其中的 MovieClip，名字取 2，后确定，在新出现的
MovieClip 编辑场景，打开库文件（ctrl+L），将名字为 2 的按钮拖入其
中……余下的操作同上步操作，以此类推，全部完成后应该有 5 个
MovieClip，名字分别为 1、2、3、4、5。
9、在主场景中打开库文件，将 5 个 MovieClip 分别拖入场景，这下已大功
告成，按 ctrl+enter 就可以了，当然真正的拼图应该要建立很多图块，以后
大家就可以用 flash 制作一个 cool 呆的拼图游戏了！（因为以上操作针对
flash4 而言，在 5.0 中有一些不同，在此附上 5.0 中的 actions 设置图例。）
教学后记：
微信/支付宝扫码支付