Fireworks动态按钮终极制作

5D多媒体 轻松NO1 
2001年 17期

　　Macromedia公司的Fireworks是众多专业网页图形制作软件的首选，它可以同时自理位图与矢量图，将制作的网页图形最佳化，以利于网络传输，用动画与动态按钮的超炫的网页组件，使你轻松就能上手。
　　　　Fireworks4（以下略称：FW4）比起Fireworks3，功能更加强大和完善，可以称得上是集专业网络图像设计和制作为一体的全套解决方案。它是第一个帮助网络图形设计者和制作者克服所面临的特殊挑战的专业产品，下面我就以FW4为例为大家介绍一下，在FW4中制作动态按钮的过程。
　　　　按钮是网页中最常使用的元素之一，虽然众多的网页编辑工具直接提供了按钮的建立，可是那种按钮缺乏美感。好在Macromedia公司有Flash动画制作软件和Fireworks网页图形处理软件，让我们可制作出美观并且具有动态效果的按钮来，轻松简便。下面就进入我们的按钮制作过程。
　　#1    一、简单的图片按钮的制作
　　　　1.运行FW4，新建一文件，在弹出的对话框中定义画布的大小，Width：80pixels Height：40pixels Canvas Color选择为白色；
　　　　2.单击绘图工具栏中Color选项中的“Fill Color”工具，选择合适的填充色；
　　　　3.单击绘图工具栏中的“Rectangle Tool”矩形工具，在窗口中画一个矩形框（^17020705a^1），单击工具栏中的“Text Tool”工具，在窗口中点击一下，在弹出的文本编辑对话框中输入文字，并设定其字体、字号、字间距、颜色等属性后（^17020705b^2），按“OK”按钮，将文字移动到方框的正中央；
　　　　4.单击“Xtras”菜单下的“Eye Candy 4000 LE”选项下的“Bevel Boss”菜单项，然后弹出是否同意将矢量图转换为位图文档的警告，按“OK”；
　　　　5.紧接着又弹出了Bevel Boss属性对话框（^17020705c^3），其中包括了三个选项卡：Base、Lighting、Bevel Profile。Base：是设置一些基本的参数，包括高度、宽度、平滑度、斜角、色度等。Lighting：设置图像的照明效果。Bevel Profile：调协图像的斜角轮廓。根据需要设置合适的参数，右边的预览图会显示出对应的效果。设置好后，按“OK”；
　　　　6.用鼠标选中图像的背景层，这时图像的四周会出现四个蓝色圆点，重复4、5两个步骤，制作出特殊的效果图；
　　　　7.单击工具栏中的“Export”将按钮导出。
　　#1    二、带超级链接的按钮
　　　　1.选择中我们刚才制作的按钮，选择“Convert to Symbol”将它转换成符号，将符号类型设定为“Button”。
　　　　2.这样就弹出的按钮符号的属性对话框，我们选择“Active Area”选项卡，点击“Link Wizard”按钮，为按钮指定链接。
　　　　3.Link Wizard对话框中包括了“Export Setting”、“link”、“target”、“Filename”选项卡（^17020705d^4），在Link对话框中输入链接的地址，在target对话框中选择窗口的打开方式。完成后按“OK”按钮，这样一个带链接的按钮就制作好了。
　　#1    三、跟随鼠标变化的按钮
　　　　浏览一些网页时，经常会看到当鼠标经过某些按钮时，会发现按钮奇妙的变化，使整个网页看起来具有动感。其实这种动态按钮在FW4中制作起来非常简单。下面就来看看制作步骤：
　　　　1.新建一文件，设置画布大小，背景颜色等（略）。
　　　　2.单击“Insert”菜单下的“Libraries”/“Buttons”，从库中导入一个按钮文件。在对话框中选择合适的按钮样式（^17020705e^5），然后按“Import”按钮。单击右键，选择“Symbol”下的“Edit Symbol”，由于从库中导入的按钮文件是从文件外部输入的，所以编辑按钮将链接到外部文件，选择编辑时，会提示是否同意这种做法，按“OK”同意。
　　　　3.按钮编辑对话框中有五个选项卡，分别是Up、Over、Down Over While Down和Active Area。选择Up选项卡，在对话框中双击按钮中的文字，弹出了文字输入对话框，重新输入其他文字，并设定文字的大小，颜色等。
　　　　4.在Over、Down Over While Down中同样可以对它进行上述的操作。我们可以尽量将文字的大小、颜色、字距等属性设为不同，这样让按钮产生一种动态的效果。
　　　　5.另外同上例一样，我们可以定义按钮的超级链接。按“OK”退出，此时按钮效果如图6（^17020705f^），按“F12”可以看看按钮在浏览器中的显示效果。是不是很酷啊。赶快将按钮导出吧，放到你的网页中吧，让你的网页也具“动”感。
　　
　　 
 