
第2章 拿来就用——插图、公用按钮、组件与模板
了解了Flash的基本面板以后,就可以进行一些简单的操作了。本章主要以一些实例介绍Flash软件与其他软件的整合功能,以及Flash公用库中的公用按钮的应用。学习交互组件可以帮助读者更好地实现交互课件制作,本章还将介绍一些实用的模板,利用模板制作网站广告条或手机文件能够起到事半功倍的效果。好了,下面我们开始吧!
● 导入矢量图和位图
● Flash支持的导入图格式
➢ 导入Illustrator AI文件
➢ 导入Fireworks PNG文件
➢ 导入FreeHand MX文件
➢ 导入AutoCAD DXF文件
➢ 导入Photoshop PSD文件
➢ 处理导入的位图
● 使用公用按钮
➢ 使用公用按钮实现音乐播放控制
➢ 修改公用按钮
➢ 自制按钮
● 使用公用组件
➢ “真或假”组件应用
➢ “多项选择”组件应用
➢ “填空”组件应用
➢ “拖放”组件应用
➢ “热区”组件应用
➢ “热件”组件应用
➢ “学习交互”组件综合应用
➢ 修改组件
● 使用自带模板
➢ 移动设备模板应用
➢ 测验模板应用
➢ 广告模板应用
➢ 照片幻灯片模板应用
➢ 自制模板


2.1 导入矢量图和位图
在Flash CS3中可以导入各种其他应用程序创建的矢量图和位图,并保留文件原来的一些属性,从而可以在Flash中可以进一步编辑。计算机显示图形一般分为矢量图和位图两大类。矢量图是通过数学公式计算获得的,文件体积较小,其优点是无论放大、缩小、旋转等都不会失真,其缺点是较难表现色彩层次丰富逼真的图像效果,如图所示。位图又称为点阵图像,是由像素组成的。将位图放大,可以看到构成图像的单个像素点。不同于矢量图,位图体积较大,放大到一定程度会呈现马赛克形状,其适用于表现色彩丰富的图像效果,如图所示。


2.2 Flash支持的导入图格式
Flash可以支持导入多种格式的矢量图和位图,并且取决于系统是否安装了QuickTime。Flash CS3可导入的文件类型可参考下表:

一般需要在Flash中导入的文件有:Illustrator AI、Fireworks PNG、FreeHand、AutoCAD DXF、Photoshop PSD以及位图文件。下面就分节来介绍如何设置及编辑导入的文件。
2.2.1 实例:导入Illustrator AI文件
Illustrator是标准的矢量插图编辑软件。在Flash中导入后,可保留原文件的贝塞尔路径、混合模式、剪切蒙版、渐变填充、透明度、文本等多种属性进行设置。本节通过实例讲解导入文件常用的设置,并对原文件的透明度、文本属性进行编辑。此外还帮助解决在导入Illustrator AI文件时通常会遇到的一些问题。

[1] 查看原文件。打开待用文件,可以看到两个图层,下面是大海的背景,上面是具有动画设置的空白影片剪辑,这就需要导入一个文件作为影片剪辑的内容,如图所示。

[2] 查看空的影片剪辑。鼠标定位至图层1的最后一个关键帧,单击此帧,会发现舞台上出现了一个带十字圆心的小圆圈,这就是那个空的影片剪辑,双击进入到影片剪辑编辑面板,如图所示。

小知识
在Flash中,影片剪辑是元件的一种,它可以作为独立的元素进行动画设置,也可以进入其编辑面板编辑内部元素。这种嵌套式是Flash独有的特点,它可以提高工作效率。本实例中的影片剪辑已经做好动画补间,读者只需要进入其编辑面板添加内容,就能得到动画效果。
[3] 导入到舞台。选择 “文件>导入>导入到舞台”命令,单击文件夹中的2.2.1-ready.ai,单击“打开”按钮,如图所示。打开以后弹出“将‘2.2.1-ready.ai’导入到库”对话框。
[4] 设置“将‘2.2.1-ready.ai’导入到库”对话框。在检查要导入的Illustrator图层中勾选所有复选框。单击“将图层转换为”下拉列表框,选择“Flash图层”。单击“确定”按钮导入文件,如图所示。


提示:由于本实例中是将文件导入到一个影片剪辑中,而影片剪辑必须存在于“库”面板,所以Flash默认为导入到库。将AI文件导入到库与导入到舞台有一点不同,就是导入到库,原来的AI文件会自动打包成为一个图形元件在“库”面板中,而导入到舞台则不会。选择将图层转换为Flash图层,即在Flash中保留AI文件中所有的图层。选择将图层转换为单一Flash图层,则AI文件所有图层合并为一个图层。若选择导入为单个位图图像,则原文件不再保留原程序的任何属性,以位图的形式导入到Flash中。
[5] 编辑AI文件。AI文件已经导入影片剪辑编辑面板的舞台。选择“选择”工具,单击透明度为50%的影片剪辑,在属性面板中单击“颜色”下拉列表框,选择“Alpha”,改变右侧的数值为100%;或者单击“颜色”下拉列表框,选择“无”,如图所示。
[6] 依次修改另外3个半透明影片剪辑。选择“文本”工具,选取导入的文本,单击“属性”面板中的“文本填充颜色”
将颜色设置为#E70010,如图所示。


[7] 移动文本。用“选择”工具移动文本位置,如图所示。

提示:由于原AI文件中部分元件设置了透明度,这在导入对话框中则显示为影片剪辑,在Flash中只有元件才能进行滤镜和混合模式的设置。
[8] 保存测试。按“Ctrl+S”组合键保存文件。按“Ctrl+Enter”组合键测试动画,如图所示。

提示:在进行文件导入时,若AI文件不能导入,则可能是AI文件版本过低导致与Flash CS3不能兼容的问题。使用Illustrator CS3版本打开,再导出AI文件,就可以解决问题了。在Illustrator CS3中编辑完矢量图时不要忘记将CMYK模式转变为RGB模式再导入至Flash,这样可以更好地保留颜色,也防止出现导入不兼容的问题。
2.2.2 实例:导入Fireworks PNG文件
Fireworks软件主要用于制作网站,可以编辑矢量图和位图两种形式。在Flash中导入Fireworks PNG文件有两种形式,一种是以平面化图像的形式导入,一种是以可编辑对象的形式导入。作为可编辑对象导入,能够保留原文件的文本、混合模式属性进行编辑。

[1] 查看原文件。打开待用文件,得到空白的Flash文件。选择“文件>导入>导入到舞台”命令,在文件夹中找到2.2.2-ready.png文件,单击“打开”按钮,如图所示。

