Fireworks 4功能指南之二

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

在这段中，我们将会在我们的网页中增加交互性和动画
( f# Y2 w! P4 S  e% v5 [) B1 v5 ]

在层面板中建立一个新的层，并双击重命名为\\\"Navigation Buttons\\\"

(将这个新层放在最上面，在compass版面的上面)，把它拖到那个位置
, [% f( ]' G! d. J0 y

在Insert菜单中选择\\\"New Button\\\"
, E, H6 `. V( m' Q6 e' l: [, c

选择长方形工具并拖出一个矩形
0 }! p& X/ t$ ]9 `; D0 a3 G

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

填充颜色为暗灰色#333333，笔触为1pixel basic笔触，暗青绿色#006666
. o1 T' g, j; ]/ N  k

复制这个矩形并进行粘贴
7 m- E1 ?( a+ a7 d

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

并且改变它的填充色为中青绿色#006699

从File菜单中选择Import,在第三部分文件夹中选择\\\"Flag.png\\\"
$ S1 E8 c; i: j, d9 N$ f6 ~! {

在中青绿色正方形上单击来放置这个Flag

·选择文字工具，在按钮上单击来输入文字
9 N4 G% W7 F& O% ]

输入\\\"ADVENTUREPLANNER\\\"设置文字大小为12pt，字体为Impact，黄颜色#FFCC66
( J' j' u; ~  J+ w& Y

保证左边的按钮正处于被选择状态
- d7 D* K* g1 Y

放置文字在按钮暗灰色的区域上
; D( D, }$ L+ p2 W# d! v" z  d  C
* E7 h6 Y* i5 [  J8 d; D　　 创建这个按钮的Up状态：

在按钮编辑窗口中单击\\\"Over\\\"标签
+ A& E' e! w# }0 i

单击\\\"Copy Up Graphic\\\"按钮
  [  t! l& x) C5 o5 ]' ]- @- W; U2 V

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

改变文字的颜色为暗灰色（把按钮和文字的颜色互换）

关闭按钮编辑器

　　用简单的按钮创建导航条......　　用简单的按钮创建导航条

选择\\\"Adventure Planner\\\"这个简单的按钮

按下Option(Mac)或者Alt(PC)键来向下拖动复制这个按钮

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

所有的按钮排成二行，每行三个。第一行为1，3，5，第二行为2，4，6
6 L# E- m* s2 N5 q, l2 a0 `

! }' S7 f: \4 b$ m! O  q) [6 a

全选这六个按钮，并使用Info面板，使它们的放置位置为x=150,y=25

选择第二号复制的按钮
( {7 V& i: g) o5 \, O- C

在Object面板，把文字\\\"ADVENTURE PLANNER\\\"改成\\\"\\\"GEAR\\\"
& _- {9 W* A% V/ q

按下回车键


0 j2 k: Y  O! A: u5 i% J

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

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

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

#4-\\\"CHECK CONDITIONS\\\"
" {  J0 Z- F5 N1 [/ K

#5-\\\"TRAVEL LOGS\\\"
. n; R& m; p2 a4 {* b

#6- \\\"TRAVEL CHAT\\\" 在文件中单击Preview标签来预览这个交互式的按钮
& R( c+ m1 h$ U: q! S# [2 v4 N1 o
2 t2 C7 T6 W5 R4 ]& M2 J　　建立图片翻转按钮...... 　　打开文件Demo_07.png或者继续在演示文件中工作。　　在这部分，我们将为这些活动的图标建立 \\\"翻转图\\\"效果。　　建立图片翻转按钮
5 w0 i6 C0 M5 y9 B' H  T5 H+ g5 H1 g7 g

单击\\\"compass layout\\\"层并选择它

在Frame面板中，单击底部的增加新帧的图标

当第二帧被选中，选择文字工具并在左边铁锈红的区域上单击以输入文字

键入\\\"Hit the beaches of Southern California this summer with the pros.\\\"

文件格式为Verdana, bold, 12 point,黄颜色#FFCC66（颜色和下面的新月牙颜色一样）

& z% |- p) N/ ?% @+ L

在帧面板，选择Duplicate Frame,复制的数目为6

选择第三帧，双击改变文字为\\\"Explore the Seattle area by kayak. A 10 day adventure.\\\"

（如果你喜欢你可以改变其他的帧，或者干脆打开Demo_08.png）
  t$ G5 t: u! p" S

选择切图工具，添加一个切片在你刚增加的文字的附近（把这个切片一直拉到文件的底部）

/ v! H  j7 X5 S# r0 ^
2 _; v1 W# [0 {, c, ^

在帧面板，确信第一帧被选中

用Subselect工具，按住Shift键，选中所有的矩形外框位图图标
, I0 \) F: a% O, @6 h
0 ?3 }7 f* v  _0 K; w4 E" p
1 Q( k' [/ {9 s3 B' e; P( G) f$ u2 D

从菜单中选择Insert/Hotspot

在对话窗口中选择\\\"Multiple\\\"
( Z- L+ ]- z" q! Y& V+ k8 a% V

在它们的外面单击取消选中热区
6 M9 u1 m, ~6 _( u

在Surfing图象的热区上单击来选定它
% }" O: O3 e  s5 M' }+ }8 [

单击并拖动中心圆点图标到你在下面新建立的切片上
" Y* M* G) c- w! U4 r/ \: J

在弹出窗口中，确信\\\"Frame 2\\\"被选定，且单击OK


. s% S( c: Z$ |+ C. K' W9 _

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

这时，选择\\\"Frame 3\\\"作为源目标
( c4 p8 a, C- e+ R8 t; D6 c  z

继续单击和拖动剩余的热区的中心图标到切片中，每次选择适当的帧来做为源目标的交换

单击Preview标签来预览这个图片翻转
4 O9 V, _4 H. B1 W
. V( |7 Z2 R& }. x7 Z% d
1 f$ ?7 C$ y  s& ~5 d

创建弹出菜单
9 p2 x, z/ f9 ~9 B7 d9 \

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

在菜单中选择Insert/Pop-up
% J: G$ ]4 q3 _# G) ]4 |1 J
. Q8 P" I" i8 c" f2 s6 ]: b  e' C

在出现的窗口中，进行下面的操作
  ?" x% d- R! y) a- p

输入\\\"Backpacks\\\"

单击图标\\\"+\\\"来增加（注意：你也能在这儿输入URL）
" p. }# Z) h& a+ ?" P9 c! p- h

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

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

当\\\"No frame\\\"被选中时，点击蓝色的缩进图标
% P" s5 Q* M; l1 I+ A

使用图象054.gif

现在输入\\\"External frame\\\"并单击\\\"+\\\"图标
8 N  H3 c  ^1 Y' I' y3 b

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

输入\\\"Clothing\\\"并单击\\\"＋\\\"图标
: m( A1 [  T; P5 o

当\\\"Clothing\\\" 被选中时，点击蓝色的缩进图标(原文不是这个意思，但感觉不对)
* I* V% H! U6 x) m

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

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

输入\\\"ants\\\" 并单击\\\"＋\\\"图标
! n5 o1 G$ H$ ^8 d( i: O4 K" O

单击\\\"Next\\\"按钮

使用标准的HTML外观设置，但是把文字尺寸改为10pt（使用弹出窗口编辑器你既可以是HTML也可以是图象来创建你的按钮）
& S! Q. ?% [9 v
9 k/ \& y/ N3 P' ^1 Z  v
* Z4 M; @1 p; k1 Y

单击Finish按钮　　用commands执行图象翻转的批处理命令......打开Demo_09.png文件或者继续使用演示文件　　用commands执行图象翻转的批处理命令
& Q: I& {8 Y/ V; z+ Y  u4 \

打开History 面板

在文件中，按住shift选择这三个矢量的图标和他们的\\\"more\\\"按钮一起（在主要的白色区域）

在Frame面板，选择\\\"Copy to Frames\\\"并选择\\\"Next Frame\\\"操作
9 z: b5 ]) l. d" c% g9 [$ t5 [

) ?( f$ O: \0 s/ O5 B

让我们自动地把这三个按扭变成图象翻转按扭
% A( O/ U, E1 x  r, p% @) _

在白色的主区域选择第一个按钮（在\\\"Fly Fising in the Rocky Mountains\\\"上面）

复制它

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

粘贴它
0 F0 O( z0 y1 T) V$ g  ^$ L

选择菜单Modify/Send to Back

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

当按钮仍旧被选择时，选择菜单Insert/Slice
# z1 M: Y7 [! H! f( v" O

在切片上，在图标的中心单击来访问弹出菜单，选择\\\"Add Simple Rollover Behavior\\\"
* E8 ~+ w* a4 L

在History面板，按住Shift选择这八个步骤，从\\\"Copy\\\" 到\\\"Edit Behavior\\\"
8 ^( x8 w* E( Z! t

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

命名这个Command为\\\"Make rollover button\\\"

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

现在，你可以任选其一
% m% o/ u* r+ j

从Command菜单中选择\\\"Make rollover button\\\"命令
1 j$ a/ d( O9 r

" y4 R: o5 d+ }, Y) [

或者

在历史面板，点击\\\"command script\\\"，并点击Replay按钮
9 W5 w' r: ^0 g, M  Y

点击第一帧，并选择最后一个按钮
" z0 Z" B* z$ L' S. U4 I: A

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