微软公司的风格似乎并不是墨守成规的,但是不知道为什么Windows界面总是没有什么变化。从Windows 3.x到Windows 9x,再到现在的Windows 2000和Windows XP看来看去总是那个样子,想自己改变一下也很麻烦……没有办法,既然我们拥有Flash这个好用的工具,为什么不充分利用呢?所以我们用Flash模拟一个来过过瘾。不过,怎么好像还是换汤不换药呢?当然了,我只是演示一下,这是一个Demo版的,其他的事情如功能的实现、界面的风格和作用就要靠你们大家Do It Yourself了。
; q6 k& T# k0 t1 q8 ]9 H8 {
7 X# ~& e, E( F$ D- z/ l$ d* V+ L+ C0 j1 T
& w7 Q! m! G, W# i8 P
9 r& w, p8 B$ d+ |
3 B3 O# J5 }% g 不过我们今天的这个Flash作品既然是个简单的演示版本,那咱们就一切从简吧,还是那句话,当我们在制作Flash的时候,还是先理清楚设计思路的好,养成良好的习惯嘛!
6 O% {6 i- N7 Z( Y; Y2 d
# A! k4 L- e, J. d) M: b/ u( _& f, X
) Q" {5 A3 Z) a0 [ |, |, Y$ } p/ \8 T8 y" m4 l& \4 G+ o
c/ i5 g3 X! |# X2 `0 ~) m5 P
2 ]3 i- }1 r8 i7 t3 a8 V0 k
" M2 z5 Z" q. ]: t u* C
' D1 \ t) r/ P) e, Y图1
2 ~. i; W' e# n* i; r* l+ l4 T7 `
; u7 c8 Y$ _* Q# _
5 U# c3 W8 V8 G
6 f0 F+ ~1 m" v! |" I, Y! }3 c7 c, p
' u1 V) U! A. [3 U+ Z( Q% I
7 R% g; y" D! O2 H# L4 L
制作思路:有一个工具栏在界面的下端;工具栏的左端是“开始”按钮,点击后有菜单弹出;而组成这个菜单的应该又是一个一个的按钮,当鼠标移到其上面时,又向右弹出相应的菜单。相信大家对Windows界面已经不会很陌生了,那么就开始吧。
( ^$ e, i& Y9 u R' w; E6 S7 f/ ^
- a& {7 k- p4 _, I8 n4 f0 O
, n8 ?1 b4 V; R) Y0 ]
' S& E5 X& q7 Z6 O
8 p4 _2 h8 k/ J9 Y1 j1 Y; ^& i1 K v7 n* \, m' d9 c) s, T
工具栏及开始按钮
# T' j0 x l+ p1 A
- d; {+ u4 Z! v" S" ]$ v0 W' K( O
2 @( p r; u' n# v- U: v+ M
/ j8 e2 T3 _- Z
. D' @1 |, m+ }( o( k$ U% b" R5 k2 B' g- H0 q" N- Y
1、用矩形工具在场景上画一个不带边框的长条,长度最好和场景的宽度一致,将其移至场景下方;取这个层的名字为“工具栏”;
* _4 W( t. L: t! I- D2 n
* Q$ e+ L! C% g* [4 _% \/ p
6 o2 f; C: G/ r7 j- s7 I( o' s" b; `. E/ {
7 o2 O: h% T: ~( {4 y
; | W; w# i" I. _3 k9 G3 ~ 2、新建一层,名字为“开始按钮”,用矩形工具和文本工具做出带有“start”字样的小矩形,位置在工具栏的左端(如图1),然后将其转为Button,名字为“startm”。
& Q8 J& e" N; f) Y1 |
6 U& c- K: P! ?4 f4 T" _
( M+ c8 s; ^9 m. [) m) N J: ]! y# J1 t) b7 k
* N0 i! R% L8 H. E
4 C/ }( y( N) t# {. W 向上弹出的菜单
& R4 r, P+ R0 l2 w. I* @, @4 K
# y# Q: Q* g1 y* `, |
1 J9 r" t/ S* m* E3 ~
2 g3 N1 e$ N2 m0 [0 c% T" O* y
6 e) [* m" ?- l# f8 g
2 Y0 h* f' v }/ U 1、新建一层,名字为“弹出菜单”,所有层都在第二帧加上关键帧。回到“弹出菜单”图层,对第二帧进行操作;
! g$ L8 C' ~ L E
) }" i& i: j8 `# U
7 }" p/ @3 D1 B& r+ B/ Z3 c5 r2 G& m, P" F# ?
1 v# s& `8 h1 h. C! O( u6 `5 F) u6 B
, g. P2 _4 p3 z9 t0 s7 ^4 G' C% W
2、画一个大小合适的矩形,然后使用“linear Gradint”填色在矩形的顶端制作一个细长的矩形,在其上写“My Windows”的字样(如图2)。将这个图层全部选中,逆时针旋转90°,放到“Start”按钮的上端。将其转为Movie Clip,名字为“Pop-up”;
1 s+ o% O+ {# Y& ]- \/ ^
8 }7 J1 O$ r, z4 ^2 L+ z: U
. j8 L- X0 }0 C ?$ o8 J3 W
1 K- c% C& c0 u1 h: ~$ r7 d* B5 P `3 k( d) H$ \
( Z ] o# k7 H3 k0 B
3 b/ Y/ I) n1 f0 b
. }0 p% t3 K! v U
' n, D/ N$ g) j图2
) t/ i) X" e, V4 p g& a D; u7 L/ e7 ]0 s, v
* c% [/ ? k. h G! N
F& A) y- |; [9 G) P( }3 F/ u5 \! | H" |; b* q/ n
9 p# g$ U; I t3 P
3、对“Pop-up”进行操作,我们将原来第一层的名字改为“菜单背景”,新建两层,分别为“菜单文字”和“菜单按钮”。用文字工具在“菜单文字”层中写上一些选项文字;然后用矩形工具做一个空白按钮,名字为“mbt”,Over帧填上较深的颜色(相对于弹出菜单的背景颜色)。在“菜单按钮”一层中拖出相应个数的“mbt”,将它们排列整齐(如图3)。
, E) v" { W3 A0 z2 o# j
# F R6 _8 [: H. Q) W& P8 m( S% |
# b6 }+ t8 t* C* k
( _& u5 z9 c" Q% ]! T: b
) T3 x. @: T: G- n2 {( C8 P+ F9 M
F R7 b$ q" `5 B
$ i; o* F2 r0 z
$ t9 h3 q! L1 O' P2 g! |图3
( _: a! ^3 O' m3 [ m
+ r( B0 z! |* b. u4 S
* G/ F. K3 W" I! u: `
, h$ @& N! l* M0 S4 v
! `2 M1 \% c7 \% {/ O; ]7 [' { D4 l/ B; V! |
向右弹出菜单
- [, K+ e" X/ ~: s
% D; g- R7 E6 N6 L k) y. X6 m+ L* R& U
& y" l8 z9 H0 I5 r: T$ A) Z' g4 d
# s1 Z; ]% N, m7 r
, \" O* V4 ^ _2 [$ Z% K 和第二步类似,相应的在“Pop-up”这个MC中再新建一层,名字为“程序菜单”,所有层都在第二帧加上关键帧,对“程序菜单”的第二帧进行操作。画一个合适大小的矩形,将其转为MC,名字为“Progam”参照第二步的3,做好向右弹出菜单(如图4)。
2 W/ C/ W1 r7 E( k
& d0 H/ ~- f7 ]3 D8 b" u, ^3 H
2 s5 z: H" H2 ?$ N# r; V. L# L6 I3 t/ r: X! V4 ?* x' K* x
# y! \$ X) X+ L/ n4 `5 g7 y
9 \* N" ?4 r% u$ @# Y3 n6 b
如果还有子菜单,以此类推。
& {7 C+ W/ U" _2 D' k% ?* \3 T3 i7 t
9 H* \1 w# d1 u! Q3 D7 J$ b7 Y' x- J% S q; `
4 A' |# I5 {; J, K- |
6 F0 m5 c( Q. [% f$ t1 B3 n! I# p/ e5 o
0 U) y4 V3 `8 V
# ~1 r, A# a' h a
# z( v+ ?: X8 V# f+ `. Z
图4
4 X1 f2 m% V3 i
$ q( Q+ O3 z S) g. f
& F0 j/ ^. ~; W( c, B4 n& E; \1 k: ]7 P' M* W& t f# L) B
9 a4 ?' g( a! }6 R% Q
* L s7 k+ p0 Q2 y* y7 v4 Y) Z* u 相应的Action
. i6 S: v$ e2 x9 ~
1 t: w; B. [" l0 q( B% r
; A) G& r6 G4 ~7 h' I# d
/ `, A$ W5 y4 Q2 }+ l( U9 h, @
+ Y! _9 V" x) i2 _1 c7 b
8 A" L- }5 z* X. v; i* d
1、 回到场景,在其第一帧写Action:
* `6 n* L7 s- ]( D
|5 I) u) A* s
6 V! d( k n) c& l6 L0 j4 c5 y+ f: M! o) ^! M- J4 J+ C
( a, h* g/ `% `+ Q: [
* |. \% P8 F" | Stop();
8 g2 g6 X" Z, G4 G% I4 M; f5 @7 f
4 i; G3 X# n5 N2 ]# _' K9 _8 J2 Q' \
7 w& M3 N$ L" _3 ^
* _# @- }6 X& U! h8 w7 c
' ~& n3 V7 m! ?8 v/ k) Y
3 U9 O+ [* H( { 2、Start按钮的Action:
6 f2 [( R5 w, l6 g2 \' B& a
1 @) C" c; @" d+ F) P C7 z, y/ I. b8 \% Z/ i! T
, v& C$ i. u1 D8 r! V: {
4 j, c6 u8 l! C6 a& z8 Q! F: W# ~7 v3 N V. W( K' k
//鼠标点击,弹出开始菜单
5 j; j) ^0 }+ V# X
6 X. A" A/ J2 n/ M1 ` n
- {0 g+ K" i! x: m4 H/ A
& k/ U5 H+ ~* G9 A* Q% y1 S/ |
2 j3 E; S' A4 K r* D$ [+ g# _
# O0 P+ Q. f' J6 g! D on (release) {
4 k- W, X8 e5 a4 g5 k# z$ R
% I z% i* m: k' D0 X1 F+ F. }5 \4 _& j" }) v2 d$ v8 u
0 N( u" K% V3 R& I" ~5 K: l0 g
- c- k$ d& k5 ` ^' A* [
" t( m9 P- T& b
gotoAndStop (2);
( M% m+ k" |0 x7 U2 m) G I5 T. y$ ?6 q; o' o$ M) n8 B# F
5 _* h& u1 s" o% X
; L) @$ s3 @! U5 R' _
2 k) P$ `6 o, L' L0 q) P& k% w' J9 U2 `) x) V! k2 k
}
% f+ R8 Q! t8 @; D; O( ~# o1 ?0 Z9 X
8 x9 y; S, G+ [7 A$ _ a; f
' T1 i- ~( h$ n5 Y+ X- o( n$ a/ Z' ~% S' \/ @5 d2 [8 o- D0 M+ D% l a
" d% v/ x6 I( L; D8 A% j8 Q
3、对MC:pop-up进行操作,其第一帧的Action:
/ `# _! n& h% ?7 {' U7 B J7 w! g3 \
: u8 ?0 e$ x: F9 O3 t1 a# |% O( ]* a+ c) j/ u. ` A
% Z% r' ?1 ]* n
: |+ n2 W L9 Q# t
stop();
% n: g$ q. r' k: m7 A8 t
( S8 e: Y8 {3 b7 X# b
- T1 t* A4 e3 p+ n( |0 [- K; k% P u; D: _9 Q
$ _3 x; u: i4 f+ g$ p
5 n6 c9 E, v' Q2 u4 i 4、位置在Programs上的按钮的Action:
5 Y- { m8 A$ Z! [) [0 V% w" _. O( f8 v( J8 ^9 a6 [* ?
: j$ `+ \* i, X
- r) n) G9 b. g# S* O B3 B9 M `. I8 T7 x# y F- i
& _3 P0 f* N: d- z T5 V
//鼠标在其上面,弹出对应菜单
8 T1 x4 N4 j4 R3 c" F8 b6 ~$ J) K
1 A2 M. c6 d+ _, C/ h" q0 g+ O6 P6 @8 U ~1 B5 p
) a3 E. R# ]8 u& e0 U; G6 h
& H! z- M3 a$ [; _$ A. Y0 H
7 d8 H5 e! e7 a- V4 T' Q( ` on (rollOver) {
) r% s! b2 O" m7 T. B5 y- G: U9 L j/ P' [8 {) \# m
, L( k! K/ b8 E& R
7 U; i {% b7 [
( q* [, V' _: g* q8 s* W% r0 I# K9 e. H' O0 b5 b+ x
gotoAndStop (2);
- Y$ B1 K; G2 D3 v6 D" q7 P5 P
/ L5 t1 G* ~; s! Z2 L2 p/ d, |
6 b$ \% C* Q5 J
8 P( S2 N" d- M+ N# z( r/ t2 R+ z& k$ R. s
/ j) Y" Z" H8 K- h8 d$ T
}
+ b; h! o5 X* _# d2 ~# E2 C3 w4 _7 `8 X
& B7 I0 B3 F) {7 D* \. D8 Y% }% z4 j: C4 G/ c* S* |9 X
" s1 [+ d6 E4 W" O
( w+ B% z0 F: U9 w7 N" M' d; ^- H; r7 O2 Z# ?' i4 H+ M
大家可以看到,实际上这个例子的Action非常简单,只是用到了“跳转”这样的指令,实际上应用Action不需要很复杂就可以达到理想的效果;当然,这个例子只是写出了一个菜单弹出的效果,但是以此类推不难做出所有的菜单弹出,这样的例子在网站导航经常会用到。实际应用中只需要在按钮上加入以下Action指令就可以了:
/ Y2 r- F$ Q9 O8 |, H2 H
& A- N! z! ?: Q* i4 Q, Y- D' O! Z, I4 r- G- Z( J: y
0 s5 B" H, w. f% `+ X: o5 E, x/ J( ^- X$ N9 f) L* {: I i: T
4 f* ~( O% i$ |4 x+ N# i //当鼠标点击,获得指定URL并让主场景回到初始状态
; ~; o: V1 a* K' H9 e" P* c
1 @& o4 B% H w3 Z7 ^. W
3 L& a9 U5 I8 U# b+ E- `
- Z! e- @4 D2 _: k1 F I
" e1 w- {' Y6 p& m7 n+ N+ ]' l, }* u0 G6 l( w
on (release) {
7 z k& T- o" \- q7 U
: G$ Y [0 m4 a- M0 Q) ~4 e( q' n4 C; P$ W8 N8 }) _% I) B
5 k, F/ e r! t L
* `1 r6 ?- v' x$ a- ~
+ S' X1 K4 N3 K0 z% e0 Q' D# p+ }' G1 Q getURL ("your URL");
! S' i$ l4 S) V+ \
, G& c) {: y$ ~" A$ G8 _2 q
# w* |& e4 w0 n6 f2 h# C% ~
9 v# I* s& K' U* R: r5 |, T9 X3 C
0 l- X Y# H J1 W% I$ e' V/ _0 b. b3 x2 Y# l7 r
_root.gotoAndStop(1);
" D' Y R! x# U; W; `, \- r Z, H0 R) o1 D( f
/ G0 Q$ `/ ?) T0 \
( r5 `- W" E7 z& @) e5 V- q5 E0 }8 {8 U/ o6 t# r
, a8 ?! W( c, B8 [ F5 G+ Q5 S }
. B+ }7 t. f; `7 e. P* G+ y) Z; p' i( E% h2 t( {& _
- g+ u; x" S' k; v* X
) {4 @( }4 i* W: n# l/ Q- [9 S% o
2 \" o' K1 R) L) q5 T9 m 当然,我们作的这个简单的Flash也有一定的不足,比如在菜单的外面点击并不会使菜单消失。要实现这样的效果也并不是不可以,不过今天我的任务就是使大家能够简单地了解Flash MX的制作弹出窗口的简单方法,所以呢,象这些问题还是留给大家自己去想吧!