[2] 设置“导入Fireworks文档”对话框。在“至:”下拉列表框中选择“当前帧为电影剪辑”。在“对象”中勾选“保持所有的路径为可编辑状态”单选按钮,在“文本”中勾选“保持所有的文本为可编辑状态”单选按钮,单击“确定”按钮,如图所示。

提示:若勾选“作为单个扁平化的位图导入”复选框,则原文件中的矢量图栅格化为位图,并且不保留任何图层、文本、混合模式属性。若要去除图像或者文本的原有编辑属性,则对应勾选“导入为位图以保持外观”单选按钮。
[3] 查看导入到舞台的文件。导入的文件自动打包为一个影片剪辑在舞台上。双击影片剪辑进入“页面”影片剪辑编辑面板,此时可看到已经分解的图层,以及在“库”面板中保留的各分解元件,均为可编辑状态,如图所示。
[4] 编辑“路径”图形的颜色。使用“选择”工具单击舞台下方“公司论坛”下层的“路径”图形,双击进入“路径”编辑面板,再次双击进入“绘制对象”编辑面板。使用“选择”工具
单击矢量图形,然后单击“属性”面板的“填充颜色”
,修改颜色为#FF0000,如图所示。


[5] 依次修改另外几个图形的颜色,如图所示。

[6] 编辑文本。使用“文本”工具选取“规划设计”文本框内所有文本,在“属性”面板中修改颜色为黑,字体为“黑体”。这样,一个小型网站的首页就制作完成了。按“Ctrl+Enter”组合键测试一下影片,如图所示。

小知识
在使用Flash制作网站时,可事先用Fireworks软件编辑矢量图、文本、混合模式等,还可以用它来优化体积较大的位图,然后导入Flash,能够大大提高网站的速度。
2.2.3 实例:导入FreeHand MX文件
FreeHand是一款排版软件,它也可以绘制矢量图。FreeHand 7及以上版本所导出的文件可以导入到Flash CS3中,FreeHand 7版本以下的文件会由于不兼容而不能导入。Flash可以保留原文件的图层及文本块,并且可以有选择的导入一些页面。下面介绍如何设置并编辑导入的FreeHand MX文件。

[1] 查看原文件。打开待用文件,可以看到一幅书作为背景的矢量图,如图所示。选择“文件>导入>导入到库 ”命令,在文件夹中找到2.2.2-ready.FH11文件,单击 “打开”按钮。

小知识
当FreeHand文件中的矢量图是重叠在一起时,最好将其分层放置,然后再导入Flash,否则导入后的矢量图会叠加为一幅单层的矢量图。
[2] 设置“FreeHand导入”对话框。在“映射页面”单击“关键帧”,在“映射图层”单击“图层”。在“页面”单击“全部”,勾选“选项”中的“包括背景图层”和“保持文本块”复选框,如图所示。

[3] 查看“库”面板,新建图层。导入到库以后文件自动打包成一个“2.2.3-ready.FH11”的图形,并自动按照字母顺序生成一系列的元件。单击“图层”面板中的“插入图层”按钮新建一个“图层2”。再单击 “图层2”中的第一个关键帧,如图所示。

提示:如果FreeHand文件是包含多个页面的连续文件时,可以在“FreeHand导入”对话框中设置要导入的页面范围。若需要将文件作为单个化平面图层导入,则勾选“映射”的“图层”的“平面化”单选按钮即可。
[4] 调整文件大小。从“库”面板中把图形“2.2.3-ready.FH11”拖至舞台,使用“任意变形”工具单击图形,按住Shift键和鼠标左键向右下拖曳等比例缩小文件,如图所示。

[5] 转换为元件。使用“选择”工具双击图形,进入图形“2.2.3-ready.FH11”编辑面板,右击图形弹出对话框,选择“转换为元件”命令,如图所示。

[6] 设置“转换为元件”对话框。“名称”输入“引导图形”,“类型”选择“影片剪辑”,如图所示。

提示:在制作较大的动画或者网站时,要养成良好的为元件和图层命名的习惯,以便于查找和修改。在Flash中共有3种元件类型,影片剪辑可以看作是一个单独的小动画,它可以添加滤镜等效果,也可以添加动作。按钮也能添加动作,而图形是最基础的一种元件,可以嵌套在影片剪辑和按钮内部,不能添加动作。FreeHand软件支持8种以上的颜色的渐变填充,而Flash中只支持8种颜色的渐变填充,如果需要制作网站需要减小文件时,最好在FreeHand中使用8种或者少于8种的颜色进行渐变填充。
[7] 为影片剪辑添加滤镜效果。转换为影片剪辑以后的图形就可进行滤镜设置了。单击“滤镜”面板的“添加滤镜”按钮,弹出滤镜菜单,选择“模糊”命令。这样就为影片剪辑添加了滤镜效果。可以按“Ctrl+Enter”组合键测试一下影片,如图所示。

2.2.4 实例:导入AutoCAD DXF文件
Flash可以导入平面的AutoCAD DXF格式文件,而DXF文件因为不支持实心填充,所以比较适合如平面图或者地图等类型的线条画。下面通过导入一幅平面图来其体讲解。

[1] 导入AutoCAD DXF文件。打开待用文件2.2.4-ready.fla,选择 “文件>导入>导入到库”命令,在文件夹中单击“2.2.4-ready.dxf”文件,单击“打开”按钮,如图所示。

[2] 调整图形在舞台中的位置。导入后单击查看“库”面板中的“2.2.4-ready.dxf”图形,然后单击“图层”面板中的“插入图层”按钮新建一个图层,双击“图层2”,输入“平面图”。再单击 “平面图”中的第一个关键帧,从“库”面板中将图形拖至舞台。在“属性”面板中输入“X”坐标为“140”,“Y”坐标为“100”。

提示:在制作动画或者网站时,各元件的位置不能只凭眼睛观看,要精确到像素,同时需要手动输入“X”、“Y”的坐标,这样才能更加精细准确。
[3] 编辑DXF文件。使用“选择”工具双击“2.2.4-ready.dxf”图形,进入“2.2.4-ready.dxf”图形编辑面板,再次双击进入“组”编辑面板,单击直线选中,按Delete键删除,如图所示。

[4] 导出文件。依次删除另外几条矢量直线,按“Ctrl+Enter”组合键测试影片,即可得到一个介绍平面图的静帧,如图所示。

