基于Flash CS4音樂播放器的設(shè)計與實(shí)現(xiàn)

王壽蘋 胡 明

摘要:利用Flash 中的ActionScript實(shí)現(xiàn)音樂播放器在多媒體設(shè)計中有廣泛的應(yīng)用。本文基于Flash CS4中的AS3,設(shè)計并制作一款音樂播放器,能夠完成音樂播放、暫停、停止、播放進(jìn)度顯示、音量控制的功能。

關(guān)鍵詞:元件;場景;ActionScript;音樂播放器;多媒體動畫設(shè)計

中圖分類號:G434 文獻(xiàn)標(biāo)識碼:B 文章編號:1673-8454(2009)20-0067-02

一、設(shè)計播放器界面

利用Flash CS4的基本繪圖工具和顏色填充工具繪制播放器的界面,注意設(shè)置尺寸值,播放進(jìn)度槽、播放進(jìn)度條、音量按鈕寬度值分別為400、1、 6,音量按鈕高度值為4,這些數(shù)值將與后面AS代碼的有關(guān)數(shù)據(jù)相對應(yīng)。分別將播放器界面背景、播放按鈕、暫停按鈕、停止按鈕、播放進(jìn)度槽、播放進(jìn)度條、音量條、音量按鈕轉(zhuǎn)換成影片剪輯元件beijing、按鈕元件1、按鈕元件2、按鈕元件3、影片剪輯元件4、影片剪輯元件5、影片剪輯元件6、影片剪輯元件7。在Flash場景中由下至上,把播放器界面背景、暫停按鈕、播放按鈕、停止按鈕、播放進(jìn)度槽、播放進(jìn)度條、音量條、音量按鈕分別放置在不同的圖層上,通過屬性面板的位置參數(shù)對齊暫停按鈕、播放按鈕的位置,使播放按鈕正好放置在暫停按鈕的上方,并在屬性面板中為元件依次命名為“bj_mc”、“stp_btn”、“ply_btn”、“restart_btn”、“jdc_mc”、“jdt_mc”、“bar_mc”、“slider_mc”。如圖1所示。

二、編寫AS3代碼

1.編程前的準(zhǔn)備工作

(1)首先把音樂文件和Flash文件放置到同一個文件夾里,這樣方便文件的調(diào)用。

(2)在時間軸上新建一個圖層,命名為“action”。選擇第一幀,單擊動作—幀選項卡,打開動作面板,編寫代碼。這也是AS3和AS2的不同之處,AS3的動作是寫到幀上,而不是寫在按鈕或者影片剪輯上。

2.調(diào)用外部音樂文件

(1)調(diào)用外部文件之前要聲明一個實(shí)例s來繼承sound類,輸入:var s:Sound = new Sound();

(2)然后定義一個變量req,將音樂文件的路徑信息賦給它,輸入:var req:URLRequest = new URLRequest

("高山流水.mp3");

(3)實(shí)例s通過load()函數(shù)來調(diào)用音樂文件,輸入:s.load(req);

3.播放按鈕程序的編寫

當(dāng)鼠標(biāo)單擊播放按鈕時,音樂開始播放,因此需要為播放按鈕添加一個偵聽器來偵聽鼠標(biāo)單擊事件。單擊播放按鈕,調(diào)用clickhandle01函數(shù)。音樂播放的同時播放按鈕會變成暫停按鈕。音樂播放器有暫停功能,即當(dāng)音樂暫停后,再次單擊播放按鈕時音樂會從暫停的位置繼續(xù)播放,因此需要定一個變量pausePosition來記錄文件播放暫停的當(dāng)前位置。播放按鈕程序編寫如下:

var channel:SoundChannel = new SoundChannel();

var pausePosition:int = channel.position;

function clickhandle01(event:MouseEvent):void{

channel = s.play(pausePosition);

ply_btn.visible = false;

}

ply_btn.addEventListener(MouseEvent.CLICK,clickhandle01);

4.暫停按鈕程序的編寫

當(dāng)鼠標(biāo)單擊暫停按鈕后,音樂會暫停播放,同時暫停按鈕會隱藏,播放按鈕會顯示出來。同樣需要為暫停按鈕添加偵聽器,當(dāng)單擊暫停按鈕時,調(diào)用clickhandle02函數(shù)。音樂播放暫停之后,需要記錄當(dāng)前音樂的位置,將值賦給pausePosition,這樣再單擊播放按鈕時,音樂就會從停止的位置繼續(xù)播放。

