FLASH CS4制作音频播放器.docx
《FLASH CS4制作音频播放器.docx》由会员分享，可在线阅读，更多相关《FLASH CS4制作音频播放器.docx（19页珍藏版）》请在冰豆网上搜索。
FLASHCS4制作音频播放器
FLASHCS4制作音频播放器
在制作音频播放器时，可以通过外部XML文件载入音乐的名称和地址。
然后再将名称添加到动态生成的组件中，并为其添加事件，实现鼠标单击播放。
另外，还可以通过自定义的各种按钮控制音乐的播放、停止、暂停以及播放上一首和播放下一首等，如图14-12所示。
图14-12音频播放器
设计过程：
1．设计界面与列表
（1）新建main.fla文件，设置影片背景颜色为“黑色”，并导入播放器背景的素材图像，如图14-13所示。
图14-13导入背景图像
（2）制作各种播放器的按钮，以及音量滑块和播放进度条，如图14-14所示。
图14-14制作各种按钮和进度条
音频播放器的按钮主要包括跳转上一首歌（lastbtn）、播放（playbtn）、跳转下一首歌（nextbtn）、停止（stopbtn）、暂停（nextbtn）、静音（mutebtn）、开启声音（unmutebtn）、打开/关闭播放列表（listbtn）、关闭播放列表（closelist）等按钮。
（3）新建“playlist”元件，根据素材图像制作播放列表的背景，如图14-15所示。
图14-15制作播放列表背景
（4）用记事本新建xml文件，并编写歌曲列表。
其代码如下：
xmlversion="1.0"encoding="utf-8"?
>
--……-->
2．加载xml列表
（1）新建script.as文件，将其保存在影片目录下的action文件夹中。
在影片的【属性检查器】中设置【类】为action.script，如图14-16所示。
图14-16设置外部类
（2）在script.as中创建名为action的包，并导入各种外部类。
其代码如下：
packageaction{
importflash.display.Sprite;
//导入显示基类
importflash.display.MovieClip;
//导入影片剪辑类
importflash.display.Bitmap;
//导入位图类
importflash.display.BitmapData;
//导入位图数据类
importflash.events.Event;
//导入普通事件类
importflash.events.MouseEvent;
//导入鼠标事件类
import.URLLoader;
//导入加载对象类
import.URLRequest;
//导入加载对象请求类
importflash.display.SimpleButton;
//导入自定义按钮类
importflash.text.TextField;
//导入文本域类
importflash.text.TextFormat;
//导入文本格式类
importflash.media.Sound;
//导入声音类
importflash.media.SoundChannel;
//导入声音声道类
importflash.media.SoundLoaderContext;
//导入声音加载环境类
importflash.media.SoundTransform;
//导入声音转换类
importflash.media.SoundMixer;
//导入声音混成器类
importflash.media.ID3Info;
//导入音乐附加信息类
importflash.utils.ByteArray;
//导入二进制数组类
importflash.filters.GlowFilter;
//导入发光滤镜类
importflash.display.Shape;
//导入图形元件类
}
（3）自定义script类，并创建歌曲列表的相关全局变量，然后自定义loadXMLList（）函数，添加加载XML的事件。
其代码如下：
publicclassscriptextendsSprite{
publicvarmusicListURL:
String="xml/list.xml";//实例化歌曲列表XML的路径
publicvarmusicListRequest:
URLRequest=newURLRequest（musicListURL）;
//实例化加载歌曲列表的需求
publicvarmusicListLoader:
URLLoader=newURLLoader（musicListRequest）;
//实例化歌曲列表的XML
publicvarsymbolArray:
Array=newArray（）;//实例化歌曲音轨的数组
publicvarnameArray:
Array=newArray（）;
//实例化歌曲名称数组
publicvarurlArray:
Array=newArray（）;
//实例化歌曲路径数组
publicvarcurrentMusic:
int=2;
//定义当前应播放的歌曲编号
publicfunctionloadXMLList（）:
void{
//自定义loadXMLList（）函数，加载XML
musicListLoader.addEventListener（Event.COMPLETE,listLoadComplete）;//监听加载完成事件
}
}
（4）自定义listLoadComplete（）函数，将XML中的数据追加到相应的数组中。
其代码如下所示：
publicfunctionlistLoadComplete（event:
Event）:
void{
varlist:
XML=XML（event.target.data）;
vari:
int=0;
foreach（varlistElement:
XMLinlist.elements（））{
symbolArray.push（String（listElement.@symbol））;
nameArray.push（String（listElement.@name））;
urlArray.push（String（listElement.@url））;
}
loadListText（）;
loadSound（）;
}
（5）根据数组和当前应播放的歌曲编号，自定义loadSound（）函数，加载声音。
其代码如下：
publicfunctionloadSound（）:
void{
musicURL=urlArray[currentMusic];
musicRequest=newURLRequest（musicURL）;
music=newSound（）;
music.load（musicRequest,musicBuffer）;
music.addEventListener（Event.ID3,outputID3）;
}
（6）自定义loadListText（）函数，用于动态生成显示歌曲名称的组件，并通过其在数组中的索引号判断其在歌曲列表背景图像中的位置。
其代码如下：
publicfunctionloadListText（）:
void{
if（nameArray.length!
=0）{
//判断如果XML中数据不为空
for（vari:
int=0;ivarlistText:
TextField=newTextField（）;
//实例化文本域
listText.doubleClickEnabled=true;
//设置文本域允许被双击
listText.maxChars=9;
//设置文本域最大字符数
listText.height=18;
listText.width=105;
//设置文本域大小
listText.text=nameArray[i];
//设置文本域中显示的文本
if（i<4）{
listText.x=-205;
listText.y=-55+18*i;
}elseif（i>=4&&i<8）{
listText.x=-100;
listText.y=-55+（i-4）*18;
}elseif（i>=8&&i<12）{
listText.x=5;
listText.y=-55+（i-8）*18;
}elseif（i>=12&&i<16）{
listText.x=110;
listText.y=-55+（i-12）*18;
}//根据歌曲的编号判断文本域位置
listText.addEventListener（MouseEvent.MOUSE_OVER,overList）;
listText.addEventListener（MouseEvent.MOUSE_OUT,outList）;
listText.addEventListener（MouseEvent.CLICK,choiceMusic）;
listText.addEventListener（MouseEvent.DOUBLE_CLICK,playMusic）;
//为文本域添加鼠标事件
listText.selectable=false;
listTextArray.push（listText）;
//将文本域追加到数组中。
playList.addChild（listText）;
//设置文本域在播放列表背景中显示
}
}
}
（7）自定义overList（）、outList（）、choiseMusic（）以及playMusic（）等函数，用于实现歌曲列表的相关鼠标事件。
其代码如下：
publicfunctionoverList（event:
MouseEvent）:
void{//鼠标滑过歌曲列表的事件
if（event.target.background==false）{
event.target.background=true;
event.target.backgroundColor=0x66FF00;
}//改变歌曲列表文本域的背景颜色
}
publicfunctionoutList（event:
MouseEvent）:
void{//鼠标离开歌曲列表的事件
if（event.target.backgroundColor==0x66FF00）{
event.target.background=false;
}//取消歌曲列表文本域的背景颜色
}
publicfunctionchoiceMusic（event:
MouseEvent）:
void{//鼠标单击歌曲列表的事件
for（vari:
int=0;ilistTextArray[i].background=false;
}
event.target.background=true;
event.target.backgroundColor=0xCCFF00;
//改为新的背景颜色
currentMusic=listTextArray.indexOf（event.target）;//根据当前音乐编号判断
loadSound（）;//加载声音
stage.addChild（musicInfo）;
stage.addChild（musicInfoShadow）;
//显示音乐的信息
}
publicfunctionplayMusic（event:
MouseEvent）:
void{//播放选中的音乐
if（onPause==false）{//判断是否暂停状态
channel=music.play（）;
stage.addEventListener（Event.ENTER_FRAME,movePlayBlock）;//进度条开始
}else{//处于暂停状态
channel=music.play（playPosition）;
//按照已有进度播放音乐
stage.addEventListener（Event.ENTER_FRAME,movePlayBlock）;
}
onPlay=true;
onPause=false;//当前状态
}
（8）自定义buttonsSet（）函数，为各种按钮添加鼠标事件。
其代码如下：
publicfunctionbuttonsSet（）:
void{
playBtn.addEventListener（MouseEvent.CLICK,playMusic）;//播放按钮
lastBtn.addEventListener（MouseEvent.CLICK,lastMusic）;//上一首歌按钮
nextBtn.addEventListener（MouseEvent.CLICK,nextMusic）;//下一首歌按钮
closeList.addEventListener（MouseEvent.CLICK,showList）;//关闭列表按钮
listBtn.addEventListener（MouseEvent.CLICK,showList）;//开启列表按钮
pauseBtn.addEventListener（MouseEvent.CLICK,pauseMusic）;//暂停按钮
stopBtn.addEventListener（MouseEvent.CLICK,stopMusic）;//停止按钮
muteBtn.addEventListener（MouseEvent.CLICK,muteMusic）;//静音按钮
unmuteBtn.addEventListener（MouseEvent.CLICK,unmuteMusic）;//开启声音按钮
}
（9）自定义showList（）、listDown（）以及listUp（）函数，根据列表的开关情况执行相应指令。
其代码如下：
publicfunctionshowList（event:
MouseEvent）:
void{//自定义函数，用于显示/隐藏列表
if（playList.visible==true）{//判断，如已显示
stage.addEventListener（Event.ENTER_FRAME,listDown）;//执行隐藏列表的函数
}else{//否则
stage.addEventListener（Event.ENTER_FRAME,listUp）;//执行显示列表的函数
}
}
publicfunctionlistUp（event:
Event）:
void{
//自定义函数，用于显示列表
playList.y-=11;//列表弹出的速度
if（playList.y<=90）{//如列表弹出到90像素
playList.y=90;//将列表位置固定
playList.visible=true;//列表状态为显示
stage.removeEventListener（Event.ENTER_FRAME,listUp）;//中止执行函数
}
}
publicfunctionlistDown（event:
Event）:
void{
//自定义函数，用于隐藏列表
playList.y+=11;//函数隐藏的速度
if（playList.y>=200）{
//如果列表隐藏到200像素以下
playList.y=200;//将列表固定
playList.visible=false;
//列表状态更改为隐藏
stage.removeEventListener（Event.ENTER_FRAME,listDown）;//中止执行函数
}
}
（10）自定义movePlayBlock（），用于使音乐播放进度的滑块运动。
其代码如下：
publicfunctionmovePlayBlock（event:
Event）:
void{//自定义函数，用于移动进度滑块
playPosition=channel.position;
//获取当前播放进度
playBlockMap.x=playPosition/music.length*500+25;//计算进度条移动的速度
if（playBlockMap.x>520）{//当播放完成时
stage.removeEventListener（Event.ENTER_FRAME,movePlayBlock）;//停止进度条滑块移动
playBlockMap.x=25;//进度条滑块归零
playPosition=channel.position;
//重新获取当前播放进度
onPlay=false;//当前状态为停止播放
}
}
（11）自定义muteMusic（）和unmuteMusic（）函数，用于实现静音和打开音量。
其代码如下：
publicfunctionmuteMusic（event:
MouseEvent）:
void{//自定义函数，用于响应静音按钮
varmusicTransform:
SoundTransform=newSoundTransform（）;//重新实例化声音转换对象
muteBtn.visible=false;//隐藏静音按钮
unmuteBtn.visible=true;//显示开启声音按钮
musicTransform.volume=0;//音量设置为0
SoundMixer.soundTransform=musicTransform;//将音量值赋给声音混合器
volumeBlockMap.x=25;//音量滑块归零
}
publicfunctionunmuteMusic（event:
MouseEvent）:
void{//自定义函数，用于响应开启声音按钮
varmusicTransform:
SoundTransform=newSoundTransform（）;//重新实例化声音转换对象
muteBtn.visible=true;//显示静音按钮
unmuteBtn.visible=false;//隐藏开启声音按钮
musicTransform.volume=0FLASHCS4;//音量设置为0FLASHCS4
SoundMixer.soundTransform=musicTransform;//将音量值赋给声音混合器
volumeBlockMap.x=130;//音量滑块移动
}
（12）自定义lastMusic（）函数，用于跳转到前一首音乐中。
其代码如下：
publicfunctionlastMusic（event:
MouseEvent）:
void{//自定义函数，用于响应跳转上一首音乐按钮
if（currentMusic>0）{//当前非第一首音乐时
stage.removeEventListener（Event.ENTER_FRAME,movePlayBlock）;//停止进度条
for（vari:
int=0;ilistTextArray[i].background=false;
}
currentMusic-=1;//当前音乐索引号减1
listTextArray[currentMusic].background=true;//为掉转到的列表组件添加背景
listTextArray[currentMusic].backgroundColor=0xCCFF00;//设置该组件的背景颜色
SoundMixer.stopAll（）;//停止音乐播放
loadSound（）;//加载音乐
stage.addChild（musicInfo）;
//重新显示音乐的附加信息
stage.addChild（musicInfoShadow）;
//显示音乐附加信息的投影
channel=music.play（）;//播放音乐
stage.addEventListener（Event.ENTER_FRAME,movePlayBlock）;//进度条开始移动
}
}
（13）用相同的方法编写跳转到下一首音乐的nextMusic（）函数，然后再自定义pauseMusic（）、stopMusic（）等函数，实现暂停播放和停止播放功能。
其代码如下：
publicfunctionpauseMusic（event:
MouseEvent）:
void{//自定义函数，用于响应暂停按钮的事件
if（onPlay==true&&onPause==false）{
//判断当播放进行且未暂停时
channel.stop（）;//声道播放停止
onPlay=false;//当前播放为停止状态
onPause=true;//当前为暂停状态
stage.removeEventListener（Event.ENTER_FRAME,movePlayBlock）;
//停止播放进度的滑块运动
}
}
publicfunctionstopMusic（event:
MouseEvent）:
void{//自定义函数，用于响应停止按钮的事件
stage.removeEventListener（Event.ENTER_FRAME,movePlayBlock）;//停止播放进度的滑块运动
playPosition=0;//播放进度时间清零
playBlockMap.x=25;//滑块返回初始位置
SoundMixer.stopAll（）;//所有声音停止
}
（14）自定义volumeSet（）函数，用于实现通过滑块控制音量大小。
其代码如下：
publicfunctionvolumeSet（event:
MouseEvent）:
void{
//自定义函数，用于响应音量条的单击事件
if（mouseX>30&&mouseX<240）{
//判断当鼠标横坐标属于音量条的范围内
volumeBlockMap.x=mouseX;
//音量滑块的横坐标与鼠标横坐标相等
varmusicTransfor
升级会员 