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

　　本教程利用Fireworks的层、帧、切片等工具，让Fireworks自动生成JavaScript来打造图片提示效果。通过学习本教程，读者可了解到关于层、帧、切片及导出HTML网页格式的方法及技巧，而且网友们还可以将此种效果应用到各种网页上，最终效果如下（光标放在按钮上，下面的提示图片也相应的发生变化）：
图1
/ q/ ]3 A9 i% B( j　　二、点击：文件—导入（快捷键为Ctrl+R），如图2所示。
( ^, d+ X+ a; U$ b4 T+ [
- l: j4 L3 \" N; [3 j  o% O
  }- s5 [% R5 G+ V% ]0 f图2
. r) e& ?# z* Y0 @　　三、导入所需的素材，如图3所示。


0 _0 R  T3 l9 ~% r图3
　　四、点击：窗口—对齐，打开对齐面板，如图4所示。
0 |9 E3 H! Y- m; c0 P9 C/ s
$ ?9 U- d8 B$ K5 t
图4
) e) N, b  _5 ~9 Q
! B* ~1 a( ~  N  b! d　　五、选择三张素材图片，分别点击水平居中及垂直居中命令，让三张图片居中对齐，如图5所示。
% L8 A) z9 b  O+ H

图5
0 j% d; q- q. f. ^8 v7 b7 _4 N5 s　　六、选择矩形工具，在画布上绘制出一个矩形，并设置为黄色。如图6所示。


图6
; M  e# ~! K" ~3 d# V　　七、点击工具架中的文本工具，在黄色矩形上面输入：漫画，如图7所示。

8 _7 o' y% r5 i2 x- S* |9 N
图7
" W8 d5 K; T. t+ t$ {/ {2 n* k　　八、用同样的方法，制作另一个按钮。如图8所示。


; P( f( [( u% {4 d# h" U0 A. c图8
　　九、点击：窗口——样式（快捷键为Shift+F11），打开样式面板，如图9所示。
) g5 {3 e- [8 D" t

3 u4 U) u& }  _图9
* M) j4 \/ l1 M* _. q% `
- l: d" t4 v$ k　　十、选择二个矩形（小提示：按住Shift，可以多选），点击如图所示的样式（当然，读者也可以选择其它样式甚至自定义样式），如图10所示。

5 K+ ~* w& E' p6 a
1 v* C7 R+ G; P9 f3 `" o! ~: V图10
0 H2 t- Y& |( b8 T- c　　十一、同时选择三张位图，如图11所示（选择技巧：在层面板中，点击第一个位图层，再按着Shift点击最后一个位图层便可多选了）。
- W) k% Z& q: ~  |

, s7 E- a+ Y) Z4 J1 `7 P图11
　　十二、在选择三个位图层的状态下，点击帧面板中的分散到帧按钮，如图12所示的红色部分。


图12
　　十三、选择两个按钮，点击：编辑——复制（快捷键为Ctrl+C），如图13所示。
9 K- B: P. @# l5 m0 o  M- b

图13
) a$ c' w! j$ U3 g% e　　十四、在帧面板中选择帧1，并按Ctrl+V粘贴，如图14所示。
0 J6 l6 U  j: e! j" u9 g
* ]- Z6 a. n8 p' q7 h' E% @
* y/ w9 a6 |# I) r/ R图14

　　十五、用同样的方法，在帧面板中选择帧2贴上按钮，如图15所示。
6 N; X4 ~  Y2 i, i
' ]8 C$ d( W# P# U" s. J& [
$ s7 Z. A' D  A- T- s1 {图15
7 d) Y( r: z! r6 _- \　　十六、在工具箱中选择切片工具，如图16所示进行切片。
  T% |1 y* F7 n6 R$ E# w* p: j
  H/ g! l; }: k6 F6 `
图16
　　十七、使用选择工具，将漫画切片中心拖拽到位图切片区，并在弹出的交换图像中选择帧3，如图17所示。
8 n+ |% D! K" z; T, U& H

图17
　　十八、使用选择工具，将油画切片中心拖拽到位图切片区，并在弹出的交换图像中选择帧2，如图18所示。
, g2 U4 V4 @' u, j5 S& f& S1 }
0 B& J$ P6 u# \
图18
: H! y1 E* p8 H7 K  ], G9 v- _　　十九、最终完成，我们可以按F12在浏览器上看一下效果。确定没有问题，便可导出HTML网页了。如图19所示。
, i  q  |/ k9 `3 k" q. ~: ?8 W" U
  w8 K( g! z3 D1 |
图19