- Introduction
- Audio Player (Basic)
- Version: Flash MX or higher
- Actionscript: 2.0
- Source: Download
- Audio Player (Advanced)
- Version: Flash MX or higher
- Actionscript: 2.0
- Source: Download
接觸Flash好多年一直都沒有時間把所學寫成文件，這裡就先介紹一個類似C語言的Hello World!經典範例-Audio Player，這裡會用兩個範例來解說如何在Flash底下實現Audio Player，在進入主題之前讀者必須要有基礎的Flash設計能力才能了解範例內容。
設計環境如下：
程式主架構圖如下：
版面配置如下：
由於這是一個非常簡單的例子，且筆者已經在兩年前發表過一篇關於startpage的設計文章，其中就有整合到flash music player，詳細部份可以參考Building Your Own Homepage Part-III
設計環境如下：
本程式除了結合基本的音樂播放功能之外，我還透過xml的結構來實現playlist的功能。
程式主架構圖如下：
程式在播放音樂時會從原本的單純讀取音樂的步驟變成如上圖的多步驟流程，猶如先前所提及的，當我們按下播放的按鈕時，程式會先向Server（mymusic.com）上尋求播放清單，程式解讀完播放清單上的曲目訊息後，再從這些音樂曲目選擇要播放的音樂，最後才向Server取得音樂會回傳到我們的網頁播放程式上。
版面設計如下：
整個播放程式的功能也提昇了許多，除了增加音量控制之外，還有播放進度、控制按鈕以及歌名顯示。僅用了兩個圖層（action,element），且將這兩個圖層包在一個MovieClip(Music Player)，這樣的設計方便移植到其他專案上，至於各元件詳細的實體名稱請自行下載檔案參閱。
在ActionScript的部份主要講解xml的部份，程式一開始要先初始化xml物件：
我的xml檔案名稱為sndlist.xml，而核心的xml資訊讀取程式碼如下：
直接看程式碼是有點難懂，所以我把我的XML結構轉成樹狀圖形結構：
也許透過這樣的圖形化結構可以讓你更清楚的知道xml結構在flash裡要如何讀取。再我的XML程式讀取過程中，除了一一的把歌名和路徑分別存取到對應的變數之外，也在讀取後透過簡單的運算可以計算出總共有幾筆音樂，如此我的程式只需要修改sndlist.xml就可以增減曲目，而不必重新修正actionscript發佈新的swf。
聲音控制的程式碼如下，使用了一個mouse listener來監控滑鼠的x座標位置來控制音量
而進度顯示的程式碼跟音量控制有異曲同工之妙，也是取得滑鼠座標位置在轉化成百分比來控制音樂播放的位置：
由於測試環境的限制以及Actionscript2.0本身功能的問題，筆者就不把demo放上來（請有興趣的人自行發佈測試），值得一提的是Music Player在進度的顯示上有一些問題，原因比較有可能是來自於Flash程式本身的錯誤，有時間的話我再重新以ActionScript 3.0撰寫然後放出來給大家參考啦!
No comments:
Post a Comment