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

　　本教程利用Fireworks的层、帧、切片等工具，让Fireworks自动生成JavaScript来打造图片提示效果。通过学习本教程，读者可了解到关于层、帧、切片及导出HTML网页格式的方法及技巧，而且网友们还可以将此种效果应用到各种网页上，最终效果如下（光标放在按钮上，下面的提示图片也相应的发生变化）：
& [# x- h/ I% H图1
　　二、点击：文件—导入（快捷键为Ctrl+R），如图2所示。
8 }4 r- O' S8 e
* }4 W, f1 f: ~% }7 s( {9 P) `
( Y1 W: H8 q# l. T" J% w图2
　　三、导入所需的素材，如图3所示。
% x1 ~) f# C1 M: I
- I8 D5 L1 c" N# e
图3
# p0 u: e. [9 p  u- Y, c5 v　　四、点击：窗口—对齐，打开对齐面板，如图4所示。
, }/ ~1 f* y6 F' z% }1 L, t
* c! Q6 j* H* y( Z
图4

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


图5
5 L7 ]( ?+ S4 ?( N2 Z( Q1 @5 L' Y　　六、选择矩形工具，在画布上绘制出一个矩形，并设置为黄色。如图6所示。
6 f: O2 C. e) X, ^

. L8 J& |1 W3 A# S图6
7 B: ~8 e$ t, S  T; R: E& {6 {　　七、点击工具架中的文本工具，在黄色矩形上面输入：漫画，如图7所示。

& K6 X# e. h8 e& B. d# j4 l
图7
　　八、用同样的方法，制作另一个按钮。如图8所示。


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

. r4 {( ?; w- U" X% l
图9

7 p- V8 D1 u3 @2 g  H4 f, U　　十、选择二个矩形（小提示：按住Shift，可以多选），点击如图所示的样式（当然，读者也可以选择其它样式甚至自定义样式），如图10所示。

5 R3 J9 |0 _( ?* K
图10
　　十一、同时选择三张位图，如图11所示（选择技巧：在层面板中，点击第一个位图层，再按着Shift点击最后一个位图层便可多选了）。
- r6 s( u" C0 j" z0 I
- L, P% m; Y1 J+ k) j; L
图11
　　十二、在选择三个位图层的状态下，点击帧面板中的分散到帧按钮，如图12所示的红色部分。

5 W* Z0 a) t" c* ~
图12
　　十三、选择两个按钮，点击：编辑——复制（快捷键为Ctrl+C），如图13所示。
# D  w- L4 Q" r) j4 ^
  h+ L) Z/ i( `% {. |6 L
" I6 t' I; l8 F. ]& ?# X0 q图13
　　十四、在帧面板中选择帧1，并按Ctrl+V粘贴，如图14所示。


图14

　　十五、用同样的方法，在帧面板中选择帧2贴上按钮，如图15所示。
5 [  {' \# F* h- Q3 X' ^( O
8 x2 D+ o# k3 ]7 ?$ w# o# [2 k( l
图15
; n" L2 @, x/ y/ o  ~1 h+ F! O　　十六、在工具箱中选择切片工具，如图16所示进行切片。
7 q8 `' Q! [; \- k
/ y( G' O; S; O$ K4 v1 ]. a" v
图16
1 q; ~3 ~4 Z4 d2 v1 c　　十七、使用选择工具，将漫画切片中心拖拽到位图切片区，并在弹出的交换图像中选择帧3，如图17所示。
$ ^/ C6 X" c  @' E4 F& D0 G
  s* |" ?* {6 }- V
+ [7 E8 s" G4 ^, B! q图17
, H+ L5 [1 ^' D9 H" [  n0 W2 D  ?　　十八、使用选择工具，将油画切片中心拖拽到位图切片区，并在弹出的交换图像中选择帧2，如图18所示。
5 N6 V4 T: S2 I% v

9 u6 S* P4 N9 V5 Z) k8 G) a5 _* \图18
　　十九、最终完成，我们可以按F12在浏览器上看一下效果。确定没有问题，便可导出HTML网页了。如图19所示。
- P, R- p7 Q# @+ k

图19