flash入门基础第课交互动画的灵魂

1、第10课 交互动画的灵魂按钮 HYPERLINK http:/music.flashe/hanlan/flashmx2004/lesson10/sucai.rar t _blank 本课素材下载按钮元件是Flash的基本元件之一，它具有多种状态，并且会响应鼠标事件，执行指定的动作，是实现动画交互效果的关键对象。 从外观上，“按钮”可以是任何形式，比如，可能是一幅位图，也可以是矢量图；可以是矩形，也可以是多边形；可以是一根线条，也可以是一个线框；甚至还可以是看不见的“透明按钮”。 先来看一看各种各样的按钮吧！各种各样的按钮范例学习目的 创建按钮的方法 用按钮控制动画的播放 课前热身本实例是一个精

2、美的按钮元件，下面是这个按钮的运行效果。1新建按钮元件 新建一个影片文档，执行【插入】|【新建元件】命令，弹出一个【新建元件】对话框，在【名称】中输入“圆形按钮”，选择【行为】为【按钮】类型，如图4-4-4所示。图4-4-4 新建按钮元件单击【确定】按钮，进入到按钮元件的编辑场景中，如图4-4-5所示。图4-4-5 圆形按钮的编辑时间轴2创建按钮 （1）绘制按钮图形步骤1 创建【弹起】帧上的图形 将【图层1】重新命名为“圆形”，选择这个图层的第1帧（弹起帧），利用【椭圆工具】绘制出如图4-4-6所示的按钮形状。 图4-4-6 【弹起】帧上的图形 这个形状是由一个蓝色圆形和一些小椭圆形状组合而成

3、的，另外为了表现球的立体感，在蓝色圆形下边还绘制了一个椭圆阴影。你可以参考源文件进行绘制，另外你完全可以充分发挥自己的想象力，绘制出更漂亮的按钮图形。步骤2 创建【指针经过】帧上的图形 选择【指针经过】帧，按F6键插入一个关键帧，并把该帧上的图形重新填充为橄榄绿色，如图4-4-7所示。 图4-4-7 【指针经过】帧上的图形 步骤3 创建【按下】帧上的图形 【按下】帧上的图形和【弹起】帧上的图形相同，因此利用复制帧的方法即可得到。先用鼠标右键单击【弹起】帧，在弹出的菜单中选择【复制帧】命令，然后用鼠标右键单击【按下】帧，在弹出的菜单中选择【粘贴帧】命令即可。 步骤4 创建【点击】帧上的图形 选择

4、【点击】帧，按F7键插入一个空白关键帧，这里要定义鼠标的响应区。用【矩形工具】绘制一个矩形，如图4-4-8所示。注意一定要让这个矩形完全包容前面关键帧中的图形。 图4-4-8 【点击】帧上的图形说明：【点击】帧中的内容，在播放时是看不到的，但是它可以定义对鼠标单击所能够做出反应的按钮区域。也可以不定义【点击】帧，这时【弹起】状态下的对象就会被作为鼠标响应区。 （2）创建文字效果 为了使按钮更实用并更具动感，下面我们在圆形按钮图形上再增加一些文字特效。 步骤1 创建【文字1】图层 在【圆形】图层上新建一个图层，并重新命名为“文字1”。在这个图层的第1帧，用【文本工具】输入“play”文字，字体颜

5、色用黑色，如图4-4-9所示。 图4-4-9 创建【文字1】图层步骤2 创建【文字2】图层 在【文字1】图层上新建一个图层，并重新命名为“文字2”。先将【文字1】图层上的文字原样原位置复制到【文字2】图层的第1帧上。方法是，单击选择【文字1】图层上的文字，执行【编辑】|【复制】命令，然后单击选择【文字2】图层的第1帧，执行【编辑】|【粘贴到当前位置】命令即可。 除了【文字2】图层，锁定其他图层，然后选择这个图层上的文字对象，按下向上方向键和向左方向键各两次，然后将文字的颜色更改为绿色。这样就形成一个立体效果的文字，如图4-4-10所示。 图4-4-10 【弹起】帧的文字效果选择【文字2】图层的

6、第2帧，按F6键插入一个关键帧，将这个关键帧上的文字颜色改为蓝色，如图4-4-11所示。 图4-4-11 【指针经过】帧的文字效果至此，这个按钮元件就制作好了，现在我们返回【场景1】，并从【库】面板中将“圆形按钮”元件拖放一个实例到舞台上，然后按下CtrlEnter组合键测试一下，怎么样？将你的鼠标指针移动到按钮上，够漂亮吧？课堂讲解1再说按钮 按钮有特殊的编辑环境，通过在四个不同状态的帧时间轴上创建关键帧，可以指定不同的按钮状态，如图4-4-1所示。图4-4-1 按钮的四帧编辑环境 【弹起】帧：表示鼠标指针不在按钮上时的状态。 【指针经过】帧：表示鼠标指针在按钮上时的状态。 【按下】帧：表示

