第8讲 按钮制作Flash高级商务动画设计(PPT全)(袁野版)

FLASH商务应用

八、按钮制作本节课主要内容按钮制作基本方法旋转按钮制作爆炸波音效按钮制作方法公共库中的按钮为按钮添加脚本一、本节课【目的】掌握按钮四种帧的含义。掌握各种按钮制作的方法和技巧。掌握公共库中的按钮的使用方法。利用按钮制作电子琴的方法。掌握按钮press/release事件用法。二、本节课【重点】

各种按钮制作方法和技巧。按钮事件中代码编写方法。利用按钮制作”电子琴”三、本节课【难点】

按钮事件中代码编写方法。按钮（1）利用按钮可以实现影片剪辑内部的控制、跳转和外部的超级链接等。这些功能只有等到讲到脚本动画的时候才能实现，本节我们主要讲解如何去制作不同效果的按钮，以及按钮各帧的含义。（2）在flashcs4中要想得到按钮可以通过以下三个途径：可以调用flash自带按钮（窗口—公用库—按钮）可以将图形转换成按钮（F8）直接新建按钮（ctrl+F8）（3）按钮和影片剪辑一样也有自己单独的时间轴（包括图层和帧）等。四、实例1—基本按钮三个状态弹起：按钮的原始状态，也就是鼠标没有经过按钮上方，也没有按下时的状态。指针经过：当鼠标从按钮上方经过时按钮的状态，鼠标并没有点击按钮。按下：当鼠标在按钮上并点击按钮时的状态。点击：定义前三个帧中按钮对象元件的反应区范围。当鼠标进入此范围时按钮才会有反应。这个帧中定义的动画不会显示出来。缺省情况下，如果不特殊指明按钮“点击”帧对应的范围，Flash会自动将按钮元件在“弹起”帧中对象占用的区域设定为反应区。四、实例1—【实例说明】及【技术要点】

【实例说明】本例完成一个基本按钮元件的制作，对于按钮元件三种状态使用不同中的几何状来实现。【技术要点】按钮元件的制作主要是完成“弹起”、“指针经过”和“按下”三个状态帧的制作。课堂示例1:关键步骤启动FlashCS4，菜单上，文件

另存为，在“另存为”的对话框上，先选择保存文件的文件夹的位置，在文件名后输入：基本按钮.fla，点击“保存”按钮。菜单上，插入

新建元件，打开“创建新元件”对话框，在名称后输入：“基本按钮”，在行为后选择：“按钮”，如图1所示。单击“确定”按钮后，进入按钮元件编辑窗口，如图2所示。可以看到，对于按钮元件来说，其对应时间轴包括三个状态帧（“弹起”、“指针经过”和“按下”）以及一个“点击”帧。

课堂示例1:关键步骤单击“图层1”对应的“弹起”帧，选择工具箱中的椭圆工具，设置笔触颜色为黑色（#000000），填充颜色为蓝色（#0000FF），在舞台上拖动出一个填充圆（半径为40），并将该填充圆相对于舞台居中。选择工具箱中的文本工具，在圆的下方写上文本：原始状态，如图1所示。鼠标右键单击“指针经过”帧

插入空白关键帧，选择工具箱中的矩形工具，设置填充色为深黄色（#CC9933），在舞台上绘制矩形（高和宽均为80），并将该填充矩形相对于舞台居中。选择工具箱中的文本工具，在圆的下方写上文本：鼠标经过，如图2所示。鼠标右键单击“按下”帧

插入空白关键帧，选择工具箱中的直线工具，在舞台上绘制一个三角形（元件的宽和高均为80），选择工具箱中的颜料桶工具，设置填充色为绿色（#00FF33），对三角形进行填充，并将该填充三角形相对于舞台居中。选择工具箱中的文本工具，在圆的下方写上文本：鼠标按下，如图3所示。

课堂示例1:关键步骤单击舞台左上方“场景1”按钮，切换到场景编辑窗口，菜单上，窗口

库，打开“库”面板，将“基本按钮”元件从库中拖到到舞台上，创建一个实例，如图所示菜单上，控制

测试影片，移动鼠标到按钮上，再单击，观看三种效果。菜单上，文件

保存。

菜单上，控制

启用简单按钮；则在舞台上就可以直接测试按钮效果。

