Flash MX实战精选:音乐播放器

图由心生

版主

Rank: 7 Rank: 7 Rank: 7

1^# 大中小发表于 2007-6-23 16:10 只看该作者

Flash MX实战精选:音乐播放器

音乐播放器
1 D5 ]: N; {. @" x9 d
1 |1 S$ P4 ]+ M5 f* n
( F$ o2 Z, E; y1 q' W  b

　　实例说明
8 @6 A( t# }8 Q; k* L
/ A2 S! E+ Y& c$ t1 Z

, t8 F) D; h6 R: V' z( R

　　制作在同一电影中控制多个背景音效的播放器。

- j. `" L& R& u8 S
$ F5 ~$ |( l0 V$ e5 P. }* @! Y

　　有关知识
$ |. z& P, ]2 r. M0 [: `' }7 P; f

% Y, V7 b# U7 {( T

　　导入点阵图， tell atrget和stop all sounds命令的应用，控制音效的循环播放。
' o- i8 v$ N! D7 v

2 W' }" v1 I. f7 J, J3 G
3 O, q* D2 y" h( T, |) d) C
" m2 l3 N/ ~8 G  H, m" v- d. ?7 e/ N
　　制作过程' M- P" ~; E1 I- p

4 V( a  `" g2 _" S) y. c* S7 Q
& z& Z3 P+ P2 M$ o

　　步骤1：打开Flash，新建电影文件，设置尺寸：235px*100px，背景颜色为黑色(#000000)。截取winamp的面板图，用图像工具处理后导入Flash中，并将其转换为图像符号bg，在场景中新建bg层，帧长度为4，将图像符号bg放置在bg层中作为背景，使用缩放工具，将图像bg大小调整到和舞台大小相同。如图1。

8 L7 _7 A* u/ e6 c' N& J1 V
( }2 _% q; ^0 V8 H# [' s1 z
7 z& O2 a0 I  H; `- s0 a; Y

  M) G! k5 }" b4 F6 A

+ q6 R+ G8 g; v+ q3 v( R
8 P6 P% C: Q6 S1 _. F; ]/ {- U, A* t( m
图1 截取winamp面板! O  d  v1 C, F; m# f% c
  ^' N3 M  F; _

- E5 `2 @! Q2 }5 Y
0 S' j8 E, [: j

　　步骤2：新建电影片段music，制作面板的音效输出指示器，当音效打开时，指示器小灯闪烁；当音效关闭时，指示器小灯关闭。具体做法不再详述，大家可参考电影源程序。如图2所示。: H! S" V4 J2 ~% z$ K, z

; C! p9 o" o5 C! v6 E, J+ L( A
( m$ m& j) C3 H/ Z; Z6 O: S% i

+ Z4 u* ]/ G8 ?  N
　　步骤3：新建隐形按钮bu，在状态over处设置一个音效，在hit帧绘制一个大小和面板播放按钮相同的实心矩形，如图3所示。# f1 f# q6 u, _6 W
! g( x4 O- K, w/ V3 y4 ?! F  T

" I1 n" v8 g0 @) i* R9 c( s  `" M+ b

0 K* }3 Z( i: H
　　步骤4：新建电影片段mv-text，建立三个关键帧，Actions都设置为停止（stop），在三个帧处分别用文字工具写入1.track1.wav，2.track2.wav，3.track3.wav，调整文字大小和字体，分别表示三个背景音效的名称。如图4所示。1 v% ~: G" |/ X" ^3 Z2 y- ]
; M& }3 {- n8 u# o# `) t
5 r  `6 k7 ^) A" L, @% F+ x, W1 w
" f/ W3 B3 S9 w- P& I9 e

  L; d5 T; i, W, |

图2 音效指示器
* B- ^+ a4 W( E N
4 b6 ]4 {+ ~& H) E+ R* c* w. ?- E
; `% a( r) E& }7 v6 U/ I X

