Fireworks 4功能指南之二

　打开Demo_06.png在第2部分文件夹或者继续在你的演示文件中工作　　创建一个交互式的网页
: U  `$ y$ w  v/ g$ A; q" K1 ]

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

在层面板中建立一个新的层，并双击重命名为\\\"Navigation Buttons\\\"
- g2 v, L6 [+ p- Q" _$ F0 |+ W- u* w+ p& j

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

在Insert菜单中选择\\\"New Button\\\"
- C3 \  M# b3 h$ U6 U

选择长方形工具并拖出一个矩形
  u2 G  x! h, q. p* ?* a- A: C

在Info面板中，设置它的尺寸为140W×20H
# h% L& D4 Q' H) n3 B( F3 S

填充颜色为暗灰色#333333，笔触为1pixel basic笔触，暗青绿色#006666

复制这个矩形并进行粘贴

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

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

从File菜单中选择Import,在第三部分文件夹中选择\\\"Flag.png\\\"

在中青绿色正方形上单击来放置这个Flag
& A8 `' {/ p! U' _, n9 i- O; c

·选择文字工具，在按钮上单击来输入文字

输入\\\"ADVENTUREPLANNER\\\"设置文字大小为12pt，字体为Impact，黄颜色#FFCC66
8 Y% X5 E4 K  j9 P( I. O

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

放置文字在按钮暗灰色的区域上
" Z4 D4 e9 e" d3 q* X
　　 创建这个按钮的Up状态：
. l! D2 t7 c# _/ }& p5 ]

在按钮编辑窗口中单击\\\"Over\\\"标签
5 \1 V! i) F5 N: P, i" |) i9 R

单击\\\"Copy Up Graphic\\\"按钮
  e4 t5 s3 J# `- l6 p* ~8 ]0 m3 H

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

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

关闭按钮编辑器

/ Y; V, Q+ S' O$ [" ^: T4 L　　用简单的按钮创建导航条......　　用简单的按钮创建导航条

选择\\\"Adventure Planner\\\"这个简单的按钮
# z! ]2 A& }" z! M

按下Option(Mac)或者Alt(PC)键来向下拖动复制这个按钮
  H8 u% f( U" A) z

再复制四个按钮，使按钮的总数达到六个
% F9 |) \8 ^) @2 U) V

所有的按钮排成二行，每行三个。第一行为1，3，5，第二行为2，4，6
2 ^+ i5 ~* T# ~  R" x) g& a! D
" `9 c# x3 b* S  l6 v* ~1 n* z

