第三章 按钮部分

第三章按钮制作篇
3.1 按钮元件概述
按钮元件是Flash的基本元件之一，它具有多种状态，并且会响应鼠标事件，执行指定的动作，是实现课件交互效果的关键对象。

从外观上，“按钮”可以是任何形式，比如，可能是文字，可能是一幅位图，也可以是矢量图；可以是矩形，也可以是多边形；可以是一根线条，也可以是一个线框；甚至还可以是看不见的“透明按钮”。

按钮有特殊的编辑环境，通过在四个不同状态的帧时间轴上创建关键帧，可以指定不同的按钮状态，如图所示。

图3.1.1 按钮的四帧编辑环境
【弹起】帧：表示鼠标指针不在按钮上时的状态。

【指针经过】帧：表示鼠标指针在按钮上时的状态。

【按下】帧：表示鼠标单击按钮时的状态。

【点击】帧：定义对鼠标做出反应的区域，这个反应区域在影片播放时是看不到的。

【点击】帧比较特殊，这个关键帧中的图形将决定按钮有效范围。

它不应该与前3个帧的内容一样，但这个图形应该大到足够包容前3个帧的内容。

图3.1.2 按钮的帧内容可以随意扩充
根据实际需要，你还可以把按钮做成如上图所示的结构。

从图中可以看到，按钮的3个“状态关键帧”中，可以放置除按钮本身以外的任何Flash 对象，其中：【状态音效】图层设置了2种音效；【按钮动画】图层使鼠标不同操作出现不同动画效果，而【按钮底图】中可放置不同的图片。

利用这个特点，我们可以把按钮做成有声有色、变化无限的效果！
3.2 普通按钮
【实例说明】
按钮是元件（符号）的一种，它可以根据按钮可能出现的每一种状态显示不同的图像，并且会响应鼠标动作，执行指定的行为（action）。

本例是一个简单按钮实例，在鼠标未接近按钮时，箭头显示为白色；当鼠标移至按钮时，箭头显示为蓝色；在按钮上按下鼠标时，箭头显示为黑色。

【技术要点】
熟练图形编辑技巧，了解一般按钮的制作过程，理解按钮编辑器的时间轴上4个帧各自的意义和作用。

【制作步骤】
1、新建一个Flash文档，设置文档属性。

2、创建按钮元件：
(1)执行“插入/新建元件”命令（或者按Ctrl+F8快捷键）。

在弹出的元件属性对话框中，为新按钮输一个名字，比如“普通按钮”，选择类型为“按钮”，最后按“确定”按钮。

(2)这时的时间轴转变为由四帧组成的按钮编辑模式，如图3.2.1所示。

我们将要在这里编辑新按钮。

图3.2.1 按钮的编辑模式
(3)创建“弹起”帧的按钮图像。

用椭圆工具先画一个黑色无边框的圆，然后用钢笔工具绘制出白色的箭头。

把它们叠放在一起。

向上 经过 向下 执行
图3.2.2 按钮四桢的效果 (4)创建“指针经过”帧的按钮图像。

单击指针经过桢，按F6插入一个关键桢，第一桢的图像就出现在舞台上，分别更改图形的填充色。

如图3.2.2所示
(5)创建“按下”帧的按钮图像。

单击按下桢，按F6插入一个关键桢，分别更改图形的填充色。

如图3.2.2所示
(6)创建“点击”帧的鼠标效应区域。

单击点击桢，按F7插入一个空白关键桢，然后用绘图工具制作鼠标响应区域。

如图3.2.2所示
【提示】
提示：运行动画时，点击桢在舞台上是看不到的，但是它可定义对鼠标单击所能够做出反应的按钮区域，一般情况下这一帧可以省略掉，这时“按下”状态下的对象就会被作为鼠标的响应区。

（7）这四帧全部设置好以后。

单击时间轴窗口左上角的按钮，回到主场景中。

按Ctrl+L 快捷键打开库窗口，从其预览窗口中把刚才做好的按钮拖到编辑区中。

3、按Ctrl+Enter 快捷键，预览效果。

3.3 文字按钮
【实例说明】
本例是一个简单文字按钮实例，在鼠标未接近按钮时，文字显示为红色；当鼠标移至按钮时，文字显示为绿色；在按钮上按下鼠标时，文字显示为蓝色。

【技术要点】
熟练图形编辑技巧，了解一般文字按钮的制作过程，理解按钮编辑器的时间轴上4个帧各自的意义和作用。

【制作步骤】
1、新建一个Flash 文档，设置文档属性。

