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

　　有的时候，你可能需要创建一种比按钮更为复杂的互动效果，例如当鼠标从某张图片上划过时，不但这张图片本身发生变化，在页面其他位置的另一张图片也发生变化，按钮编辑器对此无能为力，我们需要通过另外的途径来解决。学习这一节你会需要用到以前按钮、导航条、热区和切割的知识，如果你对这些概念还不是很了解，那么就先回去复习一下。
　　首先，我们来做一个简单翻转（Simple Rollovers）的按钮，虽然我们可以使用按钮编辑器很轻松的做出相同的效果，但是我还是建议你们用另一种方法来创建它，因为以后的复杂交互效果也要用这种方法来创建。
. l' o4 X4 Z9 v- K) p9 B: J　　先在画板上画一个按钮的形状，如图：
1 b3 B- t4 P% B
: o; p6 a/ {6 S9 ]
% `) N9 Y/ T/ d+ _. ~, z
9 s9 O0 Y+ p$ U- s0 p% Q　　选择Insert->Slice，在网络层（Web Layer）上建立一个和按钮大小相同的切割。

6 C2 s. ?  }; N
7 a/ L$ c  b6 M( l8 f/ L
　　打开帧面版（Window->Frames），你会看到当前只有一帧，点击New Frame手工添加一帧，并使这帧处于被选中的状态。
: ^/ H+ o4 n2 F9 y4 \0 f8 I/ B

4 W, ^6 C- P% h0 P
% k/ Y( N$ n9 q, T　　在这帧上画另一个按钮，因为切割的边缘有吸附功能，所以很容易画出和第一帧一样大小的按钮，或者直接拷贝第一帧上的图形到第二帧再修改它的属性。为了区别这2帧，我在这里使用不同的颜色对它进行填充。

/ ~4 v7 Z5 ]7 ]$ |7 O  P4 i

) j/ u/ q! j4 \0 _. ~　　打开Behaviors面版（Windows->Behaviors），点击左上角的加号在弹出的菜单里选择Simple Rollovers，这样一个简单的翻转效果就创建好了，预览一下。
2 I/ f. x7 w$ w/ d


1 Z/ J# x/ m+ H# Z  A% C( K


( x! j, j& ^8 U( ^
4 u5 B3 Y2 k6 y7 i5 E



* ?  K& }9 w; ^0 t6 r






1 t- f% [5 U1 h- O; O
+ {) Y+ j4 o0 Q8 [

. t7 N. e2 E( e$ }- M

: d% V  @  Q! Q9 T1 ?




1 d3 ^+ Q3 B* y6 ~- J2 L/ i




# r) D; u* L  \1 ]" B7 Z% o! M1 ?. ^


- E, d% c5 h+ o
5 ?0 h! {# x3 o6 p) r?
　　说到Behaviors有必要说明一下相关的概念：用一个简单的公式来表达就是行为（Behaviors）=事件（Events）+动作（Actions），即一个行为需要先由事件来触发，触发后完成一系列动作，这样就是一个完整的行为。
/ D1 N6 L+ }1 H7 O& o) i, U+ J　　刚才大家在Behaviors面版的弹出菜单里也看到了，除了Simple Rollovers之外还有其他的交互动作，他们分别是：

. P+ P7 B# c( W7 g+ h  v. ^


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

8 z( D# d7 b) @0 C
2 ^/ g9 I6 m. z8 P5 m# W/ L, s
7 }& Z. v8 u  c! |8 r6 T  _
Swap Image：交换图，当鼠标触发了一些事件时，使用其他帧上的图象替换当前的图象。

# Z5 e! I8 W! Q


Swap Image Restore：交换图还原，当鼠标离开触发事件的区域后，还原为默认的图象。
$ t- @1 z) F5 l; S3 s# |! E; \
/ t2 ^+ d5 |0 d


Set Nav Bar Image：设置为导航条图片，定义一个切割为导航条的一部分，事实上设置为导航条图片就是以下3中行为的组合（Nav Bar Over, Nav Bar Down, Nav Bar Restore）
# N( N: \2 n& j% Q3 d


9 Y8 y. [: R9 B
7 _' h% h' l) e& E3 kNav Bar Over：当一个切割作为导航条的一部分时处于Over（鼠标经过）的状态。
& v8 A* p6 R* O3 H
* B+ f8 ?5 u. z
! g8 L- a/ u: {9 m
6 H! ?, e8 Q$ W
Nav Bar Down：当一个切割作为导航条的一部分时处于Down（鼠标点击）的状态。
/ s7 `3 n: a& t0 v( W4 m- y
; [( ]' T. X2 a; ]: Y- }! s


7 _! T  k3 h4 N. oNav Bar Restore：将导航条其他部分的切割还原到Up（默认）的状态。


. f9 I& t8 P- x
5 V+ ^1 Z/ d* j3 Y
( P( A6 s( J# `' \8 G7 @6 y* aSet Pop-Up Menu：创建弹出式菜单。
! p4 a& f5 O7 g2 B



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


) o4 ~$ P. K1 p
　　选择了动作（Actions）之后就可以在Behaviors面版中修改触发的事件。
* ?, Z" M5 N  H% A1 Z$ q  k

# @' B/ S  h# e: q4 V& B
2 N0 S% o+ T* |  P% b, D8 F+ Y　　这一节就先到这儿，请接着看下一节。