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

　　有的时候，你可能需要创建一种比按钮更为复杂的互动效果，例如当鼠标从某张图片上划过时，不但这张图片本身发生变化，在页面其他位置的另一张图片也发生变化，按钮编辑器对此无能为力，我们需要通过另外的途径来解决。学习这一节你会需要用到以前按钮、导航条、热区和切割的知识，如果你对这些概念还不是很了解，那么就先回去复习一下。
6 C9 Q+ |! C# I9 X# \　　首先，我们来做一个简单翻转（Simple Rollovers）的按钮，虽然我们可以使用按钮编辑器很轻松的做出相同的效果，但是我还是建议你们用另一种方法来创建它，因为以后的复杂交互效果也要用这种方法来创建。
3 Z) U2 Z( ~; t5 y) p% W　　先在画板上画一个按钮的形状，如图：
4 O: {7 v5 _% Y* Z


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

; g6 |& u5 ]: C! m

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


# [+ @/ A2 ^3 W; ~" x( {
　　在这帧上画另一个按钮，因为切割的边缘有吸附功能，所以很容易画出和第一帧一样大小的按钮，或者直接拷贝第一帧上的图形到第二帧再修改它的属性。为了区别这2帧，我在这里使用不同的颜色对它进行填充。



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



( c& W5 Z* B) h1 R, K% F
% L! V8 S+ y4 z' X

' q6 n3 ^/ Z& L, R4 ^% w


3 Y+ A6 p6 R- T" L( d/ k5 X- R0 X




2 z, O9 D& T9 h+ G8 `0 p


8 e2 v" |8 Y* t0 L


! Z* M4 I0 E+ e: h
6 D' `; d, J) T0 ^7 v

5 B* \2 H$ k% _: j$ l


& h9 J5 g$ h5 V$ z* @

9 T0 Q: _  x6 V+ W
% t) M0 c  U! Q) D
% [( t$ m( l! j- R! d  k


& |5 J( Y( b1 ?, c, R" w5 ]

: x8 F3 X- f) ?5 b- y0 h( T
  N) D8 y2 E+ @: K3 I% [" F7 G, p
  m' t0 _2 M( L5 x?
7 {' a# m* m$ J　　说到Behaviors有必要说明一下相关的概念：用一个简单的公式来表达就是行为（Behaviors）=事件（Events）+动作（Actions），即一个行为需要先由事件来触发，触发后完成一系列动作，这样就是一个完整的行为。
& B# ]+ Q$ c. t7 ~$ @. O7 |　　刚才大家在Behaviors面版的弹出菜单里也看到了，除了Simple Rollovers之外还有其他的交互动作，他们分别是：
+ o5 n: j" e5 t
. f0 c& A' A" Y( a8 l- s


* v+ j1 M+ d3 l+ M+ M4 l$ x% a7 CSimple Rollover：简单翻转，使用第一帧做为Up的图象，使用第二帧作为Over的图象，并且使用相同的切割 ，事实上简单翻转是交换图的一种特殊形式。

& T% v# q7 Y. [( ~+ ?: l


Swap Image：交换图，当鼠标触发了一些事件时，使用其他帧上的图象替换当前的图象。
, S/ O. f8 o, a2 I' M% r. X  |  V
; n+ j$ t" w, i! t6 _6 J3 D
1 s' a, \/ k* E. e3 @

; N6 _# j' W& a4 U. N2 I' l3 g+ f" {: }Swap Image Restore：交换图还原，当鼠标离开触发事件的区域后，还原为默认的图象。



; y; [4 Q* i$ q: \, R" Z+ b3 U
; t% c3 C# u- L& NSet Nav Bar Image：设置为导航条图片，定义一个切割为导航条的一部分，事实上设置为导航条图片就是以下3中行为的组合（Nav Bar Over, Nav Bar Down, Nav Bar Restore）
  N$ E% T9 O2 Y: p4 Q
1 ~. c) |& c& F, }. ^& O) H: k


  l' ?: z5 c4 j+ L$ v3 jNav Bar Over：当一个切割作为导航条的一部分时处于Over（鼠标经过）的状态。

' ?9 b& b, r2 C" W' p. ]
2 p  F" _& Y/ q! w- m5 u9 q
$ E9 X4 L' g% |" b$ A, y7 \9 u3 j
' ~( b; d6 P/ ~. U0 x  YNav Bar Down：当一个切割作为导航条的一部分时处于Down（鼠标点击）的状态。




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

( r, q( j& g/ ?" r# V1 A
# s: p0 _5 H) o* X3 }8 Q& d4 q8 ^

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

3 ?" S2 B) S( |6 g% s4 n! c# k


/ |  e; C7 u: x& I  \0 ^Set Text of Status Bar：在浏览器的状态栏里显示指定的文字。
; M5 \3 c  l- w. Y0 Q/ j; F　　注意：弹出式菜单可以很好的被插入到Dreamweaver中，但是必须在Fireworks中完成对它的编辑。
* ]- h, V, p( |

7 u$ n4 J! E4 C2 o$ d
　　选择了动作（Actions）之后就可以在Behaviors面版中修改触发的事件。
6 z+ m# h5 m6 I, v
. P/ x" i" d1 f8 g; m! J
! G/ Z/ p# G( {. o, O
　　这一节就先到这儿，请接着看下一节。