function clickhandle02(event:MouseEvent):void{

pausePosition=channel.position;

channel.stop();

ply_btn.visible = true;

}

stp_btn.addEventListener(MouseEvent.CLICK,clickhandle02);

5.停止按鈕程序的編寫

停止按鈕和暫停按鈕有區(qū)別,停止是回到正在播放文件的開始并且停止,暫停是停止在文件的當(dāng)前處。為播放器停止按鈕添加一個偵聽器來偵聽鼠標(biāo)單擊事件,如果單擊停止按鈕,調(diào)用clickhandle03函數(shù)。

function clickhandle03(event:MouseEvent):void{

pausePosition = 1;

channel.stop();

ply_btn.visible=true;

}

restart_btn.addEventListener(MouseEvent.CLICK,clickhandle03);

6.播放進(jìn)度顯示程序的編寫

當(dāng)音樂不斷播放時,進(jìn)度條就會變長,Event.ENTER_FRAME可以定時地響應(yīng)。在onEnterFrame函數(shù)中,定義一個中間變量playbackPercent,表示音樂播放的當(dāng)前位置和音樂文件長度的比值。已知音樂播放槽的長度為400,這樣隨著音樂的播放,在x軸對播放進(jìn)度條進(jìn)行放大即可。

addEventListener(Event.ENTER_FRAME,onEnter Frame);

function onEnterFrame(event:Event):void {

var playbackPercent:uint = channel.position / s.length;

jdt_mc.scaleX=playbackPercent *400+1;

}

7.音量控制程序的編寫

當(dāng)用鼠標(biāo)按下音量控制按鈕時,可以拖動該元件,當(dāng)鼠標(biāo)松開的時候,元件停止在該處。按鈕只能在音量條上橫向移動,不能超出音量的寬度范圍。因此需要給音量控制按鈕添加三個監(jiān)聽器,一個監(jiān)聽當(dāng)鼠標(biāo)按下時,一個監(jiān)聽當(dāng)鼠標(biāo)松開時,一個監(jiān)聽當(dāng)鼠標(biāo)拖動音量按鈕時。

當(dāng)鼠標(biāo)按下時的程序:

slider_mc.addEventListener(MouseEvent.MOUSE_ DOWN,clickHandle04);

function clickHandle04(event:MouseEvent):void{

slider_mc.startDrag(false, newRectangle(bar_mc.x,bar_mc.y,bar_mc.width-6,bar_mc.height-4));

this.stage.addEventListener(MouseEvent.MOUSE_ MOVE,volumeOnmove);

}

接著為滑塊添加一個偵聽器來監(jiān)聽鼠標(biāo)的松開:

slider_mc.addEventListener(MouseEvent.MOUSE_ UP,clickHandle05);

function clickHandle05(event:MouseEvent):void {

slider_mc.stopDrag();

this.stage.removeEventListener(MouseEvent.MOUSE_ MOVE,volumeOnmove);

}

當(dāng)鼠標(biāo)拖動滑塊進(jìn)行移動時,執(zhí)行volumeOnmove函數(shù)。

function volumeOnmove(event:MouseEvent):void {

var num:Number=slider_mc.x-bar_mc.x;

var volumeNum:SoundTransform=new SoundTransform ;

volumeNum.volume=num/bar_mc.width;

channel.soundTransform=volumeNum;

}

至此,一款具有播放、暫停、停止、播放進(jìn)度顯示、音量控制功能的音樂播放器就制作完成,有興趣的讀者可以在此基礎(chǔ)上實(shí)現(xiàn)更復(fù)雜的功能。

參考文獻(xiàn):

[1]http://bbs.jcwcn.com/thread-259025-1-1.html.

[2]Adobe 公司. Adobe Flash CS4 中文版幫助文檔 http://help.adobe.com/zh_CN/ActionScript/3.0_Programming

AS3/WS5b3ccc516d4fbf351e63e3d118a9b90204-7d12.html.

[3]Adobe 公司. Adobe Flash CS4 中文版幫助文檔http://help.adobe.com/zh_CN/ActionScript/3.0_Programming

AS3/WS5b3ccc516d4fbf351e63e3d118a9b90204-7d1e.html.(編輯:隗爽)