Flash ActionScript3.0 簡易音樂播放
AS3的音樂功能已經相當好用
最大的優點在於它的分工相當明確
首先要有個概念就是要把音樂當作是一種「類別」
而利用這種類別的Play()方法就可進行播放
Play()這個方法也可以設定參數
比方說Play(10)代表是從第10毫秒開始播放
或者說Play(0,10)代表是從第0秒播、共播10次
但是Play()主要掌管的只有「播放」
如果要讓音樂停止
則是SoundChannel類別的工作了~
語法上可以將SoundChannel = 音檔.play()
也就是說在開始播放之後
就把工作交給SoundChannel這個類別來管
詳細情形將在下面直接以範例來說明
(範例的音樂是我自己作曲的唷)
這邊我用兩個範例
第一個是比較簡單的
只有播放、暫停(按播放鈕後按鈕會變暫停鈕)、停止
首先先新增新檔案
選擇ActionScript 3.0
在畫面上先把兩個按鈕圖做好
但是這兩個實際上是「影片片段」而非按鈕
理由是要讓播放鈕按了之後直接跳影格變暫停鈕
我將停止播放鈕命名其實體名稱為musicStop_mc
播放/暫停鈕命名其實體名稱為musicStart_mc
其中musicStart_mc裡面第五影格改成暫停鈕的圖
並且讓第一格跟第五格都增加影格動作 stop();
之後將要放的音樂匯入至元件庫
檔案→匯入→匯入至元件庫
匯入完成之後
在上面右鍵
選擇「連結」
(CS3版是分開的，CS4好像就併到屬性裡面)
將「匯出給ActionScript使用」打勾
並且將類別命名為music_snd
(當然類別可以自己隨便命名，只要不是保留字、自己記得住就可以)
回到主場景
並在第一個影格輸入以下程式
stop();
var playsnd:music_snd = new music_snd();
var playsndCh:SoundChannel;
var playsndTime=0;
musicStop_mc.buttonMode=true;
musicStart_mc.buttonMode=true;
musicStop_mc.addEventListener(MouseEvent.CLICK, doStop);
musicStart_mc.addEventListener(MouseEvent.CLICK, doStart);
function doStop(e:MouseEvent):void{
if(playsndCh){
playsndCh.stop();
playsndCh=null;
playsndTime=0;
musicStart_mc.gotoAndStop(1);
}
}
function doStart(e:MouseEvent):void{
if(playsndCh){
playsndTime=playsndCh.position;
playsndCh.stop();
playsndCh=null;
musicStart_mc.gotoAndStop(1);
}
else{
playsndCh = playsnd.play(playsndTime);
musicStart_mc.gotoAndStop(5);
playsndCh.addEventListener(Event.SOUND_COMPLETE, soundComplete);
}
}
function soundComplete(e:Event):void{
if(playsndCh){
playsndCh.stop();
playsndCh=null;
}
playsndTime=0;
musicStart_mc.gotoAndStop(1);
}
首先要先將聲音類別建立出來
我宣告一個名為playsnd的物件是屬於我音樂的music_snd類別
(就是剛剛連結那邊自訂的)
playsndCh則是SoundChannel類別的物件
之後要控管playsnd播放之後的事務
var playsnd:music_snd = new music_snd();
var playsndCh:SoundChannel;
然後再設一個變數用來儲存我播放頭的位置
這是要給暫停鈕使用的
var playsndTime=0;
接著
musicStop_mc.buttonMode=true;
musicStart_mc.buttonMode=true;
這兩行是將影片片段設定為可以像按鈕一樣點選
會從游標箭頭變成手指
給使用者較直觀
musicStop_mc.addEventListener(MouseEvent.CLICK, doStop);
musicStart_mc.addEventListener(MouseEvent.CLICK, doStart);
這兩行就將兩個按鍵的影片片段建立滑鼠的事件偵聽
其中停止的函數是doStop
開始/暫停的是doStart
停止的比較簡單
如果正在播放音樂的話if(playsndCh)
就把音樂整個停止
並且把SoundChannel設定為空值
播放頭的時間歸0
而開始/暫停鈕則回歸到影格1(也就是顯示為「播放鈕」)
function doStop(e:MouseEvent):void{
if(playsndCh){
playsndCh.stop();
playsndCh=null;
playsndTime=0;
musicStart_mc.gotoAndStop(1);
}
}
再來就是播放/暫停鈕的設定
因為要判定是否音樂正在播
如果沒在播的話就顯示播放鈕
如果已經有在播的話顯示暫停鈕
所以這邊就用if else判定playsndCh這個SoundChannel是否存在
若有的話則在按下之後
將播放頭的時間存入playsndTime
position是SoundChannel的屬性之一
可以偵聽到目前播放到音樂的什麼地方
存入playsndTime之後
就把SoundChannel停掉
並且將按鈕變換成播放
而如果沒有在播音樂
代表按下之後音樂要開始播
所以 playsndCh = playsnd.play(playsndTime);
因為playsndTime預設是0
所以直接播的話會從頭開始
但如果之前已經有開始播
就會從紀錄的播放頭秒數開始播
而這邊還要再增加一個監聽程式SOUND_COMPLETE
當音樂播下去直到播完之後要將所有值重設的
function doStart(e:MouseEvent):void{
if(playsndCh){
playsndTime=playsndCh.position;
playsndCh.stop();
playsndCh=null;
musicStart_mc.gotoAndStop(1);
}
else{
playsndCh = playsnd.play(playsndTime);
musicStart_mc.gotoAndStop(5);
playsndCh.addEventListener(Event.SOUND_COMPLETE, soundComplete);
}
}
soundComplete就是在音樂全播完之後重設用
把SoundChannel都停掉
同時也把播放頭歸0
暫停鈕變回播放鈕
function soundComplete(e:Event):void{
if(playsndCh){
playsndCh.stop();
playsndCh=null;
}
playsndTime=0;
musicStart_mc.gotoAndStop(1);
}
上面的程式應該不難理解吧!!
如果可以吸收的話
再來就要再增加一個功能
就是顯示目前播放的位置
這其實有很多作法
包括直接套Flash內建的UI拉霸等等的
不過這邊我就簡單的用影片片段示範
首先我在下方增加一個拉Bar
並命名為musicPlayBar_mc
然後用變形工具點它一下
把中心點設定到最左邊(白色的圈圈那個)
並且將程式碼補上(灰色的是原本的)
stop();
var playsnd:music_snd = new music_snd();
var playsndCh:SoundChannel;
var playsndTime=0;
musicStop_mc.buttonMode=true;
musicStart_mc.buttonMode=true;
musicPlayBar_mc.scaleX=0;
musicStop_mc.addEventListener(MouseEvent.CLICK, doStop);
musicStart_mc.addEventListener(MouseEvent.CLICK, doStart);
function doStop(e:MouseEvent):void{
if(playsndCh){
playsndCh.stop();
playsndCh=null;
playsndTime=0;
musicStart_mc.gotoAndStop(1);
}
}
function doStart(e:MouseEvent):void{
if(playsndCh){
playsndTime=playsndCh.position;
playsndCh.stop();
playsndCh=null;
musicStart_mc.gotoAndStop(1);
}
else{
playsndCh = playsnd.play(playsndTime);
musicStart_mc.gotoAndStop(5);
playsndCh.addEventListener(Event.SOUND_COMPLETE, soundComplete);
}
}
function soundComplete(e:Event):void{
if(playsndCh){
playsndCh.stop();
playsndCh=null;
}
playsndTime=0;
musicPlayBar_mc.scaleX=0;
musicStart_mc.gotoAndStop(1);
}
this.addEventListener(Event.ENTER_FRAME, doPlayBar);
function doPlayBar (e:Event):void {
if(playsndCh){
musicPlayBar_mc.scaleX=playsndCh.position/playsnd.length;
}
}
首先先將musicPlayBar_mc的橫向延展度預設為0%
musicPlayBar_mc.scaleX=0;
這樣一進畫面他顯示的就是在0秒的時候
當然在整首歌播完也要讓它歸0
因此在soundComplete裡也要加
而播放bar因為要一直隨著音樂往右邊跑
所以要利用ENTER_FRAME來隨時進行更新
this.addEventListener(Event.ENTER_FRAME, doPlayBar);
而這邊運用的就是如果有在播放的話
橫向延展度的百分比就會等於 (目前播放頭秒數 / 總秒數)
目前播放頭所在位置就直用SoundChannel的position屬性即可
總長度則是音樂本身的屬性
因此是用playsnd這個物件本身的length屬性
相除之後就可以很容易算出scaleX了
function doPlayBar (e:Event):void {
if(playsndCh){
musicPlayBar_mc.scaleX=playsndCh.position/playsnd.length;
}
}
以上都算是比較簡單的作法
如果往後還要加上音量、時間軸拉Bar、甚至直接可以從外部載入的功能
就還需要更多的物件與類別
以後再詳細講
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
留言列表
創作 (11)