提示:在导入AutoCAD DXF文件时,如果遇到不能导入或者不兼容的问题时,此时可能是由于AutoCAD DXF文件版本过低造成的,Flash CS3只支持AutoCAD 10或者以上版本的DXF文件。
2.2.5 实例:导入photoshop PSD文件
Photoshop是位图编辑软件,很多时候需要在Photoshop中预先编辑位图,尤其在制作大型的多媒体交互系统以及Flash背景时。在Flash中导入PSD文件时,可以选择需要导入的图层,也可以保留原文件的原始坐标不变。另外,原文件的部分混合模式属性得以保留并且能够继续编辑。

[1] 打开原文件。打开文件2.2.5-ready.fla,即可看到一个空白的舞台,“库”面板中有一个MP3音频文件。“图层”面板中有一个“背景音乐”图层,如图所示。

[2] 导入PSD文件。选择“文件>导入>导入到舞台”命令,在待用文件夹中找到2.2.5-ready.psd文件并将其选中,然后单击“打开”按钮导入文件,如图所示。

提示:将文件导入到舞台和导入到库不同,导入到库以后,原文件会自动打包为一个影片剪辑,“库”面板也会自动生成一系列相关的图形元件,进入到影片剪辑编辑面板可以查看时间轴与图层属性。
[3] 设置“将‘2.2.5-ready.psd’导入到舞台”对话框。弹出“将‘2.2.5-ready.psd’导入到舞台”对话框,在“检查要导入的Photoshop图层”中勾选所有图层。在“将图层转换为”下拉列表框中选择“Flash图层”,然后分别勾选“将图层置于原始位置”和“将舞台大小设置为与Photoshop画布大小相同(1024×768)”复选框,如图所示。

[4] 删除混合模式不兼容的图形所在的图层。单击“图层”面板中的“图层19副本”图层,然后单击下方的“删除图层”工具,将其删除;或者右击图层,选择“删除图层”,并依此删除“图层29”,如图所示。

提示:事先在Photoshop中设置好图像大小,并且调整好各图层中图像的位置。在导入Flash时,应勾选“将图层置于原始位置”和“将舞台大小设置为与Photoshop画布大小相同(1024*768)”两个复选框,同时不更改导入的PSP文件的位置和大小,这样可以有效地提高效率。
[5] 删除“库”面板中的图形。在“库”面板中找到图形“图层19副本”,单击将其选中,然后单击下方的“删除”工具 将其删除。随后删除图形“图层29”,如图所示。

[6] 测试影片。按“Ctrl+Enter”组合键测试影片,将得到一个带有背景音乐的漂亮的多媒体界面,如图所示。
提示:由于不兼容,“图层19幅本”与“图层29”去除了原有的混合模式属性,为了达到设计的需求,此处将其删除。一般情况下,只删除相关图层即可,若要彻底删除,就要从“库”面板中将其删除。

2.2.6 实例:处理导入的位图
Flash可以处理多种格式的位图,具体可参考本节的表格。这里通过实例讲解如何处理导入的位图。包括如何设置位图的属性、如何将位图应用于填充以及分离位图等。下面来看例子。

[1] 将位图导入到库。打开待用文件“02/2.2.6-ready.fla”,选择“文件>导入>导入到库”命令,将文件“2.2.6-ready.jpg”导入到库,如图所示。

[2] 设置位图的属性。将位图导入到库之后可以在“库”面板中看到图形“2.2.6-ready.jpg”,右击,然后在弹出的菜单中的选择“属性”命令,弹出“位图属性”对话框。勾选“允许平滑”复选框,然后在“压缩”下拉列表框中选择“无损(PNG/GIF)”,如图所示。
提示:压缩位图主要是为了减小位图的体积,从而减小文件量,在制作网站时能够提高网站速度。位图的压缩有两种方式,“照片(JPEG)”比较适合色彩丰富的照片,而“无损(PNG/GIF)”比较适合于色彩单一的位图。

[3] 将位图应用于填充。使用“选择”工具单击舞台上的白色长方形,然后选择“窗口>颜色”命令,调出“颜色”面板,然后在“类型”下拉菜单中选择“位图”,同时单击刚才导入的位图的缩略图,完成填充,如图所示。

[4] 将填充转换为元件。右击填充完毕的图形,选择“转换为元件”,弹出“转换为元件”对话框,在“名称”栏中输入“装饰纹1”,在“类型”在选择“影片剪辑”单选按钮,如图所示。
提示:若要改变填充的形状,可以选择“渐变变形”工具对填充进行变形。方法与用“渐变变形”工具
调整图形的渐变效果相同。

[5] 调整“装饰纹1”透明度。此时只需转换为影片剪辑即可调整透明度,使用“选择”工具 单击选中该影片剪辑,然后在“属性”面板中的“颜色”下拉列表框中选择“Alpha”,向下拖动右边的滑块至24%,依此编辑另外一个白色长方形,如图所示。

[6] 使位图相对于舞台对齐。从“库”面板中将位图“2.2.6-ready.jpg”拖至舞台,选择“窗口>对齐”命令,调出“对齐”面板。单击“相对于舞台”按钮,再依次单击“水平中齐”按钮
和“垂直中齐”按钮
,使位图位于舞台中央,如图所示。

提示:使位图相对于舞台“水平中齐” 和“垂直中齐”就是使位图的中心点与舞台的中心点重合,这样就使位图精确位于舞台中心,在做设计的过程中要善于使用这些功能。
[7] 调整位图大小。使用“任意变形”工具,按住鼠标左键同时按住Shift键等比例的放大位图,随后即可发现放大后的位图比背景中的内容稍微增多了,如图所示。

[8] 分离位图。要删除位图中多余的部分,必须先分离位图。选中位图,按“Ctrl+B”组合键或者选择“修改>分离”命令分离位图。使用“选择”工具框选部分多余的图形,按Delete键删除,如图所示。

提示:分离位图以后,位图变成由多个离散的点组成的图形,此时可以任意选取其中的一部分进行编辑。
[9] 将位图转换为元件。使用“选择”工具右击分离的图形,选择“转换为元件”,弹出“转换为元件”对话框,在“名称”栏中输入“装饰背景”,“类型”选择“影片剪辑”,如图所示。
[10] 调整“装饰背景”的混合模式。选中该影片剪辑,在“属性”面板的“混合”下拉列表框中选择“变暗”。混合模式调整完毕,可以按“Ctrl+Enter”组合键来欣赏制作完成的界面。


