AS3基础教程-第36课-mp3播放器(1)
1、打开flashCS6软件,新建AS3的flash文档。
本节课实现下面的目标:
<1>载入外部音乐
<2>布置播放和暂停按钮,分别实现播放和暂停的效果
<3>播放和暂停按钮不同时存在
<4>如果单击了暂停按钮,再单击播放,将会续播
2、我们先设计界面。
本节课只有两个按钮,我们从公用库内拖出两个来,一个播放的、一个暂停的
保证宽高比锁定的前提下,将宽度调节为50 ,从而让按钮不至于太小,影响观感。
然后在属性面板内设置实例名分别为 play_btn 和 pause_btn
最后,将图层1重命名为 按钮
如下图所示

3、因为,播放和暂停按钮不能同时显示,所以,接下来,我们将两个按钮放到同一个位置,为了方便后期的修改,最好将两者放在不同的图层内:
用选择工具,选中暂停按钮,按Ctrl+X键即可剪切掉
新建一个图层,命名为暂停按钮,按Ctrl+V键即可粘贴进来,然后将其位置移动到播放按钮上面,使两者完全重合,如下图所示

4、接下来准备写代码,首先使用代码片段功能,给暂停按钮添加 单击命令,会自动生成Actions图层,将里面的代码稍事修改,去掉所有的注释,然后将相应函数的名字修改为 danji 将参数的名字修改为 evt

5、接下来,将
pause_btn.addEventListener(MouseEvent.CLICK, danji);
这一行代码复制、粘贴一份,然后将事件源的pause_btn给修改为play_btn
如此一来,两个按钮共用一个响应函数

6、接下来,当然是在响应函数内,使用switch语句,对单击操作进行“分流”:
switch(evt.target.name){
case "play_btn":
//播放按钮的代码
break
case "pause_btn":
//暂停按钮的代码
break
}
7、现在,我们先解决 两个按钮不同时出现 的目标。在这里需要用到 显示对象【包括影片剪辑和按钮两种元件,以及使用代码生成的显示在舞台上的对象。它们合称为显示对象】的visible属性,该属性控制的是显示对象的显示与隐藏,其类型是 布尔类型,仅有true和false两个数值。
8、由于,一打开作品声音就播放,故此,此时的舞台上只显示暂停按钮,那么播放按钮就要隐藏,代码如下:
//模块一:按钮的显示与隐藏
play_btn.visible=false//播放按钮
pause_btn.visible=true//暂停按钮
9、然后,单击播放按钮时,播放按钮隐藏,暂停按钮显示;
反之,单击暂停按钮时,暂停按钮隐藏,播放按钮显示。
故此,在响应函数内部的两条分支语句内,分别新增代码如下:
//播放按钮的代码
play_btn.visible=false//播放按钮
pause_btn.visible=true//暂停按钮
//暂停按钮的代码
play_btn.visible=true//播放按钮
pause_btn.visible=false//暂停按钮
如下图所示

10、此时,测试影片,看看是否有报错提示,如果不报错,单击按钮看看效果,是否和我们设想的一样。
这是一个很重要的小技巧,就是:每做完一小段代码,先进行测试,看看有没有bug,如此,一小步一小步的逐渐新增功能,可以一步一个脚印。
如果是一鼓作气,将所有的代码都写完后再测试影片,万一出现问题,代码的纠错就比较的困难。
至此,已经实现了两个按钮不同时出现的目标,而且单击任意一个按钮,都会隐藏自身的同时、开启另一个按钮的显示。这与我们的设想完全一致。
11、接下来,就是声音操作的步骤了。
为了降低难度,本节课只给出一首歌的操作步骤。
代码如下:
//模块二:声音
var url:String="E:/music/爱你爱的好疲惫.mp3"
var urr:URLRequest=new URLRequest(url)
var mysd:Sound=new Sound(urr)
var sdcn:SoundChannel=new SoundChannel()
sdcn=mysd.play()
前面已经详解过,这里不再赘述。仅提一点:
代码的第一行,这里使用的是 本地路径,因为我打算加载自己电脑内的一些音乐进行播放,如果将这些音乐都复制到fla文件的目录内,太浪费电脑硬盘的空间,故此,这里使用的是 绝对路径。如果是访问本地声音,绝对路径内必须使用 / 而不是 \

12、测试影片,无误。一打开本程序,声音就播放。
现在,我们需要给两个按钮分别添加暂停播放和继续播放的功能。那么,仍然是需要事先定义一个Number类型的变量,用于存储当前声音的播放进度:
var sdjd:Number=0//声音进度
那么,播放按钮的响应函数内,需新增的代码是:
sdcn=mysd.play(sdjd)
暂停按钮的响应函数内,需新增的代码是:
sdjd=sdcn.position
sdcn.stop()

13、测试影片,发现本节课的目标已经全部实现。不要忘记保存fla文件哦。
本节课的完整代码如下:
import flash.media.Sound;
import flash.net.URLRequest;
import flash.media.SoundChannel;
//模块一:按钮的显示与隐藏
play_btn.visible=false//播放按钮
pause_btn.visible=true//暂停按钮
//模块二:声音
var sdjd:Number=0//声音进度
var url:String="E:/music/爱你爱的好疲惫.mp3"
var urr:URLRequest=new URLRequest(url)
var mysd:Sound=new Sound(urr)
var sdcn:SoundChannel=new SoundChannel()
sdcn=mysd.play()
play_btn.addEventListener(MouseEvent.CLICK, danji);
pause_btn.addEventListener(MouseEvent.CLICK, danji);
function danji(evt:MouseEvent):void
{
switch(evt.target.name){
case "play_btn":
//播放按钮的代码
play_btn.visible=false//播放按钮
pause_btn.visible=true//暂停按钮
sdcn=mysd.play(sdjd)
break
case "pause_btn":
//暂停按钮的代码
play_btn.visible=true//播放按钮
pause_btn.visible=false//暂停按钮
sdjd=sdcn.position
sdcn.stop()
break
}
}