五、实例2—旋转按钮弹起状态“指针经过”内圆旋转“按下”外圆旋转五、实例2—【实例说明】【实例说明】移动鼠标到按钮上，按钮中间的圆开始旋转；单击鼠标后，按钮外圈的圆开始旋转。【技术要点】分别在“指针经过”和“按下”帧中放置影片剪辑元件，从而实现鼠标移动到按钮之上以及按下后的动画效果。五、实例2—【创作步骤】创建图形元件创建旋转图形影片剪辑创建一个按钮元件（建２个图层）定义“弹起”帧定义“指针经过”帧定义“按下”帧课堂示例2:关键步骤启动FlashCS4，菜单上，文件

另存为，在“另存为”的对话框上，先选择保存文件的文件夹的位置，在文件名后输入：旋转按钮.fla，点击“保存”按钮。菜单上，插入

新建元件，打开“创建新元件”对话框，在名称后输入：“中心圆”，行为选择“影片剪辑”，单击“确定”按钮，打开“中心圆”元件编辑窗口；选择工具箱中的椭圆工具，设置笔触颜色为黑色，填充色为彩虹线性渐变色，如图1所示，按下【Shift】键，在舞台上绘制一个线性渐变填充圆，如图2所示。

课堂示例2:关键步骤选择工具箱中的箭头工具，双击圆，同时选中填充部分和边框部分。在选中对象上单击右键

转换为元件，打开“转换为元件”对话框，设置元件名称为：circle，行为选择“图形”，注册点为对象中心，单击“确定”按钮完成元件的转换。鼠标右键单击“图层1”的第6帧

插入关键帧。用鼠标右键单击“图层1”的第1帧

属性，打开“属性”面板。创建传统补间动画，在“旋转”下拉列表框中选择“顺时针”，然后在右侧的文本框中键入旋转次数2，如图1所示

课堂示例2:关键步骤菜单上，窗口

库，打开“库”面板，在“库”面板中，在“中心圆”影片剪辑元件上单击鼠标右键

直接复制，打开“复制元件”对话框。设置元件名称为“外圆”，行为选择“影片剪辑”，如图1所示，单击“确定”按钮完成复制，即在“库”中，多了一个“外圆”影片剪辑。双击“库”面板中的“外圆”影片剪辑元件，打开“外圆”影片剪辑元件编辑窗口。用鼠标右键单击“图层1”的第1帧

属性，打开“属性”面板，在“旋转”下拉列表框中选择“逆时针”。

课堂示例2:关键步骤在库面板中用鼠标右键单击circle元件

直接复制，打开“复制元件”对话框。设置元件名称为“outcurcle”，行为选择“图形”，单击“确定”按钮完成复制，即在“库”中，多了一个“outcircle”图形元件。在“库”面板中双击outcircle图形元件，打开该元件的编辑窗口。选择工具箱中的填充变形工具，在舞台上的填充圆上单击，将填充方向旋转180度，如图1所示。双击舞台上的填充圆（同时选中填充和边框线部分），菜单上，窗口

变形，打开“变形”面板，设置缩放比例为110%，如图2所示。

课堂示例2:关键步骤双击“库”面板中的“外圆”影片剪辑，打开该元件的编辑窗口。单击“图层1”的第1帧，右击舞台上的圆

交换元件，打开“交换元件”对话框，单击outcircle元件，如图1所示，单击“确定”按钮，使用outcircle图形元件替换“外圆”影片剪辑中的“circle”元件。同理，第6帧也替换。菜单上，插入

新建元件，打开“创建新元件”对话框，设置名称为：“旋转按钮，行为选择“按钮”，单击“确定”按钮，打开该元件的编辑窗口。单击“弹起”帧，从库面板中依次将outcircle和circle图形元件拖到舞台上（分2层），并将它们调整到舞台中心，如图2所示。图2创建outcircle和circle实例

图3创建outcircle和“中心圆”实例鼠标右键单击“指针经过”帧

插入空白关键帧，从库面板中依次将outcircle图形元件和“中心圆”影片剪辑元件拖动到舞台上。并将它们调整到舞台中心，如图3所示。

课堂示例2:关键步骤鼠标右键单击“按下”帧

插入空白关键帧，从库面板中依次将“外圆”和circle元件拖动到舞台上。并将它们调整到舞台中心。菜单上，编辑

编辑文档，切换到文档编辑窗口（场景窗口）。从库面板中将“旋转按钮”影片剪辑元件拖动到舞台上，创建一个实例。菜单上，控制

测试影片，测试按钮效果。菜单上，文件

