用Fireworks制作网页动态按钮

- {9 n5 z3 M. N; N # r6 E" ]  \) ~8 z6 F, C

　去过5D多媒体(http://www.5dmedia.com)的朋友一定为其变换的动态按钮而赞叹不已，不要以为它们只能是Flash的产物，其实Fireworks也有专门制作动态按钮的功能哟！
1 B! w" v; k( P, X

4 O+ K6 L9 T. n6 Q9 k
　　用过Flash的人一定知道，一个按钮应该有四种状态：未经过时状态、经过时状态、按下时状态和单击后经过的状态。实现动态按钮就是将这四个状态的按钮效果图片合成，使其产生

0 Q/ B2 T( Y9 a% U- k % z6 y1 s7 W* S, F7 H " X, H) y& Q, t0 R; [6 a( O( T# O8 ?

动态的视觉效果。下面我们就来尝试制作一个动态按钮。

( L# L) b4 l) D2 c

( F) n5 [8 d$ g" q% V& J5 {　　步骤1：启动Fireworks4，新建一个大小为80×30像素的文件，背景选择透明。执行菜单InsertNewButton命令，弹出Button对话框，我们可以看到五个分别为Up、Over、Down、OverWhileDown及ActiveArea的选项卡，前四个这就是上述的四个动作，ActiveArea是为按钮设置链接的(如图1)。快捷键“Shift+F12”打开帧面板，我们会看到为其四个状态而设置的四帧，下面我们分别设置四帧来实现动态变化。
/ b% W/ s2 C' [
6 v2 ~. M5 \+ L6 B, s
. o0 {. b) z& T; S/ T- C
　　步骤2：未经过时状态(Up状态)的制作：选取Up选项卡，于工具栏中选取EllipseTool工具，在画布中画一个大小合适的椭圆形，将漆桶的颜色设置为天蓝色，并将其添充。快捷键“Alt+F7”打开Effect面板为其添加合适效果，选中图片，点击Effect面板下拉框，弹出菜单中执行BevelandEmbossInnerBevel命令，按图2设置好各项参数：对比度为58%，柔和度为7，角度为151，宽度为33，并使其平滑。
, \3 f- T9 q4 h. r0 I* ~& @
5 _5 r6 W6 k" P9 |2 K0 y
! J" ^- O5 R( O+ z. O8 ^' Q% D
　　步骤3：经过时状态(Over状态)的制作：切换至Over选项卡，此时是空的，需要将Up选项卡中图片复制到其中，单击编辑区下方的CopyUpGraphic按钮即可保证两个选项卡中图片位置一致，这里再给该图片添充一些亮色，使图片处于未被选中状态，并设置线条颜色为白色，漆桶颜色为蓝色，快捷键“Shift+F7”开启Fill面板，并在下拉框中选择Rectangle，然后使用漆桶工具填充图片颜色，同时拖动填充手柄进行调整，并设置亮度参数(如图3)使其达到合适效果。
　　步骤4：按下时状态(Down状态)的制作：同样将Up选项卡中的图片复制到Down选项卡中，设置Effect面板innerbevel中Sloped和Inverted的倾斜和反转效果；设置Fill面板的填充方式为WebDither，即网页混色效果，这里可以选择两种颜色混合成一个新颜色，其设置如图4所示。为了使单击按钮时到Down状态，一定要勾选Down选项卡上的IncludeNavBarDownState复选框，否则按钮会停留在Up状态。

7 h/ b( B, g4 F# f" f5 {) I, ?
4 h4 \% |( E+ `
/ u" q" O8 k+ U6 t　　步骤5：单击后经过的状态(OverWhileDown状态)的制作：该状态和未经过时状态Up状态)稍有不同，表现出该连接被点击即可，所以可以将Up状态图片复制过来，将Effect面板中的Innerbevel属性更改为highlighted即可。
9 p* d3 i; l$ Z2 V8 H) E' Z; K- U+ u　　当然每幅图片应该为其添加不同文字，这里就不再赘述。
- {9 f% P: j2 c1 H　　步骤6：ActiveArea设置：选取ActiveArea选项卡，我们会看到已经设置好的热区，单击LinkWizard按钮，于弹出LinkWizard对话框中选取Link选项卡，这里可以键入URL连接，在栏中输入链接的说明文字，并在StatusBarText中输入浏览器状态栏中的说明文字(如图5)。
　　最后导出含有图片的网页文件即可欣赏了！
% f+ @: g4 r0 J+ L" Z  w. [