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

　　有的时候，你可能需要创建一种比按钮更为复杂的互动效果，例如当鼠标从某张图片上划过时，不但这张图片本身发生变化，在页面其他位置的另一张图片也发生变化，按钮编辑器对此无能为力，我们需要通过另外的途径来解决。学习这一节你会需要用到以前按钮、导航条、热区和切割的知识，如果你对这些概念还不是很了解，那么就先回去复习一下。
　　首先，我们来做一个简单翻转（Simple Rollovers）的按钮，虽然我们可以使用按钮编辑器很轻松的做出相同的效果，但是我还是建议你们用另一种方法来创建它，因为以后的复杂交互效果也要用这种方法来创建。
" c2 n4 u  h) W, A8 @" Y　　先在画板上画一个按钮的形状，如图：
0 l% x6 P% J+ J: w


　　选择Insert->Slice，在网络层（Web Layer）上建立一个和按钮大小相同的切割。

/ ]8 }  O( {( P/ b; }- F! C

　　打开帧面版（Window->Frames），你会看到当前只有一帧，点击New Frame手工添加一帧，并使这帧处于被选中的状态。



- T1 P; a, `5 V( d　　在这帧上画另一个按钮，因为切割的边缘有吸附功能，所以很容易画出和第一帧一样大小的按钮，或者直接拷贝第一帧上的图形到第二帧再修改它的属性。为了区别这2帧，我在这里使用不同的颜色对它进行填充。
) f& [$ w% D/ K$ I3 G
6 R2 K: ]% y% [3 ]5 `3 [

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

. Q9 d9 ?& \3 [3 N1 a
4 a6 L3 q& C! m. D9 ~& D  l# k
. p. V1 V. r: ]  Q7 H


0 M7 P  ?) l" s, Z3 K


) i8 \# J; V! B5 J' |% k+ B
" w* S2 G. N/ w' p& R
% N2 O% X) m$ o. C+ f2 P

/ g0 @! F& E1 k; T2 _
' E5 W7 m7 I2 F6 ^6 R- ~


5 m# u. ]: p" R, b2 U" R+ O& T: W


' E! q, Y$ m5 O# k* y! ^: y
* R2 N' [! c1 X


/ L5 R0 E. a- F1 R% d1 F; i



8 u1 K) Q# k) s4 k' K. Z




# _. `6 ~. L* S$ l$ B: u) F) Z  |
$ e( @/ s  i5 R; R( S4 Q3 e/ Q& j


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

' X" J2 C3 G2 k, X$ e4 D  }0 \

' w0 j; W- F6 f7 W6 u/ l
" N3 c, v" M3 Q7 DSimple Rollover：简单翻转，使用第一帧做为Up的图象，使用第二帧作为Over的图象，并且使用相同的切割 ，事实上简单翻转是交换图的一种特殊形式。


! R9 u3 F$ J' \- m/ b

7 r% |8 n3 l, S, n. J9 ~Swap Image：交换图，当鼠标触发了一些事件时，使用其他帧上的图象替换当前的图象。
8 C- v8 p, R! V4 R7 ?
( M7 x- z7 `$ t; P; L

. q# a1 X7 g* L
/ r$ E& i1 b& x% u: l% p0 O9 @. l0 bSwap Image Restore：交换图还原，当鼠标离开触发事件的区域后，还原为默认的图象。



) J6 `+ j/ l$ `: a! N8 m: N, @
1 t+ m! ?% R, M: S8 k$ GSet Nav Bar Image：设置为导航条图片，定义一个切割为导航条的一部分，事实上设置为导航条图片就是以下3中行为的组合（Nav Bar Over, Nav Bar Down, Nav Bar Restore）


& @: G0 K) V7 F6 k* V% @  g
. Y4 o1 w( Z) ^& t3 C5 Z' N
7 X- a9 Q% S" ^8 y. q( rNav Bar Over：当一个切割作为导航条的一部分时处于Over（鼠标经过）的状态。
  _3 U+ Y/ d2 l" ]) g
$ R. p; r9 G" Z. ^9 T2 g: J: R& ?! z


; v2 t; i. q6 |* j- ~Nav Bar Down：当一个切割作为导航条的一部分时处于Down（鼠标点击）的状态。
2 H9 ~& ^9 _$ @6 ]
: k4 O* e, m7 G6 @0 r


# B8 d/ {! B1 z0 n0 M$ DNav Bar Restore：将导航条其他部分的切割还原到Up（默认）的状态。
- I" @0 b$ `) D( u7 d3 V( F
/ w8 z5 ^; u7 W
; B7 G. J+ n) U( Z' }
' e5 L5 R$ p: I$ M* C
Set Pop-Up Menu：创建弹出式菜单。
% o6 _4 O7 D& Z) P8 G
% l) ]' y" g: H! ~
6 u& O/ G8 S! |% Y4 A0 w0 i3 c
5 q  L# ]& }# o9 q6 W3 ~
Set Text of Status Bar：在浏览器的状态栏里显示指定的文字。
! y/ J* U7 K. W1 f' g! t* ?: V　　注意：弹出式菜单可以很好的被插入到Dreamweaver中，但是必须在Fireworks中完成对它的编辑。

/ D6 |# ~0 h9 w* H' [5 z1 C
/ C- F4 h" O) o; O2 {4 Q' d
# b: [. K1 D$ v0 `  D) y　　选择了动作（Actions）之后就可以在Behaviors面版中修改触发的事件。
" U3 V4 v0 U. v; \  }

5 H! P' i4 m+ M
( Q. B) F% i& O' O- n: c, s& g　　这一节就先到这儿，请接着看下一节。