2.3 使用公用按钮
Flash自带的公用库中有很多资源可以利用,共用按钮就是其中一项,200多项共用按钮可以直接利用,这给Flash的制作带来了很大的方便,下面介绍如何使用公用按钮,并通过几个实例讲解Flash的按钮制作特点。
2.3.1 实例:用公用按钮实现音乐播放控制
按钮的使用主要是为了满足用户的交互功能,单纯的一个按钮不能实现交互,必须为其加入动作语言,才能实现用户点击按钮所需要的目的。本实例主要通过两个公用按钮来控制时间轴的播放和暂停,以此来控制时间轴上的数据流,从而达到控制音乐播放的目的。

[1] 查看原文件。打开待用文件“2.3.1-ready.fla”,此时可看到两个图层,其中一个“音乐”图层中放置了mp3音频文件,如图所示。

[2] 调出“库-公用按钮”面板。选择“窗口>公用库>公用按钮”命令,调出“库-公用按钮”面板,如图所示。

提示:由于本实例是通过按钮控制时间轴的播放与暂停来控制音乐的播放与暂停,所以放置在“音乐”图层的音频文件必须设置为“数据流”才能对其进行控制。
[3] 使用“播放”公用按钮。新建一个图层,命名为“按钮”。在“库”面板中双击文件夹“playback rounded”,找到文件夹中的按钮“rounded green play”按住鼠标左键拖至舞台,在“属性”面板中设置“X”坐标为“204”,“Y”坐标为“325”,如图所示。

[4] 使用“暂停”公用按钮。在文件夹中找到按钮“rounded green stop”按住鼠标左键拖至舞台,并且设置“X”坐标为“110”,“Y”坐标为“325”,如图所示。

[5] 输入代码。选中“播放”按钮,按F9键打开“动作”面板,添加如下语句:
on (release) {play(); }
代码的含义为:当单击该按钮时,时间轴上的播放头开始播放,如图所示。
[6] 输入代码。选中“暂停”按钮,按F9键打开“动作”面板,添加如下语句:
on (release) {stop(); }
代码的含义为:当单击该按钮时,时间轴的播放头停止不再播放,如图所示。按“Ctrl+Enter”组合键测试影片。


提示:on(release)表示当鼠标点击按钮松开以后,即按钮触发条件,play和stop动作是控制时间轴的播放与暂停,它们和公用按钮一起实现对时间轴的控制,从而进一步控制音乐播放。
2.3.2 实例:修改公用按钮
本节主要了解按钮的内部结构,通过修改按钮的部分内容来学习按钮的4个帧,它们分别是弹起、指针经过、按下和点击。每个帧都针对按钮不同的触发事件,以此来实现按钮的特效。

[1] 打开原文件。打开文件“2.3.2-ready.fla”,如图所示。

[2] 进入按钮编辑面板。双击库中的按钮“rounded green stop”,打开按钮编辑面板,如图所示。

[3] 修改按钮。单击图层“indicator”选中按钮中的最上层的图形,然后单击属性面板中的“填充颜色”按钮,选择颜色为#58AD1F,如图所示。

[4] 修改按钮弹起效果。单击图层“center”中的“弹起”帧,选中该帧图形单击属性面板中的“填充颜色”按钮,选择颜色为#58AD1F,如图所示。

提示:“弹起”帧的内容是在按钮没有任何事件触发时显示的状态,也就是首先显示给用户的按钮的外观。
[5] 调整渐变。使用“渐变变形”工具调整该图形的渐变效果,如图所示。

[6] 修改按钮按下效果。选择图层“middle layer”中的“按下”帧,修改该帧所在图形的颜色为#FF0000,如图所示。

提示:“按下”帧的内容是在鼠标定位至按钮,按下左键还没有松开时所显示给用户的按钮外观。
[7] 修改按钮指针经过效果。选择图层“outer layer”,单击“指针经过”帧,将该帧图形颜色改为#58AD1F,并使用“渐变变形”工具调整渐变效果,如图所示。

[8] 删除图层。选择不必要图层“border”并将其删除,如图所示。

提示:“指针经过”帧的内容是当鼠标划过按钮时所显示的按钮外观。“点击”帧的内容在任何事件触发时都不显示,该帧的图形只是作为一个鼠标触发事件的热区而存在,所以一般只设置该帧所在图形的形状、大小,而颜色、线条没有任何意义。当制作透明按钮时,只需在“点击”帧上放置图形,相当于一个透明的热区。
[9] 测试影片。按“Ctrl+Enter”组合键测试修改后的按钮效果,如图所示。
2.3.3 实例:自制按钮
在充分了解了按钮内部各个关键帧的作用以后,就可以自己制作按钮了。下面绘制按钮在不同的鼠标触发事件中的图形。


[1] 新建文档。选择“文件>新建”命令,在弹出的对话框中选择“常规>Flash文件(ActionScript 3.0)”命令,单击“确定”按钮,创建一个影片文档。在“属性”面板中设置:大小为100×100,背景色为黑色,如图所示。

[2] 新建按钮。按“Ctrl+L”组合键打开库面板,单击“新建元件”按钮新建一个按钮元件,如图所示。

[3] 绘制黑底。在“按钮”编辑面板内将图层命名为“黑底”。单击“弹起”关键帧,选择“椭圆”工具,笔触设置为无,填充色为黑,按住鼠标左键拖动绘制一个圆形,在“属性”面板中设置形状为86*86,“X”和“Y”的坐标均为-43.0,如图所示。

[4] 调整“按下”帧的位置。右击“点击”帧选择“插入帧”,右击“按下”帧选择“插入关键帧。调整图形的“X”和“Y”的坐标均为-40.0,如图所示。

[5] 绘制蓝底。新建一个图层“蓝底”,单击“弹起”关键帧,选择“椭圆”工具,笔触设置为无,填充色为#9CCFFF,按住鼠标左键拖动绘制一个圆形,在“属性”面板中设置形状为79*79,“X”和“Y”的坐标均为-39.5,如图所示。

[6] 修改“指针经过”帧颜色。右击“点击”帧选择“插入帧”,右击“指针经过”帧选择“插入关键帧。选中舞台中的图形,在属性面板中修改颜色为#6699FF,如图所示。

[7] 调整“按下”帧位置。右击“按下”帧选择“插入关键帧”,将图形的“X”和“Y”的坐标改为-36.5,如图所示。

[8] 绘制外框。新建一个图层“外框”,单击“弹起”关键帧,选择“椭圆”工具,笔触颜色为#0000FF,粗细为3.5,笔触样式为实线,按住鼠标左键拖动绘制一个边框,在“属性”面板中设置形状为86×86,“X”和“Y”的坐标均为-43.0,如图所示。

