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

　　本教程利用Fireworks的层、帧、切片等工具，让Fireworks自动生成JavaScript来打造图片提示效果。通过学习本教程，读者可了解到关于层、帧、切片及导出HTML网页格式的方法及技巧，而且网友们还可以将此种效果应用到各种网页上，最终效果如下（光标放在按钮上，下面的提示图片也相应的发生变化）：
+ b/ K8 a1 i2 K% U0 ?3 p3 L图1
3 j$ F  @# n" y3 Q( d) V7 I  \　　二、点击：文件—导入（快捷键为Ctrl+R），如图2所示。


- {: n5 M+ e& @: V& E2 Z; ~5 N% j图2
　　三、导入所需的素材，如图3所示。


* T9 U, y5 {' t& D0 T+ U图3
9 i% \7 G! h1 ?; P$ s5 }$ @9 E　　四、点击：窗口—对齐，打开对齐面板，如图4所示。


图4
5 Y1 B. J- e, t+ r) v0 P  ?% y
6 y) R# Q/ _; Q　　五、选择三张素材图片，分别点击水平居中及垂直居中命令，让三张图片居中对齐，如图5所示。

8 n% n8 c/ ]- {9 T% z: W5 _
图5
　　六、选择矩形工具，在画布上绘制出一个矩形，并设置为黄色。如图6所示。


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

. h( ]' q9 h5 ~% {' v! K
6 V1 O) g# j. Y# u6 l$ H图7
! S3 n- u) f2 q　　八、用同样的方法，制作另一个按钮。如图8所示。

# l& ]* l% I' ^- D  Y' w
5 V/ {0 w( l3 Z3 [% G6 a图8
　　九、点击：窗口——样式（快捷键为Shift+F11），打开样式面板，如图9所示。
6 |3 _7 h0 t4 A, E) V4 W0 T

' E! c; X! w2 j/ m图9
+ N9 @, U0 p) A; \
　　十、选择二个矩形（小提示：按住Shift，可以多选），点击如图所示的样式（当然，读者也可以选择其它样式甚至自定义样式），如图10所示。
( J% X6 h) s4 E* v" \2 d# Z
0 V1 _$ F7 A% Y" X7 }
图10
　　十一、同时选择三张位图，如图11所示（选择技巧：在层面板中，点击第一个位图层，再按着Shift点击最后一个位图层便可多选了）。
" @, U+ d: a% M7 p8 E- U
4 i" s( J) T8 h( r& j% h
图11
　　十二、在选择三个位图层的状态下，点击帧面板中的分散到帧按钮，如图12所示的红色部分。


4 [8 l8 S; p( z, I# O! c图12
1 W! Y* X* }: V% }) b7 \) ?　　十三、选择两个按钮，点击：编辑——复制（快捷键为Ctrl+C），如图13所示。
* `0 w8 G% s: J; z3 F: d+ M

' E/ w' m) v% I  o' g" C图13
　　十四、在帧面板中选择帧1，并按Ctrl+V粘贴，如图14所示。

! Z" I* ]$ m9 V0 T7 J/ Q+ m
+ Z1 T6 g3 X4 ?- A+ z* E图14
+ B. b% O* e7 D1 o! Q8 t" s/ A
　　十五、用同样的方法，在帧面板中选择帧2贴上按钮，如图15所示。
& l6 [+ B3 U+ h) |6 d6 l$ R8 M
) Y: s* g% s. ^. t, c
图15
5 M' n' U& X8 _, F) k- P- z　　十六、在工具箱中选择切片工具，如图16所示进行切片。
" k) J- _. M: E' m0 D
3 l) [- R- l/ |9 h0 Z
图16
" {4 F% ^9 _% I6 Q. ~　　十七、使用选择工具，将漫画切片中心拖拽到位图切片区，并在弹出的交换图像中选择帧3，如图17所示。
+ K' @7 {* I0 x6 _, A( @

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


图18
. k9 w! y+ [) t　　十九、最终完成，我们可以按F12在浏览器上看一下效果。确定没有问题，便可导出HTML网页了。如图19所示。
! G' X5 U6 b3 B+ @& \. T
% M6 S+ N; v! S3 @8 q6 A# o
" D# w* _2 d% l( e! d4 s" E, F图19