第三章 按钮部分
第三章  按钮制作篇
3.1  按钮元件概述
flash按钮制作
按钮元件是Flash的基本元件之一,它具有多种状态,并且会响应鼠标事件,执行指定的动作,是实现课件交互效果的关键对象。
从外观上,“按钮”可以是任何形式,比如,可能是文字,可能是一幅位图,也可以是矢量图;可以是矩形,也可以是多边形;可以是一根线条,也可以是一个线框;甚至还可以是看不见的“透明按钮”。
按钮有特殊的编辑环境,通过在四个不同状态的帧时间轴上创建关键帧,可以指定不同的按钮状态,如图所示。
图3.1.1  按钮的四帧编辑环境
【弹起】帧:表示鼠标指针不在按钮上时的状态。
【指针经过】帧:表示鼠标指针在按钮上时的状态。
【按下】帧:表示鼠标单击按钮时的状态。
【点击】帧:定义对鼠标做出反应的区域,这个反应区域在影片播放时是看不到的。
【点击】帧比较特殊,这个关键帧中的图形将决定按钮有效范围。它不应该与前3个帧的内容一样,但这个图形应该大到足够包容前3个帧的内容。
图3.1.2  按钮的帧内容可以随意扩充
根据实际需要,你还可以把按钮做成如上图所示的结构。
从图中可以看到,按钮的3个“状态关键帧”中,可以放置除按钮本身以外的任何Flash对象,其中:【状态音效】图层设置了2种音效;【按钮动画】图层使鼠标不同操作出现不同动画效果,而【按钮底图】中可放置不同的图片。利用这个特点,我们可以把按钮做成有声有、变化无限的效果!
3.2  普通按钮
【实例说明】
按钮是元件(符号)的一种,它可以根据按钮可能出现的每一种状态显示不同的图像,并且会响应鼠标动作,执行指定的行为(action)。本例是一个简单按钮实例,在鼠标未接近按钮时,箭头显示为白;当鼠标移至按钮时,箭头显示为蓝;在按钮上按下鼠标时,箭头显示为黑。
【技术要点】
熟练图形编辑技巧,了解一般按钮的制作过程,理解按钮编辑器的时间轴上4个帧各自的意义和作用。
【制作步骤】
1、新建一个Flas档,设置文档属性。
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、新建一个Flas档,设置文档属性。
2、创建按钮元件:
(1)使用“插入/新建元件”命令(或者按Ctrl+F8快捷键),在弹出的“创建新元件”对话框中,将元件命名为“开始按钮”,行为中选择“按钮”,然后单击“确定”按钮,如图3.3.1所示:
图3.3.1  新建按钮元件的效果
(2)创建“开始按钮”元件的时间轴和舞台如图3.3.2所示:
图3.3.2  按钮的编辑模式
(3)选用工具箱中的“文本工具”,展开属性面板将文本的字体属性设置为“宋体”,字号为“30”,字体颜为“红”,并单击“居中”按钮,如图3.3.3,然后在元件舞台中拖曳出一个文本框。

版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。