Fireworks MX 2004 设置鼠标事件

[复制链接]
查看: 292|回复: 0
gggds 发表于 2009-12-27 12:13:42 | 显示全部楼层 |阅读模式
?在前面的几章中我们已领略了Fireworks MX 2004在图像绘制上的出色表现。从本章开始,我们将来学习Fireworks MX 2004在在网页支持上的强大功能。我们先从动态按钮的制作开始。 % Y3 c8 z2 @, s) w7 [9 p& c& b" K
1、设置鼠标事件 7 `/ a% Z  L7 l- r
  先在画布上随便画个蓝色矩形的按钮形状,然后按F8键将该对象转化为“按钮”元件。此时该按钮在画布上的情况如图8—01。 ' B8 \7 q6 z) \
$ Z( w% X2 T. p3 }3 u

$ N2 Z- E. S# L1 R2 _图8—01
8 z5 x6 H# w$ q, Y. [6 r  双击应该按钮对象后,将弹出按钮元件的鼠标事件设置窗口,如图8—02。
/ @7 ^7 K3 l8 \. X! E5 k3 c: {( C$ O" F2 Q6 k" v; `4 \

' M. T$ k: F! G3 ^( w7 p$ N: d# @% t2 ^图8—02
0 w8 V8 Y5 g+ X6 i4 D  该窗口中前面的“释放”、“滑过”、“按下”和“按下时滑过”是用来设置鼠标在触及按钮时,按钮所呈现的四种状态。而“活动区域”则用来设置按钮在响应鼠标指针时的有效范围。 9 m+ c! C  g) Q; R, X
  如果我们现在打开“帧”面板的话,就可以看到该面板下已自动为按钮元件生成了四个帧,如图8—03。但此时只有第1帧中有按钮图像,其它三帧均还没有任何内容。
4 F/ t/ f9 w5 G. T0 a+ x$ S" C9 p/ f2 E; m  x& F* F; l0 c6 h6 W

4 I% v; U# \4 m3 e# \图8—03
6 m. l# l6 T) K7 N9 [. `. Z  点击“导入按钮”则可以从Fireworks的按钮元件库中直接选取一种按钮进行导入,如图8—04。
: I% Q+ B$ J* g" L  ]) ^$ P9 n7 k

- G) ^" O, \' w$ }# m* G图8—04
/ j( f2 n0 Y& p( J3 i1 w) S  “释放”选项卡是用来绘制按钮的一般状态。当我们把普通的图形对象直接转换为按钮元件时,Fireworks会自动将该对象作为按钮的一般状态,放在“释放”选项卡中作为按钮的第一帧。
2 A6 S6 a8 c2 T7 Y[首页]????[上一页]????
0 O, ~: b; ~  K[下一页]
/ F) f2 @! V# r  n7 t????  a; L3 M1 I9 y" \
[末页]  d( D8 q$ Y+ o. K  M
????选择页数120 Z% F( ~  b1 V' q  k

$ i5 z3 E9 f+ {. |" O' @! [“滑过”选项卡是绘制当鼠标移动到按钮上及按下时,按钮所呈现的状态。在这里我们可点击“复制弹起时的图形”按钮,将“释放”选项卡中的按钮图形复制过来,然后只更改其色彩,以便区分。如图8—05。或者你也可以在此绘制你想要的其它图形。
# {. ~2 Q4 e2 I, A% Z3 o/ S5 ~
2 d( D+ G+ _" I+ A' _. Q. B
1 y- C) e* o# ^  t. K  @9 C图8—05
/ |- H( Y" t. ~: M7 B9 G  “按下”选项卡是绘制鼠标在按钮上按过之后,按钮所呈现的状态。在该选项中只有选中了“包括导航栏按下状态”时此帧中的内容才会生效,否则此帧中的内容将不会在网页浏览中出现。我们同样将上一帧的按钮状态通过“复制滑过时的图形”按钮复制过来,然后将按钮色由绿色改为桔红,如图8—06。同样,你也可以在这里绘制任何一种你想要的按钮图形。
, i# N" {# S3 k3 N4 G
, Z2 z. F- V  ]6 @4 t1 n8 ]& R" W  [: B: w1 j$ C+ ?  }8 Z; E  Q
图8—06 ' \4 }! X; f5 y; z
  “按下时滑过”选项是设置按钮在被按过之后鼠标再次滑到按钮上时,按钮所呈现的形状。该项同样是在选中“包括导航栏按下状态”后才能生效。我们点击“复制按下时的图形”后,把上一帧的按钮色彩改为黑色,以便区别。
: f5 H: `* q8 N1 H
6 {- C1 r6 R7 \3 m0 J7 |" I2 ?7 c5 y  `3 A9 {$ w
图8—07 % a0 @+ }$ N8 _  n5 V7 C; u( }- k7 C! s  N
  此时,按钮的四个鼠标事件都有了,点击“完成”按钮后回到工作区中的“原始”选项窗中。我们可以点击紧挨“原始”选项窗右边的“预览”窗(或按F12键启动浏览器)查看测试刚制作的按钮,如图8—08。
9 `- ]1 s. D  N7 z1 D% n* m1 \8 C7 Z

" f  H& v" ]9 B9 t6 t! H6 n! T3 C" B5 E& b
8—08 : G8 m# [: ?) B: ]; e  P; ?7 Q$ T
回到“原始”选项窗口后双击该按钮图形,或在“库”面板中双击该按钮元件都可以对该按钮进行重新编辑。
0 [3 V, q0 n) A/ |[首页]! D2 }, ~8 K4 H+ X( \3 `- p
????5 q$ D! z; `- b- T* I6 `
[上一页]0 a6 U1 h( V5 s* l0 N* i& b4 a
????[下一页]????[末页]????选择页数12

本版积分规则

精彩图文

Copyright   ©2015-2016  展示网  Powered by©Discuz!  技术支持:凡尚展览     ( 粤ICP备14065977号 )