第二章　FLASH入门动画
第八节　按钮制作（一）

这一节，我们来学习按钮的制作方法。在上一节中，我们曾经做过一个简单的按钮，但是很不全面，现在我们就来学习一个完整按钮的制作过程。

新建一个文件，按Ctrl-F8创建图符，命名新图符为Button，并在下面的行为(Behavior)选项中选按钮(Button)，确定。这样我们就进入了按钮的编辑窗口。注意这时时间轴上只有四帧，如右图所示：。这四帧的含义我们在前面的第一章中已经详细介绍过。

首先我们来画Up帧上的内容，也就是正常状态下按钮的外观。选绘图工具栏中的矩形工具，在编辑窗口中间拉出一个不带边线的矩形来，为了美观起见，也可以选参数修改器中的设置圆角。用颜料桶工具选中深蓝色，在矩形上点一下，矩形这时以深蓝色填充。选文字工具，设置适当的字体，颜色，字号等，在矩形中间写上“按我”。选箭头工具，在刚刚输入的文字上点鼠标右键，在弹出的菜单中选放缩(Scale)。我们对文字进行放缩处理，使它排放在深蓝色矩形的合适位置。

Up帧下的内容已经做好了，我们现在再来做Over帧的内容，也就是鼠标滑过按钮表面时按钮的外观。在Over帧上用鼠标左键点一下，并按F6把这一帧设为关键帧，这时该帧具有和Up帧相同的内容。选择颜料桶工具，选中灰绿色，用颜料桶在矩形上边线附近点一下，注意点中间的文字不会有效果，这时矩形框填充灰绿色。选择箭头工具，双击矩形中间的文字，进入文字编辑模式，改变文字工具参数修改器中的字号和颜色，并在文字输入框中输入“我会变色”。这样，我们又做好了按钮的第2帧。

Down这一帧的做法和前两帧相同，先用F6在这一帧插入一关键帧，然后一方面用颜料桶工具选黄色填充矩形，另一方面用箭头工具双击矩形中间的文字部分，在文本编辑状态下改为“再变一次”。

最后一帧是Hit帧。它的作用是定义按钮对鼠标做出反应的区域。一般情况下这一帧可以省略掉，但对于某些特殊情况，你可能会需要为按钮指定对鼠标做出响应的特殊区域，这时这一帧就很关键了。按下F6插入关键帧，把文字部分选中删除掉就行了，这样就设定对鼠标响应的区域就是这个矩形区域。

这四帧全部设置好以后。我们点时间轴窗口左上角的回到主场景中，按Ctrl-L打开图库窗口，从它的预览窗口中把刚才做好的按钮拖到工作区中。按Ctrl-Enter观看一下效果，应该和我上面的按钮差不多。

下面我们玩大一点，做一个比较逼真一些的按钮。按钮的样子就如上面所示，怎么样，还不算太差吧。其实做这个按钮也不难，幸运鸟之前也从来没有做过按钮，这次破例做了一次竟然只用了半个小时就做好了，相信大家不会比我差，我也会把制作的步骤说得尽量详细一些的。

事实上，要做一个逼真的按钮，最关键的不是制作方法，而是对光影效果的掌握。如上图所示，现在按钮处在正常状态下，也就是对应着按钮里的Up帧。大家一看就知道，这个按钮的外观实际上是由几个图片组合在一起的。没错，我们现在把组成按钮外形的几个图形类图符分离开来，大家就更清楚了。下图所示就是在按钮正常状态下，组成按钮外观的三个图符，从左到右按它们在按钮中的位置排列。当它们三个叠在一起时，由于各部分光强和阴影效果的反差，就形成了上图所示的样子。

