|
打开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\\\" |
|