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

1、q按钮制作基本方法q旋转按钮制作q爆炸波音效按钮制作方法q公共库中的按钮q为按钮添加脚本q掌握按钮四种帧的含义。q掌握各种按钮制作的方法和技巧。q掌握公共库中的按钮的使用方法。q利用按钮制作电子琴的方法。q掌握按钮press/release事件用法。q各种按钮制作方法和技巧。q按钮事件中代码编写方法。q利用按钮制作”电子琴”q按钮事件中代码编写方法。q（1）利用按钮可以实现影片剪辑内部的控制、跳转和外部的超级链接等。这些功能只有等到讲到脚本动画的时候才能实现，本节我们主要讲解如何去制作不同效果的按钮，以及按钮各帧的含义。q（2）在flash cs4中要想得到按钮可以通过以下三个途径：q可以调用

2、flash自带按钮（窗口公用库按钮）q可以将图形转换成按钮（F8）q直接新建按钮（ctrl+F8）q（3）按钮和影片剪辑一样也有自己单独的时间轴（包括图层和帧）等。弹起：弹起：按钮的原始状态，也就是鼠标没有经过按钮上方，也没有按下时的状态。指针经过：指针经过：当鼠标从按钮上方经过时按钮的状态，鼠标并没有点击按钮。按下：按下：当鼠标在按钮上并点击按钮时的状态。点击：点击：定义前三个帧中按钮对象元件的反应区范围。当鼠标进入此范围时按钮才会有反应。这个帧中定义的动画不会显示出来。缺省情况下，如果不特殊指明按钮“点击”帧对应的范围，Flash会自动将按钮元件在“弹起”帧中对象占用的区域设定为反应区。q

3、【实例说明实例说明】q本例完成一个基本按钮元件的制作，对于按钮元件三种状态使用不同中的几何状来实现。q【技术要点技术要点】q按钮元件的制作主要是完成“弹起”、“指针经过”和“按下”三个状态帧的制作。 q启动Flash CS4，菜单上，文件另存为，在“另存为”的对话框上，先选择保存文件的文件夹的位置，在文件名后输入：基本按钮.fla，点击“保存”按钮。q菜单上，插入新建元件，打开“创建新元件”对话框，在名称后输入：“基本按钮”，在行为后选择：“按钮”，如图1所示。单击“确定”按钮后，进入按钮元件编辑窗口，如图2所示。可以看到，对于按钮元件来说，其对应时间轴包括三个状态帧（“弹起”、“指针经过”和

4、“按下”）以及一个“点击”帧。q单击“图层1”对应的“弹起”帧，选择工具箱中的椭圆工具，设置笔触颜色为黑色（#000000），填充颜色为蓝色（#0000FF），在舞台上拖动出一个填充圆（半径为40），并将该填充圆相对于舞台居中。选择工具箱中的文本工具，在圆的下方写上文本：原始状态，如图1所示。q鼠标右键单击“指针经过”帧插入空白关键帧，选择工具箱中的矩形工具，设置填充色为深黄色（#CC9933），在舞台上绘制矩形（高和宽均为80），并将该填充矩形相对于舞台居中。选择工具箱中的文本工具，在圆的下方写上文本：鼠标经过，如图2所示。q鼠标右键单击“按下”帧插入空白关键帧，选择工具箱中的直线工具，在舞

5、台上绘制一个三角形（元件的宽和高均为80），选择工具箱中的颜料桶工具，设置填充色为绿色（#00FF33），对三角形进行填充，并将该填充三角形相对于舞台居中。选择工具箱中的文本工具，在圆的下方写上文本：鼠标按下，如图3所示。q单击舞台左上方“场景1”按钮，切换到场景编辑窗口，菜单上，窗口库，打开“库”面板，将“基本按钮”元件从库中拖到到舞台上，创建一个实例，如图所示q菜单上，控制测试影片，移动鼠标到按钮上，再单击，观看三种效果。q菜单上，文件保存。q菜单上，控制启用简单按钮；则在舞台上就可以直接测试按钮效果。弹起状态 “指针经过”内圆旋转 “按下”外圆旋转 q【实例说明实例说明】q移动鼠标到按钮

6、上，按钮中间的圆开始旋转；q单击鼠标后，按钮外圈的圆开始旋转。q【技术要点技术要点】q分别在“指针经过”和“按下”帧中放置影片剪辑元件，从而实现鼠标移动到按钮之上以及按下后的动画效果。 q创建图形元件q创建旋转图形影片剪辑q创建一个按钮元件（建个图层）q定义“弹起”帧q定义“指针经过”帧q定义“按下”帧q启动Flash CS4，菜单上，文件另存为，在“另存为”的对话框上，先选择保存文件的文件夹的位置，在文件名后输入：旋转按钮.fla，点击“保存”按钮。q菜单上，插入新建元件，打开“创建新元件”对话框，在名称后输入：“中心圆”，行为选择“影片剪辑”，单击“确定”按钮，打开“中心圆”元件编辑窗口；