我们先来看一看位于最上面的这个桔黄色圆盘是怎么做的。其实这也是由两个形体组成的，见下图。按下Ctrl-F8，新建一个图符，命名为top，并确认是图形类图符后回车。在该图符的编辑模式中，我们先用椭圆工具出除边线，选棕黄渐进色，拉出一个圆球来，注意在绘制圆球前按下Shift键，这样保证拉出的是正圆而不是椭圆。绘制好以后，我们用颜料桶工具，还选用刚才的棕黄渐进色在球的右上方点一下，这样就把高亮点移到了球的右上方，如下面的右图所示。背景球做好以后，我们点时间轴下方的新建一个层。选中新层的第一帧，用椭圆工具去除边线，选桔黄色按住Shift键拉出一个比刚才的球小一圈的圆来。我们可以在这个桔黄色的圆上点鼠标右键，用菜单中的Scale命令调整它的大小。然后，我们用鼠标或方向键把圆移到球的中间，让它们的圆心位于同一位置，因为圆所在的层位于球所在层的上面，所以圆也位于球的上面。当然，为了更真实一些，这个桔黄色的圆实际也是用渐进色填充的，只不过色彩上变化不明显罢了。
　　　　　　　　　　　　　　　　　

下面我们来做按钮的中间部分，就是上面那个中间亮两端暗的金属片样子的图符。再创建一个图形类图符，命名为Middle，这些我就不多说了。制作这个金属片的光效有两种方法。一种方法如下图所示，先绘制一个任意颜色，不带边线且比刚才做的桔黄色圆盘稍大一点的正圆，如下图一所示。然后我们用箭头工具在图中拉出一个矩形框选中这个圆的上半部分，见图二。选择颜料桶工具，将颜色设置为黑白线性渐进色，在图中圆形的阴影部分点一下，结果变成图三所示那样。接着我们在颜料桶工具的参数修改器中选中来改变渐进色的方向。在圆的上半部分点一下，结果如图四所示。
　　　　


图一	图二	图三	图四

用鼠标拖动平行线上圆形的旋转修改手柄调整渐进色方向为上面暗下面亮的状态，见图五。再用鼠标拖动平行线上方形的手柄将渐进色范围压缩为图六所示状态。现在我们就得到了如图七所示的半个金属片光效的图符。用同样的方法将圆的下半部分也做好，或者把下面的部分删除，把上面做好的部分复制做镜像再拼在一起也可以得到相同的效果。关于颜料桶工具的这个参数修改器我们上一章曾详细介绍过，这一节只是它的一个实际应用。


图五	图六	图七

另外一种做金属光效的方法是先选择椭圆工具，点击参数修改器中的颜色选择按钮，再点进入颜色设置面板，进入渐进色设置框，选择黑白线性渐进色，按New键新建一个颜色，把左边黑色的指针井拖进关键色设置滑杆的中心位置，如右图所示。将中间的颜色调为白色，两端的颜色设为黑色，即得到中间亮两端暗的新线性渐进色。用这个颜色直接绘制出一个圆来，该圆就是以这种颜色填充的，然后我们只需要对圆作一个旋转处理以获得所需的颜色方向就行了。
按钮的最下面的那一层是一个球，我想大家肯定都会做的，我就不再多说了，不过这个球要比中间的那个金属片还要大一圈。

以上是制作按钮Up帧所要用到的图符。现在来做按钮，按Ctrl-F8新建一图符，命名为Button，且行为选项为Button。在Up帧把图库中已经做好的三个图符依次拖到编辑窗口中，中心对齐排列好即可。

按钮的Over帧与Up帧的内容很接近，只不过最下面的那个球的颜色稍微调亮了一些，如下图所示，其余的桔黄圆盘和金属片都不变。

按钮的Down帧在Over帧的基础上稍加变化，把桔黄色圆盘缩小一些就行了。至于Hit帧，我们只需要把Down帧中桔黄色圆盘和金属片删除即可。
这样我们就做好了一个样子不错的按钮，大家也可以多看看别人的按钮是如何利用光影效果的，本节中的这个按钮大家如果还有什么不懂的地方，可以点这里下载原文件再好好研究一下。