[9] 调整“点击”帧位置。右击“按下”帧选择“插入关键帧”。将图形的“X”和“Y”的坐标改为-40.0,如图所示。

[10] 绘制渐变圆心。新建一个图层“渐变圆心”,单击“弹起”关键帧,选择“椭圆”工具,笔触为无,填充色为#99CCFF,使用“渐变变形”工具
放大渐变范围,如图所示。

[11] 调整“指针经过”帧的渐变。右击“指针经过”帧选择“插入关键帧”。使用“渐变变形”工具 缩小渐变范围,如图所示。

[12] 调整“按下”帧位置。右击“按下”帧选择“插入关键帧”,将图形的“X”和“Y”的坐标改为-29.5,如图所示。

[13] 输入文本。新建一个图层“文本”,使用“文本”工具 输入“Enter”,在“属性面板中修改字体为黑体,字号为15,颜色为白色。右击“点击”帧选择“插入帧”,如图所示。

[14] 将按钮放到舞台。回到“场景1”,改变舞台背景色为黑,从库中把刚才制作的按钮拖至舞台,按“Ctrl+Enter”组合键测试并且按下“Ctrl+S”组合键保存文件,如图所示。
提示:在绘制按钮的过程中要注意尽量将不同的图形放在不同的图层,并且给图层加上合适的命名,便于查找和修改。按钮的效果主要在前三个帧上,一般都通过改变颜色以及微调图形的位置来实现感应效果,“点击”帧上只需要有一个能够感应鼠标的形状就够了。

2.4 使用公用组件
Flash的公用库中还有一些公用组件,这些组件主要用于制作交互性的课件,其中包括“帧或假”组件、“多项选择”组件、“填空”组件、“拖放”组件、“热件”组件5种。本节主要应用各种组件的实例讲解如何应用组件,同时通过修改组件实例提高对组件的认识。
2.4.1 实例:“真或假”组件应用
“真或假”组件主要应用辨别正误的交互课件中,其中一个正确,则另外一个就是错误。可以应用为判断题,下面通过实例讲解如何调出组件、设置组件参数以及发布组件。

[1] 查看待用文件。打开待用文件2.4.1-ready.fla,如图所示。

[2] 调出“学习交互”组件面板。选择“窗口>公用库>学习交互”命令,打开“公用组件”面板,如图所示。

提示:Flash CS3包涵ActionScript 2.0和3.0两个版本的动作语言,而学习交互组件只适用于ActionScript 2.0的文件,要使用交互组件时,必须新建为ActionScript 2.0文件,在ActionScript 3.0中会因为代码不兼容不能发布。
[3] 调整组件大小。新建一个图层命名为“学习交互”,从“学习交互”面板中选中“True或False”组件拖至舞台。使用“任意变形”工具调整大小,如图所示。

[4] 分离组件。按“Ctrl+B”组合键或者选择“修改>分离”命令分离组件,如图所示。

提示:舞台上的学习交互组件必须先分离才能为其设置参数,并且只需要分离一次。
[5] 启动“组建检查器”。使用“选择”工具在舞台空白处单击,然后单击“True或False交互操作”面板,在“参数”面板中单击“启动组件检查器”,如图所示。

[6] 设置参数。在“组件检查器”对话框内设置参数。在“问题”文本框中输入“‘道,可道,非常道;’出自”。然后输入两个选项内容分别为“A《道德经》”、“B《遥遥游》”,如图所示。设置完成以后就可以测试影片了,设置正确的选项。按“Ctrl+Enter”组合键测试效果。

提示:组件分离以后,要设置参数,必须选中交互操作面板,它是组件的核心所在,包含必要的ActionScript代码,不能将其删除,放置在舞台上,导出的影片不会显示。
2.4.2 实例:“多项选择”组件应用
“多项选择”组件默认提供5项选择的交互方式,它主要用于制作多选交互操作。在第2.4.1节中已经初步认识了如何调出组件,以及如何启动组件检查器,本节再次通过实例进一步了解组件和组件检查器中的参数设置。

[1] 查看待用文件。打开待用文件2.4.2-ready.fla,如图所示。

[2] 使用组件。新建一个图层命名为“多项选择”,从“学习交互”面板中选中“多项选择”组件拖至舞台。使用“任意变形”工具 调整大小,如图所示。

[3] 启动组件检查器。按“Ctrl+B”组合键分离组件,选中“多项选择交互操作”面板,在“参数”面板中单击“启动组件检查器”,启动组件检查器,如图所示。

[4] 设置组件参数。在“组件检查器”面板中,设置参数。在“问题”文本框中输入“根据生产管线性质划分的5种社会形态包括:”在“标签”文本框中依次输入“原始社会、奴隶社会、封建社会”、“资本主义社会、共产主义社会”、“自然经济社会”、“商品经济社会、产品经济社会”、“信息社会”5段文字。然后勾选前两个文本字段为正确,如图所示。

[5] 测试影片。按“Ctrl+S”组合键保存文件,按“Ctrl+Enter”组合键测试文件,如图所示。

提示:“多项选择”组件中默认的干扰项是6个,最多能包含8个。当需要新建一个干扰项时,需依次在“组件检查器”中填写实例名称,并且将此实例名称作为新干扰项在“属性”面板中的实例名称。若要设置该干扰项错误,则不勾选后面的“正确”复选框;若要设置该干扰项正确,则勾选“正确”复选框。
2.4.3 实例:“填空”组件应用
“填空”组件针对问题能够设置最多3个相应的答案,本实例针对问题设置了一个答案,还设置了初始反馈的文字,为了达到设计的要求,对组件本身的背景作了颜色修改。下面来看实例:

[1] 查看原文件。打开“2.4.3-ready.fla”,查看需要制作课间的整体效果,如图所示。

[2] 应用组件。从“公用库”面板中调出“交互组件”,将“填空”拖至舞台,并调整大小,分离组件,如图所示。

提示:关于如何调出交互组件和调整大小以及如何启动“组件检查器”,在前面两个实例中已经讲述清楚,这里不再赘述。
[3] 设置组件参数。启动“组件检查器”,在“参数”选项卡中输入“问题”文本 “《女史箴图》的作者是:”,在“响应”的第一个文本框中输入“顾恺之”,并且勾选其后的“正确”复选框,如图所示。

[4] 设置初始反馈文本字段。单击“参数”选项卡中的“选项”标签,打开“选项”选项卡,此时即可看到各种反馈文字。在“初始反馈”文本框中输入“填空”。其他不做修改,如图所示。

