Fireworks打造javascript图片提示效果(1)

　　本教程利用Fireworks的层、帧、切片等工具，让Fireworks自动生成JavaScript来打造图片提示效果。通过学习本教程，读者可了解到关于层、帧、切片及导出HTML网页格式的方法及技巧，而且网友们还可以将此种效果应用到各种网页上，最终效果如下（光标放在按钮上，下面的提示图片也相应的发生变化）：
& O6 L. g+ P* G6 s) R2 ?( f图1
　　二、点击：文件—导入（快捷键为Ctrl+R），如图2所示。
! {7 G* v$ e4 j& A0 U& u, }
0 E, W7 x7 G! `4 p
$ E' v7 n7 L' L! x; A- q5 U0 G& \% M/ g图2
　　三、导入所需的素材，如图3所示。

3 L0 c  }" h9 X
图3
　　四、点击：窗口—对齐，打开对齐面板，如图4所示。
1 n9 v! {( c5 B+ a6 {
7 U. O6 p3 ^% }4 {5 V7 ?
2 ]" n; e* G, m9 [1 f: B( }图4

　　五、选择三张素材图片，分别点击水平居中及垂直居中命令，让三张图片居中对齐，如图5所示。

+ w8 S/ _( p+ Q/ p$ Q! Q
图5
　　六、选择矩形工具，在画布上绘制出一个矩形，并设置为黄色。如图6所示。


图6
　　七、点击工具架中的文本工具，在黄色矩形上面输入：漫画，如图7所示。

) F- ?3 P6 F1 @9 R! z( p9 z# ]1 d; i
图7
* r4 N, q2 s4 `& g% }　　八、用同样的方法，制作另一个按钮。如图8所示。
( b4 Q- b2 _. ~( W. s4 E* ]8 I$ ?: ^9 Q
: p* I6 K& W9 i; G1 `! z
图8
$ L. ]# T1 i: d2 r. o　　九、点击：窗口——样式（快捷键为Shift+F11），打开样式面板，如图9所示。
3 F0 |$ p8 I8 J6 n( c( ?* M
7 g- d  P3 T. \3 Q" q' p& E
$ ?4 D  ?  g- B2 G: U2 }( ]图9

　　十、选择二个矩形（小提示：按住Shift，可以多选），点击如图所示的样式（当然，读者也可以选择其它样式甚至自定义样式），如图10所示。
5 [+ x+ Z9 w- U5 t8 ^' M4 m* p
7 G' f4 o0 V4 K8 l2 ~0 x
图10
　　十一、同时选择三张位图，如图11所示（选择技巧：在层面板中，点击第一个位图层，再按着Shift点击最后一个位图层便可多选了）。
% l9 H3 O8 Z% M
/ j# R$ I3 d4 i: D% e
; c! }6 X9 B4 f8 B1 Q' R& e图11
　　十二、在选择三个位图层的状态下，点击帧面板中的分散到帧按钮，如图12所示的红色部分。
# V0 B! c2 m& h7 Q
$ |* a, C* e& x. U% L* q$ L
图12
　　十三、选择两个按钮，点击：编辑——复制（快捷键为Ctrl+C），如图13所示。
1 Y" P0 U2 @- X% U$ a

图13
2 C( H  W* F* B1 U6 R8 c; ?　　十四、在帧面板中选择帧1，并按Ctrl+V粘贴，如图14所示。


图14
! [# q& u) x+ t- q
　　十五、用同样的方法，在帧面板中选择帧2贴上按钮，如图15所示。


图15
　　十六、在工具箱中选择切片工具，如图16所示进行切片。

+ H* {3 h7 m# B# ]- x) V4 U9 u4 b
图16
　　十七、使用选择工具，将漫画切片中心拖拽到位图切片区，并在弹出的交换图像中选择帧3，如图17所示。
0 Z' o6 V- e/ |8 _9 L; Y

图17
　　十八、使用选择工具，将油画切片中心拖拽到位图切片区，并在弹出的交换图像中选择帧2，如图18所示。


图18
　　十九、最终完成，我们可以按F12在浏览器上看一下效果。确定没有问题，便可导出HTML网页了。如图19所示。

4 }( N4 s- W- D) x
图19