第一步:
------------------------------------------------------------------------------------------------------------
如今，以flash
player播放的流媒體flv文件越來越流行（PS：不知道是國內技術太落后，還是其他原因，還算不上常見），我們可以使用Flash當中自帶的
PlayBack組件來制作播放器。但是某些時候，PlayBack的Skin并不能滿足我們的需求，比如與網(wǎng)頁頁面風格不相符或者不能很好的集成到我們
的Flash站點當中，這時候我們就需要自己動手打造自己的PlayBack了。好在，制作基本功能的flv播放器不是很難\^_^/。下面我們一步一步
開始吧。
首先我們打開Flash的元件庫，如圖1－1所示，我們點擊紅色的部分新建一個視頻元件
圖1－1
新建一個圖層并命名為video，將視頻元件從元件庫拖到舞臺中并更改大小為320*240，給舞臺中的視頻元件命名實例名為：myVideo。如圖
1－2
圖1－2
新建一個圖層命名為action，選擇第一幀按F9調出動作面板，輸入以下代碼：
//創(chuàng)建一個名為nc的NetConnection對象
var nc:NetConnection = new NetConnection();
nc.connect(null);
//創(chuàng)建一個名為ns的NetStream對象，并將nc作為參數(shù)填寫在括號內
var ns:NetStream = new NetStream(nc);
//創(chuàng)建一個名為myVideo的Video對象
var myVideo:Video;
//將myVideo播放的視頻指定為ns myVideo.attachVideo(ns);
//讓ns執(zhí)行play()方法，括號內填寫flv文件的路徑，這里我用的是本地路徑
ns.play(BT玩家.flv);
代碼上有不清楚或者相關的請查看幫助文檔。我們按Ctrl+Enter導出看看，這時候我們應該能正常播放flv影片了。
PS：如果目前你手頭上沒有flv文件，不用擔心。到xunlei.com去下載.
第二步:
------------------------------------------------------------------------------------------------------------
新建screenshot、controlBar和control三個層，順序如圖1-3
圖1-3
把screenshot放在video層之下，導入screenShot.jpg，并將該元件放到screenshot層上與video的框架正好吻合。
圖screenShot.jpg
PS：對于影片截圖，放不放就根據(jù)需要啦。
選擇層controlBar，用矩形工具繪制一個圓角矩形，將其轉換成元件后，設置Alpha值為50％。如圖1-4
圖1-4
選擇層control，是用文字工具，選擇字體為Webdings（系統(tǒng)自帶的，別跟我說沒有＝。＝），顏色為黑色，按下9打出特殊符號?，再按4打出另
外一個特殊符號?，然后按；打出?。分別將這兩個符號轉換為按鈕元件rewind_button、play_button和pause_button，并
定位好他們的位置如圖1-5
圖1-5
好，現(xiàn)在我們分別給上述幾個按鈕命名實例名為：rewind_btn、play_btn、pause_btn。選擇action層第一幀輸入一下代碼：
rewind_btn.onRelease = function(){
//NetSream.seek()方法用來指定流播放秒數(shù)，或者說是播放位置。
ns.seek(0);
}
play_btn.onRelease = function(){
//播放or暫停
ns.pause();
}
pause_btn.onRelease = function(){
ns.pause();
}
好的，我們現(xiàn)在按Ctrl+Enter測試下影片。這里需要說明一下，play_btn和pause_btn函數(shù)內的代碼都為
ns.pause();，實
際上pause()這個方法是實現(xiàn)了視頻流播放和暫停兩個功能，當播放時按下就為暫停，暫停狀態(tài)下按下就是繼續(xù)播放。這里是為照顧初學者的理解我才這么做
的，追求完美的朋友可以自己做一個按鈕，實現(xiàn)播放符號和暫停符號的切換。
第三步:
------------------------------------------------------------------------------------------------------------
前兩部分我們學會了如何播放，控制視頻等等，現(xiàn)在需要什么呢？既然是flv是流媒體，為了是播放器顯得更人性化，現(xiàn)在還缺少一個Video加載的進
度條。還等什么，趕快一起動手吧。首先，我們在層controlBar新建一個圖層名為：loader，將筆觸顏色設置為黑色，填充設置為白色，用矩形工
具繪制一個進度條如圖1-6
圖1-6
然后我們選擇該矩形并按F8將其轉換成一個名為loader的影片剪輯，并且將場景中該元件的實例名也命名為loader，設置Alpha值為60％。雙
擊進入該影片剪輯的編輯狀態(tài)，選擇中間白色的填充，按F8轉換名為loadBar的影片剪輯，并命名該元件的實例名為loadBar。
然后返回場景，選擇action層的第一幀輸入以下代碼：
//和平時見到的swf loading都差不多，這里我就不多解釋了
var percent_Loaded:Number = 0;
loader.loadBar._xscale = percent_Loaded;
//創(chuàng)建一個videoStatus函數(shù)
function videoStatus(){
var videoTotal:Number = ns.bytesTotal;
var videoLoaded:Number = ns.bytesLoaded;
percent_Loaded = videoLoaded /videoTotal*100;
loader.loadBar._xscale = percent_Loaded;
}
//創(chuàng)建一個計時器，每隔100毫秒執(zhí)行一次videoStatus函數(shù)
var videoInterval = setInterval(videoStatus,100);
第四步:
------------------------------------------------------------------------------------------------------------
從現(xiàn)在開始，我們開始進入中級階段，制作Video的進度滑塊。雙擊進入元件loader的編輯狀態(tài)，新建一層名為：scrub，，然后我們繪制一
個滑塊如圖1-7
圖1-7
按F8將其轉換為元件，轉換的時候注意將注冊點選擇為中上，千萬別選錯了哦。并將其實例名命名為：scrub。將其和loadBar對齊如圖1-8
圖1-8
下面我們來制作播放進度條，在scrub層上新建一個圖層名為playBar，將層loadBar上的元件loadBar選中，按下Ctrl+C復制，然
后選擇層playBar，按Ctrl+Shift+V原位粘貼，更改其實例名為playBar，并將其屬性設置如圖1-9
圖1-9
返回主場景，選擇action層的第一幀輸入以下代碼：（注意更新的代碼是紅色，舊的代碼是黑色）
var percent_Loaded:Number = 0;
loader.loadBar._xscale = percent_Loaded;
loader.playBar._xscale = 0;
var duration:Number;
//這里可以查看幫助文檔中NetStream.onMetaData 處理函數(shù)
//duration獲取影片的長度
ns.onMetaData = function(obj:Object){
duration = obj.duration;
};
function videoStatus(){
var videoTotal:Number = ns.bytesTotal;
var videoLoaded:Number = ns.bytesLoaded;
percent_Loaded = videoLoaded /videoTotal*100;
loader.loadBar._xscale = percent_Loaded;
loader.scrub._x = ns.time / percent_Loaded * loader.loadBar._width;
loader.playBar._xscale = ns.time / percent_Loaded *100;
}
var videoInterval = setInterval(videoStatus,100);
好，現(xiàn)在我們Ctrl+Enter測試下影片，怎么樣，滑塊跟隨著播放時間的流逝在移動了吧。
第五步:
------------------------------------------------------------------------------------------------------------
我們的Video看過一次了，這時候我們還想要再看其中的某一部分，我們總不能從頭播放吧。因此我們現(xiàn)在舊來實現(xiàn)拖動播放滑塊，實現(xiàn)Video自由
的播放。繼續(xù)寫代碼^_^ 在場景中action層第一幀添加以下代碼：
var scrubInterval;
loader.scrub.onPress = function(){
//當按下滑塊，清除videoInterval計時器
clearInterval(videoInterval);
//設置scrubInterval計時器
scrubInterval = setInterval(scrubit,10);
//設置滑塊的滑動范圍
this.startDrag(false,0,this._y,loader.loadBar._width,this._y);
}
loader.scrub.onRelease = loader.scrub.onReleaseOutside = function(){
//當釋放滑塊，清除csrubInterval計時器 clearInterval(scrubInterval);
//恢復videoInterval計時器
videoInterval = setInterval(videoStatus,100);
this.stopDrag();
}
//創(chuàng)建scrubit方法
function scrubit(){
//滑塊所指的播放seek的秒數(shù)等于滑塊的x坐標除以loadBar的寬度，再乘以總秒數(shù)
ns.seek(Math.floor((loader.scrub._x / loader.loadBar._width)*duration));
//讓playBar的縮放跟隨滑塊的位置變化而變化
loader.playBar._xscale = loader.scrub._x / loader.loadBar._width *100;
}
好了，現(xiàn)在我們按Ctrl+Enter測試下影片，是不是發(fā)現(xiàn)與PlayBack越來越像了^_^
第六步:
------------------------------------------------------------------------------------------------------------
下面我們?yōu)镻layer添加聲音的控制。首先，我們在control層上新建一層名為sound，選擇文字工具，使用Webdings字體，按
shift+W打出?符號，選擇修改，變形，水平翻轉，按F8將其轉換為影片剪輯。雙擊進入編輯狀態(tài)，在第二幀處插入關鍵幀。我們在第二幀上的?符號上畫
一條斜線如圖1-10
圖1-10 如圖1－10，我們在第一幀上寫上代碼：
stop();
var vol = 100;
第二幀上寫上代碼：
vol = 0;
返回場景，將該元件的實例名命名為vSound，選擇層action的第一幀，輸入以下代碼：
vSound.attachAudio(ns);
var video_sound:Sound = new Sound(vSound);
vSound.onRelease = function(){
if(this.vol == 100){
video_sound.setVolume(0);
this.gotoAndStop(2);
}else{
video_sound.setVolume(100);
this.gotoAndStop(1);
}
}
Ctrl+Enter測試一下。這里需要說明一下，其實只建立一個Sound對象就可以控制聲音了，但是如果不指定是誰的聲音時，他控制的是根影片的音
量，因此這里將ns中的聲音引入到vSound影片剪輯當中，然后指定video_sound對象控制的是vSound影片剪輯當中的聲音。
第七步:
------------------------------------------------------------------------------------------------------------
我們的播放器總算有模有樣了，不過還缺少樣東西。大家在播放流媒體的時候，是不是常常會見到緩沖？沒錯，就是緩沖。還等什么，趕快動手。
首先，我們在層video和controlBar之間新建一層并命名為buffer，然后用矩形在舞臺上繪制一個320*240的黑色矩形，將其和
video的位置對齊，正好能擋著video。然后我們按F8將其轉換給影片剪輯，并命名其實例名為buffer_mc。雙擊進入編輯狀態(tài)，新建一層名為
text，用文字工具輸入文字：視頻緩沖中。并將其轉換為元件創(chuàng)建一個Alpha漸變的動畫，如圖1-11：
圖1-11
返回場景，選擇層action，輸入一下代碼：
//設置ns緩沖時間為15秒
ns.setBufferTime(15);
//創(chuàng)建ns的onStatus處理函數(shù)，詳細請查看幫助文檔
ns.onStatus = function(info:Object){
//當緩沖為滿的時候,buffer_mc隱藏
if(info.code == "NetStream.Buffer.Full"){
buffer_mc._visible = false;
}
//當緩沖空的時候，buffer_mc顯示
if(info.code == "NetStream.Buffer.Empty"){
buffer_mc._visible = true;
}
//當視頻播放結束時，重新播放
if(info.code == "NetStream.Play.Stop"){
ns.seek(0);
}
}
OK，導出測試一下。
第八步:
------------------------------------------------------------------------------------------------------------
下面我們來給播放器做個右鍵菜單（；^ ^）首先，在action層第一幀輸入一下代碼：
var myMenu:ContextMenu = new ContextMenu();
myMenu.hideBuiltInItems();
這里我們自定義了一個myMenu為新的ContexMenu對象，然后我們使用hideBuiltInItems()方法將“設置”和“版權聲明”以外
的選項都隱藏起來。導出測試一下。 然后我們再輸入以下代碼：
var i1:ContextMenuItem = new ContextMenuItem("::::: Video Controls
:::::",trace);
var i2:ContextMenuItem = new ContextMenuItem("Play /
Pause",pauseIt,true);
var i3:ContextMenuItem = new ContextMenuItem("Replay",replayIt);
var i4:ContextMenuItem = new ContextMenuItem("Select a Flv
files",selectIt,true);
var i5:ContextMenuItem = new ContextMenuItem("Copyright 2006
Sailon",trace,true);
myMenu.customItems[0] = i1;
myMenu.customItems[1] = i2;
myMenu.customItems[2] = i3;
myMenu.customItems[3] = i4;
myMenu.customItems[4] = i5;
定義i1－i5為新的ContexMenuItem，并在該構造函數(shù)中填入相應的參數(shù)，具體的參數(shù)說明可以查看幫助文檔^_^
然后我們將myMenu的屬性coustomItems（數(shù)組）賦給i1－i5。 好，現(xiàn)在我們定義好了菜單，下面我們給所對應菜單寫上方法，代碼如下：
import flash.net.FileReference;
//播放暫停方法
function pauseIt() {
ns.pause();
}
//重放方法
function replayIt() {
ns.seek(0);
}
//選擇Flv方法 function selectIt(){
var listener:Object = new Object();
listener.onSelect = function(file:FileReference):Void {
trace("Opened " + file.name); playVideo(file.name);
}
listener.onCancel = function(file:FileReference):Void {
trace("User cancelled");
}
var fileRef:FileReference = new FileReference();
fileRef.addListener(listener);
fileRef.browse();
}
這里需要說明一下，selectIt()方法在選擇flv文件后會觸發(fā)playVideo()方法，因此我們這里還需要修改步驟一的代碼。將步驟一的代碼
修改如下：
var nc:NetConnection = new NetConnection();
nc.connect(null);
var ns:NetStream = new NetStream(nc);
var myVideo:Video;
myVideo.attachVideo(ns);
function playVideo(video){
ns.play(video);
trace("playVido:" + video);
}
playVideo("BT玩家.flv");
這里有個小小的遺憾目前FileReference這個類還不支持讀取目錄的功能，所以我們所需要選擇的flv文件必須和swf文件放在同一個目錄下才可
以正常播放。 OK，我們導出測試一下。
最后，本文在這里只是拋磚引玉，查閱并熟悉幫助文檔里的函數(shù)方法，希望大家還可以創(chuàng)造出功能更強大更好玩的播放器來。