* y( |6 y. @" v# f0 g4 U2 s$ p
* \8 Y- l4 x# ]

4 Z6 ~6 u; s& E f' G" V4 _
! B7 h, k7 l, n( C2 }
图3 有音效的隐形按钮% f4 n4 T/ y- G6 a8 _: a. s# q

2 A8 ?' q1 S# f& T) h' G3 f( I( G

图4 电影片段mv-text- o9 A, d# n& s* Z

; H+ e7 G- ] g* o; `& @
1 C& P2 W8 G1 v8 ?
　　步骤5：截取winamp面板播放进度指示器/ \# d* S; t8 w- L3 l) F2 d; W6 O6 t

+ c' e% t+ _0 ^5 e) ~
并导入Flash中。新建电影片段mv-amp，第1帧为空白关键帧，Actions设置为停止(stop)，第2帧设置为关键帧，将图像

6 G$ {6 @2 S3 r9 t6 b# u
放置在工作区内，按F6在第50帧处建立关键帧，将- {" ?- w: y9 P+ y/ u

0 K/ l! T# z- o' H5 K1 b
水平移动大约190px，如图5所示。8 g6 m, o8 V' x% [( _$ X6 p

, c7 Y+ A1 g( K: h1 P) K
& \/ A' z% k7 E6 @3 M( i# q3 o
8 |8 x2 H: W' O, { ?; s! d/ `

图5 移动的滑标

$ U+ `9 S# B% h$ {5 R$ \

5 M2 G! n7 A; t  V6 L
1 w; p* j7 C8 t; `! p2 `
　　第50帧的Actions设置为：
( ?/ x$ y6 v  b3 `) g/ \
- D; b: m8 S8 s; e- y" Z

: i4 ~2 ^" D- a! x. A8 G
9 M7 l7 ^1 |9 w9 @  w
gotoAndPlay (2);
2 G( u0 e9 o0 B7 N

//跳至并播放帧(2)
3 X- W3 W+ y/ [: v: H

5 k* T6 B  C% J  n! ]4 O) L+ z
6 @, v5 V0 j  `; _! p5 U' d
1 g" B9 ?* |$ @
　　在Frame面板将第2帧与第50帧之间设置为移动渐变(Motion)，如图6所示。" b2 x  H' \8 G9 n- W/ e6 k

+ ~( k4 T" V( q, h
5 ^+ O! b0 ?' Z& E. A4 h, Q
& m6 a/ ^- E0 A4 I

. p' g6 h1 y+ |& R+ |" ?
# r& F$ b3 t, L+ h' ?
图6 设置移动渐变
5 Z+ R! n! i' q* f6 V+ W  y% c' _

4 B0 t; t% Y6 T; V# u, `! g# J

' ]! ^9 g! p' f/ i4 H
　　步骤6：导入3段音效作为背景音效，分别命名为1，2，3。新建电影片段sound1，设置帧长度大约100帧。在第1帧处的Actions设置为stop (停止)，在第5帧处通过Sound面板设置音效，如图7所示。6 c  m' }! w/ u7 J2 b# B; \

/ {( F4 w6 y) b

  ^) T7 v# d& E/ q8 [3 E

5 m5 A& O# n+ [4 ], G7 n
0 C. r' W1 x: ~, l
图7 设置音效$ s" L1 i% d( r$ R

% r5 X$ d; U4 Q$ k, T# Q& [7 ]
, t' N# D, f$ `7 h6 C/ U2 c
, m7 S) y1 g6 O' t

　　同样，新建电影片段sound2， sound3设置方法同sound1，分别控制背景音效2， 3的播放。: s# I) B; s% c
% w9 E; V7 K3 n, E: s$ b% {
3 Q5 L; P/ A  R
) X& j  U9 Q5 R2 W/ _( V  K9 W

; Q! S9 j9 M- o
　　步骤7：新建只有两个帧的电影片段mv-play1，第1帧设置为空白帧，Actions设置为stop，第2帧设置为关键帧，将按钮bu放置在工作区内，对齐中心点，Actions设置为stop，为了看清效果，暂时将背景设置为白色，如图8所示。
# {; O; d, V7 T! {

& V: c& z1 v  M

　　同样，新建电影片段mv-play2和mv-play3，设置方法同mv-play1。+ K1 w2 C: G& d( ~

7 j, h+ N5 Y1 U2 p! Q; Y3 c

) p) q  j0 b0 ?# ]
　　步骤8：新建只有两个帧的电影片段mv-stop1，第1帧的Actions设置为stop，将按钮bu放置在工作区和中心点对齐；第2帧设置为空白帧，Actions设置为stop，如图9所示。- y- V3 i, S/ e0 q9 q
2 F  ?. p6 Y  z' w0 O
$ k7 J- @% k" P% X1 ]3 `6 g# Q

