Flash制作mp3播放器,引进外部XML文件来播放歌曲

Flash/动画 1820 0 2013-11-21

Flash制作mp3播放器,引进外部XML文件来播放歌曲
[基本思路]
1、通过XML导入外部MP3,在FLASH解析XML文件,获取音乐的名称和路径;
8 H: A3 X! L5 [1 u6 |/ A" z2、通过按钮实现“播放”、“暂停”、“停止”、“上一首”、“下一首”等功能
0 V) P+ Y" g% |& `$ {& ^+ f  @+ G
3、拖动滑块进行音量的控制;. h! V% t; P1 X
4、显示已播放音乐的时间和已加载音乐的时间;实现音乐加载的进度条动画。. _, w) F. A! q& w  \' I
9 c3 r3 m/ n2 q# A/ W# r5 F
[步骤]
0 f7 q/ ]+ l& r1 ^; T
5 h/ o2 o7 y7 }0 @5 X
第一步:新建文件夹music。
# q0 `3 d: z1 ^* Q; x第二步:用记事本创建
xml文件,保存在文件夹music中。& s& h5 g& A  |  j- ?
  k2 |7 }7 P! _) S7 E9 B
①打开记事本,输入如下语句:
9 `) u( v* y3 I. }) \- Y<?xml version="1.0" encoding="UTF-8" ?>
7 ?& I  c) B& V$ Y
<songs> - y$ b/ _$ V4 c& f! p  e
<歌曲 name="遇见你是我的缘" path="http://dongzhiwu.sclsez.com/oblog/UploadFiles/2007-1/125489324.mp3"/> ; c/ F- o- J& y7 ]& ~  }2 L
<歌曲 name="黄玫瑰" path="http://img2.pcpop.com/UpLoad/2007/4/10/63311821739328125033.mp3"/> / J) _6 N8 f* J+ L% b/ W% x
<歌曲 name="我不愿错过" path="http://www.greenbeijing.org.cn/forum/upload/1186014862046.mp3"/>   `0 k, {$ Z  x- r1 [
<歌曲 name="丁香花" path="http://dyyz.jojy.net/website/jyzx/upload/Material/唐磊-丁香花_66.mp3"/>
4 T) b6 N! H" ~% l2 z) {& E, Z  D</songs>
1 o  f/ ?3 N8 m1 X( ]1 q
6 I. F0 h# H0 @( J% M1 H; s
②下面对以上语句进行解释:
5 \8 f) [0 i2 R, C* U1 }<!--这里写注释语句-->
( _- m9 X! ^0 O% B$ j% @<!--创建xml文件、版本、支持中文-->
* B4 S  {1 k* V. P# p, ?$ X$ ~<?xml version="1.0" encoding="UTF-8" ?>
4 s) W4 w. q1 S- E/ C
<!--父元素this.firstChild(在FLASH中要用到)-->
( L5 O( D# v$ P; G: }. q9 ^; y<songs>
7 q7 R* ~4 n0 K$ S1 k3 c<!--第一个子元素及其一些属性this.firstChild.ChildNodes[0].attributes.name和path-->
5 o5 g1 P7 P( A- a! {* X<!--ChildNodes表示子节点组成的节点数组-->
5 ^$ H" ?" h+ Y+ x
<!--ChildNodes[0]表示子节点组成的节点数组中的第一个元素-->
6 E& g  B' [5 ^<!--ChildNodes[1]表示子节点组成的节点数组中的第二个元素,依此类推-->
$ k9 K) E5 K; E) x
<!--attributes表示子节点的属性-->
+ |2 t% G7 [% K# x7 v5 O<歌曲 name="遇见你是我的缘" path="http://dongzhiwu.sclsez.com/oblog/UploadFiles/2007-1/125489324.mp3"/>
! U+ m8 j' ~( w
<歌曲 name="黄玫瑰" path="http://img2.pcpop.com/UpLoad/2007/4/10/63311821739328125033.mp3"/> 9 {4 e" M5 I8 q+ u; U7 B2 O5 v
<歌曲 name="我不愿错过" path="http://www.greenbeijing.org.cn/forum/upload/1186014862046.mp3"/>
8 P+ O1 P: f$ L0 v) {3 F<歌曲 name="丁香花" path="http://dyyz.jojy.net/website/jyzx/upload/Material/唐磊-丁香花_66.mp3"/>
5 ^6 \  k$ h) J& E  F</songs>
/ V+ g# l* S9 `+ e# w* Q8 H3 ~" M
<!--所有元素必须有结束标签;所有元素必须正确的嵌套(不允许交迭元素);所有属性值必须加引号--> # J8 h: S! n2 z* @5 J( {
<!--name=""引号内是歌曲名称,path=""引号内是歌曲路径-->% R" e& v; `* v0 q- C& C" w1 X- W

( R- K$ E/ }, k③保存,文件名为musiclist(注意在文件名后输入.xml,编码选择UTF-8)。具体设置如图1:
( Z0 ]8 I, _$ G' K/ u; s, W$ k
6 m! C. e: n9 `9 m4 {& o
, G8 a' C# V% r" K: [/ C
[效果]
+ k6 N7 ^) h2 t1 @, r
& ~1 h, m' U( [  i" ^4 ~% [" R0 h第三步:打开FLASH,新建文件,宽120高100;保存在文件夹music中。
  z4 m0 c& N& l' {, X) Z
第四步:创建图层,从上到下图层名称分别为“代码”、“信息框”、“版权”、“进度框”、“进度条”、“进度底”、“音量滑块”、“音量底”、“按钮”、“背景”。具体设置如图2:
- H: s- H' R1 l6 ~* u4 q
$ y2 C! z5 P- x( f$ t+ s: C2 g
第五步:在“背景”图层画一个矩形,宽120、高100,填充色为#CC9966(当然你也可以导入一张你喜爱的图片);在“音量底”图层上画一个矩形,宽110、高4,X坐标为5、Y坐标为64,填充色为黑色;在“进度底”图层上画一个矩形,宽110、高4,X坐标为5、Y坐标为57,填充色为黑色;在“进度框”图层上画一个矩形,宽110、高4,X坐标为5、Y坐标为57,填充色为黑色,再画一个矩形,宽108、高2,X坐标为6、Y坐标为58,填充色为绿色,然后选中绿色的矩形,将其删除,得到一个黑色的矩形框。最后效果如图3:
$ S! {/ V. s2 r0 G% b% b% U2 k
$ F, O' L# }) N$ e& S% T, @% W
第六步:创建影片剪辑元件,名称为“进度条”,画一个矩形,宽110、高4,X坐标为0、Y坐标为0,填充色为#FF9900;拖到主场景的“进度条”图层中,实例名为bar_mc,X坐标为5、Y坐标为57;创建影片剪辑,名称为“音量滑块”,画一个矩形,宽10、高4,X坐标为0、Y坐标为0,填充色为#00FF00;拖到主场景的“进度条”图层中,实例名为huakuai_mc,X坐标为80、Y坐标为64。最后效果如图4:0 F6 P+ Z4 M+ P& F) G

/ c/ ~3 ~. i4 z; S) X1 ~第七步:创建五个按钮元件,名称分别为“播放”、“暂停”、“停止”、“上一首”、“下一首”,拖到主场景中,实例名分别为“play_btn”、“pause_btn”、“stop_btn”、“prev_btn”、“next_btn”,把它们放在“音量底”下面适合的位置(注意播放与暂停按钮位置要重合)。最后效果如图5:4 J" N* t( b4 F

: _! H; G. V( I( R  x1 c3 h第八步:在“版权”图层注明你的版权文字或图案;在“信息框”图层上画一个矩形,宽110、高40,X坐标为5、Y坐标为4,填充色为黑色。最后效果如图6:
* G- Y1 k$ O- A4 I
# ^5 D1 X; \1 S/
第九步:在”代码“图层的帧上写如下代码:
4 n0 G0 t+ `* q& t3 ^5 \//设置舞台
3 i8 h' u5 ]+ C0 m& ~; [5 R
Stage.showMenu = false;   ^& Q9 k3 G! b9 t
Stage.scaleMode = "noScale";
* U4 _0 e, C6 P8 q* `. @# f//申明一些变量
: Z, n  w8 S1 `. ^$ N( Vvar p:Number = 0;
  I& j, j$ D( n, u  Ovar name_array:Array = new Array();
7 o# N# e: n" t. A7 [+ Y
var path_array:Array = new Array(); & v. B, W' v  `" M7 b, e  h+ U
var my_sound:Sound = new Sound();
% A( ^5 Q, l7 S( M5 Mvar my_
xml:XML = new XML(); ) ^; Y7 R0 [# i. {
//创建动态文本
' j, \' o$ S! Q/ Y' Ethis.createTextField("name_txt", 1, 0, 0, 0, 0);
5 C9 A! {. p2 F( _( f' Bname_txt.autoSize = "center";
  L  @/ N7 b$ V2 H2 ]: S
name_txt.textColor = 0xCC9966;
! ?4 X' z$ c; yname_txt.selectable = false;
: T+ }$ y+ b. ?) V+ E) o; H* L
name_txt._x = 60-name_txt._width/2;
4 p. t' h! [4 K! e2 q6 N$ mname_txt._y = 10;
/ ^& }# K# c* m) {: {3 x7 e2 n1 G
this.createTextField("time_txt", 2, 0, 0, 0, 0);
: D; o' y7 c6 Htime_txt.autoSize = "center";
9 U; A6 o5 x2 X& l6 i
time_txt.textColor = 0xCC9966; 3 `! x$ e( T/ Q2 o
time_txt.selectable = false; & m: a9 ]$ }# [& }
time_txt._x = 60-time_txt._width/2; : `+ N% C! T* J" r; D# k) `/ E0 n+ k) w
time_txt._y = 25; ! j. [( `! ^- W
//载入外部xml
7 T& m& ~' z& bmy_
xml.ignoreWhite = true; . m  g" L/ Q! b1 C/ z4 O3 _0 P9 T: ~. R
my_xml.load("http://qzgzs.51.net/mp3bofangqi/musiclist.xml"); " n, @. f( }: T0 \0 t
my_xml.onLoad = function(success:Boolean) { / |+ q4 k2 w: s2 _. |8 ^4 f
if (success) {
$ I* {* k5 V( S$ C- ~( d9 B& }' Q# Afor (var d:Number = 0; d<this.firstChild.childNodes.length; d++) {
1 S( W% c3 ~( z% w+ Q
//把节点中的属性添加到数组结尾中
! M8 `7 q8 b: N/ W1 Jname_array.push(this.firstChild.childNodes[d].attributes.name);
9 s4 y$ [. B4 y6 l  _9 ~7 `
path_array.push(this.firstChild.childNodes[d].attributes.path); 5 [2 j5 ^( R. T. X# I% e
. I* {2 I! H1 a; V* z2 p' s: T2 j& S
} 8 {0 {0 Y4 j2 j* k: c0 X
gofun();
6 v  v+ B2 w- }0 ^6 ~* [9 t} else {
0 `( r5 ?, `& l* I" o: Rtrace("载入失败");
; ~, }+ F3 c/ T! C9 A}
0 H  [! w/ [' L# A
}; 6 H1 j  f) P- D6 T
function gofun() {
9 f) b5 k3 C, z$ K//载入音乐
, O0 B1 B& I3 B$ J4 Z
my_sound.loadSound(path_array[p], true); . N$ I8 w+ z0 Z4 F/ ]7 K
my_sound.start(); 2 Y, f- {+ Z  M) J4 z7 o
//音乐结束时调用下一首
: I1 I% [8 w( }3 J, _" @my_sound.onSoundComplete = function() {
+ X7 B( z8 z% P% Ep++;
( J, k! x0 ~5 Z+ C( Y

2 P# G. ?$ x; P0 Oif (p == path_array.length) {
, {! q3 |& S7 \4 M! Qp = 0;
/ I' b4 m8 F3 r3 @- s1 u}
- f8 Z" O: P$ Z0 d' Amy_sound.start(0);
: ]' c# N# n# q
gofun(); ) ?# F7 m8 `9 T. a. {4 T* z5 W
};
* w1 C+ m& j) B, n, h" Z/ _//时间及进度显示
$ I, z4 w! }) k
onEnterFrame = function () {
: O+ c  P& w; S+ [  |/ R  lmy_sound.setVolume(huakuai_mc._x-5);
$ C9 i% i, d& ]6 _( ?3 E. Hbar_mc._xscale = my_sound.getBytesLoaded()/my_sound.getBytesTotal()*100;
: I- e4 f2 @) U$ K2 X! f
zongchangdu = int(my_sound.duration/1000); 5 N; e& f0 H& j) R6 D9 ^
zongchangdufen = int(zongchangdu/60);   g+ r2 u6 H- b) Q- R
if (zongchangdufen<10) { 2 A1 r) T! \& \; v
zongchangdufen = "0"+zongchangdufen;
8 j' B* W# G/ d7 r2 I/ q}
! A( h' Z% N3 O3 u" F: r2 M
zongchangdumiao = int(zongchangdu%60);
- a2 n6 R( J1 v+ x: ], R
( I6 Q4 s* \; x3 g( `" Pif (zongchangdumiao<10) {
6 V+ L( G% q  F  T' V0 F% U
zongchangdumiao = "0"+zongchangdumiao; 1 z% c$ q0 L% b1 l1 p$ a& q+ w  W
}
9 U7 O" @' ^7 e. O$ ~yibofangtime = int(my_sound.position/1000);
& Z+ S/ f1 }1 v. R- X4 Nyibofangfen = int(yibofangtime/60);
% O5 B/ [/ i- {( Q/ t
if (yibofangfen<10) { 4 W  N9 M! T/ M' N/ V
yibofangfen = "0"+yibofangfen; 3 S% D# P# d# Q/ x: C' I

8 c; j+ ~0 q8 T$ A! W8 z  l. s% N( R3 H
} 6 u$ M6 W5 y" l: g% s
yibofangmiao = yibofangtime%60; + P$ ^/ |' o2 }9 m% a9 H1 m
if (yibofangmiao<10) {
' f6 T, |- W2 D9 y5 B$ Qyibofangmiao = "0"+yibofangmiao;
% A; _" X' i& }5 T4 k
}
/ X# l( P6 P7 n) n4 O- B. Xname_txt.text = name_array[p];
4 G- r5 _# L' d& N9 y: {
time_txt.text = yibofangfen+":"+yibofangmiao+"—"+zongchangdufen+":"+zongchangdumiao; 1 ], S8 r* l- e3 d# c2 A: m2 |1 W
: a0 g0 G4 N8 R2 G/ A) u
};
( }$ H& a+ d3 W8 d3 ~}
: Q& i& e7 X! F! O- W//按钮可见性
- d( a8 Y; t  T7 yplay_btn._visible = 0;
: r3 Z. J0 l3 r5 M. \' ?, p, S
pause_btn._visible = 1; 9 N$ p( w1 P+ b, ~( ?
//下一首 ' h1 n  |+ d7 p  V' P% ]
next_btn.onRelease = function() { 9 B  K0 \0 y( n7 t2 Z# J$ `8 |
play_btn._visible = 0; - M% g/ C3 a3 T
pause_btn._visible = 1; 2 x  L0 E% C- k5 {- a: g
p++; & g6 E8 ~" p: v3 W+ B0 M
my_sound.start(0); 2 Q3 X) W% z6 d1 k# D* b
if (p == path_array.length) { + q1 B; i8 ^* k8 j  L9 r
p = 0; 5 ?. [4 P5 @( ^3 ^' J$ \( O8 h
}
# k: x+ i) v$ ~& o4 L* k+ C0 Xgofun();
$ ?; F3 S, F' ?" a};
6 r* X7 U/ v# l6 V+ `/ N//上一首
; R9 m' e9 u' Cprev_btn.onRelease = function() {
0 ]! F0 v, P4 e6 w' J( x: }; y
play_btn._visible = 0; / f1 {6 C: [5 O! j3 k# y

5 u1 V7 [. v( J# w3 \2 \9 v/ W; ?8 y
pause_btn._visible = 1;
! ^/ w2 V0 @8 O* Lmy_sound.start(0);
" a4 V& [7 T" x- ^: pif (p == 0) {
5 _/ W' [6 V/ H7 a; e
p = path_array.length; 7 q5 T2 i$ F* F1 \, t, ?6 @
}
% b3 E% G! Z+ n+ u. ^% tp--;
% a4 r4 X$ u, h$ A3 y/ F
gofun();
' G- Y" Q- E* ~' R  w' R};
5 C# @* b1 {  K7 k8 f//播放
7 b/ X3 o7 F4 d# O) l) w& I
play_btn.onRelease = function() { 8 A# b4 W; `/ z  A2 E9 q: M
play_btn._visible = 0;
% C/ K+ h& r& R, N; C, }pause_btn._visible = 1;
+ [6 Z4 |& v/ {; q
if (pausetime) { 6 P; L, F2 h9 K( P8 g; q
my_sound.start(pausetime); ; {/ U- z! P. M$ t
} else {
: d/ x& x3 s1 z6 A' T- J! W+ M0 U  S
) ]' F/ r2 {  q8 q, Rmy_sound.start(0);
% J. k% F1 `9 v1 ]1 N/ T
}
! q' \' I4 X* o0 P3 K  e};
7 A% A5 b; I/ V, h  ~
//暂停 . A( l# w( A0 [
pause_btn.onRelease = function() { ! M% B" n& |* ~7 ?; O; t% Y' j
play_btn._visible = 1; 1 }3 Z( M+ x. L( J5 E2 ]; ]
pause_btn._visible = 0;
! O5 L  n. p, W4 i. O4 ~my_sound.stop();
1 y" }7 {; w% Z' t5 `9 N
pausetime = my_sound.position/1000; 0 O$ M$ {9 Q" C- Q4 S9 C4 f  G
};
; _  s1 n# c- H0 [//停止
/ ^$ \5 y* s) j( t! a% istop_btn.onRelease = function() {
( c6 v* \5 M7 t7 s! s5 i+ W8 N
play_btn._visible = 1;
  _+ z3 `9 _/ N/ ]  q* H6 @, R9 _pause_btn._visible = 0;
9 r8 ?! S: I8 ~
my_sound.stop(); . s  c/ h$ n$ V7 L& J+ f2 H4 c  h. A3 X; o
pausetime = false; . L7 @( i- B" K. H# X, K
};
& e: s; B. ]: K8 t+ V9 H( q//音量滑块
+ K8 F% ~3 s  O4 F" y' @# i9 e
huakuai_mc.onPress = function() { 5 `7 \4 `8 ^  |; C) e# }: t; Q
this.startDrag(false, 5, 64, 105, 64);
. Z/ T& B1 k/ x2 _( b9 G% x};
3 Z! P" R$ t, z$ @huakuai_mc.onRelease = huakuai_mc.onReleaseOutside=function () {
5 F" q* F/ G& {: ^6 Q
stopDrag();
* I; S+ H6 m, k. y' f};
! m% P* m6 h6 }! b

文章来源:http://www.360doc.com/content/10/1210/17/1527319_76837591.shtml

上一篇:FLASH毛笔写字效果实例,有图一步一步教哦~

下一篇:没有了

讨论数量:0

请先登录再发表讨论。 2024-03-29

天涯网魂
3 杠 5 星
TA 的文章
TA 的随言
TA 的资源链