全选这六个按钮，并使用Info面板，使它们的放置位置为x=150,y=25
& [6 w5 s6 f8 l  a2 k2 {; V

选择第二号复制的按钮

在Object面板，把文字\\\"ADVENTURE PLANNER\\\"改成\\\"\\\"GEAR\\\"
/ d4 R# J% h; H6 B

按下回车键


& p5 l- H/ W& S4 r

通过单击当前的按钮来确定只改变当前的按钮
2 [% M1 j# h+ w3 i. Y

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

#3-\\\"BOOK FLIGHTS\\\"
: f9 R, x! Y6 b; R( v6 S

#4-\\\"CHECK CONDITIONS\\\"

#5-\\\"TRAVEL LOGS\\\"

#6- \\\"TRAVEL CHAT\\\" 在文件中单击Preview标签来预览这个交互式的按钮
: Y: @9 V1 ]7 G$ S. E: r
* o8 T" x- i; y( t　　建立图片翻转按钮...... 　　打开文件Demo_07.png或者继续在演示文件中工作。　　在这部分，我们将为这些活动的图标建立 \\\"翻转图\\\"效果。　　建立图片翻转按钮
4 s* V( k# C3 I: ]9 D& A

单击\\\"compass layout\\\"层并选择它
( l& C4 {9 N; [  O2 t

在Frame面板中，单击底部的增加新帧的图标
2 G& @' Y( V3 W; A4 p' f! a6 [

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

键入\\\"Hit the beaches of Southern California this summer with the pros.\\\"
* U. v) Q: W8 N2 o2 l2 n6 Q& T

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

! l6 S3 e4 k/ ^0 _9 u, Z- M1 h

在帧面板，选择Duplicate Frame,复制的数目为6
3 K+ }* J# A! O9 t

选择第三帧，双击改变文字为\\\"Explore the Seattle area by kayak. A 10 day adventure.\\\"
( Z/ `7 {/ V# L& a  {1 M; @( I

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

选择切图工具，添加一个切片在你刚增加的文字的附近（把这个切片一直拉到文件的底部）
0 l0 n4 G% q3 f4 n! }$ x  j" a
' `4 @& u0 a; {8 K
: Z8 |4 J- T% b. C

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

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

5 J0 C! ?4 K8 A; U% ^

从菜单中选择Insert/Hotspot

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

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

在Surfing图象的热区上单击来选定它
/ ~" ~/ [# o# l  k, B6 G

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

在弹出窗口中，确信\\\"Frame 2\\\"被选定，且单击OK
% ]" z( E) D+ P# I, n5 [# y
# M! }+ o# z5 S" q1 a% O  h

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

这时，选择\\\"Frame 3\\\"作为源目标

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

单击Preview标签来预览这个图片翻转

创建弹出菜单

在文件的顶部的导航条中选择\\\"Gear\\\"按钮
  @& U* m9 @3 X4 S% V

在菜单中选择Insert/Pop-up
  a- s# [. S$ b0 H  i
& _2 y% y7 H4 `) ^0 W
# [/ o( A6 Z8 d" m7 ]* J! k

在出现的窗口中，进行下面的操作
7 b$ W, ]: Q( b3 Z8 B

输入\\\"Backpacks\\\"

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

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

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

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

使用图象054.gif
1 f* a' k. J0 ~8 |: }

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

输入\\\"Internal frame\\\"并单击\\\"＋\\\"图标
6 d8 i( P) |2 H4 k& ~

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

当\\\"Clothing\\\" 被选中时，点击蓝色的缩进图标(原文不是这个意思，但感觉不对)

输入\\\"Jackets\\\" 并单击\\\"＋\\\"图标
9 A- v8 R9 W/ C+ E& o) U$ Z7 M* J

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

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

单击\\\"Next\\\"按钮
, M3 ^; W1 q) ?( m8 @

使用标准的HTML外观设置，但是把文字尺寸改为10pt（使用弹出窗口编辑器你既可以是HTML也可以是图象来创建你的按钮）
" v0 o: j5 b; p/ A* m
$ Y( \7 d& i& T& r$ Y! U

单击Finish按钮　　用commands执行图象翻转的批处理命令......打开Demo_09.png文件或者继续使用演示文件　　用commands执行图象翻转的批处理命令
& t3 F& S2 P1 U: T* X8 Q  M" J' x

打开History 面板
2 ~+ u( k! }4 S$ V- i% t7 Z* `

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

在Frame面板，选择\\\"Copy to Frames\\\"并选择\\\"Next Frame\\\"操作
5 B$ g) b: s  V$ n' U

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

在白色的主区域选择第一个按钮（在\\\"Fly Fising in the Rocky Mountains\\\"上面）
5 B) o7 A5 g( N& c+ }; |

复制它

在Frame面板中，在第二帧上单击
6 I& Z6 y0 [$ `, b0 x5 Q1 N

粘贴它

选择菜单Modify/Send to Back

在FILL面板，选择填充的类型为Solid，选择颜色为桔黄色#FF9933
8 _9 D+ \$ L2 k1 v$ }. L8 E3 I6 j! Q7 l

当按钮仍旧被选择时，选择菜单Insert/Slice

在切片上，在图标的中心单击来访问弹出菜单，选择\\\"Add Simple Rollover Behavior\\\"

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

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

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

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

现在，你可以任选其一
" {% V" J, a: i0 F

从Command菜单中选择\\\"Make rollover button\\\"命令
# [9 p/ k0 n4 L" S+ _- C5 ]1 F
9 J% h; u# C* F, O9 f

或者
( l0 t* P% o, }1 Z: M$ ~

在历史面板，点击\\\"command script\\\"，并点击Replay按钮
, Y: U2 v$ T9 M" t. X5 D" M' Y

点击第一帧，并选择最后一个按钮
" K6 a& u. I# \6 n" u

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