* d( ?$ N0 t4 T/ J/ l. v

　　同样，新建电影片段mv-stop2和mv-stop3，设置方法同上。

2 i6 o3 \3 c9 b& d4 X& l

　　步骤9：回到场景1中，新建层movie，将电影片段music放置在层中，和bg的音效输出指示器位置对齐，在属性面板中将其命名为music，用它来显示背景音效的开关状态。如图10所示。0 a* s% H3 L; Q' J) L
" x: T6 p+ z) g- ^  c  t0 y$ a

# w6 E. x; b2 ~( b2 f
9 l  @  }$ }0 [) D. L

' {* \: a; ^6 b0 s% y& X4 W
图8 电影片段mv-play1

6 B1 D: }8 Q. F* c9 g! ]: }
7 m2 ]2 g2 Y3 H; a7 p, w1 L
# J# [6 e6 _7 F7 G0 F1 ^" \

, f2 r' l/ a6 H

$ C5 k N* N) e8 R0 G
图9 电影片段mv-stop1

% v" v9 w: T: G: {# D; i; _

5 M2 u. W* D' T4 J& O' a' Q

图10 命名电影片段music% O, D8 [- I; t' j

# z( |1 M" i% Y7 Y

　　步骤10：新建层sound，将电影片段sound1，sound2，sound3放置在层中，并将其分别命名为sound1，sound2和sound3。/ ^& Z# a) B# {9 w
0 s% I+ Q0 {  k
! _  u9 s. L4 ?0 `3 N" @* @, g

/ k- P* ]3 A; v. q  X4 r
　　步骤11：新建层amp，将电影片段mv-amp放置在层中，在Instance面板中将其命名为amp，并和bg的原播放进度指示器位置对齐。/ I6 i+ d$ g* k1 r" u

2 d5 ?1 E3 q! D& R- C; m
" N) I  V/ R7 }) f

　　步骤12：新建层text，将电影片段mv-text放置在层中，在Instance面板中命名为text，并和bg的原曲目指示框对齐，用来指示目前正在播放/停止的曲目。如图11所示。

) n+ i1 i4 E# m) P; P
$ D+ u8 z0 G5 N* r. \

0 @7 z4 Y: m- a. T6 y/ X' N! ^
图11 显示目前正在播放/停止的曲目
3 v* g0 [+ Q! P8 {: G& X( a5 p

/ f5 r* F" ]) p1 n) V+ S
+ S# ?6 h2 s$ O  A  w5 |
　　步骤13：新建层Actions，第2，3，4帧分别设置为空白关键帧，Actions分别为：* L5 i8 `$ V  o  N# V
( _# G! M$ i8 w& g
9 r, p2 }2 ^) x0 ^' ~
8 y5 s3 K7 J- W
- ^/ O3 V/ k: s6 V" a8 Z

第2帧：

1 _! }* d. \' l- d' W! n

stop (); stopAllSounds (); tellTarget ("/sound1") { gotoAndPlay (5); } tellTarget ("/music") { gotoAndPlay ("track1"); } tellTarget ("/amp") { gotoAndPlay (2); } 停止停止所有声音告知目标(“/sound1”) 跳至并播放帧(5) 告知目标(“/music”) 跳至并播放标签(“track1”) 告知目标(“/amp”) 跳至并播放帧(2)

) W. Y2 A; r% g: l

2 I4 M  t2 K  s* M$ Z1 `
第3帧：/ k' O+ R" F3 O0 i6 E9 c7 r- Z

7 p  d$ ?* J1 S1 j

  z% a2 x4 ^: ]$ l6 e( e' k
stop (); stopAllSounds (); tellTarget ("/music") { gotoAndPlay ("track2"); } tellTarget ("/sound2") { gotoAndPlay (5); } tellTarget ("/amp") { gotoAndPlay (2); } 停止停止所有声音告知目标(“/music”) 跳至并播放标签(“track2”) 告知目标(“/sound2”) 跳至并播放帧(5) 告知目标(“/amp”) 跳至并播放帧(2)  $ s8 X" t/ J7 M; f0 U

2 l* G" @: @* J. U
9 `  y! L5 c0 E) \% }7 s
第4帧：/ g+ Q, S0 t1 N. Z

