|
?在前面的几章中我们已领略了Fireworks MX 2004在图像绘制上的出色表现。从本章开始,我们将来学习Fireworks MX 2004在在网页支持上的强大功能。我们先从动态按钮的制作开始。
) B$ @2 X# _1 R% u& c0 U% J4 H6 U1、设置鼠标事件 ' O: K" k7 g! R& p0 w9 b
先在画布上随便画个蓝色矩形的按钮形状,然后按F8键将该对象转化为“按钮”元件。此时该按钮在画布上的情况如图8—01。 + |- W6 [+ c( m* a' H, B
: N* t4 M- B. j' t; D
/ n4 R: |( }' e) M. L图8—01 - j8 p' S9 K* s' C0 V
双击应该按钮对象后,将弹出按钮元件的鼠标事件设置窗口,如图8—02。 0 a, B6 o% y+ M+ X: o$ i# I# z4 `
& p) c4 H" V# I- K, ? J! s+ U6 _
图8—02 / ?8 D" o8 n3 o4 t$ l- P" a
该窗口中前面的“释放”、“滑过”、“按下”和“按下时滑过”是用来设置鼠标在触及按钮时,按钮所呈现的四种状态。而“活动区域”则用来设置按钮在响应鼠标指针时的有效范围。
# m4 i7 x( s S$ I% y6 Z 如果我们现在打开“帧”面板的话,就可以看到该面板下已自动为按钮元件生成了四个帧,如图8—03。但此时只有第1帧中有按钮图像,其它三帧均还没有任何内容。
. P4 c+ K8 K1 g) Y/ @: G. A2 b+ B) b7 u- W2 i
. q1 ~ P0 H. h* K$ I
图8—03 + t; W/ ? y6 y' S) N1 n
点击“导入按钮”则可以从Fireworks的按钮元件库中直接选取一种按钮进行导入,如图8—04。
$ R+ ^. u- m- v b& k# G! b1 F |2 f; M, e" r! g
- h# J0 s x( |3 c& `图8—04 , p5 I: H W) H, m
“释放”选项卡是用来绘制按钮的一般状态。当我们把普通的图形对象直接转换为按钮元件时,Fireworks会自动将该对象作为按钮的一般状态,放在“释放”选项卡中作为按钮的第一帧。
' R# z: J( {: \' u% o- e7 A[首页]????[上一页]????' {3 x: K. t. a* D5 a
[下一页]! H0 G- o8 [1 x+ E% z8 d: j
????
* O% _; L/ o. r9 y. c$ l/ y[末页]
: } |, ^" N( Y4 F????选择页数12* _& V/ O1 p& \, w t% ?
3 a5 d1 c* b1 U M# u% q- N“滑过”选项卡是绘制当鼠标移动到按钮上及按下时,按钮所呈现的状态。在这里我们可点击“复制弹起时的图形”按钮,将“释放”选项卡中的按钮图形复制过来,然后只更改其色彩,以便区分。如图8—05。或者你也可以在此绘制你想要的其它图形。 6 H1 \; l1 C k6 [! l* R( h- x1 m; `
5 a6 L" P7 S# E
8 f6 ] _8 j3 M# V图8—05
; X% C; P; Y& T& Y/ @ “按下”选项卡是绘制鼠标在按钮上按过之后,按钮所呈现的状态。在该选项中只有选中了“包括导航栏按下状态”时此帧中的内容才会生效,否则此帧中的内容将不会在网页浏览中出现。我们同样将上一帧的按钮状态通过“复制滑过时的图形”按钮复制过来,然后将按钮色由绿色改为桔红,如图8—06。同样,你也可以在这里绘制任何一种你想要的按钮图形。
5 J' u2 f7 ~ }* ?
3 u0 e- ` [. x! [6 s
3 w2 ]0 O' Z1 L) l图8—06 " A4 F5 t5 H1 T' @0 [
“按下时滑过”选项是设置按钮在被按过之后鼠标再次滑到按钮上时,按钮所呈现的形状。该项同样是在选中“包括导航栏按下状态”后才能生效。我们点击“复制按下时的图形”后,把上一帧的按钮色彩改为黑色,以便区别。 . m. R" @7 k$ n5 |: F: V
. Y, t4 U6 V% \1 C/ k" |
6 V7 w! ]. K$ |0 e% C' x图8—07 7 c8 E! E/ R+ c8 E1 Y- }( g
此时,按钮的四个鼠标事件都有了,点击“完成”按钮后回到工作区中的“原始”选项窗中。我们可以点击紧挨“原始”选项窗右边的“预览”窗(或按F12键启动浏览器)查看测试刚制作的按钮,如图8—08。 }, M! _9 d3 m d1 v1 a
8 H! p4 q5 \- k; {6 C8 f
9 E( t0 f7 e, `5 M3 F7 O4 k$ p/ u( u2 Q; M
8—08
9 d3 _. C' e% M5 z回到“原始”选项窗口后双击该按钮图形,或在“库”面板中双击该按钮元件都可以对该按钮进行重新编辑。
8 W( T( S+ y3 [( p- T$ y- P$ h[首页]2 H% C- i- e+ ?7 e/ ~& U
????
* n$ U6 H# x% ~$ \, B[上一页]" n- Y1 ^" M2 x( u
????[下一页]????[末页]????选择页数12 |
|