as3 音乐播放器带控制播放进度
点击进度条音乐从鼠标点击处开始播放
制作过程:
1、新建FLASH CS3文档,保存名为“控制播放进度”,保存在存有音乐的文件夹内。设置文档大小:252×114像素,帧频:24fps。
2、第一层名为“播放器背景”,在该层画一个播放器背景。
3、新建图层,名为“播放进度框”,画一个无边框的圆角矩形,边角半径为8,宽202高6,填充颜色为#006600,使其垂直水平于舞台。
4、新建图层,名为“播放进度背景”,画一个无边框的圆角矩形,边角半径为8,宽200高4,从上到下填充#99CC00到#55802B渐变色,使其垂直水平于舞台。
5、新建图层,名为“播放进度条”,画一个无边框的圆角矩形,边角半径为0,宽202高6,从上到下填充#00CCFF到#0066FF渐变色,使其垂直水平于舞台,转换为名为“播放进度条”的影片剪辑。在场景中的实例名为“bfjdt_mc”。
6、新建图层,名为“播放进度条遮罩”,把“播放进度背景”图层上帧复制并粘贴到“播放进度条遮罩”图层上,右键选择“遮罩层”。
7、新建图层,名为“进度控制”,画一个无边框的圆角矩形,边角半径为0,宽200高6,填充颜色任意,使其垂直水平于舞台,转换为名为“进度控制”的按钮元件,并将“弹起”帧上的图形拖到“点击”帧上。在场景中的实例名为“jdcz_btn”。
8、新建图层,名为“AS”,在帧上写如下代码:
1、新建FLASH CS3文档,保存名为“控制播放进度”,保存在存有音乐的文件夹内。设置文档大小:252×114像素,帧频:24fps。
2、第一层名为“播放器背景”,在该层画一个播放器背景。
3、新建图层,名为“播放进度框”,画一个无边框的圆角矩形,边角半径为8,宽202高6,填充颜色为#006600,使其垂直水平于舞台。
4、新建图层,名为“播放进度背景”,画一个无边框的圆角矩形,边角半径为8,宽200高4,从上到下填充#99CC00到#55802B渐变色,使其垂直水平于舞台。
5、新建图层,名为“播放进度条”,画一个无边框的圆角矩形,边角半径为0,宽202高6,从上到下填充#00CCFF到#0066FF渐变色,使其垂直水平于舞台,转换为名为“播放进度条”的影片剪辑。在场景中的实例名为“bfjdt_mc”。
6、新建图层,名为“播放进度条遮罩”,把“播放进度背景”图层上帧复制并粘贴到“播放进度条遮罩”图层上,右键选择“遮罩层”。
7、新建图层,名为“进度控制”,画一个无边框的圆角矩形,边角半径为0,宽200高6,填充颜色任意,使其垂直水平于舞台,转换为名为“进度控制”的按钮元件,并将“弹起”帧上的图形拖到“点击”帧上。在场景中的实例名为“jdcz_btn”。
8、新建图层,名为“AS”,在帧上写如下代码:
//申明变量
你也可以加个拖动按钮控制进度
第7步改为:
新建图层,名为“进度滑块”,画一个圆形按钮,宽14高14,填充你喜爱的颜色。转换为名为“音量滑块”的影片剪辑(注册点在中心)。在场景中的实例名为“jdhk_btn”,坐标X:26、Y:57。
在AS图层的帧上写如下代码:
代码如下 | 复制代码 |
var _sound:Sound=new Sound(); var _channel:SoundChannel=new SoundChannel(); var loaded:int; var total:int; var _length:int; var position:int; var hcbfb:Number; var bfjdbfb:Number; //载入MP3并播放 var url:String="****.mp3";//你电脑上的MP3音乐文件名,把该文件与MP3音乐文件放在一个文件夹内。 var _request:URLRequest = new URLRequest(url); _sound.load(_request); _channel=_sound.play(); bfjdt_mc.visible=false; //添加不断更新监听事件 addEventListener(Event.ENTER_FRAME,yx); function yx(event:Event):void { loaded=_sound.bytesLoaded; total=_sound.bytesTotal; _length=_sound.length; position=_channel.position; hcbfb=loaded / total; _length/=hcbfb; bfjdbfb=position / _length; bfjdt_mc.scaleX=bfjdbfb; bfjdt_mc.visible=true; } if (hcbfb>=1) { jdcz_btn.addEventListener(MouseEvent.CLICK,jdcz); } } //播放进度控制 function jdcz(e:MouseEvent):void { _channel.stop(); var bfjdbfb:Number=(mouseX-26)/200; bfjdt_mc.scaleX=bfjdbfb; position =_length*bfjdbfb; _channel=_sound.play(position); } |
第7步改为:
新建图层,名为“进度滑块”,画一个圆形按钮,宽14高14,填充你喜爱的颜色。转换为名为“音量滑块”的影片剪辑(注册点在中心)。在场景中的实例名为“jdhk_btn”,坐标X:26、Y:57。
在AS图层的帧上写如下代码:
代码如下 | 复制代码 |
//申明变量var _sound:Sound=new Sound(); var _channel:SoundChannel=new SoundChannel(); var loaded:int; var total:int; var _length:int; var position:int; var hcbfb:Number; var bfjdbfb:Number; var tdfw:Rectangle=new Rectangle(26,57,200,0) var tdzj:Boolean=false //载入MP3并播放 var url:String="****.mp3";//你电脑上的MP3音乐文件名,把该文件与MP3音乐文件放在一个文件夹内。 var _request:URLRequest = new URLRequest(url); _sound.load(_request); _channel=_sound.play(); bfjdt_mc.visible=false; addEventListener(Event.ENTER_FRAME,yx); function yx(event:Event):void { loaded=_sound.bytesLoaded; total=_sound.bytesTotal; _length=_sound.length; hcbfb=loaded / total; bfjdt_mc.visible=true; if (tdzj==false) { position=_channel.position; bfjdbfb=position / _length; bfjdt_mc.scaleX=bfjdbfb; jdhk_btn.x=26+bfjdbfb*200; } else { bfjdbfb=(jdhk_btn.x-26)/200; bfjdt_mc.scaleX=bfjdbfb; position =_length*bfjdbfb; } } //进度滑块拖动 jdhk_btn.buttonMode=true; jdhk_btn.addEventListener(MouseEvent.MOUSE_DOWN,td); function td(e:MouseEvent):void { tdzj=true; jdhk_btn.startDrag(false,tdfw); stage.addEventListener(MouseEvent.MOUSE_UP,sf); /*该监听事件如果不放在此,你用鼠标点击舞台上任何位置再松开鼠标, 音乐在正常播放过程中也会出现停顿。*/ } jdhk_btn.addEventListener(MouseEvent.MOUSE_UP,sf); function sf(e:MouseEvent):void { stage.removeEventListener(MouseEvent.MOUSE_UP,sf); tdzj=false; stopDrag(); _channel.stop(); _channel=_sound.play(position); } |
flash源码下载地址
http://www.zzzyk.com/down/2010音乐播放器(1)——播放进度1.swf
http://www.zzzyk.com/down/2010音乐播放器(1)——播放进度2.swf
补充:flash教程,As3.0