stop (); stopAllSounds (); tellTarget ("/music") { gotoAndPlay ("track3"); } tellTarget ("/sound3") { gotoAndPlay (5); } tellTarget ("/amp") { gotoAndPlay (2); } 停止停止所有声音告知目标(“/music”) 跳至并播放标签(“track3”) 告知目标(“/sound3”) 跳至并播放帧(5) 告知目标(“/amp”) 跳至并播放帧(2)  4 d0 `1 Y: P7 Y$ y  B
0 {6 Q1 ~- E5 a0 B0 C
! {. \7 G' Q) i
, b2 c! @; }  a, p' }  J

　　步骤14：新建play层，在第2帧处建立关键帧，将电影片段mv-play1放置在层中，并和背景中的播放键对齐，在Instance面板中将其命名为play1。如图12所示。
9 ], H4 A# O$ E; k

7 n' a3 o( Z9 D* d; f" I2 K

. Z4 J" @7 Z" ?( [! v

图12 将电影片段play1放入场景并命名

% D6 r1 m# L6 v

3 R; l5 ^8 ^/ c# k% |. ?* m
　　同样，在第3，4帧处建立关键帧，分别将电影片段mv-play2和mv-play3放置在层中并命名为play2和play3。
, w m% W1 G, Z% \ W0 {1 B

; M8 U3 O+ L; b& F. f `0 t

　　步骤15：新建stop层，在第2帧处建立关键帧，将电影片段mv-stop1放置在层中，并和bg的停止键对齐，在Instance面板中将其命名为stop1。如图13所示。: D2 d. D2 k9 i0 f/ _: F

6 I; x3 O/ @: d, n+ F$ F& h
1 ]. q0 {2 `! e- K

( L) x# t( Z' s4 }( V

图13 将电影片段stop1放入场景并命名

3 M2 P+ J  z3 R7 P# o
5 ?5 _, H, u* ]* t

　　同样，在第3，4帧处建立关键帧，分别将电影片段mv-stop2和mv-stop3放置在层中并命名为stop2和stop3。. P- m! v  V: I) x$ _5 q, T* i, n4 _
: w5 O+ E$ z! ?5 ~
! }" M% R" y9 o( d/ \0 @2 x+ m

" ^/ H4 ?5 ^; V9 r  W% N) g

　　步骤16：新建pre nextFrame (); tellTarget ("/text") { gotoAndStop (2); } } 当鼠标放开跳至下一帧告知目标(“/text”) 跳至并停止帧(2)

/ s8 y* n, K% ~  S

8 O5 r( D. p3 C; [5 n" T
图14 设置按钮bu的Actions0 B- z! {0 T( O3 Y# x5 v
1 o8 ]% D/ ?, B& Q( N4 }! X# a2 b) g
$ H6 ^% U, Q( V2 l
3 x$ D3 C4 c2 a8 v

9 d# h9 T5 D, ?1 |7 f( ^4 U1 S
　　在第3帧处建立关键帧，放置两个按钮bu，分别和背景上的后退键，前进键对齐，设置Action分别为：
1 Y+ f, A7 ~# W( b+ b

. j# n% U+ h* d  x6 k

( X# A5 }+ }- S
on (release) { prevFrame (); tellTarget ("/text") { gotoAndStop (1); } } 当鼠标放开跳至上一帧告知目标(“/text”) 跳至并停止帧(1)

on (release) { nextFrame (); tellTarget ("/text") { gotoAndStop (3); } } 当鼠标放开跳至下一帧告知目标(“/text”) 跳至并停止帧(3)  / c% {5 ?" q& A! \* S. T

- L& S$ h) P6 o* m

　　步骤17：设置电影片段mv-play1的Actions：$ T8 S4 e) x. V6 I. m7 b' z2 K

9 i  a# N4 F/ r+ s

, l7 m/ P. y( O
　　在第2关键帧处bu按钮的Actions设置如下：7 M9 T3 I: @& r* U: W
, S; c) M& [" P2 @! C! d

: T4 M+ w0 O& ~5 X7 f

on (release) { tellTarget ("../music") { gotoAndPlay ("track1"); } tellTarget ("../sound1") { gotoAndPlay (5); } tellTarget ("../stop1") { gotoAndStop (1); } tellTarget ("../amp") { gotoAndPlay (2); } gotoAndStop (1); } 当鼠标放开告知目标(“../music”) 跳至并播放标签(“track1”) 告知目标(“../sound1”) 跳至并播放帧(5) 告知目标(“../stop1”) 跳至并停止帧(1) 告知目标(“../amp”) 跳至并播放帧(2) 跳至并停止帧(1)

: U4 t* n8 {, j# @, m" X, V
5 O9 y6 L) I' A. @

　　同样，设置电影片段mv-play2第2帧处bu按钮的Actions如下：

  f! r& k* Z' O; p! D# \5 [

# [& ~- J. v* b

on (release) { tellTarget ("../music") { gotoAndPlay ("track2"); } tellTarget ("../sound2") { gotoAndPlay (5); } tellTarget ("../stop2") { gotoAndStop (1); } tellTarget ("../amp") { gotoAndPlay (2); } gotoAndStop (1); } 当鼠标放开告知目标(“../music”) 跳至并播放标签(“track2”) 告知目标(“../sound2”) 跳至并播放帧(5) 告知目标(“../stop2”) 跳至并停止帧(1) 告知目标(“../amp”) 跳至并播放帧(2) 跳至并停止帧(1)
' C( s  o- ~! X# ~
  O9 z/ z% y0 [& k2 S

　　设置电影片段mv-play3第2帧处bu按钮的Actions如下：
4 j3 ~! Y  S$ l% m

0 o" i: f; w4 e  ?5 \( k
on (release) { tellTarget ("../music") { gotoAndPlay ("track3"); } tellTarget ("../sound3") { gotoAndPlay (5); } tellTarget ("../stop3") { gotoAndStop (1); } tellTarget ("../amp") { gotoAndPlay (2); } gotoAndStop (1); } 当鼠标放开告知目标(“../music”) 跳至并播放标签(“track3”) 告知目标(“../sound2”) 跳至并播放帧(5) 告知目标(“../stop3”) 跳至并停止帧(1) 告知目标(“../amp”) 跳至并播放帧(2) 跳至并停止帧(1)

5 ~5 }: C; t% c! `$ a8 V

& O8 V4 `1 d! V3 t0 N! _

　　步骤18：设置电影片段mv-stop1第1帧处bu按钮的Actions：% P* R/ U7 ?/ G, I0 c; G7 U+ H6 m

) C' F9 ^8 H1 ^# ^5 c
1 Q6 N$ A. ?3 Q2 W: ~
4 R6 _* U% l3 ^- A* a" Y5 l

on (release) { stopAllSounds (); tellTarget ("../music") { gotoAndStop (1); } tellTarget ("../play1") { gotoAndStop (2); } tellTarget ("../amp") { gotoAndStop (1); } gotoAndStop (2); } 当鼠标放开停止所有声音告知目标(“../music”) 跳至并停止帧(1) 告知目标(“../play1”) 跳至并停止帧（2）告知目标(“../amp”) 跳至并停止帧（1）跳至并停止帧（2）

　　同样，设置电影片段mv-stop2第1帧处的按钮bu的Actions：9 g- z6 r( W0 |
: x) q3 A5 d' K5 `) e. G8 w

