第一节：动态按钮的制作

　　我们先来欣赏一下动态按钮的效果，移动鼠标到如图的按钮上并单击它，然后再次移动鼠标到按钮上，再次单击，我们就会发现这个按钮有四种状态：

　　Up状态：鼠标尚未经过按钮时的状态；

　　Over状态：鼠标移到按钮上的状态；

　　Down状态：单击按钮后的状态；

　　Over While Down状态：当按钮被单击过之后，鼠标移到按钮上时的状态。

　　所谓动态按钮其实就是将按钮分成这四种不同的状态，从而产生了动态的视觉效果。

　　下面我们就一起来尝试着制作一个动态按钮：

　　首先我们新建一个文件（大小：120x40 Pixels；颜色为：Transparent（透明）），然后选取菜单指令“Insert\New Button”，弹出“Button”对话框，我们可以看到“Button”对话框共有Up、Over、Down、Over While Down与Active Area五个选项卡，其中的Up、Over、Down、Over While Down就是用来设置按钮的四种变换状态的；而Active Area则是用来为按钮设置链接的。 （如图1）

图1 Button对话框

　　动态按钮其实是由四个Frame（帧）组合而成的，开启“Frame”面板，就会发现新按钮拥有四个Frame，也就是Up、Over、Down、Over While Down四个状态。（如图2）

图2 四个状态

　　接下来，我们就按照按钮的状态设置顺序来一步一步制作：

　　Up 状态

　　首先切换至Up选项卡，然后将漆桶的颜色设置为蓝色，同时将“Stroke”面板设置为“None”，将“Fill”面板设置为“Solid”；双击“矩形绘图工具”，在弹出的“Options”面板将“Conner”设置为“50”；然后在画布中绘制一个矩形；接下来 ，我们为图片添加一些特效，首先选中图片，然后开启“Effect”面板，单击效果下拉菜单按钮，在弹出的菜单中，我们选择“Bevel and Emboss\Inner Bevel”；下面我们再来调整一下效果，双击“Effect”面板下方列表框中“Inner Bevel”特效，在弹出的菜单中，选择特效设置。 （如图3）

图3 Up状态设置

　　Over状态

　　切换至“Over”选项卡，当然此时它为空，我们单击“Copy Up Graphic”按钮就将“Up”选项卡中图片复制到“Over”选项卡中了，这样可以保证两个选项卡中图片位置一致；下面为图片填充一些亮色，首先，我们要使图片处于未被选中状态，然后，将线条颜色设为白色，并将漆桶颜色设为蓝色；这时开启“Fill”面板，并选中“Rectangle”；选中“漆桶工具”，然后为图片填充颜色，拖动填充手柄适当地调整填充效果；接下来，我们为图片添加隶书文字“点我”，然后拖动控制点将文字设置如效果图；当我们觉得满意后，Ctrl+A将它们全选，然后选择菜单指令“Modify\Merge Image”将它们合并，这样可以防止误操作而将它们改动。（如图4）

图4 Over状态设置

　　注意：由于合并后的图片无法再回到原来的状态进行编辑，所以我们一定要确定无误时再将它们合并。

　　Down状态

　　首先我们将“Up”选项卡的图片复制到“Down”选项卡中，然后将它的特效设置改为如图5；然后将它的填充方式改为“Web Dither（网页混色效果）”----可以选择两种颜色混合成一个新的颜色，我们双击四个颜色表格之一，将其中的一种颜色设置为如图的颜色。

图5 Down状态设置

　　这样，按钮Down状态就变成了另外一副模样！

　　注意：我们千万要钩选“Include Nav Bar Down State”复选框，否则我们单击按钮后，将不会看到Down状态，而是仍然停留在“Up”状态。 （如图6）

图6 Down选项卡

　　Over While Down状态

　　Over While Down的表现时机是在按钮被单击过后，在将鼠标放在按钮上的时候；一般来讲，Over和Over While Down状态的动作方式都一样，差别在于Over是当按钮未被单击过所表现的按钮外观，而Over While Down则是不管按钮被单击过几次，只要将鼠标放到按钮上，按钮都会呈现的外观。

　　我们首先将“Up”选项卡中的图片复制过来，然后将它的特效改为高亮状态（如图7）；接下来，我们再为它输入文字“再点一次”。

图7 Over While Down状态设置

　　至此，我们已将按钮的四种状态编辑完毕，下面我们来预览一下按钮的效果，切换回编辑视窗，然后单击“Preview”选项卡或按下F12即可预览我们的作品。

　　Active Area 设置

　　如图8，Fireworks 3已经自动为我们设置好了感应区域，当然，如果我们不满意，可以用热区设置工具和大图切割工具设置自己喜欢的感应区域；然后我们单击“Link Wizard”按钮，弹出“Link Wizard”对话框，切换到“Link”选项卡，接下来，我们在“链接”栏中输入链接的URL：“http://www.hongen.com”，在<alt>（链接的文字说明）栏中输入“button”，在“Status Bar Text”（浏览窗口状态栏中的文字说明）栏中输入“button”；切换到“Target”选项卡将Target设置为“_blank”，单击“ok”按钮。

图8 Link Wizard对话框

　　至此，动态按钮制作完毕，我们就可以将它转存为HTML文件了。

　　如图9中的四副GIF图分别对应按钮的四种状态。

图9 保存的文件

　　现在，我们打开button.htm文件，就可以看到我们设置的各种效果了。