Fireworks 4 完全教程 创建复杂交互效果（Rollovers）

　　有的时候，你可能需要创建一种比按钮更为复杂的互动效果，例如当鼠标从某张图片上划过时，不但这张图片本身发生变化，在页面其他位置的另一张图片也发生变化，按钮编辑器对此无能为力，我们需要通过另外的途径来解决。学习这一节你会需要用到以前按钮、导航条、热区和切割的知识，如果你对这些概念还不是很了解，那么就先回去复习一下。
+ M, e$ X; W! @: ^" [: C6 s　　首先，我们来做一个简单翻转（Simple Rollovers）的按钮，虽然我们可以使用按钮编辑器很轻松的做出相同的效果，但是我还是建议你们用另一种方法来创建它，因为以后的复杂交互效果也要用这种方法来创建。
　　先在画板上画一个按钮的形状，如图：
! a: c* S) c9 f; k; j
9 e+ x9 V. r3 |
" ?% v7 j; Y- l4 g" ^
　　选择Insert->Slice，在网络层（Web Layer）上建立一个和按钮大小相同的切割。
# R! h1 F0 N' @7 j* X) D% O
7 X4 q4 h% _: y( X
9 x  _3 ~4 @1 H/ ^% z# T
4 c2 V# T; C# \* S3 p　　打开帧面版（Window->Frames），你会看到当前只有一帧，点击New Frame手工添加一帧，并使这帧处于被选中的状态。



' s4 n+ X9 S; _9 ]* |3 _: k　　在这帧上画另一个按钮，因为切割的边缘有吸附功能，所以很容易画出和第一帧一样大小的按钮，或者直接拷贝第一帧上的图形到第二帧再修改它的属性。为了区别这2帧，我在这里使用不同的颜色对它进行填充。

+ Z! b" x0 N8 N' D# s

　　打开Behaviors面版（Windows->Behaviors），点击左上角的加号在弹出的菜单里选择Simple Rollovers，这样一个简单的翻转效果就创建好了，预览一下。
( O! P' G* e- k+ s



8 K$ s1 z: X6 V" B6 h$ a$ z


% X# T3 E8 t' F8 A7 g( }' A! n

( [/ g% e( w9 Q9 M



% D- j/ g/ C# c0 c6 T0 O9 m
  h) w& ^0 Y/ w# P& g
& D) K( r+ M; ?( i/ p( R' E7 p# F. T- o, _
# E6 t8 \# t0 d# G$ ]. v% Q  ?













" v' V$ h$ ?% Z0 N1 g0 W# ?6 N; N7 ^

( Z$ Q+ V- o' j+ v# ]
8 Y$ m) Y9 b+ Y4 v: B, g

! L. ]! L% k0 `  o

?
　　说到Behaviors有必要说明一下相关的概念：用一个简单的公式来表达就是行为（Behaviors）=事件（Events）+动作（Actions），即一个行为需要先由事件来触发，触发后完成一系列动作，这样就是一个完整的行为。
" d8 S9 G( D$ `/ ~3 I　　刚才大家在Behaviors面版的弹出菜单里也看到了，除了Simple Rollovers之外还有其他的交互动作，他们分别是：

  U0 g* f! ?5 z! I

* ]( X0 U( j$ a. f2 a2 j) s! O
5 v, \5 J' E* R% ?  V3 F* eSimple Rollover：简单翻转，使用第一帧做为Up的图象，使用第二帧作为Over的图象，并且使用相同的切割 ，事实上简单翻转是交换图的一种特殊形式。

8 R% {: b4 z- N5 b8 C4 i


5 |1 C% ~! M9 K( q6 cSwap Image：交换图，当鼠标触发了一些事件时，使用其他帧上的图象替换当前的图象。
  T, ~5 G3 M; q# o- b
: ~2 N6 i8 h- w. m. v, a


; ~% m( U) G4 `Swap Image Restore：交换图还原，当鼠标离开触发事件的区域后，还原为默认的图象。
, G2 a: b7 f' x. u( \4 k$ {
3 n! R* d  \; \. T+ n
* o% V) E& S3 E& D0 K" W) C

Set Nav Bar Image：设置为导航条图片，定义一个切割为导航条的一部分，事实上设置为导航条图片就是以下3中行为的组合（Nav Bar Over, Nav Bar Down, Nav Bar Restore）

/ P% I* J7 F* ]: W: {


Nav Bar Over：当一个切割作为导航条的一部分时处于Over（鼠标经过）的状态。
7 u! \$ k( O! W) h% b2 h, g9 T


) Q) l) M; R' a3 M- |! {$ B
( }- m% D1 `# G* d9 }Nav Bar Down：当一个切割作为导航条的一部分时处于Down（鼠标点击）的状态。

: X/ J4 b& K6 \: ]' Z% x( K


0 N6 e# D% i7 K3 {5 Y: tNav Bar Restore：将导航条其他部分的切割还原到Up（默认）的状态。

6 E( z: P: ^( w& ?) W/ Q; g


Set Pop-Up Menu：创建弹出式菜单。

/ M* ?, u8 H. |, l- ~; S/ a


Set Text of Status Bar：在浏览器的状态栏里显示指定的文字。
4 K& `" B9 N/ T( N/ l$ ^　　注意：弹出式菜单可以很好的被插入到Dreamweaver中，但是必须在Fireworks中完成对它的编辑。
: ^& U6 D+ W4 o% l. A, _: D3 m" K
4 `) p& |6 x( ]% k  W- U7 `
6 }6 |7 Y7 Q! j8 y% n, l8 a' a
/ x8 `5 c- {2 M8 w　　选择了动作（Actions）之后就可以在Behaviors面版中修改触发的事件。
3 p+ p( v& E9 y" l
1 [% w- N2 z( ]' W' f/ K# |4 r
# H3 V' ~2 W5 c/ e0 H
+ ], ^+ ^/ q0 A3 F! y5 U0 W　　这一节就先到这儿，请接着看下一节。