《按钮部分》word版

《《按钮部分》word版》由会员上传分享，免费在线阅读，更多相关内容在应用文档-天天文库。

1、第三章按钮制作篇3.1按钮元件概述按钮元件是Flash的基本元件之一，它具有多种状态，并且会响应鼠标事件，执行指定的动作，是实现课件交互效果的关键对象。从外观上，“按钮”可以是任何形式，比如，可能是文字，可能是一幅位图，也可以是矢量图；可以是矩形，也可以是多边形；可以是一根线条，也可以是一个线框；甚至还可以是看不见的“透明按钮”。按钮有特殊的编辑环境，通过在四个不同状态的帧时间轴上创建关键帧，可以指定不同的按钮状态，如图所示。图3.1.1按钮的四帧编辑环境【弹起】帧：表示鼠标指针不在按钮上时的状态。【指针经过】

2、帧：表示鼠标指针在按钮上时的状态。【按下】帧：表示鼠标单击按钮时的状态。【点击】帧：定义对鼠标做出反应的区域，这个反应区域在影片播放时是看不到的。【点击】帧比较特殊，这个关键帧中的图形将决定按钮有效范围。它不应该与前3个帧的内容一样，但这个图形应该大到足够包容前3个帧的内容。图3.1.2按钮的帧内容可以随意扩充http://www.lyge.cn85根据实际需要，你还可以把按钮做成如上图所示的结构。从图中可以看到，按钮的3个“状态关键帧”中，可以放置除按钮本身以外的任何Flash对象，其中：【状态音效】图层设置

3、了2种音效；【按钮动画】图层使鼠标不同操作出现不同动画效果，而【按钮底图】中可放置不同的图片。利用这个特点，我们可以把按钮做成有声有色、变化无限的效果！3.2普通按钮【实例说明】按钮是元件（符号）的一种，它可以根据按钮可能出现的每一种状态显示不同的图像，并且会响应鼠标动作，执行指定的行为（action）。本例是一个简单按钮实例，在鼠标未接近按钮时，箭头显示为白色；当鼠标移至按钮时，箭头显示为蓝色；在按钮上按下鼠标时，箭头显示为黑色。【技术要点】熟练图形编辑技巧，了解一般按钮的制作过程，理解按钮编辑器的时间轴上4

4、个帧各自的意义和作用。【制作步骤】1、新建一个Flash文档，设置文档属性。2、创建按钮元件：(1)执行“插入/新建元件”命令（或者按Ctrl+F8快捷键）。在弹出的元件属性对话框中，为新按钮输一个名字，比如“普通按钮”，选择类型为“按钮”，最后按“确定”按钮。(2)这时的时间轴转变为由四帧组成的按钮编辑模式，如图3.2.1所示。我们将要在这里编辑新按钮。图3.2.1按钮的编辑模式(3)创建“弹起”帧的按钮图像。用椭圆工具先画一个黑色无边框的圆，然后用钢笔工具绘制出白色的箭头。把它们叠放在一起。http://w

5、ww.lyge.cn85向上经过向下执行图3.2.2按钮四桢的效果(4)创建“指针经过”帧的按钮图像。单击指针经过桢，按F6插入一个关键桢，第一桢的图像就出现在舞台上，分别更改图形的填充色。如图3.2.2所示(5)创建“按下”帧的按钮图像。单击按下桢，按F6插入一个关键桢，分别更改图形的填充色。如图3.2.2所示(6)创建“点击”帧的鼠标效应区域。单击点击桢，按F7插入一个空白关键桢，然后用绘图工具制作鼠标响应区域。如图3.2.2所示【提示】提示：运行动画时，点击桢在舞台上是看不到的，但是它可定义对鼠标单击所能

6、够做出反应的按钮区域，一般情况下这一帧可以省略掉，这时“按下”状态下的对象就会被作为鼠标的响应区。（7）这四帧全部设置好以后。单击时间轴窗口左上角的按钮，回到主场景中。按Ctrl+L快捷键打开库窗口，从其预览窗口中把刚才做好的按钮拖到编辑区中。3、按Ctrl+Enter快捷键，预览效果。3.3文字按钮【实例说明】本例是一个简单文字按钮实例，在鼠标未接近按钮时，文字显示为红色；当鼠标移至按钮时，文字显示为绿色；在按钮上按下鼠标时，文字显示为蓝色。【技术要点】熟练图形编辑技巧，了解一般文字按钮的制作过程，理解按钮编

7、辑器的时间轴上4个帧各自的意义和作用。【制作步骤】1、新建一个Flash文档，设置文档属性。2、创建按钮元件：http://www.lyge.cn85（1）使用“插入/新建元件”命令（或者按Ctrl+F8快捷键），在弹出的“创建新元件”对话框中，将元件命名为“开始按钮”，行为中选择“按钮”，然后单击“确定”按钮，如图3.3.1所示：图3.3.1新建按钮元件的效果（2）创建“开始按钮”元件的时间轴和舞台如图3.3.2所示：图3.3.2按钮的编辑模式（3）选用工具箱中的“文本工具”，展开属性面板将文本的字体属性设置

8、为“宋体”，字号为“30”，字体颜色为“红色”，并单击“居中”按钮，如图3.3.3，然后在元件舞台中拖曳出一个文本框。图3.3.3文本的字体属性面板（4）在文本框中输入文字符号“开始”，此时在按钮元件图层1时间线上的弹起帧由空白关键帧自动转换为关键帧，如图3.3.4所示：http://www.lyge.cn85图3.3.4在“弹起”帧中输入文字（5）鼠标由击图层1时间线上的“指针经过”