Fireworks 4功能指南之二

[复制链接]
查看: 487|回复: 0
gggds 发表于 2009-12-27 13:39:31 | 显示全部楼层 |阅读模式
 打开Demo_06.png在第2部分文件夹或者继续在你的演示文件中工作  创建一个交互式的网页
; ?( [# R" J- B- }! @6 F9 j
  • 在这段中,我们将会在我们的网页中增加交互性和动画
    / ^1 t, O$ B2 O4 @3 v+ m' b5 M
  • 在层面板中建立一个新的层,并双击重命名为\\\"Navigation Buttons\\\" / A- t3 d, P' L& A7 s
  • (将这个新层放在最上面,在compass版面的上面),把它拖到那个位置( N) P( y6 X1 ^' b2 Z. }
  • 在Insert菜单中选择\\\"New Button\\\"
    # F+ U3 I9 p+ [; u
  • 选择长方形工具并拖出一个矩形' `3 `1 ]' U; J( }8 t
  • 在Info面板中,设置它的尺寸为140W×20H1 T; e1 y2 `- x, w
  • 填充颜色为暗灰色#333333,笔触为1pixel basic笔触,暗青绿色#006666
    ) k. b9 s  S0 l; g) U- \
  • 复制这个矩形并进行粘贴
    & G5 }/ o  m: r' ]; _4 X
  • 当这个复制矩形被选择时,使用Info面板调整它的尺寸为20W×20H
    5 m7 d9 s: G/ d9 G
  • 并且改变它的填充色为中青绿色#006699
    4 E& h# K9 u: l% x* j
  • 从File菜单中选择Import,在第三部分文件夹中选择\\\"Flag.png\\\"( U9 U4 G& w! O/ l  x' {) T* _
  • 在中青绿色正方形上单击来放置这个Flag0 v: k7 D- ]: y4 o/ w- N
  • ·选择文字工具,在按钮上单击来输入文字' o2 p# W$ s* a2 X, N% g
  • 输入\\\"ADVENTUREPLANNER\\\"设置文字大小为12pt,字体为Impact,黄颜色#FFCC66
    " `6 J% ?0 R3 Y' W. V6 j
  • 保证左边的按钮正处于被选择状态
    + G* \' D% c! o- a! |) w
  • 放置文字在按钮暗灰色的区域上
    + p5 n5 m8 p0 {* j+ f0 v- b. {$ ]) F% A2 f& U* v
       创建这个按钮的Up状态: 4 {; M# ^* L. `; z+ [
  • 在按钮编辑窗口中单击\\\"Over\\\"标签
    : c3 J# ?) ^/ |
  • 单击\\\"Copy Up Graphic\\\"按钮
    8 l; G3 S7 H2 O; ]
  • 对图形做下面这些改变:把填充颜色由暗灰色改成同文字一样的颜色#FFCC66! w' U- f& Z0 O$ x: n, ~
  • 改变文字的颜色为暗灰色(把按钮和文字的颜色互换)
    " N4 @% e2 N8 ?+ A+ i
  • 关闭按钮编辑器
    ' A" P2 D: V* @5 z7 o' C0 A
    : _$ E  o- Q6 f, O- e9 F% G  用简单的按钮创建导航条......  用简单的按钮创建导航条   O' i/ o7 V- s4 p! B; t
  • 选择\\\"Adventure Planner\\\"这个简单的按钮( R: G2 f( u9 m) Y$ u: h* }& f
  • 按下Option(Mac)或者Alt(PC)键来向下拖动复制这个按钮
    5 W5 Y% ^, }3 q2 u3 Q6 L
  • 再复制四个按钮,使按钮的总数达到六个
    . J: D  p' E/ E. `1 l8 M
  • 所有的按钮排成二行,每行三个。第一行为1,3,5,第二行为2,4,6 - U( X: y" G3 [3 c4 x8 V

    ( K" F6 Z! j, {: q* h, c/ I9 O! \) r
  • 全选这六个按钮,并使用Info面板,使它们的放置位置为x=150,y=25
    9 l' ~& J. @3 y; L3 g  e- J+ L( q
  • 选择第二号复制的按钮- E" O8 u5 g* n
  • 在Object面板,把文字\\\"ADVENTURE PLANNER\\\"改成\\\"\\\"GEAR\\\"4 b, I( a/ O8 o! [! A0 B
  • 按下回车键
    - v0 n; x% ?5 A8 W* K. f7 A$ K' L* }" y8 A
    + e/ ^' M1 }) y
  • 通过单击当前的按钮来确定只改变当前的按钮. \5 q1 L) c& M4 w% I& e  `
  • 把余下的四个按钮文字更改如下:8 \4 @) c  C' E5 U
  • #3-\\\"BOOK FLIGHTS\\\"  T2 r, \8 s% a9 Z' x( {
  • #4-\\\"CHECK CONDITIONS\\\"
    5 H, I1 Q/ z4 c* a& Q8 c( S
  • #5-\\\"TRAVEL LOGS\\\" % q5 v" p& M1 A0 a; @: `+ K/ ~; p
  • #6- \\\"TRAVEL CHAT\\\" 在文件中单击Preview标签来预览这个交互式的按钮
    5 h. N$ }4 i- {
    , K0 O8 ^" Y+ B7 N6 k- I8 Q9 J  建立图片翻转按钮......   打开文件Demo_07.png或者继续在演示文件中工作。  在这部分,我们将为这些活动的图标建立 \\\"翻转图\\\"效果。  建立图片翻转按钮 1 O8 }" x$ P5 n; c' G4 k9 H
  • 单击\\\"compass layout\\\"层并选择它
    % P+ d: o: e1 E! H  Q
  • 在Frame面板中,单击底部的增加新帧的图标" a# B: ~1 y, S9 {; k
  • 当第二帧被选中,选择文字工具并在左边铁锈红的区域上单击以输入文字6 L3 p% h4 Z0 c+ @* J6 P" {3 m
  • 键入\\\"Hit the beaches of Southern California this summer with the pros.\\\") ^0 J! {. U9 }3 e6 ]% k! ?
  • 文件格式为Verdana, bold, 12 point,黄颜色#FFCC66(颜色和下面的新月牙颜色一样) " d  _" a; k/ t: q" J6 o
    & ]$ g4 W6 w4 Y2 u
    4 x# [. ^7 e- H% B' h
  • 在帧面板,选择Duplicate Frame,复制的数目为6
    1 k7 N+ m* `& u* {% P" B
  • 选择第三帧,双击改变文字为\\\"Explore the Seattle area by kayak. A 10 day adventure.\\\"* u1 ~# t5 o( s4 f- ^+ F4 `
  • (如果你喜欢你可以改变其他的帧,或者干脆打开Demo_08.png)+ j/ b8 c9 W0 k: K8 I* x
  • 选择切图工具,添加一个切片在你刚增加的文字的附近(把这个切片一直拉到文件的底部) & r& g% g3 T. d7 y6 S9 @& k1 q
    * {8 p' @5 }  o+ o9 H2 j" B

    3 x, S( U! O6 ]% M4 L
  • 在帧面板,确信第一帧被选中
    2 Z/ E1 E$ u% Z! n, T" c" ?* _! ~
  • 用Subselect工具,按住Shift键,选中所有的矩形外框位图图标
    ) T7 o0 ?& f* M+ U8 U
    : o; \( Z. I8 |- N. p! Z
    5 D1 g" g" M5 N9 e: R$ S
  • 从菜单中选择Insert/Hotspot
    , e4 O& g4 \( m( n; W3 d
  • 在对话窗口中选择\\\"Multiple\\\"
      Y0 S1 U+ n* S5 U1 |
  • 在它们的外面单击取消选中热区( `" q/ _2 {/ x8 s4 t; W' b
  • 在Surfing图象的热区上单击来选定它
    ( @; r3 W3 W7 b! J
  • 单击并拖动中心圆点图标到你在下面新建立的切片上2 q- k8 |# ^6 |
  • 在弹出窗口中,确信\\\"Frame 2\\\"被选定,且单击OK
    4 J3 r% V3 h$ q5 R
    : F% J) y! f9 q6 @; m6 ?' ^4 N' K; r, _  U9 {* A. Q
  • 选择下一个热区,单击和拖动这个中心图标到切片物体
    * X1 J/ P4 H! f& ~  \
  • 这时,选择\\\"Frame 3\\\"作为源目标
    : A  G6 V# O6 k8 n& M
  • 继续单击和拖动剩余的热区的中心图标到切片中,每次选择适当的帧来做为源目标的交换$ j8 j  n* G2 s' I+ D! P0 G( @5 O+ L7 r
  • 单击Preview标签来预览这个图片翻转% Y+ M( R# P) ~" {9 t# T
    + g: k+ H  r8 A9 a

    5 E. u5 ~$ W& n% r3 f
  • 创建弹出菜单6 P1 M7 i! w8 Z8 e% I7 S; I$ U
  • 在文件的顶部的导航条中选择\\\"Gear\\\"按钮7 J+ U$ |9 ~0 Z) k; S% q% K8 q
  • 在菜单中选择Insert/Pop-up
    " }& T% y0 \: }3 L1 {. c& e
    $ v3 E  I9 a/ h3 K6 R" h
    4 @/ x  x( ^$ W
  • 在出现的窗口中,进行下面的操作( Z2 Y; h6 Q* x6 w4 w9 D! @. ]
  • 输入\\\"Backpacks\\\") Q+ `( \- t0 I
  • 单击图标\\\"+\\\"来增加(注意:你也能在这儿输入URL)- s8 y% _" m$ {$ U- G: V& R
  • 然后,输入\\\"No frame\\\"3 J$ k- \# |, v' ^9 `( A8 _8 `
  • 单击图标\\\"+\\\"来增加它' I. p  ~4 {, {5 z' h
  • 当\\\"No frame\\\"被选中时,点击蓝色的缩进图标# v5 o9 F! @% L
  • 使用图象054.gif4 H4 ~0 R$ u7 b8 Q8 e  w, U9 w- o
  • 现在输入\\\"External frame\\\"并单击\\\"+\\\"图标
    5 ]  T( c9 {& w% N0 ~6 d- {1 g
  • 输入\\\"Internal frame\\\"并单击\\\"+\\\"图标
    ) K' G& c  P. a1 J, y0 u, O/ I% d8 W
  • 输入\\\"Clothing\\\"并单击\\\"+\\\"图标
    3 ]. T  K  s  a# U
  • 当\\\"Clothing\\\" 被选中时,点击蓝色的缩进图标(原文不是这个意思,但感觉不对)" z* b3 x( B' j% C6 A0 u3 Z
  • 输入\\\"Jackets\\\" 并单击\\\"+\\\"图标0 o: Q% T( F+ G8 Y) @
  • 当\\\"Jackets\\\" 被选中时,点击蓝色的缩进图标2 e2 p" K, D$ G- _( v
  • 输入\\\"ants\\\" 并单击\\\"+\\\"图标
    3 L. v" C& g$ i5 \# ^
  • 单击\\\"Next\\\"按钮
    7 ~* k' V! e# r; z4 L% m. i# s5 {
  • 使用标准的HTML外观设置,但是把文字尺寸改为10pt(使用弹出窗口编辑器你既可以是HTML也可以是图象来创建你的按钮)
    7 T' C. L1 H/ `4 c* V5 [3 f9 t1 O* b

    $ S1 o5 d  s, ^
  • 单击Finish按钮  用commands执行图象翻转的批处理命令......打开Demo_09.png文件或者继续使用演示文件  用commands执行图象翻转的批处理命令
    & m: B3 f5 T, f3 w% V
  • 打开History 面板
    $ \& A% x# Q, M  s- E8 f( i* ?! q
  • 在文件中,按住shift选择这三个矢量的图标和他们的\\\"more\\\"按钮一起(在主要的白色区域)  C; {' j$ p9 N2 x% N- v
  • 在Frame面板,选择\\\"Copy to Frames\\\"并选择\\\"Next Frame\\\"操作
    ( B# Z! f4 g0 W. Y1 f0 q6 [3 T" u8 Z8 F* p9 J' f& V1 \  L% j

    1 {& Q( d. r" p7 c2 A% G
  • 让我们自动地把这三个按扭变成图象翻转按扭7 }2 }3 |: m3 W6 _9 M7 M1 H5 g
  • 在白色的主区域选择第一个按钮(在\\\"Fly Fising in the Rocky Mountains\\\"上面)0 H+ X% I- r/ |3 @: y1 d9 d
  • 复制它
    ! n1 I9 b4 ]: x
  • 在Frame面板中,在第二帧上单击
    ( G$ }# \& T; E, U5 X. }
  • 粘贴它
    5 Z' @; b! h8 K8 t5 ?6 @+ T; g) q4 L
  • 选择菜单Modify/Send to Back
    9 n) k, s1 l! ~3 G6 C% w
  • 在FILL面板,选择填充的类型为Solid,选择颜色为桔黄色#FF99331 S* {4 H* u6 ~
  • 当按钮仍旧被选择时,选择菜单Insert/Slice
    2 z. ^/ c- g0 T! t
  • 在切片上,在图标的中心单击来访问弹出菜单,选择\\\"Add Simple Rollover Behavior\\\"
    & e, c1 ~8 Q8 v2 w5 ], ~
  • 在History面板,按住Shift选择这八个步骤,从\\\"Copy\\\" 到\\\"Edit Behavior\\\") k1 R% u. `9 P0 w( z  |; D6 d# K
  • 单击磁盘图标把这些步骤保存成一个Command.
    7 Q: G5 n, L) H2 j: }
  • 命名这个Command为\\\"Make rollover button\\\"
    5 ~0 I8 x; R3 b0 C- _3 c
  • 现在,单击第一帧下面,选择中间的按钮在\\\"Level 5 Rapids\\\"7 c; d+ H$ S) l) o& R5 h! K4 y0 ]
  • 现在,你可以任选其一, }; Z! [; K0 X/ v) F/ [9 p
  • 从Command菜单中选择\\\"Make rollover button\\\"命令- P" t7 E  Z8 R* r% R4 R
    + ]. q# T6 q! m" p: s/ v/ z
    1 ^7 a  t3 ]& L) j5 o) Y9 s1 F
  • 或者8 Y+ G" ^: D6 C, o
  • 在历史面板,点击\\\"command script\\\",并点击Replay按钮( e5 l) v3 c% d* F. ]( h
  • 点击第一帧,并选择最后一个按钮
    , |; a; V3 ?, M* p$ }$ H2 B
  • 然后,在History面板选择\\\"Make rollover button\\\"或者在历史面板重新执行\\\"command script\\\"
  • 本版积分规则

    精彩图文

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