发新话题
打印

用Flash MX制作弹出Windows窗口

用Flash MX制作弹出Windows窗口


微软公司的风格似乎并不是墨守成规的,但是不知道为什么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图12 ~. 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的制作弹出窗口的简单方法,所以呢,象这些问题还是留给大家自己去想吧!



点击图标进入精品网摘收藏 欢迎大家加入网络收藏夹

TOP

发新话题