7、选择工具箱中的椭圆工具，设置笔触颜色为黑色，填充色为彩虹线性渐变色，如图1所示，按下【Shift】键，在舞台上绘制一个线性渐变填充圆，如图2所示。q选择工具箱中的箭头工具，双击圆，同时选中填充部分和边框部分。在选中对象上单击右键转换为元件，打开“转换为元件”对话框，设置元件名称为：circle，行为选择“图形”，注册点为对象中心，单击“确定”按钮完成元件的转换。q鼠标右键单击“图层1”的第6帧插入关键帧。q用鼠标右键单击“图层1”的第1帧属性，打开“属性”面板。创建传统补间动画，在“旋转”下拉列表框中选择“顺时针”，然后在右侧的文本框中键入旋转次数2，如图1所示qq菜单上，窗口库，打开“库”面

8、板，在“库”面板中，在“中心圆”影片剪辑元件上单击鼠标右键直接复制，打开“复制元件”对话框。设置元件名称为“外圆”，行为选择“影片剪辑”，如图1所示，单击“确定”按钮完成复制，即在“库”中，多了一个“外圆”影片剪辑。q双击“库”面板中的“外圆”影片剪辑元件，打开“外圆”影片剪辑元件编辑窗口。q用鼠标右键单击“图层1”的第1帧属性，打开“属性”面板，在“旋转”下拉列表框中选择“逆时针” 。qq在库面板中用鼠标右键单击circle元件直接复制，打开“复制元件”对话框。设置元件名称为“out curcle”，行为选择“图形”，单击“确定”按钮完成复制，即在“库”中，多了一个“out circle”图

9、形元件。q在“库”面板中双击out circle图形元件，打开该元件的编辑窗口。q选择工具箱中的填充变形工具，在舞台上的填充圆上单击，将填充方向旋转180度，如图1所示。q双击舞台上的填充圆（同时选中填充和边框线部分），菜单上，窗口变形，打开“变形”面板，设置缩放比例为110%，如图2所示。qq双击“库”面板中的“外圆”影片剪辑，打开该元件的编辑窗口。q单击“图层1”的第1帧，右击舞台上的圆交换元件，打开“交换元件”对话框，单击out circle元件，如图1所示，单击“确定”按钮，使用out circle图形元件替换“外圆”影片剪辑中的“circle”元件。同理，第6帧也替换。q菜单上，插入

10、新建元件，打开“创建新元件”对话框，设置名称为：“旋转按钮，行为选择“按钮”，单击“确定”按钮，打开该元件的编辑窗口。q单击“弹起”帧，从库面板中依次将out circle和circle图形元件拖到舞台上（分2层），并将它们调整到舞台中心，如图2所示。q图2创建out circle和circle实例 图3创建out circle和“中心圆”实例q鼠标右键单击“指针经过”帧插入空白关键帧，从库面板中依次将out circle图形元件和“中心圆”影片剪辑元件拖动到舞台上。并将它们调整到舞台中心，如图3所示。qq鼠标右键单击“按下”帧插入空白关键帧，从库面板中依次将“外圆”和circle元件拖动到舞

11、台上。并将它们调整到舞台中心。q菜单上，编辑编辑文档，切换到文档编辑窗口（场景窗口）。从库面板中将“旋转按钮”影片剪辑元件拖动到舞台上，创建一个实例。q菜单上，控制测试影片，测试按钮效果。q菜单上，文件保存。q移动鼠标到按钮上，按钮周围出现一圈一圈的爆炸波。q在“爆炸按钮”元件的基础上，创建带有声音效果的按钮。将鼠标移动到按钮上，以及在按下鼠标时，都会发出不同声音效果。 q使用移动动画创建爆炸波影片剪辑元件，然后在按钮的“指针经过”帧中添加该影片剪辑元件的实例。 q分别在“指针经过”帧和“按下”帧中添加声音效果。 q创建一个“爆炸波”的影片剪辑，三个帧当中三个帧当中可可以以放置动态的影片剪辑。

12、放置动态的影片剪辑。q创建一个按钮（个图层）q定义“弹起”帧q定义“指针经过”帧q定义“按下”帧q定义“指针经过”帧和“按下”帧的声音q启动Flash CS4，菜单上，文件另存为，在“另存为”的对话框上，先选择保存文件的文件夹的位置，在文件名后输入：爆炸按钮.fla，点击“保存”按钮。q菜单上，插入新建元件，打开“创建新元件”对话框，在名称后输入：“爆炸波”，在行为后选择：“影片剪辑”。单击“确定”按钮后，进入按钮元件编辑窗口。q菜单上，视图网格编辑网格，打开“网格”对话框。设置网格间距大小为10px10px,并选中“显示网格” 复选框，如图1所示。q单击“确定”按钮，关闭“网格”对话框，在舞

