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

　　本教程利用Fireworks的层、帧、切片等工具，让Fireworks自动生成JavaScript来打造图片提示效果。通过学习本教程，读者可了解到关于层、帧、切片及导出HTML网页格式的方法及技巧，而且网友们还可以将此种效果应用到各种网页上，最终效果如下（光标放在按钮上，下面的提示图片也相应的发生变化）：
8 H4 g7 K1 F8 j. Z图1
　　二、点击：文件—导入（快捷键为Ctrl+R），如图2所示。
0 t* ~( s& ?! B/ d, c0 g" q' ^9 B5 P+ |

% D  y0 ~  u9 w( ]1 l" S图2
　　三、导入所需的素材，如图3所示。
( p4 \# C. R6 G5 F: ~, U6 d; W& r# q
4 P5 B) w% y' r* Q* d, h$ y
图3
　　四、点击：窗口—对齐，打开对齐面板，如图4所示。
6 a9 R6 D  e4 A4 Q, a- a, P% g
+ ^) k: k: x# t7 |& e; {; ~
图4

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


图5
+ ?8 t/ x, F' V4 p! e' y& `8 k( Y' a　　六、选择矩形工具，在画布上绘制出一个矩形，并设置为黄色。如图6所示。

% D- W- B- l8 [8 c4 u5 A3 n2 z* |2 z
$ N# E3 ?' c* X9 q, D1 r$ O( u* r图6
) r; I$ Q4 i, w* ~! x　　七、点击工具架中的文本工具，在黄色矩形上面输入：漫画，如图7所示。

1 A/ [. A! G9 t
图7
　　八、用同样的方法，制作另一个按钮。如图8所示。

% p8 `6 K0 h& Y- W$ G- [0 ^3 Q
图8
　　九、点击：窗口——样式（快捷键为Shift+F11），打开样式面板，如图9所示。
0 a0 C3 P2 V: z
( [( i  ?( L$ t+ l8 W8 N) f- b
图9
9 F* E+ m4 M  s# Q7 \8 o2 e
9 Q8 R, l/ T! R# p　　十、选择二个矩形（小提示：按住Shift，可以多选），点击如图所示的样式（当然，读者也可以选择其它样式甚至自定义样式），如图10所示。


图10
8 E' {' B' l) a: O% ?3 _　　十一、同时选择三张位图，如图11所示（选择技巧：在层面板中，点击第一个位图层，再按着Shift点击最后一个位图层便可多选了）。
( U% C+ `; E/ p+ `8 m
2 d8 e4 Q9 _* k: O% o
图11
+ R8 c  w  G/ X) z! {" @/ i" h3 `　　十二、在选择三个位图层的状态下，点击帧面板中的分散到帧按钮，如图12所示的红色部分。
& I0 P4 P2 E  t9 E" x. F  E9 Z

  e6 ]2 c( }3 J5 ]) O3 a图12
3 N. E: R; Q0 K2 Z; n　　十三、选择两个按钮，点击：编辑——复制（快捷键为Ctrl+C），如图13所示。

; ?% O5 v4 q, L  n% R
图13
! d6 p- H( H- I! U　　十四、在帧面板中选择帧1，并按Ctrl+V粘贴，如图14所示。
. a+ e; g: @- W6 f( e: ]
6 l" e! x- D5 N
图14

" C. L6 R. {+ C# v3 C( i' T　　十五、用同样的方法，在帧面板中选择帧2贴上按钮，如图15所示。


图15
　　十六、在工具箱中选择切片工具，如图16所示进行切片。
  p) Z: L, i$ F1 i! w& ]+ X
# j4 g2 ^& |6 B1 ?# l8 p+ h
6 c, N* q% z( l- v- k+ q6 A6 V3 c( Z图16
: x; g, ~$ {6 \, T" L8 d) M: z　　十七、使用选择工具，将漫画切片中心拖拽到位图切片区，并在弹出的交换图像中选择帧3，如图17所示。

1 v4 @' [5 G5 v
图17
, ?8 k) I& `( ?/ G　　十八、使用选择工具，将油画切片中心拖拽到位图切片区，并在弹出的交换图像中选择帧2，如图18所示。
3 J- D: U& R* g5 s! {, v' Z: a
* h' o1 s& ~8 R* n+ a% D
图18
/ m) a/ y, [) R. R　　十九、最终完成，我们可以按F12在浏览器上看一下效果。确定没有问题，便可导出HTML网页了。如图19所示。
( ]8 C$ Q! h: ~. p1 L5 c

图19