Flash按钮制作与应用(一)

Flash按钮制作与应用复习&提高用户名：0000Flash按钮基础知识按钮的介绍1.按钮简介按钮是人机进行信息交互的基础，它对鼠标单击事件进行响应。按钮可对按钮静止、将鼠标指针移到按钮上、按下鼠标左键3种事件作出响应。这3种事件对应着按钮的4种状态：弹起(按钮静止)、指针经过(将鼠标指针移动到按钮上)、按下(按下按钮)、点击(定义按钮响应区域)。这4种状态定义了按钮的4个关键帧。下面详细介绍按钮的这4种关键帧。(1)【弹起】帧：在【弹起】帧中定义按钮的正常显示效果，也就是按钮未被鼠标单击时所显示的效果。(2)【指针经过】帧：定义当鼠标指针移到按钮上但不单击它时按钮的效果。一般该帧相对于【弹起】帧应有所改变。比如：可以定义当鼠标指针移到按钮上时按钮变色或放大、缩小等，对于文字按钮，可以定义当鼠标指针移到按钮上时文字变色或改变文字的字体等。(3)【按下】帧：定义按钮时按下所出现的效果。对于图形按钮来说，按钮被按下时一般会定义得比未被按下时要小一些，这样，当按下按钮时，按钮会自动缩小，出现动态效果。(4)【点击】帧：定义按钮的响应区域。在响应区域按下按钮时，系统才能响应按钮按下的事件。该区域在工作区中是不可见的。如要定义该帧，必须保证此区域包括按钮的弹起、指针经过和按下3种状态的区域；如不定义该帧，则系统会默认【弹起】帧状态为按钮的区域响应。按钮基础知识注意：按钮虽然有4种状态，但可根据需要定义这4种帧状态，也可只定义一部分，但一些基本的帧必须定义，一般而言，【弹起】帧和【指针经过】帧必须定义。2.按钮的创建(1)创建图形按钮的步骤如下。①选择[插入]→[新建元件]命令，弹出【创建新元件】对话框，按如图5.1所示设置。图5.1②单击[确定]按钮进入按钮编辑区，时间轴中将出现按钮的4个状态帧，如图5.2所示。图5.2按钮基础知识③定义按钮的4个帧。在按钮中可以使用影片剪辑元件、图形元件或素材库中的组件对象。在这里我们利用绘图工具绘制按钮的4个帧。定义【弹起】帧：利用前面所学知识在工作区域中绘制如图5.3所示的图形。定义【指针经过】帧：用鼠标在【指针经过】帧处插入一个关键帧，此时【弹起】帧的图形被复制到【指针经过】帧的工作区。确保图形被选中，在混色器面板中进行色彩调整，得到如图5.4所示的图形。定义【按下】帧：用鼠标在【按下】帧处插入一个关键帧，此时【指针经过】帧帧的图形被复制到“按下”的工作区。确保图形被选中，在混色器面板中进行色彩调整，得到如图5.5所示的图形。定义【点击】帧：用鼠标在【点击】帧处插入一个关键帧，并进行大小的调整，得到如图5.6所示的图形。该帧主要是定义按钮的有效单击范围，在有效范围里按下按钮时，系统才认为该事件已经发生。如果不定义该帧，则系统默认“弹起”帧为响应区域。图5.3图5.4图5.5图5.6按钮基础知识④单击图层左上角的[场景1]按钮，返回场景，按钮制作完毕。(2)创建文字按钮的步骤如下。①选择[插入]→[新建元件]命令，弹出【创建新元件】对话框，设置如图5.7所示。图5.7②单击[确定]按钮进入按钮编辑区，时间轴中将出现按钮的4个状态帧，如图5.8所示。图5.8按钮基础知识③定义按钮的4个帧。在按钮中可以使用影片剪辑元件、图形元件或素材库中的组件对象。在这里我们利用绘图工具绘制按钮的4个帧。定义【弹起】帧：利用文字工具和前面所学知识在工作区域中输入如图5.9所示的图形。定义【指针经过】帧：用鼠标在“指针经过”帧处插入一个关键帧，此时【弹起】帧的文字被复制到【指针经过】帧的工作区。确保文字被选中，在文字属性面板中进行色彩调整，得到如图5.10所示的文字。定义【按下】帧：用鼠标在【按下】帧处插入一个关键帧，此时【指针经过帧】帧的文字被复制到“按下”的工作区。确保文字被选中，在文字属性面板中进行色彩调整，得到如图5.11所示的文字。定义【点击】帧：用鼠标在【点击】帧处插入一个关键帧，并进行大小的调整，得到如图5.12所示的文字。该帧主要是定义按钮的有效单击范围，在有效范围里按下按钮时，系统才认为该事件已经发生。如果不定义该帧，则系统默认【弹起】帧为响应区域。图5.9图5.10图5.11图5.12按钮基础知识④单击图层左上角的[场景1]按钮，返回场景，按钮制作完毕。(3)将按钮加入到场景中的方法：打开【库】面板，在场景中选中要插入的层中的关键帧，将“库”中的按钮拖到场景中的舞台中即可。(4)预览按钮的两种方法：第一种，选择[控制]→[测试影片]命令；第二种，在场景中浏览按钮效果，选择[控制]→[启动简单按钮]命令。基本按钮的制作为图形按钮添加文字通过给前面制作的图形按钮添加“瞬间艺术”文字，来讲解怎样为图形按钮添加文字，方法如下。(1)在场景中双击“图形按钮”，进入按钮编辑状态，如图5.13所示。(2)单击图层左下角的【插入图层】按钮，添加一个新的图层，如图5.14所示。图5.13图5.14按钮基础知识(3)单击“图层2”的【弹起】帧，此时选中【弹起】帧，利用文字工具和前面所学的知识在图形上面输入如图5.15所示的文字。(4)在“图层2”的【指针经过】帧上单击鼠标右键，弹出快捷菜单，在快捷菜单中选择[插入关键帧]命令，插入一个关键帧。此时，该帧将复制【弹起】帧的文字，将文字修改成如图5.16所示的效果。图5.15图5.16按钮基础知识(5)在“图层2”的【按下】帧上单击鼠标右键，弹出快捷菜单，在快捷菜单中选择[插入关键帧]命令，插入一个关键帧，此时，它将复制【指针经过】帧的文字，将该文字修改成如图5.17所示的效果。图5.17(6)单击图层左上角的[场景1]按钮，返回场景，按钮修改完毕。按钮基础知识(3)在“loadMovie()”的“()”中输入参数，如图5.19所示。图5.19“donghua”：是要加载的影片名称，注意要加载的影片名称一定要是英文或数字，不能用中文命名，影片名字要用双引号。“1”：表示加载的动画所处的层的位置。代码、函数、参数将在后面做详细介绍。(4)关闭【动作】面板，制作完毕。3.为按钮添加电子邮件在工作和学习中，电子邮件的使用非常频繁，在按钮中加入电子邮件对我们取用网上信息更为方便。其方法与按钮加载方法相同，只是要在URL框中输入E-mail地址，在添加地址前应先加入“mailto”。在【动作】面板中输入的语句如图5.20所示。图5.20简单控制按钮的制作案例一：简单按钮制作一个简单按钮。本案例主要用到的工具或命令有：选择工具、椭圆工具、元件、柔化填充边缘、文字工具、填充浮动面板的设置等。简单控制按钮的制作(1)运行Flash8.0，新建一个名为“简单按钮”文件。(2)单击[插入]→[新建元件]命令，弹出【创建新元件】对话框，设置如图5.21所示。单击按钮，【图层】面板如图5.22所示。图5.21图5.22说明：