2、创建按钮元件：
（1）使用“插入/
新建元件”命令（或者按Ctrl+F8快捷键），在弹出的“创建新元件”对话框中，将元件命名为“开始按钮”，行为中选择“按钮”，然后单击“确定”按钮，如图
3.3.1所示：
图3.3.1
新建按钮元件的效果
（2）创建“开始按钮”元件的时间轴和舞台如图3.3.2所示：
图3.3.2 按钮的编辑模式
（3）选用工具箱中的“文本工具”，展开属性面板将文本的字体属性设置为“宋体”，字
号为“30”，字体颜色为“红色”，并单击“居中”按钮，如图3.3.3，然后在元件舞台中拖曳出一个文本框。

图3.3.3 文本的字体属性面板
（4）在文本框中输入文字符号“开始”，此时在按钮元件图层1时间线上的弹起帧由空白关键帧自动转换为关键帧，如图3.3.4所示：
图3.3.4 在“弹起”帧中输入文字
（5
）鼠标由击图层1时间线上的“指针经过”下方的帧格，在快捷菜单中选用“插入关键帧”，然后选中该关键帧中的红色的“开始”文本，单击展开属性面板，将字体颜色改为“绿色”，如图3.3.5所示：
图3.3.5 在“指针经过”帧中修改文字属性
（6）在图层1时间线“按下”下方的帧格中插入关键帧，然后选中该关键帧中绿色的“开始”文本，然后在属性面板中将文本字体颜色设置为“蓝色”，如图3.3.6
图3.3.6 在“按下”帧中修改文字属性
（7）在图层1时间线“点击”下方的帧格中插入关键帧，利用矩形工具画一个矩形，放在“开始”的下方，以扩大它的反应区。

因为“点击”帧中的内容在发布作品的时候是看不见的，所以我们可以使用任意颜色，如图3.3.7：
图3.3.7 在“点击”帧中添加按钮反应区
（8）这四帧全部设置好以后。

单击时间轴窗口左上角的按钮，回到主场景中。

按Ctrl+L 快捷键打开库窗口，从其预览窗口中把刚才做好的按钮拖到编辑区中。

3、按Ctrl+Enter 快捷键，预览效果。

【提示】
在按钮编辑区的时间轴上的第四个帧――“点击” 桢，是按钮的反应区, 运行动画时，
这个区域在舞台中是看不到的,但是它可定义对鼠标单击所能够做出反应的按钮区域，也可以不定义执行桢，这时按下状态下的对象就会被作为鼠标的响应区。

若添加了按钮的反应区,就可以轻易的用鼠标点击到这个按钮了，解决文字按钮不容易被鼠标点击到的问题。

3.4 动态按钮
【实例说明】
本例制作的也是一个动画按钮，但和上例有所不同。

除了外形不一样之外，其最大的区别在于当鼠标滑过按钮上方时，开始播放一小段动画而不仅仅是切换成另外一张图片。

【技术要点】
在生成静态按钮的基础上，在其中某些关键帧中放入动态的影片剪辑，这样当特定鼠标事件产生时，就会表现为动态的效果。

【制作步骤】
1、新建一个Flash 文档，设置文档属性。

2、创建按钮元件：
（1）制作将在按钮元件的“弹起”帧中使用的一个红色三角形图形。

使用“插入/新建元件”命令（或者按Ctrl+F8快捷键）
，在弹出的“创建新元件”对话框中，将元件命名为“Next Up ”，行为中选择“图形”，然后单击“确定”按钮，如图3.4.1所示。

图3.4.1 新建图形元件的效果
在元件编辑模式下显示网格，以便于精确编辑。

在填充面板中设置渐变颜色后，选择矩形工具，画一个宽比高稍短一点的红黑色渐变矩形。

用选择工具 拖曳矩形右上角节点至右边中点，以同样方法拖动右下角至右边中点，如图3.4.2所示。

此三角形图形元件将在制作按钮元件的“弹起”帧中使用。

图3.4.2 制作一个三角形
【提示】
做这个三角形的方法很多，这里用此方法是为了了解子选择工具的使用，用户也可以用铅笔或线条工具试一下。

（2）制作将在按钮元件的“指针经过”帧上将要用到的影片剪辑元件。

首先制作该影片剪辑元件中使用的一个黄色三角形图形元件。

因为它的形状和刚才做的Next Up 红色三角形图符一样，所以只要对上面做好的图行稍加修改就行了。