提示:初始反馈的文字是用户首先使用交互操作时看到的文字提示。评估反馈的文字是用户填空完毕以后看到的文字提示。当用户填空正确,则显示正确反馈;填空错误,显示错误反馈。若设置尝试次数为2,则用户拥有两次机会进行尝试。
[5] 修改组件内部背景颜色。选择“库”面板中的“资源>图形>界面外观>背景”命令,进入背景编辑面板。使用“选择”工具 双击图形,进入“租”编辑面板,在属性面板中修改颜色为#FF66CC,如图所示。

[6] 测试影片。按“Ctrl+S”组合键保存文件,然后按“Ctrl+Enter”组合键测试效果,如图所示。

提示:组件中包含动态文本,动态文本可以设置动作,具有实例名称,它所显示的文本内容需要在组件检查器中设置。动态文本本身所显示的外观则是在舞台上修改,比如修改文本的颜色、字号等。
2.4.4 实例:“拖放”组件应用
“拖放”组件提供了4组组合,用户拖放其中一项至对应项,还可以选择“重置”再次拖放,确认后可以检查答案是否正确。本实例应用“拖放”组件,并且修改组件内影片剪辑的文本显示,从而达到美术课件需要的效果。

[1] 应用组件。打开待用文件,将“拖放”组件拖至舞台,如图所示。

[2] 分离组件。按“Ctrl+B”组合键分离组件,如图所示。

提示:具体的步骤操作见第2.4.1小节,这里不再赘述。
[3] 设置组件参数。启动“组件检查器”,在“问题”文本框中输入“为作品找到相应的作者。”,如图所示。

[4] 设置初始反馈。单击“选项”选项卡,在“初始反馈”文本框中输入“按住一个作品拖动它。”,如图所示。

[5] 删除组件的背景层。按“Ctrl+L”组合键打开“库”面板,选择“资源>图形>界面外观”命令,找到图形“背景”,单击“删除”按钮将其删除,如图所示。

提示:为了防止删除不必要的元素,此时可选择在库面板中直接删除。
[6] 修改组件中的文本。使用“文本”工具 选取舞台上组件中的文本,修改颜色为白色,如图所示。

[7] 移动文本位置。使用“选择”工具 选取组件中的文本框,移动位置,“X”、“Y”坐标分别为173.8和73,如图所示。

[8] 修改拖动对象与拖动目标的文本。在库面板中双击“拖放”文件夹下的影片剪辑,进入编辑面板,使用“文本”工具 修改文本为“《洛神赋图》”,以下影片依次修改为“《游春图》”、“《簪花仕女图》”、“《步辇图》”、“顾恺之”、“展子虔”、“周昉”、“阎立本”,如图所示。
提示:修改这些影片剪辑内部的文本和图形,不会影响到组件的ActionScript代码,但是影片剪辑的实例名称必须对应于参数面板的实例名称,否则会导致组件的代码紊乱。

[9] 测试影片。修改完成以后,按“Ctrl+S”组合键保存文件,然后按“Ctrl+Enter”组合键测试影片,如图所示。

2.4.5 实例:“热区”组件应用
“热区”交互组件就是设置一个问题,然后下设几个感应区域,用户通过点击感应区域作出回答。本实例充分应用感应区域,在原组件感应区域所在的图层之上设置答案,供用户点击作答。

[1] 查看待用文件。打开待用文件查看背景层和色块层,色块是为问题准备的答案图形,如图所示。

[2] 应用“热区”交互组件。在背景层和色块层之间新建一个图层为“热区”,选择“窗口>公用库>学习交互”命令,选择“敲击区域”拖至舞台,在属性面板中设置大小为676.9*360,“X”和“Y”的坐标分别为-145、95,如图所示。

[3] 设置参数。按“Ctrl+B”组合键分离组件,启动组件检查器,在“问题”文本框中输入“请选择所有绿色的图形。”,勾选1、4、6的热区为正确,如图所示。
[4] 设置“选项”参数。单击“选项”进入“选项”选项卡,在“尝试次数”文本框输入“3”,“反馈”文本框依次输入“淡季所有绿色图形”、“看看对了没有”、“答对了”、“错了”、“再试一次把”,如图所示。
提示:“正确”复选框就是设置在这个问题中哪几个热区是正确的,同时为问题设置相应的答案。如果设置该热区为正确,则勾选;如果设置该热区错误,则不勾选。
[5] 测试影片。按“Ctrl+S”组合键保存文件,然后按“Ctrl+Enter”组合键测试交互效果,如图所示。

提示:“热区”组件中作为答案的图形可以像2.4.4实例中那样进行内部修改,它的性质相当于按钮的最后一个帧,其实质是一个能够感应鼠标的热区,称为“热区”组件。
2.4.6 实例:“热件”组件应用
“热件”交互组件最多可以提供8个热件,也就是说,在这个交互组件中最多可以提供8种答案,系统默认的是6种,本实例通过改变热件影片剪辑的内容,制作学习交互组件,另外讲解在“热件”或者“热区” 组件中影片剪辑的实例名称。

[1] 查看文件。打开待用文件,如图所示。

[2] 应用“热件”交互组件。新建一个图层为“热区”,选择“窗口>公用库>学习交互”命令,选择“敲击对象”并将其拖至舞台,在属性面板中设置大小为698.9×360,“X”和“Y”的坐标分别为-140、47,如图所示。

[3] 设置参数。按“Ctrl+B”组合键分离组件,启动组件检查器,在“问题”文本框中输入“请选择所有不是圆形的图形”,然后勾选1、3、4、6为“正确”。
[4] 设置“选项”参数。单击“选项”进入“选项”选项卡,在“尝试次数”文本框中输入“3”,在“反馈”文本框中依次输入“单击一个图形以选中它。”、“看看对了没有。”、“答对了。”、“错了。”、“请再试一次吧。”,如图所示。

提示:“参数”面板中的实例名称列表就是组件中所有作为答案的影片剪辑在“属性”面板中的实例名称,而不是影片剪辑在“库”面板中的名称。实例名称主要是在代码中使用的名称,为一个影片剪辑编写代码,在指定该影片剪辑时候用实例名称编辑影片剪辑。在“库”面板中双击影片剪辑“HO_Object1”,进入编辑面板,如图所示。

[5] 嵌套影片剪辑。删除所有内容,将库中的“元件1”拖至舞台中央,如图所示。

[6] 依次编辑所有影片剪辑。将“元件2”嵌套在“HO_Object2”中,依次修改所有影片剪辑,如图所示。

[7] 测试影片。按“Ctrl+S”组合键保存文件,然后按“Ctrl+Enter”组合键测试热件交互结果,如图所示。

