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

　　本教程利用Fireworks的层、帧、切片等工具，让Fireworks自动生成JavaScript来打造图片提示效果。通过学习本教程，读者可了解到关于层、帧、切片及导出HTML网页格式的方法及技巧，而且网友们还可以将此种效果应用到各种网页上，最终效果如下（光标放在按钮上，下面的提示图片也相应的发生变化）：
! `3 l$ y. s! z% e7 C图1
　　二、点击：文件—导入（快捷键为Ctrl+R），如图2所示。
5 ^5 R! c2 A1 X: r1 }

图2
　　三、导入所需的素材，如图3所示。

" A2 R) j% l- Q8 K  T" K9 j
图3
　　四、点击：窗口—对齐，打开对齐面板，如图4所示。

7 q& B0 C4 o# E4 Z  j
9 C) S. g7 q+ s8 H+ E图4

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

2 I$ f$ z3 }2 t, j, s7 @
图5
　　六、选择矩形工具，在画布上绘制出一个矩形，并设置为黄色。如图6所示。
: q  h* P" a6 G1 J: Y4 L
$ n! f! r! v( I1 Y4 Y
) V/ d8 h- a& S$ w) y图6
　　七、点击工具架中的文本工具，在黄色矩形上面输入：漫画，如图7所示。
$ s1 p# k& E# w, _8 J. _2 p5 P

图7
　　八、用同样的方法，制作另一个按钮。如图8所示。
4 Z% c: h2 z( G/ d' ?( w" {

图8
! T0 c4 y+ D% ?　　九、点击：窗口——样式（快捷键为Shift+F11），打开样式面板，如图9所示。

5 w$ w: L, p& i7 _
图9

　　十、选择二个矩形（小提示：按住Shift，可以多选），点击如图所示的样式（当然，读者也可以选择其它样式甚至自定义样式），如图10所示。
3 J0 b( d" S+ v8 x
, N. n% z8 H& a
1 }8 l  K+ J) d) V; A图10
　　十一、同时选择三张位图，如图11所示（选择技巧：在层面板中，点击第一个位图层，再按着Shift点击最后一个位图层便可多选了）。
: G% Y5 F. E. k% a1 a$ _6 k1 O- l
9 Z  o: ^% O) b. h' I: N
' t# U% t! `7 o8 q9 f5 u图11
6 I2 W) F% z8 y" Y. g　　十二、在选择三个位图层的状态下，点击帧面板中的分散到帧按钮，如图12所示的红色部分。


图12
9 J0 E7 U. F2 k5 v/ O　　十三、选择两个按钮，点击：编辑——复制（快捷键为Ctrl+C），如图13所示。
. L* i* f7 O% U3 \
. L: g' K9 P, E. R/ H
; C5 L" r  R  L- R7 Q  v2 t图13
　　十四、在帧面板中选择帧1，并按Ctrl+V粘贴，如图14所示。


图14

　　十五、用同样的方法，在帧面板中选择帧2贴上按钮，如图15所示。
- K) W1 m, z" u/ t" A% m/ C

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


图16
) L4 A/ ^7 g3 X& }" l% N　　十七、使用选择工具，将漫画切片中心拖拽到位图切片区，并在弹出的交换图像中选择帧3，如图17所示。

: o% z8 S- f7 |% m
0 `; z; j1 a( T# b( u8 e图17
　　十八、使用选择工具，将油画切片中心拖拽到位图切片区，并在弹出的交换图像中选择帧2，如图18所示。
" F% o+ m8 `7 k* Q# ^( E" D

图18
　　十九、最终完成，我们可以按F12在浏览器上看一下效果。确定没有问题，便可导出HTML网页了。如图19所示。
1 e9 `6 b' F; c6 Z1 [. \  J0 Z8 J

; ^/ g4 F& g+ H图19