Fireworks 4功能指南之二

　打开Demo_06.png在第2部分文件夹或者继续在你的演示文件中工作　　创建一个交互式的网页
0 f. _: u( z0 s

在这段中，我们将会在我们的网页中增加交互性和动画

在层面板中建立一个新的层，并双击重命名为\\\"Navigation Buttons\\\"
6 v6 s: s, T# ]  Y# Z, h* y

(将这个新层放在最上面，在compass版面的上面)，把它拖到那个位置

在Insert菜单中选择\\\"New Button\\\"

选择长方形工具并拖出一个矩形
# o4 \( O/ u1 _$ r1 \

在Info面板中，设置它的尺寸为140W×20H

填充颜色为暗灰色#333333，笔触为1pixel basic笔触，暗青绿色#006666
: N9 n" P% Y+ O# X2 K9 q

复制这个矩形并进行粘贴

当这个复制矩形被选择时，使用Info面板调整它的尺寸为20W×20H

并且改变它的填充色为中青绿色#006699
" }' N. [/ ~! x# x  G

从File菜单中选择Import,在第三部分文件夹中选择\\\"Flag.png\\\"
: M1 S+ @- ~; @( C

在中青绿色正方形上单击来放置这个Flag
6 Z3 f/ w7 N2 M$ {; l; b3 m4 z

·选择文字工具，在按钮上单击来输入文字
& f6 d; z, G1 f. ]0 L

输入\\\"ADVENTUREPLANNER\\\"设置文字大小为12pt，字体为Impact，黄颜色#FFCC66
% b/ q2 G9 f6 ~2 {- U

保证左边的按钮正处于被选择状态

放置文字在按钮暗灰色的区域上

　　 创建这个按钮的Up状态：

在按钮编辑窗口中单击\\\"Over\\\"标签
' y& c, V" L- j2 K! e, ~+ j

单击\\\"Copy Up Graphic\\\"按钮

对图形做下面这些改变:把填充颜色由暗灰色改成同文字一样的颜色#FFCC66

改变文字的颜色为暗灰色（把按钮和文字的颜色互换）
4 `& f- B( s# R; K5 P) b$ r

关闭按钮编辑器

　　用简单的按钮创建导航条......　　用简单的按钮创建导航条
! Z: |, }: H) }0 t# R

选择\\\"Adventure Planner\\\"这个简单的按钮
5 U# Y8 D( x+ S& p) \# _3 ^

按下Option(Mac)或者Alt(PC)键来向下拖动复制这个按钮
6 j% @; `1 W4 l. o6 b8 ?

再复制四个按钮，使按钮的总数达到六个

所有的按钮排成二行，每行三个。第一行为1，3，5，第二行为2，4，6

* y+ g: ~* w6 ]# Y1 Y2 e0 y4 |

全选这六个按钮，并使用Info面板，使它们的放置位置为x=150,y=25
1 ?/ e6 ]: g( L8 O- x  s

选择第二号复制的按钮

在Object面板，把文字\\\"ADVENTURE PLANNER\\\"改成\\\"\\\"GEAR\\\"

按下回车键
; }$ i. B8 X. Q

7 }1 n; N0 b0 t/ ~

通过单击当前的按钮来确定只改变当前的按钮

把余下的四个按钮文字更改如下：

#3-\\\"BOOK FLIGHTS\\\"

#4-\\\"CHECK CONDITIONS\\\"
2 S& R; p. i8 V, C, j3 U9 O

#5-\\\"TRAVEL LOGS\\\"
/ W, A9 x7 j) Z+ J  v* b

#6- \\\"TRAVEL CHAT\\\" 在文件中单击Preview标签来预览这个交互式的按钮

　　建立图片翻转按钮...... 　　打开文件Demo_07.png或者继续在演示文件中工作。　　在这部分，我们将为这些活动的图标建立 \\\"翻转图\\\"效果。　　建立图片翻转按钮

单击\\\"compass layout\\\"层并选择它
' }6 w# o) C+ Q& V

在Frame面板中，单击底部的增加新帧的图标
' K4 y# a& l  v# x# n; {  P; l) N1 W

当第二帧被选中，选择文字工具并在左边铁锈红的区域上单击以输入文字
$ M- T( m! f  q' }, j0 y

键入\\\"Hit the beaches of Southern California this summer with the pros.\\\"
. a% B0 g" r9 ]' f; J

文件格式为Verdana, bold, 12 point,黄颜色#FFCC66（颜色和下面的新月牙颜色一样）
  ~. i  l1 j2 R, ?
) r3 r. ~+ T3 ^
2 U) q8 O* d& }  g2 C, @6 d) V

在帧面板，选择Duplicate Frame,复制的数目为6
( S% P4 a) F6 u0 W  W

选择第三帧，双击改变文字为\\\"Explore the Seattle area by kayak. A 10 day adventure.\\\"
  r, F; U# Q0 ?

（如果你喜欢你可以改变其他的帧，或者干脆打开Demo_08.png）

选择切图工具，添加一个切片在你刚增加的文字的附近（把这个切片一直拉到文件的底部）
! h7 ?5 f# q, W' u
9 }! K6 y% ~" g! i7 c! M