使用“插入/新建元件”命令（或者按Ctrl+F8快捷键），新建一个图形元件，命名为Next Over ，进入元件编辑窗口，按Ctrl+L
快捷键打开库面板，从预览窗口中把红色的三角形直接拖到编辑区中，在该三角形被选中的情况下，按Ctrl +B 键把它打散。

用颜料桶工具选黄色的填充色在三角形中点一下，这样我们就做好了这个元件，如图3.4.3所示。

图3.4.3 制作一个黄色三角形图形元件
然后制作将在按钮元件的“指针经过”帧上将要用到的影片剪辑元件。

使用“插入/新建元件”命令（或者按Ctrl+F8快捷键），新建一个影片剪辑元件，命名为Movie ，并选择它的类型为“影片剪辑”，单击“确定”按钮，进入元件编辑窗口，按Ctrl+L 快捷键打开库面板，从库面板中选中Next Over ，从预览窗口中把黄色的三角形拖到编辑区中。

在时间轴上，单击第2帧，按F6键，插入一个关键帧；再从预览窗口中把黄色的三角形拖到编辑区中，放在原来的那个三角形右边，这样就有两个并排放置的三角形。

如图3.4.4所
示。

图3.4.4 添加三角形
在第2帧右边的三角形被选中的前提下，打开属性面板，如图3.4.5所示。

选中颜色下拉列表中的“Alpha ”选项，设置Alpha 值设为80%，使得右边三角形稍稍透明一些，如图3.4.6所示。

同样，在第3帧按F6键插入关键帧，与上一帧的操作一样，再拖进一个三角形并排放在右边，然后把最右边的三角形Alpha 值设为60。

第
4帧也是如此，只不过最右边的三角形的Alpha 值为
40。

如图3.4.6所示。

图3.4.5 属性面板
图3.4.6 调整右边三角形透明度
图3.4.7 添加三角形并依次调整其透明度
（3）制作将在按钮元件的“按下”帧中使用的一个蓝色三角形图形。

因为它的形状和刚才做的Next Up 红色三角形图符一样，所以只要对上面做好的图行稍加修改就行了。

使用“插入/新建元件”命令（或者按Ctrl+F8快捷键），新建一个图形元件，命名为Next Down ，进入元件编辑窗口，按Ctrl+L
键打开库面板，从预览窗口中把红色的三角形直接拖到编辑区中，在该三角形被选中的情况下，按Ctrl +B 键把它打散。

用颜料桶工具选黄色的填充色在三角形中点一下，这样我们就做好了这个元件，如图3.4.8所示。

图3.4.8 制作一个蓝色三角形图形元件
（4）使用“插入/新建元件”命令（或者按Ctrl+F8快捷键），新建一个按钮元件，命名为Button ，进入按钮元件编辑窗口。

在“弹起”帧，把红色三角形Next Up 从库面板中拖到编辑窗口。

在“指针经过”帧上单击鼠标，按F6键，插入关键帧。

因为在这里要用影片剪辑取代红色的三角形，所以要求它们应放在同一位置。

【提示】
这里提供一种对齐方法。

因为在“鼠标经过”帧按的是F6键，所以这一帧的内容与“一般”帧一致，均为红色三角形。

从图库中拖出名为Next Over 的影片剪辑，把它放在红色三角形的上方，用键盘上的方向键调整它的位置，使它刚好把红色三角形完全遮住。

现在在影片剪辑被选中的情况下，按Ctrl+X 键，把它从画面中剪辑下来，这时画面中只剩红色的三角形，用箭头工具选中红色的三角形，按Delete 键把它删掉，再按Ctrl +Shift+V 键，把剪下的影片剪辑粘帖到原处，这样影片剪辑就与刚才的红色三角形处在同一位置。

也可以利用属性面板中X 、Y 坐标值来对每个元件进行准确定位。

（5）同样，也可以用相同的对齐方法把蓝色的三角形放在“按下”帧的同一位置上。

这样，一个按钮就做好了。

（6）单击时间轴窗口左上角的按钮，回到主场景中。

按Ctrl+L快捷键打开库窗口，从其预览窗口中把刚才做好的按钮拖到编辑区中。

3、按Ctrl+Enter快捷键，预览效果。

【提示】
在按钮中可以放入图形元件或者电影剪辑元件，但是不能在一个按钮中放入另外一个按钮。

本例这个按钮并不复杂，用户一看就应该知道是怎么做的。

不过这个按钮虽然很普通，但一定会给大家一些启发，按钮的变化千姿百态，多看看，多想想，就会设计出有创意的作品来。