FW快速制作动态按钮四状态

　按钮是网页的重要组成元素之一，在网页中发挥着十分重要的作用。它主要起着两个作用：第一是起到提示性的作用，有提示性的文本或者图形来告诉浏览者点击后会有什么作用，这样的按钮可以是静态的图片，主要是让浏览者了解点击它起到什么作用，甚至可能仅仅是一个小的较为美观的图片。第二是动态响应的作用，即是指浏览者在进行不同的操作时，按钮能够呈现出不同的效果，响应不同的鼠标时间。　　这样的动态网页按钮一般有四个状态，即Up（释放）、Over（滑过）、Down（按下）和Over While Down（按下时滑过），要编辑按钮的链接或行为还要设置按钮的Active Area（活动区域）。
　　今天我们就来介绍如何在Fireworks中快速制作按钮四状态 。文章末尾提供原文件供大家下载参考。
　　（1）在Fireworks中新建一个大小为200×60的文件，使用工具箱上的圆角矩形工具绘制一个圆角矩形，在属性面板中设置圆角值为47，得到如图1所示的图像。
: o! ]" q) X" C

% }- J2 n+ S( d- ?图1 绘制圆角矩形 　　（2）然后在属性面板中填充设置中选择\\\"Gradient\\\">>\\\"Linear\\\"，即选择线性填充，并在浮动颜色框中设置第一个颜色块值为#B6B6B6，第二个颜色块值为#FFFFFF，得到图2所示的图像。

* l* E( V+ M) a$ _$ R4 v
图2 设置渐变填充 　　（3）由于现在是左右渐变，我们想实现上下渐变，其实只要调整渐变填充的控制杆就可以了，如图3所示。

( ?6 Q' Y3 h1 k; t$ L
# u) v# R4 Y6 ?5 Z  h图3 调整控制杆 　　（4）按住Ctrl＋Shift＋D克隆圆角矩形，然后使用工具箱上的矩形工具绘制一个矩形，并使用选择工具同时按住Shift键选择矩形和克隆所得的圆角矩形，如图4所示。

' x. ^0 I. o' M( A+ V& D$ K
; }% e  `) b; b- f+ [图4 同时选中矩形和圆角矩形 　　（5）点击\\\"Modify\\\"菜单，选择\\\"Combine Paths\\\"（组合路径）>>\\\"unch\\\"（打孔），将两个路径使用打孔效果，得到图5所示的图像。
& e% X) b0 A8 W& |) H+ e/ ~

* l" W. D3 c* g& D图5 打孔后的图像效果 　　（6）选中打孔所得的图形，在属性面板中将其笔触设为无，线性填充的第一个颜色块设为#3399FF，第二个颜色块设为#D0F3FD，适当调整控制杆，并在属性面板中设置不透明度设为70%，得到如图6所示的图像。
4 d# ~6 u/ c8 C+ y2 M
7 J' W: D$ S2 t0 i0 [& v% y
图6 调整填充效果 　　（7）为了实现高光的效果，我们将画布显示的比例调到400%，然后点击工具箱上的钢笔工具，绘制图7所示的路径。


/ @8 a. K( x( S, C图7 绘制路径 　　（8）调整路径的不透明度为90％，切换到100％视图，并适当调整一些填充效果让其达到视觉上的最佳，得到图8所示的图像。
: B1 u1 @0 y6 ~. g% p0 D

0 E8 j4 ?' |. e, ~1 ]图8 添加路径后的效果 　　（9）添加文本，并为文本添加发光效果，设置发光颜色为白色，得到如图9所示的图像。
9 i- ^$ T9 c1 N1 u  x* C

图9 添加文本 　　（10）将画布显示的比例调到400%，用圆形工具和钢笔绘制一个简单的放大镜图像，线条颜色为白色，无填充。如图10所示。
7 A) ]0 F2 _1 \% l2 p3 z

( y8 c( p& z4 F& y) {/ w5 V' v图10 绘制\\\"放大镜\\\" 　　（11）切换到100％视图，然后选中底下的圆角矩形，在其属性面板上为其添加阴影效果，最终我们得到图11所示的按钮图像。


9 O/ Z/ s7 h7 m( d0 ]图11按钮图像 　　（12）打开前面制作好的按钮图像，按住Ctrl＋A全选对象，然后按Ctrl＋G将所有对象组合，如图12所示。
0 D6 v5 Q% L5 F/ l0 m* s
+ ]5 G6 R% R9 t/ w
( ^2 u# _9 ^; z) ~* b图12 组合所有对象 　　（13）按F8在弹出的符号属性对话框中选择转换为按钮单选框并命名，如图13所示。

+ |" _8 H; E; h5 l- @- W
" O2 W! |- H9 z( g# X! b- h图13 将组合对象转换为按钮符号 　　（14）点击\\\"OK\\\"，这时候发现刚才的组合已经被转换为按钮图像了，此时对象上已经添加了切片，并且左下角有个小箭头图标，表示现在已经是一个按钮符号了。　　我们想制作各个状态的按钮图像那么只需要双击这个对象，就可以弹出图14所示的按钮编辑器了。选择左下角的\\\"Import a Button\\\"按钮我们甚至还可以导入Fireworks自带的按钮库，方便我们制作按钮，如图15所示。　　另外Fireworks的\\\"Edit\\\">>\\\"Libraries\\\"菜单下自带了Animations（动画）、Bullets（小图标）、Buttons（按钮）和Themes（主题）四个符号库，分别如图15至18所示，使用它们我们可以方便地制作出许多精美的效果，这里读者可以自己去尝试。

, V" @# w& `$ @- J
图14 按钮编辑器

0 [! w: \1 X- Y% i$ }# O图15 Animations符号库

' R0 S7 D! m' x( K4 ^图16 Bullets符号库
! |' f$ n# J6 I' p# n4 M3 H
2 e5 k5 s5 T( Z2 y* D图17 Buttons符号库

4 n- Q* |& K4 {图18 Themes符号库 　　（15）按钮的Up状态我们就选择原来的按钮状态，不做改动，接着我们选择按钮的Over状态栏，这时候发现里面是空白的，如图19所示。不要着急，点击 我们可以将Up状态的按钮图像复制到Over状态，然后适当地修改文本和填充的颜色就可以制作好按钮的Over状态了，如图20所示。
# B7 w+ a+ D8 y
- E% a* J: \' h
, b3 R3 l* n/ ]# A) Q图19 按钮Over状态没有图像
( ~' |, q) Y" p" N
" y& i' |/ ^/ ^( G  G图20 复制Up状态修改后的效果 　　（16）使用同样的方式在Down选项栏中复制Over状态的按钮图像，然后调整按钮的填充和字体颜色等，得到图21所示的按钮的Down状态图像。
% o( y& O: I/ K- f) X/ e# Q

图21 按钮的Down状态 　　（17）接着用上面的方法制作按钮的Over While Down状态图像效果，如图22所示。

8 o5 v9 D( Y) y
2 v* p! j% I# i. `* l8 F4 J% R图22 按钮的Over While Down状态 　　（18）接着选择\\\"Active Area\\\"选项栏，使用鼠标拖动活动区域切片的大小，使得它和按钮大小基本符合，如图23所示。
7 _$ Y" M+ `: P( h$ T  ?& P# x
5 W6 Y% ]7 X( `- N3 B9 ~9 j
+ S" r9 g5 b* S+ L3 ~$ Q图23 设置按钮活动区域 　　（19）完成之后选择\\\"Done\\\"按钮，回到工作区，切换到4幅模式的图像预览看看按钮的效果，如图24所示，这样我们的响应按钮就制作好了。原文件下载
" o( z4 ?: M+ U2 t0 @# h8 A0 ?
8 s- O; d$ w1 f# v2 k
8 y" V: \& z1 M& y0 _3 n2 [图24 四幅视图模式预览按钮效果