2.4.7 例:“学习交互”组件综合应用
通过2.4.1~第2.4.6小节我们分别学习了6种交互组件,在实例中穿插了如何调出组件、如何启动组件检查器、如何设置组件参数以及如何实际应用等。通过这些实例基本能够了解组件的特性,也可以大概在以后的制作当中应该注意的问题。本实例是“学习交互”组件综合应用,分别使用了“填空”、“多项选择”、“真或假”3种交互组件。

[1] 查看原文件。打开待用文件,可看到5个图层,语言层上为每帧设置了stop代码,按钮则设置为点击后跳转下一帧,如图所示;最上层在每帧放置了交互组件,如图所示。

[2] 设置“填空”组件参数。在“问题”文本框中输入“现代企业制度的典型形式是:”,在“响应”第一个文本框输入“公司制”,后面勾选为正确,如图所示。

[3] 设置“填空”组件选项。打开“选项”选项卡,“尝试次数”输入“3”,如图所示。

[4] 设置“多项选择”组件参数。“问题”文本框中输入“在资本积累过程中,实现个别资本增大的形式是:”,“标签”文本框中依次输入“资本循环”、“资本积累”、“资本周转”、“资本集中”,勾选第2、第4标签为正确。如图所示。打开“选项”选项卡,在“尝试次数”文本框中输入“3”。

[5] 设置“真或假”选项。启动“真或假”组件检查器。在“问题”文本框中输入“我国社会主义经济体制改革与政治体制改革的关系表现为”,在“错误选择”文本框中依次输入“相互独立”、“相互依赖”,并且勾选“相互依赖”选项为正确,如图所示。

[6] 删除“多项选择”组件中的一个复选框。关闭组件检查器,删除最后一个复选框,如图所示。

[7] 设置“真或假”组件参数。在“真或假”组件检查器中,输入问题为“我国社会主义经济体制改革与政治体制改革的关系表现为”,在“错误选择”中输入“相对独立”、“相互依赖”,勾选“相互依赖”为正确,如图所示。

[8] 测试影片。按“Ctrl+S”组合键保存文件,然后按“Ctrl+Enter”组合键测试综合应用的交互组件,如图所示。

提示:“多项选择”组件默认的是5个复选框,最多可包含8个复选框。若要增加复选框,则在新建复选框以后,将该“参数”面板中新的实例名称输入到复选框在“属性”面板的实例名称。
2.4.8 实例:修改组件
学习交互组件不仅仅是设置参数,在不影响代码的情况下可以对组件进行一些编辑,从而达到更好的效果。本实例主要是修改组件中的动态文本、影片剪辑和组件的背景。

[1] 查看原文件。打开待用文件2.4.8-ready.fla,舞台上放置了“热区”交互组件,如图所示。

[2] 设置参数。按“Ctrl+B”组合键分离组件,启动“组件检查器”,在“问题”文本框中输入“幸运大抽奖——物品下面有奖金哦!”。然后勾选第2个热区为正确,如图所示。

[3] 设置“选项”选项卡。“尝试次数”为“4”,在“反馈”文本框中依次输入“单击物品”、“看中奖了吗”、“恭喜你中了500元”、“很抱歉,谢谢参与”、“还有一次机会”。
[4] 设置“资源”选项卡。打开“资源”选项卡,在“查看答案”文本框中输入“看看下面是什么”。
[5] 删除组件背景。从“库”面板中删除图形“背景”。



提示:修改“资源”选项卡中的“查看答案”会改变组件中的查看答案按钮所显示的文本内容。“问题字段”后面输入的“问题字段”动态文本框的实例名称,以下依次为“反馈字段”动态文本的实例名称。再以下则是按钮的实例名称。
[6] 嵌入备用影片剪辑。在“库”面板中双击“HS_Area1”影片剪辑,进入其编辑面板,同时选中所有图形文本并将它们删除,然后将“库”中的“表”影片剪辑拖至舞台中央。

[7] 嵌入备用影片剪辑。依次在组件其他影片剪辑中嵌入“床”、“花”、“礼物”、“书”、“自行车”影片剪辑,如图所示。

小知识
影片剪辑、按钮、动态文本都可以编写代码,在编写代码时要用到实例名称。实例名称的设置在属性面板中输入即可。图形元件不能添加动作,没有实例名称。在学习交互组件中可以修改影片剪辑的文本、图形、甚至是实例名称,但修改以后的实例名称必须在参数面板中输入。
[8] 测试影片。按“Ctrl+S”组合键保存文件,然后按“Ctrl+Enter”组合键测试修改完成以后的组件,如图所示。

2.5 使用自带模板
Flash CS3自带了若干的模板,主要是方便用户在制作动画时能够将自己常用的文档保存为模板,有了这个功能就能够快速创建具有各种特殊格式的Flash动画了。本节将要介绍一些常用模板的应用和如何将文档存为模板。
2.5.1 实例:移动设备模板应用
Flash基于文件量小,而且又是流式播放,所以非常适用于网络和多媒体。手机用户可以在网上快速下载Flash,并且保存也十分方便。移动设备模板中包括一些常用手机所需的规格尺寸,可以方便用户创建手机文件。

[1] 新建模板。选择“文件>新建>模板”命令,然后选择“全球手机>NokiaS60 – 176×208”,单击“确定”按钮,如图所示。

[2] 修改背景色。在属性面板中将背景色修改为黑色,如图所示。

[3] 从待用文件中复制影片剪辑。打开待用文件“2.5.1-ready.fla”,在“库”面板中右击“动画”影片剪辑,选择复制。

[4] 粘贴影片剪辑。回到新建文档,在“库”面板中右击空白处,选择粘贴。

提示:使用Flash创建移动设备使用文件,一般情况下要避免使用复杂的图像,同时需避免使用复杂过多的补间动画和透明度效果。另外由于各种移动设备的性能和兼容性不同,所以必须选择相应的品牌和型号的移动设备模板来创建Flash。
[5] 使用影片剪辑。单击图层“layer 1 ”,从库中将“动画”拖至舞台中央,如图所示。

[6] 测试影片。按“Ctrl+S”组合键保存文件,然后按“Ctrl+Enter”组合键测试一下手机文件,如图所示。

2.5.2 实例:测验模板应用
Flash中的交互组件能够提供方便的交互操作,它和测验模板结合,能够方便快速地创建各种电子教学课件,如同心理测验那样的模拟测验。它同样应用于网络,可在网上发布各种的在线测验试题。