13、台上显示网格线，如图2所示。qq在舞台右上角的“缩放比例”下拉列表框中键入300，从而将舞台放大到300%，如图1所示。q选择工具箱中的箭头工具，设置笔触颜色为红色，在舞台上绘制通过舞台中心的多条直线段，如图2所示。q选择工具箱中的椭圆工具，设置笔触颜色为无，填充颜色为绿色，以舞台中心绘制一个小的填充圆，如图1所示。q继续使用椭圆工具，设置笔触颜色为黑色，填充颜色为无，绘制一个以舞台中心为圆心的稍大一些的空心圆，如图2所示q选择工具箱中的箭头工具，单击中间的填充圆，按下【Delete】键，将之删除，依次单击外圆之外的线段，按下【Delete】键，将之删除；双击外圆，按下【Delete】键，将之

14、删除；此时舞台上仅剩下如图1所示的图形。q选择工具箱中的箭头工具，在舞台上拖动出一个矩形框，同时选中舞台上的所有对象。菜单上，插入转换为元件，打开“转换为元件”对话框，设置名称为“波纹”，行为选择“图形”，注册点选中心如图2所示q用鼠标右键单击“图层1”的第12帧插入关键帧，并将舞台大小缩小到100%。q选择工具箱中的箭头工具，单击选中第12帧对应舞台上的波纹实例，菜单上，窗口变形，打开“变形”面板，设置缩放比例为1000%，打【Enter】键。q用鼠标右键单击“图层1”的第1帧创建补间动画，创建从第1帧至第12帧之间的动画。此时时间轴如图1所示。q单击“图层1”的第12帧，然后使用箭头工具单

15、击舞台上的波纹实例，菜单上，窗口属性，打开“属性”对话框（与舞台左下角点击“属性”按钮打开“属性”对话框一样）；在“颜色”后下拉列表框中选择Alpha，并设置Alpha值为10%，如图2所示.q菜单上，插入新建元件，打开“创建新元件”对话框，设置新元件名称为“爆炸按钮”，行为选择“按钮”，单击“确定”按钮，打开元件编辑窗口。q单击“弹起”帧，选择工具箱中的椭圆工具，设置笔触颜色为黑色，填充颜色为无，按下【Enter】键的同时在舞台上绘制一个直径为60的圆，如图1所示。q用鼠标右键单击“指针经过”帧插入空白关键帧。q菜单上，窗口库，打开库面板，将库中的“波纹”影片剪辑元件拖动到舞台上，调整其位置

16、，使其与舞台中心对齐，如图2所示q用鼠标右键单击“按下”帧插入空白关键帧。q选择工具箱中的椭圆工具，设置笔触颜色为无，填充颜色为灰色（#66666），在舞台上绘制一个无边框的灰色填充圆，直径为60，如图1所示q单击时间轴窗口左下方的“插入图层”按钮，在“图层1”之上新建“图层2”。q单击“图层2”的“弹起”帧，选择工具箱中的文本工具，在舞台上添加文本对象“Touch”,如图2所示。q单击舞台左上方的“场景1”按钮切换到场景编辑窗口。从库面板中将“爆炸按钮”拖动到舞台上，创建它的一个实例。q菜单上，控制测试影片，测试按钮效果。q菜单上，文件保存。q【实例说明】【实例说明】在“爆炸按钮”元件的基础

17、上，创建带有声音效果的按钮。将鼠标移动到按钮上，以及在按下鼠标时，都会发出不同声音效果。q【技术要点】【技术要点】导入已有影片文件中的元件；修改导入的按钮元件，分别在“指针经过”帧和“按下”帧中添加声音效果。q启动Flash，菜单上，文件另存为，在“另存为”的对话框上，先选择保存文件的文件夹的位置，在文件名后输入：音效按钮.fla，点击“保存”按钮。q菜单上，文件以库打开，打开“以库打开”对话框，选择先前创建的“爆炸按钮”影片文件，单击“打开”，将“爆炸按钮”影片以库的形式打开。q从库面板中将“爆炸按钮”按钮元件拖动到“音效按钮”影片面的舞台上，关闭爆炸按钮库面板。菜单上，窗口库，打开本文档的

18、库面板。q在库面板中用鼠标右键单击“爆炸按钮”按钮元件重命名，此时元件名称处于编辑状态，更名元件名称为“音效按钮” 。q在库面板中双击“音效按钮”元件图标，打开该元件编辑窗口。q在已有的图层之上新建一个“声音”图层q分别用鼠标右键单击“声音”图层的“指针经过”和“按下”帧插入空白关键帧。q菜单上，窗口公用库Sounds，打开“公用库”声音为面板。q单击“声音”图层的“指针经过”帧，从公用库面板中将名为Cloth Rip的声音元件拖动到舞台上，从而为鼠标经过按钮上的状态添加声音效果。q单击“声音”图层的“按下”帧，从公用库面板中将名为Brick Drops的声音元件拖到到舞台上，从而为鼠标按下的状态添加声音效果。q单击舞台左上方的“场景1”按钮，切换到场景编辑窗口。在场景对应的舞台上，已经有一个“音效