7、鼠标单击按钮时的状态。 【点击】帧：定义对鼠标做出反应的区域，这个反应区域在影片播放时是看不到的。 【点击】帧比较特殊，这个关键帧中的图形将决定按钮有效范围。它不应该与前3个帧的内容一样，但这个图形应该大到足够包容前3个帧的内容。 注意：有的朋友总是抱怨：怎么我的按钮“一闪闪的”，很难单击它！这一般发生在文字类按钮，如果你没在“按钮有效区”关键帧设置一个适当图形，那么，这个按钮的有效区仅是第一帧的对象，文字的线条较细且分散，难怪很难找到“有效区”了！“有效区”图形还可以充满整个屏幕，退出按钮编辑后，“有效区”图形是不可见的。 根据实际需要，你还可以把按钮做成如图4-4-2所示的结构。图4-4-

8、2 按钮的帧内容可以随意扩充从图4-4-2中可以看到，按钮的3个“状态关键帧”中，可以放置除按钮本身以外的任何Flash对象，其中：【状态音效】图层设置了2种音效；【按钮动画】图层使鼠标不同操作出现不同动画效果，而【按钮底图】中可放置不同的图片。 你可以想象一下：利用这个特点，我们可以把按钮做成何等有声有色、变化无限的效果！ 在Flash 5及之前的版本中，按钮的“状态关键帧”还接受ActionScript指令，从Flash MX开始已经废弃了这一功能，事实上，在按钮实例中加入“事件指令”更方便、更灵活！ 按钮的“事件指令”以及在这些“事件”中进行的动画编程，使按钮的创作空间变得无比宽广！有关

9、按钮事件及其应用请你参阅第六章的相关内容。 另外，“按钮”还可以设置“实例名”，从而使按钮成为能被ActionScript控制的对象。 你一定为那些精彩的动画游戏以及丰富多彩的网络交互动画所惊叹，按钮在其中起着举足轻重的作用，其实，通过自己不断的磨练，你完全能够做出让别人赞叹的作品！2用按钮控制动画播放 按钮元件是Flash的基本元件之一，它具有多种状态，并且会响应鼠标事件，执行指定的动作，是实现动画交互效果的关键对象。这是一个用按钮控制动画播放的实例。动画运行时，一个小球在画面上循环不停的跳动，在画面左上角有两个按钮，分别单击它们可以控制停止和播放小球的动画，以下是制作过程： （1）打开小球

10、动画影片文档 在Flash MX 2004中，执行文件|打开命令将小球动画影片文档（小球跳动.fla）打开。打开以后，我们可以先按下Ctrl+Enter组合键对动画进行测试，观察一下动画效果。在测试窗口中我们可以观察到，小球在舞台上一直循环不停的跳动。下面我们就创建一个按钮对象，用按钮来控制这个小球动画的播放。 （2）创建按钮元件 这里创建一个五角形的按钮。制作步骤略。我们已经在“小球跳动.fla”元件中包括了这个按钮元件，你打开库就可以看到。 （3）引用按钮实例 步骤1 引用第1个按钮 现在按下F11打开库面板，在其中你会发现一个按钮元件，即我们刚才创建的名字为“播放按钮”的按钮元件，如图7

11、所示。用鼠标单击这个按钮元件的名字，在库面板上面可以看到这个元件的预览效果。拖动鼠标将这个按钮元件从库面板拖放到舞台的左上角合适位置。这个按钮将要定义的功能是，单击它可以让小球动画继续播放。 图7 库面板中的按钮 步骤2 引用第2个按钮 现在我们还需要一个控制小球动画停止播放的按钮。再从库面板拖放一个按钮元件的实例到舞台左上角，然后执行修改|变形|水平翻转命令，使这个按钮实例水平翻转一下，这样，舞台上就出现了两个不同效果的按钮元件实例了。 说明：我们在场景中将按钮元件实例更改了效果，并不影响库面板中的按钮元件原来的效果。（4）定义按钮的动作脚本 步骤1 定义第1个按钮的动作脚本 选择舞台上的第1个按钮，打开动作面板，在其中输入on(，这时弹出一个鼠标事件下拉列表，从其中选择press，然后输入： play（）； 这样，第一个按钮的动作脚本就定义完成了，完整的动作脚本是： on（press） play（）； 这个动作脚本的功能是，当用鼠标单击这个按钮时，舞台上的动画开始播放。