[弹起]是指鼠标指针没有移到按钮上时显示的状态。

[指针经过]是指鼠标指针移到按钮上时显示的状态。

[按下]是指在按钮上按下鼠标左键时显示的状态。

[点击]是指鼠标指针触发按钮的范围。简单控制按钮的制作(3)单击并选中图层的[弹起]帧。(4)单击工具箱中的[椭圆]工具。将笔触颜色设置为，椭圆渐变填充浮动面板的设置如图5.23所示。在工作区绘制一个圆，如图5.24所示。图5.23图5.24(5)选择刚绘制的椭圆，选择[修改]→[形状]→[柔化填充边缘]命令，弹出【柔化填充边缘】对话框，设置如图5.25所示。单击按钮，得到如图5.26所示的椭圆。图5.25图5.26简单控制按钮的制作(6)单击[文字]工具。在工作区中输入文字，大小、位置如图5.27所示。(7)在[指针经过]帧上单击鼠标右键，弹出快捷菜单，在快捷菜单中选择[插入关键帧]命令，此时，在[指针经过]帧处插入一个关键帧。(8)单击[选择]工具，选中如图5.28所示的部分，设置填充浮动面板如图5.29所示。此时，图形效果如图5.30所示。图5.27图5.28图5.29图5.30(9)单击【文字】工具，将文字改为如图5.31所示。将文字改为红色，如图5.32所示。(10)在[按下]帧上单击鼠标右键，弹出快捷菜单，在快捷菜单中选择[插入关键帧]命令，此时，在[按下]帧处插入一个关键帧。(11)单击[选择]工具，选中如图5.33所示的部分，设置填充浮动面板如图5.34所示。此时，图形效果如图5.35所示。简单控制按钮的制作图5.31图5.32图5.33图5.34图5.35(12)单击[文字]工具，将文字改为如图5.36所示。将文字改为深红色，如图

5.37所示。(13)在[点击]帧上单击鼠标右键，弹出快捷菜单，在快捷菜单中选择[插入关键帧]命令，此时，在[点击]帧处插入一个关键帧。(14)单击时间轴左上角的[场景1]按钮，返回场景。(15)将“库”中的“简单按钮”拖到舞台中并测试效果，如图5.38所示。将鼠标指针移到按钮上时的效果如图5.39所示。(16)按下鼠标指针时的效果如图5.40所示。图5.36图5.37图5.38图5.39图5.40简单控制按钮的制作本案例制作了一简单的按钮，主要讲解了按钮的制