[1] 新建测验模板。选择“文件>新建>模板”命令,然后选择“测验>测验-样式2”命令,单击“确定”按钮,如图所示。

[2] 删除多余图层。右击“Title”图层选择“删除图层”,然后再删除图层“picture layer”,如图所示。

[3] 删除多余帧。单击最上面一个图层的第2帧,然后按住Shift键单击最后一个图层的第2帧,选中所有图层的第2帧,右击选择“删除帧”,如图所示。依次删除“热件”和“热区”组件所在的所有图层的帧。

[4] 设置“填空”组件。启动“填空”“组件检查器”在“问题”文本框输入“古代奥运会的创始人是:”,“响应”第一个文本框输入“伊菲图斯”,如图所示。设置“尝试次数”为“3”。

提示:关于组件检查器的调用和设置在第2.4节的实例中已经讲得很详细,这里不再赘述。
[5] 设置“多项选择”组件。启动“多项选择”/“组件检查器”。在文本框输入“下列人员中担任申办2008年奥运会形象大使的是:”,在“标签”中依次输入“邓亚萍”、“杨澜”、“桑兰”、“王军霞”、“刘翔”。然后勾选前3个标签为“正确”,如图所示。设置“尝试次数”为“3”。

[6] 设置“真或假”组件。启动“真或假”/“组件检查器”。在“问题”文本框中输入“首届奥运会是在希腊雅典举办的。”,如图所示。设置完以后即可进行文件保存和影片测试。

提示:在测验模板中主要应用了学习交互组件,若要进一步学习交互组件可参考第2.4节使用交互组件相关内容。
2.5.3 实例:广告模板应用
互动广告署(IAB)制定了各种丰富的标准媒体类型,并且设置了尺寸大小,在业界已经广泛地应用,Flash的广告模板中包括了各种标准的广告文档,非常好用。下面来看一个实例。

[1] 新建广告模板。选择“文件>新建>模板”命令,然后选择“广告>120×600(竖长条)”命令,单击“确定”按钮,如图所示。

[2] 设置背景色。在“属性”面板中将文档的背景色设置为#FF00FF,如图所示。

[3] 从待用文件中复制影片剪辑。打开待用文件“2.5.3-ready.fla”在“库”面板中选中所有影片剪辑,然后进行复制,如图所示。

[4] 粘贴影片剪辑。回到新建文档,在“库”面板中右击空白处,选择进行粘贴,如图所示。

[5] 添加背景。修改第一层的名称为“背景”,从“库”面板中选中“背景”拖至舞台,“X ”和“Y”的坐标均为0,如图所示。

[6] 添加文字动画。新建一个图层“文字”。从“库”面板中选中“文字动画”并将其拖至舞台,“X ”和“Y”的坐标为53.5、291.1,如图所示。

[7] 保存测试。按“Ctrl+S”组合键保存,然后按“Ctrl+Enter”组合键测试竖条广告,如图所示。

小知识
广告制作完成以后,由于要在互联网上发布,所以测显得尤其重要,因此创建好的广告文档必须进行在其他浏览器或者其他平台上的测试,确定没有错误,而且不会导致系统紊乱、崩溃等情况以后才能在网络上公开发布。
2.5.4 实例:照片幻灯片模板应用
使用照片幻灯片模板能够创建美观大方的幻灯片放映。用户可以在幻灯片中添加照片、也可以方便地删除不需要的照片,模板默认的是每隔4秒就自动播放,也就是说经过了用户设置的延迟时间以后自动向下一帧放映。

[1] 新建一个照片幻灯片模板。选择“文件>新建>模板”命令,然后选择“照片幻灯片放映>现代照片幻灯片放映”命令,单击“确定”按钮。

[2] 删除不必要的图层。右击“captions ”图层,选择“删除图层”命令,如图所示。再删除图层“picture layer”。

[3] 导入待用照片。在底部新建一个图层“照片”,选择“文件>导入>导入到舞台”命令,选择文件“1.jpg”,单击“确定”按钮,此时系统会询问是否导入序列中所有图像,单击“是”按钮,如图所示。

[4] 设置照片大小。修改每帧中照片的大小为640*480,如图所示。保存文件,按“Ctrl+Enter”组合键测试新的照片幻灯片。

2.5.5 实例:自制模板
用户如果非常喜欢或者要经常用到自制的Flash文档,就可以将其存为模板。存为模板以后能够快速创建特殊格式的Flash文档,从而大大提高工作效率。

[1] 查看原文件。打开待用文件“2.5.5-ready.fla”,这是一个可以竖放照片的幻灯片放映文稿,如图所示。

[2] 保存为模板。选择“文件>另存为模板”命令,将文档存为模板,如图所示。

[3] 设置保存。在“另存为模板”对话框,的“名称”文本框中输入模板的名称为“我的相册”,“类别”选择“照片幻灯片放映”。“描述”文本框中可以输入对此模板的介绍。单击“保存”按钮,如图所示。

[4] 查看保存好的模板。选择“文件>新建>模板”命令,然后选择“照片幻灯片放映>我的相册”命令,单击“确定”按钮就可以创建刚刚保存的模板了,如图所示。

2.5.6 小招管大用:参考高手的swf作品
SWFDecompiler是一款反编译swf文件为fla文件的软件,它可以解析文件中的图形、文本、动画、按钮、影片剪辑、帧、代码等元素,用户可以轻松地分析作品是如何制作完成的,但注意不可以使用本方法窃取他人版权的元素和元件。本实例主要讲解如何使用SWFDecompiler反编译swf文件。

[1] 打开SWFDecompiler软件。查看软件界面,如图所示。

[2] 导入swf文件。选择“文件>快速打开”命令,在弹出的对话框中单击“浏览”按钮,指定文件夹中的“2.6-ready.swf”,单击“确定”按钮导入,如图所示。

[3] 查看导入以后的文件。选择“文件>导出FLA”命令或按F4键,如图所示。


[4] 设置“导出FLA ”对话框。默认在“FLA文件名”中指定的路径,勾选“在库里为不同的符号类型创建文件夹”、“将文本转换为形状”、“生成基准线”复选框。在“选择导出的FLA文件版本”中选中“自动使用适当的FLA版本”单选按钮。在“成功导出.FLA之后”中选中“自动用Flash打开”单选按钮。然后单击“确定”按钮。
[5] 查看分解以后的FLA格式文件,如图所示。

小知识
SWFDecompiler支持ActionScript 2.0,如果swf文件中包含了ActionScript 3.0代码,就不能有效的还原动作,但其支持Flash视频文件(.flv)的还原。