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

　　本教程利用Fireworks的层、帧、切片等工具，让Fireworks自动生成JavaScript来打造图片提示效果。通过学习本教程，读者可了解到关于层、帧、切片及导出HTML网页格式的方法及技巧，而且网友们还可以将此种效果应用到各种网页上，最终效果如下（光标放在按钮上，下面的提示图片也相应的发生变化）：
; E, V; F$ _  Y  v7 Z" @图1
　　二、点击：文件—导入（快捷键为Ctrl+R），如图2所示。


图2
4 w; D: R+ o, o+ v, o8 C  {! x　　三、导入所需的素材，如图3所示。
" [4 F5 }# \" n5 B. B' q

图3
7 Q+ L5 p( D6 w( G5 R　　四、点击：窗口—对齐，打开对齐面板，如图4所示。


图4

) r$ H2 W$ }, e" M5 a$ @$ z　　五、选择三张素材图片，分别点击水平居中及垂直居中命令，让三张图片居中对齐，如图5所示。
- O% k1 p7 \5 {/ N* w$ _9 m
% V* y+ X' t: V: i. C
7 j* D) n. s$ S, M  E& T图5
( k1 [2 w& j5 p* m# c　　六、选择矩形工具，在画布上绘制出一个矩形，并设置为黄色。如图6所示。


; C. a4 `% y" ]" d图6
　　七、点击工具架中的文本工具，在黄色矩形上面输入：漫画，如图7所示。
0 f& q* s4 ]4 A) I; p' I, t0 x

图7
　　八、用同样的方法，制作另一个按钮。如图8所示。

0 s4 ^$ |( J. i6 T
图8
1 e' k/ @& I! p7 Z9 P; n# I/ ^* J: }) J　　九、点击：窗口——样式（快捷键为Shift+F11），打开样式面板，如图9所示。
  Y# B8 K' U( ^5 E6 Q+ O& k
! E7 X) p7 h- u; H
图9

% l' _8 g+ ]7 T: M9 J8 F  X. k% L　　十、选择二个矩形（小提示：按住Shift，可以多选），点击如图所示的样式（当然，读者也可以选择其它样式甚至自定义样式），如图10所示。


图10
　　十一、同时选择三张位图，如图11所示（选择技巧：在层面板中，点击第一个位图层，再按着Shift点击最后一个位图层便可多选了）。

; W0 O; ]8 `7 o$ }& T6 e
图11
　　十二、在选择三个位图层的状态下，点击帧面板中的分散到帧按钮，如图12所示的红色部分。

6 T) M) J. R9 S
; e' Q, R* \+ Y# K6 n图12
) K/ J* l1 p7 U( Q' G　　十三、选择两个按钮，点击：编辑——复制（快捷键为Ctrl+C），如图13所示。
0 P9 E1 j( n- i0 A; @4 w
' y. R9 k$ W! v# y' l
图13
; Y1 E# f: u! @7 v4 j% U' d　　十四、在帧面板中选择帧1，并按Ctrl+V粘贴，如图14所示。
; d5 A+ q0 n( R% S5 E4 A0 i
3 x( L$ ~0 Q3 K5 \2 d% B
& F& K* Z2 H5 |: s, K9 V6 @" `, l" v图14
& b$ ]& w+ |* d4 D
2 U9 i' x6 d& E: H  [　　十五、用同样的方法，在帧面板中选择帧2贴上按钮，如图15所示。
% [, C) C8 M' ?; [" G
$ D* S" u2 ]8 ^3 c/ {8 w
图15
- O) e; h1 m0 j7 [6 D7 F" @　　十六、在工具箱中选择切片工具，如图16所示进行切片。


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


图17
" b; w$ ~) L$ t" b% \8 J9 }, e　　十八、使用选择工具，将油画切片中心拖拽到位图切片区，并在弹出的交换图像中选择帧2，如图18所示。

2 A8 Y( P/ a) q2 g/ b; y+ J) e, D2 w
! ~8 g( l: S% x: y; \9 W, `8 V6 ?图18
　　十九、最终完成，我们可以按F12在浏览器上看一下效果。确定没有问题，便可导出HTML网页了。如图19所示。
' x  |! Q' N) Q# {0 H7 L
* t0 n! b7 v; \1 G+ t
  W" l. I( a0 ~- I) [图19