保存。六、实例3、４—爆炸按钮及音效按钮六、实例3、４—【实例说明】移动鼠标到按钮上，按钮周围出现一圈一圈的爆炸波。在“爆炸按钮”元件的基础上，创建带有声音效果的按钮。将鼠标移动到按钮上，以及在按下鼠标时，都会发出不同声音效果。六、实例3、４—【技术要点】使用移动动画创建爆炸波影片剪辑元件，然后在按钮的“指针经过”帧中添加该影片剪辑元件的实例。分别在“指针经过”帧和“按下”帧中添加声音效果。六、实例3、４—【创作步骤】创建一个“爆炸波”的影片剪辑，三个帧当中可以放置动态的影片剪辑。创建一个按钮（３个图层）定义“弹起”帧定义“指针经过”帧定义“按下”帧定义“指针经过”帧和“按下”帧的声音课堂示例3、4:关键步骤启动FlashCS4，菜单上，文件

另存为，在“另存为”的对话框上，先选择保存文件的文件夹的位置，在文件名后输入：爆炸按钮.fla，点击“保存”按钮。菜单上，插入

新建元件，打开“创建新元件”对话框，在名称后输入：“爆炸波”，在行为后选择：“影片剪辑”。单击“确定”按钮后，进入按钮元件编辑窗口。菜单上，视图

网格

编辑网格，打开“网格”对话框。设置网格间距大小为10px×10px,并选中“显示网格”复选框，如图1所示。单击“确定”按钮，关闭“网格”对话框，在舞台上显示网格线，如图2所示。

课堂示例2:关键步骤在舞台右上角的“缩放比例”下拉列表框中键入300，从而将舞台放大到300%，如图1所示。

选择工具箱中的箭头工具，设置笔触颜色为红色，在舞台上绘制通过舞台中心的多条直线段，如图2所示。

课堂示例2:关键步骤选择工具箱中的椭圆工具，设置笔触颜色为无，填充颜色为绿色，以舞台中心绘制一个小的填充圆，如图1所示。继续使用椭圆工具，设置笔触颜色为黑色，填充颜色为无，绘制一个以舞台中心为圆心的稍大一些的空心圆，如图2所示

课堂示例2:关键步骤选择工具箱中的箭头工具，单击中间的填充圆，按下【Delete】键，将之删除，依次单击外圆之外的线段，按下【Delete】键，将之删除；双击外圆，按下【Delete】键，将之删除；此时舞台上仅剩下如图1所示的图形。选择工具箱中的箭头工具，在舞台上拖动出一个矩形框，同时选中舞台上的所有对象。菜单上，插入

转换为元件，打开“转换为元件”对话框，设置名称为“波纹”，行为选择“图形”，注册点选中心如图2所示

用鼠标右键单击“图层1”的第12帧

插入关键帧，并将舞台大小缩小到100%。选择工具箱中的箭头工具，单击选中第12帧对应舞台上的波纹实例，菜单上，窗口

变形，打开“变形”面板，设置缩放比例为1000%，打【Enter】键。

课堂示例2:关键步骤用鼠标右键单击“图层1”的第1帧

创建补间动画，创建从第1帧至第12帧之间的动画。此时时间轴如图1所示。单击“图层1”的第12帧，然后使用箭头工具单击舞台上的波纹实例，菜单上，窗口

属性，打开“属性”对话框（与舞台左下角点击“属性”按钮打开“属性”对话框一样）；在“颜色”后下拉列表框中选择Alpha，并设置Alpha值为10%，如图2所示.

课堂示例2:关键步骤菜单上，插入

新建元件，打开“创建新元件”对话框，设置新元件名称为“爆炸按钮”，行为选择“按钮”，单击“确定”按钮，打开元件编辑窗口。单击“弹起”帧，选择工具箱中的椭圆工具，设置笔触颜色为黑色，填充颜色为无，按下【Enter】键的同时在舞台上绘制一个直径为60的圆，如图1所示。用鼠标右键单击“指针经过”帧

插入空白关键帧。菜单上，窗口

库，打开库面板，将库中的“波纹”影片剪辑元件拖动到舞台上，调整其位置，使其与舞台中心对齐，如图2所示

课堂示例2:关键步骤用鼠标右键单击“按下”帧

插入空白关键帧。选择工具箱中的椭圆工具，设置笔触颜色为无，填充颜色为灰色（#66666），在舞台上绘制一个无边框的灰色填充圆，直径为60，如图1所示单击时间轴窗口左下方的“插入图层”按钮，在“图层1