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

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

' ?' l4 Y9 L1 g% I! V: a6 w9 Q: ~
* a% y( a! ]+ P5 c　　选择Insert->Slice，在网络层（Web Layer）上建立一个和按钮大小相同的切割。

! p, S; j' `* r/ b0 ~7 R3 w. q
, \: b: U# a' H/ ~
. [3 s! D8 M: J; ~; A8 A　　打开帧面版（Window->Frames），你会看到当前只有一帧，点击New Frame手工添加一帧，并使这帧处于被选中的状态。
8 u4 c! _% ]! D8 {
; c. N3 @0 H. T1 u+ Z
* X) @2 R9 |; k. ]+ N& S
　　在这帧上画另一个按钮，因为切割的边缘有吸附功能，所以很容易画出和第一帧一样大小的按钮，或者直接拷贝第一帧上的图形到第二帧再修改它的属性。为了区别这2帧，我在这里使用不同的颜色对它进行填充。

8 T# P- p9 v5 |* V

' \/ n1 ~6 U5 E4 [- G0 W: U+ n( p　　打开Behaviors面版（Windows->Behaviors），点击左上角的加号在弹出的菜单里选择Simple Rollovers，这样一个简单的翻转效果就创建好了，预览一下。
; h% G8 n& \7 _
1 c. U; S$ y- Q4 O; K9 F" J' R( ]
, t/ c" @; Y6 v; i$ G* I, z8 n

  i3 b1 Z6 W6 J( q5 X
' q. Z/ ~* @8 j% Q, g% e

, b6 V# k, s. }' n, }


1 s" I8 V; f# e9 z1 N1 |0 d5 O; {
6 y4 a' M& Q" h8 o
! ^8 L$ N3 q0 p5 H& o5 B
- h# W2 D" l. v5 k( h; Z7 y) b




7 k6 R8 e& o) @0 b

" g% H' ]& n6 A6 [; I+ e& @2 O- ^
: }$ [. X2 _, O% c/ }2 J6 r% a
- l) D5 f! p  |/ M/ P/ {
! h' T$ q6 ?* W

' h; a2 x+ M  K9 l7 j5 p2 T



: W9 c4 ^# B5 C4 F( c7 y


) g' U' B4 ~1 l3 r7 A6 e# S
2 K6 F) s) g) q  Q
# P- @. S" s3 N9 U# a% d5 L, ?
2 _( q, u5 T+ \3 d6 q8 O
# G# j0 G1 A9 L) z; R5 c) }5 n3 q* j* U
?
* W7 T: b7 C% u4 B　　说到Behaviors有必要说明一下相关的概念：用一个简单的公式来表达就是行为（Behaviors）=事件（Events）+动作（Actions），即一个行为需要先由事件来触发，触发后完成一系列动作，这样就是一个完整的行为。
　　刚才大家在Behaviors面版的弹出菜单里也看到了，除了Simple Rollovers之外还有其他的交互动作，他们分别是：
+ U: \7 J+ x+ ]/ N

4 l6 p0 o- i  f1 k' b4 G* Z6 C3 X; H3 L$ K
& ]' f# p' N2 n  h
Simple Rollover：简单翻转，使用第一帧做为Up的图象，使用第二帧作为Over的图象，并且使用相同的切割 ，事实上简单翻转是交换图的一种特殊形式。


$ s! }2 @) q/ Z/ w/ N% E7 x

0 I$ k  t. T4 K6 U$ hSwap Image：交换图，当鼠标触发了一些事件时，使用其他帧上的图象替换当前的图象。




7 s) d/ y6 x" I4 h5 ~: x  o. cSwap Image Restore：交换图还原，当鼠标离开触发事件的区域后，还原为默认的图象。

' ~8 D. A' n9 l' [& ?, ?


Set Nav Bar Image：设置为导航条图片，定义一个切割为导航条的一部分，事实上设置为导航条图片就是以下3中行为的组合（Nav Bar Over, Nav Bar Down, Nav Bar Restore）
" i: Z! U' ?8 B: @

. h  @& ^% i9 m( y

Nav Bar Over：当一个切割作为导航条的一部分时处于Over（鼠标经过）的状态。




Nav Bar Down：当一个切割作为导航条的一部分时处于Down（鼠标点击）的状态。
& A  _$ |! D& s' `( E
$ y, }0 k5 {+ U% J6 R( Y
4 J1 x9 p2 p2 g- B* O$ ]6 x, [

Nav Bar Restore：将导航条其他部分的切割还原到Up（默认）的状态。

) p- Q9 a7 K# O* N' e( P# ~% n( \
$ l; v7 p  u/ l% @! d* X* x" r" ?; P; V

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

$ {: p4 }. a! S3 y, C8 T6 |

4 ?. O7 t8 _7 ^% w
8 |0 }: v$ h7 l" rSet Text of Status Bar：在浏览器的状态栏里显示指定的文字。
　　注意：弹出式菜单可以很好的被插入到Dreamweaver中，但是必须在Fireworks中完成对它的编辑。
5 E2 P/ g. W8 @7 R6 f

3 Q# e9 z5 h- W* w8 r
; j" i5 z4 Y% m$ ?8 V* d! V9 H, U* q% t　　选择了动作（Actions）之后就可以在Behaviors面版中修改触发的事件。
+ j( d0 b6 g) u2 `- P/ w- Z1 N5 Q) H
( i7 U' k4 \9 @# _/ b" G
! b7 e- i' E( p7 I- s
' D0 M# O: y) }0 |$ M　　这一节就先到这儿，请接着看下一节。