7 B# J5 p; I# x( {5 j* }9 |1 r

on (release) { stopAllSounds (); tellTarget ("../music") { gotoAndStop (1); } tellTarget ("../play2") { gotoAndStop (2); } tellTarget ("../amp") { gotoAndStop (1); } gotoAndStop (2); } 当鼠标放开停止所有声音告知目标(“../music”) 跳至并停止帧(1) 告知目标(“../play2”) 跳至并停止帧（2）告知目标(“../amp”) 跳至并停止帧（1）跳至并停止帧（2）
( R: d- l5 a8 x; Z1 ~
7 q- e' {" }: S( @! y
" {+ R! [6 V7 w& M0 U) z
& c9 k" r5 }$ G# K) B
# x* h1 ~* U5 O  r' f+ z. V
　　设置电影片段mv-stop3第1帧处bu按钮的Actions：

2 s4 C& m  @  J# R0 z- ~

on (release) { stopAllSounds (); tellTarget ("../music") { gotoAndStop (1); } tellTarget ("../play3") { gotoAndStop (2); } tellTarget ("../amp") { gotoAndStop (1); } gotoAndStop (2); } 当鼠标放开停止所有声音告知目标(“../music”) 跳至并停止帧(1) 告知目标(“../play3”) 跳至并停止帧（2）告知目标(“../amp”) 跳至并停止帧（1）跳至并停止帧（2）  5 I/ A5 p& J- x4 d3 x
3 Q+ T0 u9 ?# }

& T+ J2 `1 ~# d

　　步骤19：OK!做好了，现在回到场景1，按组合键Ctrl Enter，在生成的电影中测试播放器的效果。

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

TOP

‹‹ 上一主题 | 下一主题 ››