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

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

6 l9 R% U5 B# B* q9 y0 {
) I- i: b+ q! u5 E! \　　选择Insert->Slice，在网络层（Web Layer）上建立一个和按钮大小相同的切割。

6 ~+ W/ K. b$ g3 D: B

; D( f* b( z; c　　打开帧面版（Window->Frames），你会看到当前只有一帧，点击New Frame手工添加一帧，并使这帧处于被选中的状态。
5 U1 A4 a2 R3 N

- |, N0 y  F$ |- U- \+ }  g1 a
　　在这帧上画另一个按钮，因为切割的边缘有吸附功能，所以很容易画出和第一帧一样大小的按钮，或者直接拷贝第一帧上的图形到第二帧再修改它的属性。为了区别这2帧，我在这里使用不同的颜色对它进行填充。


+ L7 L" P5 D) J8 t0 ^0 r: i
　　打开Behaviors面版（Windows->Behaviors），点击左上角的加号在弹出的菜单里选择Simple Rollovers，这样一个简单的翻转效果就创建好了，预览一下。
3 s9 U* K* `$ l2 p9 i* \$ F

! x7 @7 c' \$ m) X' K+ S/ U3 E4 I


+ d) V5 b1 P/ D- d/ f6 @8 R
2 I; S6 f' ]" ^" M4 |% l

$ q! m" ^# J- z. |( y2 y( S/ U- B3 T
) |' H; E% [; Y; o$ h( W





2 P, b1 E* i* e4 h: P5 t/ r
% M+ S$ \2 `% r
) E) W* B# m7 p* I# `8 |7 `1 [
, d3 u& B! g9 l% |" M
. y+ p. |9 i' N



* U+ j) c! Y0 ^+ }0 C! w
/ V+ }8 p7 E! R/ R# L) R
; |3 c% c  I7 d3 p3 j


# i; ~- B% e$ U  e1 B  w: m
) R6 C" t" U- L
) @4 m5 X) d7 j3 F5 ?) A( \+ B/ u: r

: f, D4 m& X3 r- I5 c" v- L. D' `
9 M( @- k, U* D% @& i

+ S" P4 U" N3 U% y" g
+ u; B1 V' U8 ^/ l1 t
5 k. F) b. Q: I! s- v8 M' q?
" |/ s; ]5 O! g7 |7 @: |* `: V　　说到Behaviors有必要说明一下相关的概念：用一个简单的公式来表达就是行为（Behaviors）=事件（Events）+动作（Actions），即一个行为需要先由事件来触发，触发后完成一系列动作，这样就是一个完整的行为。
) F: T/ z( r9 Y2 b, m3 s+ n　　刚才大家在Behaviors面版的弹出菜单里也看到了，除了Simple Rollovers之外还有其他的交互动作，他们分别是：
, z% F" R; U- S1 S
1 f* F4 i* r$ V1 n: g. o
4 O4 M/ l( X& g

Simple Rollover：简单翻转，使用第一帧做为Up的图象，使用第二帧作为Over的图象，并且使用相同的切割 ，事实上简单翻转是交换图的一种特殊形式。

, q0 A, G* a6 U; e+ b# ^: \5 N
( @! [1 R! I- {- o2 @2 [9 F

& q1 b8 T/ e& y& z8 n$ m1 t; n6 g, bSwap Image：交换图，当鼠标触发了一些事件时，使用其他帧上的图象替换当前的图象。

% H- E  j3 T+ `3 Y2 d
- b! t0 Y( w. y+ _" |  B

* P+ P" z  Z% g: v1 x* pSwap Image Restore：交换图还原，当鼠标离开触发事件的区域后，还原为默认的图象。


4 Z' p) |. E" Z

7 x9 l- X4 T2 M( q1 s1 ?Set Nav Bar Image：设置为导航条图片，定义一个切割为导航条的一部分，事实上设置为导航条图片就是以下3中行为的组合（Nav Bar Over, Nav Bar Down, Nav Bar Restore）
7 L1 n0 i( D9 H

1 H, P7 t  I# C3 l. r6 G
' s- I* B5 H8 s2 F" m
2 Z5 T: P9 H" m- @Nav Bar Over：当一个切割作为导航条的一部分时处于Over（鼠标经过）的状态。
7 t7 C4 _6 ]/ n) R


2 j" ?. c2 o; w/ `+ v, e
: p2 T& q* O2 i. K5 y/ c& K8 yNav Bar Down：当一个切割作为导航条的一部分时处于Down（鼠标点击）的状态。
( C- b. G0 m9 d. k% C
0 u  R; F+ C% F: c9 m, D
- p/ q  f, k) m/ f& V. z# J
! O3 |1 B' i, D6 Y
Nav Bar Restore：将导航条其他部分的切割还原到Up（默认）的状态。
, ~$ |! r4 S! F, W. G



Set Pop-Up Menu：创建弹出式菜单。
* M1 F7 c+ R" A# z


8 N4 K7 @6 N8 p7 {( G
Set Text of Status Bar：在浏览器的状态栏里显示指定的文字。
　　注意：弹出式菜单可以很好的被插入到Dreamweaver中，但是必须在Fireworks中完成对它的编辑。



　　选择了动作（Actions）之后就可以在Behaviors面版中修改触发的事件。
2 c( V  s& {1 C: v

3 v* t7 `0 T1 C5 p
$ \! Q% }. _3 R% d: X3 g　　这一节就先到这儿，请接着看下一节。