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

　　本教程利用Fireworks的层、帧、切片等工具，让Fireworks自动生成JavaScript来打造图片提示效果。通过学习本教程，读者可了解到关于层、帧、切片及导出HTML网页格式的方法及技巧，而且网友们还可以将此种效果应用到各种网页上，最终效果如下（光标放在按钮上，下面的提示图片也相应的发生变化）：
图1
+ r* t% k* [& F+ Q0 S# k" ?3 o; d　　二、点击：文件—导入（快捷键为Ctrl+R），如图2所示。
4 n; j3 S4 W4 G0 T4 ^
- m" T# U4 L$ X
" \  P6 N: a/ d/ q  C+ A图2
　　三、导入所需的素材，如图3所示。

8 W7 P" {+ \% x% K
* ~  m* _& v, g! s$ U图3
) W* b, e: c% K( u0 U% t" R, P　　四、点击：窗口—对齐，打开对齐面板，如图4所示。
: x' v, T- e8 _, Q/ k: P
( W& P( G% I; y; M7 [
图4
  Y8 A# m: L) W6 S  f9 N
% i+ E0 P, F0 k1 z) R　　五、选择三张素材图片，分别点击水平居中及垂直居中命令，让三张图片居中对齐，如图5所示。
, Q, [2 ]+ q2 [& m3 Z* F$ G% Q
! q; K9 \2 m& x9 `
7 N8 T) S9 I* X# e3 p  M图5
* r: K' Z7 @, x' m, g6 q　　六、选择矩形工具，在画布上绘制出一个矩形，并设置为黄色。如图6所示。


图6
　　七、点击工具架中的文本工具，在黄色矩形上面输入：漫画，如图7所示。
( V+ [$ n" I, n4 R3 p4 H6 o

; h+ \  R. d7 }/ I# P图7
7 Z6 Y0 ]$ f. ?8 X* V　　八、用同样的方法，制作另一个按钮。如图8所示。

7 T4 B% x$ \  V* ~1 V1 h8 ?8 o: ?
; a, s  U4 ]( Y6 P3 c图8
, D# T5 S0 \8 w: p* @　　九、点击：窗口——样式（快捷键为Shift+F11），打开样式面板，如图9所示。
& ~) [' `! H: _& A
9 }5 i5 f8 U1 R/ n
3 d2 Q3 `- m8 j9 T图9

6 `5 \& O* |$ O  L& C% N8 n5 @　　十、选择二个矩形（小提示：按住Shift，可以多选），点击如图所示的样式（当然，读者也可以选择其它样式甚至自定义样式），如图10所示。
6 W" k, B8 N8 Z' \
, D2 m( F- v) r( c' S8 n
图10
: G# R9 a% Y" V) D; @2 n$ M　　十一、同时选择三张位图，如图11所示（选择技巧：在层面板中，点击第一个位图层，再按着Shift点击最后一个位图层便可多选了）。


图11
　　十二、在选择三个位图层的状态下，点击帧面板中的分散到帧按钮，如图12所示的红色部分。


" p: C5 ^' j' f% D( u图12
　　十三、选择两个按钮，点击：编辑——复制（快捷键为Ctrl+C），如图13所示。
4 ^, z; u' y5 b5 d  J% d
, A9 V2 x1 v7 ^, K6 W8 \/ q  N8 H
图13
　　十四、在帧面板中选择帧1，并按Ctrl+V粘贴，如图14所示。
" L& ?+ [- k; Z0 A% t/ p
6 i4 l+ E! s- I
图14
8 C0 h8 E: e. S2 R( s! g+ V
　　十五、用同样的方法，在帧面板中选择帧2贴上按钮，如图15所示。
8 @; C1 z# ^% S; f

' h' Z7 t" z, [图15
& Q; V! G* f% N# T1 c; x7 D　　十六、在工具箱中选择切片工具，如图16所示进行切片。


图16
4 O# Q) O, Q- a" }' }; p; ], U6 [. W　　十七、使用选择工具，将漫画切片中心拖拽到位图切片区，并在弹出的交换图像中选择帧3，如图17所示。
" _- j, n4 J1 d, i% \$ W$ V
% O% x1 Y, ?$ F  c" M/ z' t
图17
6 m" N8 r* _- F　　十八、使用选择工具，将油画切片中心拖拽到位图切片区，并在弹出的交换图像中选择帧2，如图18所示。
9 ?8 G- ^" H- n( d1 Y9 `8 F! a
. o; @* w1 G( a2 Q! w; }% b
图18
　　十九、最终完成，我们可以按F12在浏览器上看一下效果。确定没有问题，便可导出HTML网页了。如图19所示。
+ l6 [; B: n4 _. `6 d1 e% [
7 V0 L9 ~) _% |1 _, |" s2 x; b
图19