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