Fireworks 4功能指南之二

[复制链接]
查看: 492|回复: 0
gggds 发表于 2009-12-27 13:39:31 | 显示全部楼层 |阅读模式
 打开Demo_06.png在第2部分文件夹或者继续在你的演示文件中工作  创建一个交互式的网页
" J# v1 N, F1 e! m
  • 在这段中,我们将会在我们的网页中增加交互性和动画
    & d* u" V. Z4 H4 t" R7 O% \
  • 在层面板中建立一个新的层,并双击重命名为\\\"Navigation Buttons\\\" 8 Q4 F/ Z0 x# o# G
  • (将这个新层放在最上面,在compass版面的上面),把它拖到那个位置
    $ l/ Q& ?- E" S6 h2 O
  • 在Insert菜单中选择\\\"New Button\\\"
    % R4 Y( T) \' a0 H" b3 N8 v8 i
  • 选择长方形工具并拖出一个矩形% O) R2 I* N/ o3 Q
  • 在Info面板中,设置它的尺寸为140W×20H
    + x! ^  f& m4 R. r0 N
  • 填充颜色为暗灰色#333333,笔触为1pixel basic笔触,暗青绿色#006666
    0 A7 @& X5 K- v6 i
  • 复制这个矩形并进行粘贴0 Z, }. |+ n7 x! \' C- ?5 m1 g# ]# a5 B
  • 当这个复制矩形被选择时,使用Info面板调整它的尺寸为20W×20H7 f9 B* |) |; j/ j+ E$ K* u* d& d* l) Y
  • 并且改变它的填充色为中青绿色#006699
    4 J: c, m! i; Z/ A. k3 m
  • 从File菜单中选择Import,在第三部分文件夹中选择\\\"Flag.png\\\"5 M# o- w1 w7 t3 [8 R
  • 在中青绿色正方形上单击来放置这个Flag: x$ W* X  g/ u- {- f( n0 q! R
  • ·选择文字工具,在按钮上单击来输入文字' u* i5 X; s$ `1 X# b- i
  • 输入\\\"ADVENTUREPLANNER\\\"设置文字大小为12pt,字体为Impact,黄颜色#FFCC660 l) V! i5 ^* {# A7 P* w
  • 保证左边的按钮正处于被选择状态( t3 G) k. j5 X) p: e# ~% {
  • 放置文字在按钮暗灰色的区域上
    ; N+ ^- n. z" U+ q" E6 a  \4 b& r$ Y  @3 a$ H* V
       创建这个按钮的Up状态:
    8 f) Z! T  V% J3 Z+ c" q
  • 在按钮编辑窗口中单击\\\"Over\\\"标签
    4 l& J* V( l% a9 }1 E( K$ k
  • 单击\\\"Copy Up Graphic\\\"按钮
    4 V# q; u5 ]9 G5 B# l
  • 对图形做下面这些改变:把填充颜色由暗灰色改成同文字一样的颜色#FFCC66  o9 _. g- e3 _6 d& H& s
  • 改变文字的颜色为暗灰色(把按钮和文字的颜色互换)2 K5 M4 {% m. b) R8 N' ]
  • 关闭按钮编辑器 ! u/ Z( E& ?1 F8 h3 P) V. D1 A
    9 W) s) Z! q3 c. ^: [9 I+ L5 R
      用简单的按钮创建导航条......  用简单的按钮创建导航条
    7 \7 A# d# A/ D* {
  • 选择\\\"Adventure Planner\\\"这个简单的按钮3 D- Y  m$ y9 s# y! {- ]4 L
  • 按下Option(Mac)或者Alt(PC)键来向下拖动复制这个按钮* x3 I2 ?% p* X! {
  • 再复制四个按钮,使按钮的总数达到六个! y& }+ D  Y% X
  • 所有的按钮排成二行,每行三个。第一行为1,3,5,第二行为2,4,6 ' l) J/ Y9 }% J- Y

    & [. B. {. y. c6 n9 c- T
    5 H+ E# g: B3 `/ ]5 Q% X' x* H% |
  • 全选这六个按钮,并使用Info面板,使它们的放置位置为x=150,y=25
    1 J+ e( B& G2 u7 `+ q. t
  • 选择第二号复制的按钮; L* j& V8 q# M. N: X. C
  • 在Object面板,把文字\\\"ADVENTURE PLANNER\\\"改成\\\"\\\"GEAR\\\"
    , E* Q4 V& M9 h5 U3 V) v4 k& |% h
  • 按下回车键 ; y% |; G# p  q! k. `) {

    $ n9 [% {; O, a* S. ]
    % @. m+ H7 ?. g3 B9 n' B0 E5 d' y
  • 通过单击当前的按钮来确定只改变当前的按钮6 |; t* J7 @/ X9 v/ O
  • 把余下的四个按钮文字更改如下:
    9 S& Y! x5 X& S1 y4 k
  • #3-\\\"BOOK FLIGHTS\\\"& [- `: |& m3 ~9 i9 G
  • #4-\\\"CHECK CONDITIONS\\\"
    $ a4 M# a4 |# A3 @8 n
  • #5-\\\"TRAVEL LOGS\\\" ; m" M( l$ k3 m* |' P7 T/ q: D
  • #6- \\\"TRAVEL CHAT\\\" 在文件中单击Preview标签来预览这个交互式的按钮
    ; d% H9 f  j- G/ o3 A3 n4 ~$ }+ h/ H+ }
      建立图片翻转按钮......   打开文件Demo_07.png或者继续在演示文件中工作。  在这部分,我们将为这些活动的图标建立 \\\"翻转图\\\"效果。  建立图片翻转按钮
    " e% w6 T0 d2 z
  • 单击\\\"compass layout\\\"层并选择它- o6 B3 I7 i: O- q
  • 在Frame面板中,单击底部的增加新帧的图标  @- d/ g5 |9 L
  • 当第二帧被选中,选择文字工具并在左边铁锈红的区域上单击以输入文字
    1 I# f- I. X  D3 V
  • 键入\\\"Hit the beaches of Southern California this summer with the pros.\\\"
    1 K9 ^$ \( n) R! P: J
  • 文件格式为Verdana, bold, 12 point,黄颜色#FFCC66(颜色和下面的新月牙颜色一样)
    , \5 ^" n- `' Z
    ; D' F2 \+ q) r: Z5 q; e) Z$ S7 w5 w5 U( n
  • 在帧面板,选择Duplicate Frame,复制的数目为6
    4 a4 B# ?* F6 F4 ]! L
  • 选择第三帧,双击改变文字为\\\"Explore the Seattle area by kayak. A 10 day adventure.\\\"
    5 L7 [! H8 F. a! G/ S, z! s2 A
  • (如果你喜欢你可以改变其他的帧,或者干脆打开Demo_08.png)/ M0 Y# ]0 B: F- X+ a1 j
  • 选择切图工具,添加一个切片在你刚增加的文字的附近(把这个切片一直拉到文件的底部)
    - Z' p# ^% F% W1 Q: k$ [! {6 n; a  z  D( K0 S
    * a6 j& w4 s, j5 ]
  • 在帧面板,确信第一帧被选中$ z7 L+ i; z- L) U. z, ^) {: C1 M
  • 用Subselect工具,按住Shift键,选中所有的矩形外框位图图标 $ Q& j/ v' P; \# D- {

    ; I* P0 P2 u2 P% g* W+ s$ n1 i# [/ ?/ p5 \2 O  J
  • 从菜单中选择Insert/Hotspot3 D1 L2 b, Z) l) ]
  • 在对话窗口中选择\\\"Multiple\\\") B6 J! j0 i0 g9 m7 ^7 d, ~
  • 在它们的外面单击取消选中热区+ V) Y7 z  Q" ^. s
  • 在Surfing图象的热区上单击来选定它
    ' Q: u1 o. p6 a- O
  • 单击并拖动中心圆点图标到你在下面新建立的切片上
    9 G6 Y. ^1 d% |% N  K2 D- t2 Y- A: {
  • 在弹出窗口中,确信\\\"Frame 2\\\"被选定,且单击OK
    9 T: u; n) G& Q/ I& i5 Z: l6 o2 P8 @* E' X. ^  D1 \

    5 {6 M  [6 v. p% ]
  • 选择下一个热区,单击和拖动这个中心图标到切片物体& n2 q* {+ ^1 p" I8 y8 M* T3 y( @% k( h
  • 这时,选择\\\"Frame 3\\\"作为源目标
    0 j) i3 @2 v2 W: `9 D. W, J/ k% J
  • 继续单击和拖动剩余的热区的中心图标到切片中,每次选择适当的帧来做为源目标的交换8 i1 \! d9 `; k: T! x/ a; k0 e
  • 单击Preview标签来预览这个图片翻转
    7 G0 ~1 N; K2 o; i0 K) r$ M8 A8 ?7 t: F) |0 s7 |, E
    4 C) P/ e/ Y6 ]- d/ A2 [
  • 创建弹出菜单' P: ?7 a/ G- V" L9 v/ o, v$ f
  • 在文件的顶部的导航条中选择\\\"Gear\\\"按钮- i. U4 C0 v' F; w
  • 在菜单中选择Insert/Pop-up * ]3 [! b) ^5 I; I% |0 _

    + D% z' y& g4 M$ e. z* F; [5 k) h" M9 p! |- Y3 @; T
  • 在出现的窗口中,进行下面的操作+ b* N5 v6 r8 A6 j- @% p
  • 输入\\\"Backpacks\\\"+ M) _# f8 H. g; m% S; v
  • 单击图标\\\"+\\\"来增加(注意:你也能在这儿输入URL)" W* Q$ g; I8 i4 ?: R! Q; @. `
  • 然后,输入\\\"No frame\\\"0 [6 C2 G$ n" w0 o
  • 单击图标\\\"+\\\"来增加它
    ; g. P' P4 ~% N' H' v9 `
  • 当\\\"No frame\\\"被选中时,点击蓝色的缩进图标
    . j7 i9 C2 a+ I0 Y* Z' I6 v% {. T
  • 使用图象054.gif
    2 F# l) w+ ~) L- }
  • 现在输入\\\"External frame\\\"并单击\\\"+\\\"图标
    , `  T1 Q0 @! N/ ]# V' h
  • 输入\\\"Internal frame\\\"并单击\\\"+\\\"图标
    ; x# F( o9 O" \: d
  • 输入\\\"Clothing\\\"并单击\\\"+\\\"图标* M9 H5 V2 {& ?2 g$ w5 p- y) w
  • 当\\\"Clothing\\\" 被选中时,点击蓝色的缩进图标(原文不是这个意思,但感觉不对)% v$ w* Y/ j- W3 i; C! y/ ?5 }
  • 输入\\\"Jackets\\\" 并单击\\\"+\\\"图标
    * w, j8 ?' ?0 x8 ~
  • 当\\\"Jackets\\\" 被选中时,点击蓝色的缩进图标. Q2 g0 J! x! E- i7 v
  • 输入\\\"ants\\\" 并单击\\\"+\\\"图标
    2 w; }* E% x$ N" [2 O* J7 ]7 Y
  • 单击\\\"Next\\\"按钮2 m, P7 [2 c% I6 ^; U4 @
  • 使用标准的HTML外观设置,但是把文字尺寸改为10pt(使用弹出窗口编辑器你既可以是HTML也可以是图象来创建你的按钮)
    ) c; E: B0 y- W& g% f/ E9 T  Y* Y1 b" A5 n1 w. n" i: l

    ! V. r0 w: B/ G  ~& _; r
  • 单击Finish按钮  用commands执行图象翻转的批处理命令......打开Demo_09.png文件或者继续使用演示文件  用commands执行图象翻转的批处理命令# p% h& w& @6 s  A4 l& `$ u
  • 打开History 面板/ Z. E% T$ l# Y9 I+ Y% _
  • 在文件中,按住shift选择这三个矢量的图标和他们的\\\"more\\\"按钮一起(在主要的白色区域)
    , ?# Z& y, v$ L
  • 在Frame面板,选择\\\"Copy to Frames\\\"并选择\\\"Next Frame\\\"操作
    1 o' \% o+ N; c6 L# K( L' ^5 c$ `- ]# f) f0 B' o3 }

    9 @3 a- h7 A3 I) T+ u# J  Z
  • 让我们自动地把这三个按扭变成图象翻转按扭
    3 e' ]+ _* O" J% `
  • 在白色的主区域选择第一个按钮(在\\\"Fly Fising in the Rocky Mountains\\\"上面)
    " H6 S# |4 M. y0 _) f6 k' `/ ~
  • 复制它0 `5 a0 |: G9 _4 f/ L3 l) f5 o
  • 在Frame面板中,在第二帧上单击
    : o: I; u* f- j. B
  • 粘贴它
    5 b) |" f$ x, S% [0 N
  • 选择菜单Modify/Send to Back! c; p3 F% I/ C7 o! L1 d
  • 在FILL面板,选择填充的类型为Solid,选择颜色为桔黄色#FF99339 B% L  d! [9 [
  • 当按钮仍旧被选择时,选择菜单Insert/Slice
    # x7 k+ q2 Z& _* w! g
  • 在切片上,在图标的中心单击来访问弹出菜单,选择\\\"Add Simple Rollover Behavior\\\" - l2 X' P5 z/ v( w/ ^2 u
  • 在History面板,按住Shift选择这八个步骤,从\\\"Copy\\\" 到\\\"Edit Behavior\\\"  T0 O& T( r0 L+ m/ ?& \6 W) L
  • 单击磁盘图标把这些步骤保存成一个Command.+ d% a( J9 P, J/ b5 F
  • 命名这个Command为\\\"Make rollover button\\\") p! H, [8 @$ x% _' x% r. E
  • 现在,单击第一帧下面,选择中间的按钮在\\\"Level 5 Rapids\\\"
    + A' v& C: D) m
  • 现在,你可以任选其一
    7 z7 ~8 v! o# \/ V
  • 从Command菜单中选择\\\"Make rollover button\\\"命令# w4 V! s6 X) @- k4 U& B+ b
    ; g6 o4 y5 h: C% P3 ?

    - T* w  _: C( ]0 x7 y- R
  • 或者
    3 F! a. V1 @! C+ f  G1 M; X
  • 在历史面板,点击\\\"command script\\\",并点击Replay按钮
    # U0 ~* ]/ o) y9 r# M  l) H
  • 点击第一帧,并选择最后一个按钮
    ) q8 Q2 y. n! q5 F- x, ]  o
  • 然后,在History面板选择\\\"Make rollover button\\\"或者在历史面板重新执行\\\"command script\\\"
  • 本版积分规则

    精彩图文

    Copyright   ©2015-2016  展示网  Powered by©Discuz!  技术支持:凡尚展览     ( 粤ICP备14065977号 )