在帧面板，确信第一帧被选中
* Y7 W% G7 l& @& u( Z$ J6 g

用Subselect工具，按住Shift键，选中所有的矩形外框位图图标

从菜单中选择Insert/Hotspot
. E  K3 |; K* l8 ~6 q

在对话窗口中选择\\\"Multiple\\\"

在它们的外面单击取消选中热区

在Surfing图象的热区上单击来选定它

单击并拖动中心圆点图标到你在下面新建立的切片上

在弹出窗口中，确信\\\"Frame 2\\\"被选定，且单击OK
! G' z. ]/ h* v' d- g0 `# Y/ o3 o
- o! O* l5 `. q% Z8 [9 n

选择下一个热区，单击和拖动这个中心图标到切片物体

这时，选择\\\"Frame 3\\\"作为源目标
$ }8 R3 a; J, q2 [1 m6 n$ F

继续单击和拖动剩余的热区的中心图标到切片中，每次选择适当的帧来做为源目标的交换
. a3 e  [. d) B- l5 z" Q: H  y

单击Preview标签来预览这个图片翻转
3 ?% G- R0 V( M: C, B1 x( A! {5 u
, M$ q) N3 W* Y$ h- m

创建弹出菜单

在文件的顶部的导航条中选择\\\"Gear\\\"按钮

在菜单中选择Insert/Pop-up

2 K* y2 H6 a- n9 [

在出现的窗口中，进行下面的操作

输入\\\"Backpacks\\\"

单击图标\\\"+\\\"来增加（注意：你也能在这儿输入URL）

然后，输入\\\"No frame\\\"

单击图标\\\"+\\\"来增加它

当\\\"No frame\\\"被选中时，点击蓝色的缩进图标
6 l! A$ Z! c& ^9 o( s' ~4 ]

使用图象054.gif

现在输入\\\"External frame\\\"并单击\\\"+\\\"图标

输入\\\"Internal frame\\\"并单击\\\"＋\\\"图标

输入\\\"Clothing\\\"并单击\\\"＋\\\"图标
  U; U3 j- x- I& ~

当\\\"Clothing\\\" 被选中时，点击蓝色的缩进图标(原文不是这个意思，但感觉不对)
' L7 q; O* D+ ]. ]/ x

输入\\\"Jackets\\\" 并单击\\\"＋\\\"图标

当\\\"Jackets\\\" 被选中时，点击蓝色的缩进图标

输入\\\"ants\\\" 并单击\\\"＋\\\"图标
5 R5 R- E/ Y" x* l, S

单击\\\"Next\\\"按钮
0 T5 ?1 n9 v+ J% l( U8 t! o

使用标准的HTML外观设置，但是把文字尺寸改为10pt（使用弹出窗口编辑器你既可以是HTML也可以是图象来创建你的按钮）

1 ]( u9 V) Y1 ~  {: G, P
# n" V  Y' F$ u: s" q' J; o

单击Finish按钮　　用commands执行图象翻转的批处理命令......打开Demo_09.png文件或者继续使用演示文件　　用commands执行图象翻转的批处理命令

打开History 面板

在文件中，按住shift选择这三个矢量的图标和他们的\\\"more\\\"按钮一起（在主要的白色区域）
' F4 }/ j4 N( ~2 Z3 a

在Frame面板，选择\\\"Copy to Frames\\\"并选择\\\"Next Frame\\\"操作

7 G  ]1 V8 S+ B9 V3 N6 t7 T; r

让我们自动地把这三个按扭变成图象翻转按扭

在白色的主区域选择第一个按钮（在\\\"Fly Fising in the Rocky Mountains\\\"上面）
( B9 h1 N* I. ~  e8 h

复制它

在Frame面板中，在第二帧上单击

粘贴它
. N" C/ j. Z) e+ q" J& `. U' t7 m, S

选择菜单Modify/Send to Back

在FILL面板，选择填充的类型为Solid，选择颜色为桔黄色#FF9933

当按钮仍旧被选择时，选择菜单Insert/Slice
( T4 K- O7 S2 m8 Y- c$ W0 a0 E9 W

在切片上，在图标的中心单击来访问弹出菜单，选择\\\"Add Simple Rollover Behavior\\\"
& E4 }9 W4 C2 A6 T0 D

在History面板，按住Shift选择这八个步骤，从\\\"Copy\\\" 到\\\"Edit Behavior\\\"

单击磁盘图标把这些步骤保存成一个Command.

命名这个Command为\\\"Make rollover button\\\"
. h# R( `/ j) n% C/ @

现在，单击第一帧下面，选择中间的按钮在\\\"Level 5 Rapids\\\"

现在，你可以任选其一
$ b7 k6 V: q5 F( h. ?

从Command菜单中选择\\\"Make rollover button\\\"命令
7 O" @" E7 F) O3 F, e

或者
8 @0 l1 C; X) Q4 a4 M/ X3 k4 A: I

在历史面板，点击\\\"command script\\\"，并点击Replay按钮
( \5 @  |+ \" G

点击第一帧，并选择最后一个按钮
: `2 S; }  W5 V) I5 R7 P& m

然后，在History面板选择\\\"Make rollover button\\\"或者在历史面板重新执行\\\"command script\\\"