第一步:
------------------------------------------------------------------------------------------------------------
如今,以flashplayer播放的流媒體flv文件越來(lái)越流行(PS:不知道是國內技術(shù)太落后,還是其他原因,還算不上常見(jiàn)),我們可以使用Flash當中自帶的PlayBack組件來(lái)制作播放器。但是某些時(shí)候,PlayBack的Skin并不能滿(mǎn)足我們的需求,比如與網(wǎng)頁(yè)頁(yè)面風(fēng)格不相符或者不能很好的集成到我們的Flash站點(diǎn)當中,這時(shí)候我們就需要自己動(dòng)手打造自己的PlayBack了。好在,制作基本功能的flv播放器不是很難\^_^/。下面我們一步一步開(kāi)始吧。
首先我們打開(kāi)Flash的元件庫,如圖1-1所示,我們點(diǎn)擊紅色的部分新建一個(gè)視頻元件

圖1-1
新建一個(gè)圖層并命名為video,將視頻元件從元件庫拖到舞臺中并更改大小為320*240,給舞臺中的視頻元件命名實(shí)例名為:myVideo。如圖1-2

圖1-2
新建一個(gè)圖層命名為action,選擇第一幀按F9調出動(dòng)作面板,輸入以下代碼:
//創(chuàng )建一個(gè)名為nc的NetConnection對象
var nc:NetConnection = new NetConnection();
nc.connect(null);
//創(chuàng )建一個(gè)名為ns的NetStream對象,并將nc作為參數填寫(xiě)在括號內
var ns:NetStream = new NetStream(nc);
//創(chuàng )建一個(gè)名為myVideo的Video對象
var myVideo:Video;
//將myVideo播放的視頻指定為ns myVideo.attachVideo(ns);
//讓ns執行play()方法,括號內填寫(xiě)flv文件的路徑,這里我用的是本地路徑
ns.play(BT玩家.flv);
代碼上有不清楚或者相關(guān)的請查看幫助文檔。我們按Ctrl+Enter導出看看,這時(shí)候我們應該能正常播放flv影片了。PS:如果目前你手頭上沒(méi)有flv文件,不用擔心。到xunlei.com去下載.
第二步:
------------------------------------------------------------------------------------------------------------
新建screenshot、controlBar和control三個(gè)層,順序如圖1-3

圖1-3
把screenshot放在video層之下,導入screenShot.jpg,并將該元件放到screenshot層上與video的框架正好吻合。

圖screenShot.jpg
PS:對于影片截圖,放不放就根據需要啦。
選擇層controlBar,用矩形工具繪制一個(gè)圓角矩形,將其轉換成元件后,設置Alpha值為50%。如圖1-4

圖1-4
選擇層control,是用文字工具,選擇字體為Webdings(系統自帶的,別跟我說(shuō)沒(méi)有=。=),顏色為黑色,按下9打出特殊符號?,再按4打出另外一個(gè)特殊符號?,然后按;打出?。分別將這兩個(gè)符號轉換為按鈕元件rewind_button、play_button和pause_button,并定位好他們的位置如圖1-5

圖1-5
好,現在我們分別給上述幾個(gè)按鈕命名實(shí)例名為:rewind_btn、play_btn、pause_btn。選擇action層第一幀輸入一下代碼:
rewind_btn.onRelease = function(){
//NetSream.seek()方法用來(lái)指定流播放秒數,或者說(shuō)是播放位置。
ns.seek(0);
}
play_btn.onRelease = function(){
//播放or暫停
ns.pause();
}
pause_btn.onRelease = function(){
ns.pause();
}
好的,我們現在按Ctrl+Enter測試下影片。這里需要說(shuō)明一下,play_btn和pause_btn函數內的代碼都為ns.pause();,實(shí)際上pause()這個(gè)方法是實(shí)現了視頻流播放和暫停兩個(gè)功能,當播放時(shí)按下就為暫停,暫停狀態(tài)下按下就是繼續播放。這里是為照顧初學(xué)者的理解我才這么做的,追求完美的朋友可以自己做一個(gè)按鈕,實(shí)現播放符號和暫停符號的切換。
第三步:
------------------------------------------------------------------------------------------------------------
前兩部分我們學(xué)會(huì )了如何播放,控制視頻等等,現在需要什么呢?既然是flv是流媒體,為了是播放器顯得更人性化,現在還缺少一個(gè)Video加載的進(jìn)度條。還等什么,趕快一起動(dòng)手吧。首先,我們在層controlBar新建一個(gè)圖層名為:loader,將筆觸顏色設置為黑色,填充設置為白色,用矩形工具繪制一個(gè)進(jìn)度條如圖1-6

圖1-6然后我們選擇該矩形并按F8將其轉換成一個(gè)名為loader的影片剪輯,并且將場(chǎng)景中該元件的實(shí)例名也命名為loader,設置Alpha值為60%。雙擊進(jìn)入該影片剪輯的編輯狀態(tài),選擇中間白色的填充,按F8轉換名為loadBar的影片剪輯,并命名該元件的實(shí)例名為loadBar。然后返回場(chǎng)景,選擇action層的第一幀輸入以下代碼:
//和平時(shí)見(jiàn)到的swf loading都差不多,這里我就不多解釋了
var percent_Loaded:Number = 0;
loader.loadBar._xscale = percent_Loaded;
//創(chuàng )建一個(gè)videoStatus函數
function videoStatus(){
var videoTotal:Number = ns.bytesTotal;
var videoLoaded:Number = ns.bytesLoaded;
percent_Loaded = videoLoaded /videoTotal*100;
loader.loadBar._xscale = percent_Loaded;
}
//創(chuàng )建一個(gè)計時(shí)器,每隔100毫秒執行一次videoStatus函數
var videoInterval = setInterval(videoStatus,100);
第四步:
------------------------------------------------------------------------------------------------------------
從現在開(kāi)始,我們開(kāi)始進(jìn)入中級階段,制作Video的進(jìn)度滑塊。雙擊進(jìn)入元件loader的編輯狀態(tài),新建一層名為:scrub,,然后我們繪制一個(gè)滑塊如圖1-7

圖1-7
按F8將其轉換為元件,轉換的時(shí)候注意將注冊點(diǎn)選擇為中上,千萬(wàn)別選錯了哦。并將其實(shí)例名命名為:scrub。將其和loadBar對齊如圖1-8

圖1-8下面我們來(lái)制作播放進(jìn)度條,在scrub層上新建一個(gè)圖層名為playBar,將層loadBar上的元件loadBar選中,按下Ctrl+C復制,然后選擇層playBar,按Ctrl+Shift+V原位粘貼,更改其實(shí)例名為playBar,并將其屬性設置如圖1-9

圖1-9
返回主場(chǎng)景,選擇action層的第一幀輸入以下代碼:(注意更新的代碼是紅色,舊的代碼是黑色)
var percent_Loaded:Number = 0;
loader.loadBar._xscale = percent_Loaded;
loader.playBar._xscale = 0;
var duration:Number;
//這里可以查看幫助文檔中NetStream.onMetaData 處理函數
//duration獲取影片的長(cháng)度
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);
好,現在我們Ctrl+Enter測試下影片,怎么樣,滑塊跟隨著(zhù)播放時(shí)間的流逝在移動(dòng)了吧。
第五步:
------------------------------------------------------------------------------------------------------------
我們的Video看過(guò)一次了,這時(shí)候我們還想要再看其中的某一部分,我們總不能從頭播放吧。因此我們現在舊來(lái)實(shí)現拖動(dòng)播放滑塊,實(shí)現Video自由的播放。繼續寫(xiě)代碼^_^ 在場(chǎng)景中action層第一幀添加以下代碼:
var scrubInterval;
loader.scrub.onPress = function(){
//當按下滑塊,清除videoInterval計時(shí)器
clearInterval(videoInterval);
//設置scrubInterval計時(shí)器
scrubInterval = setInterval(scrubit,10);
//設置滑塊的滑動(dòng)范圍this.startDrag(false,0,this._y,loader.loadBar._width,this._y);
}
loader.scrub.onRelease = loader.scrub.onReleaseOutside = function(){
//當釋放滑塊,清除csrubInterval計時(shí)器 clearInterval(scrubInterval);
//恢復videoInterval計時(shí)器
videoInterval = setInterval(videoStatus,100);
this.stopDrag();
}
//創(chuàng )建scrubit方法
function scrubit(){
//滑塊所指的播放seek的秒數等于滑塊的x坐標除以loadBar的寬度,再乘以總秒數
ns.seek(Math.floor((loader.scrub._x / loader.loadBar._width)*duration));
//讓playBar的縮放跟隨滑塊的位置變化而變化
loader.playBar._xscale = loader.scrub._x / loader.loadBar._width *100;
}
好了,現在我們按Ctrl+Enter測試下影片,是不是發(fā)現與PlayBack越來(lái)越像了^_^
第六步:
------------------------------------------------------------------------------------------------------------
下面我們?yōu)镻layer添加聲音的控制。首先,我們在control層上新建一層名為sound,選擇文字工具,使用Webdings字體,按shift+W打出?符號,選擇修改,變形,水平翻轉,按F8將其轉換為影片剪輯。雙擊進(jìn)入編輯狀態(tài),在第二幀處插入關(guān)鍵幀。我們在第二幀上的?符號上畫(huà)一條斜線(xiàn)如圖1-10

圖1-10 如圖1-10,我們在第一幀上寫(xiě)上代碼:
stop();
var vol = 100;
第二幀上寫(xiě)上代碼:
vol = 0;
返回場(chǎng)景,將該元件的實(shí)例名命名為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測試一下。這里需要說(shuō)明一下,其實(shí)只建立一個(gè)Sound對象就可以控制聲音了,但是如果不指定是誰(shuí)的聲音時(shí),他控制的是根影片的音量,因此這里將ns中的聲音引入到vSound影片剪輯當中,然后指定video_sound對象控制的是vSound影片剪輯當中的聲音。
第七步:
------------------------------------------------------------------------------------------------------------
我們的播放器總算有模有樣了,不過(guò)還缺少樣東西。大家在播放流媒體的時(shí)候,是不是常常會(huì )見(jiàn)到緩沖?沒(méi)錯,就是緩沖。還等什么,趕快動(dòng)手。首先,我們在層video和controlBar之間新建一層并命名為buffer,然后用矩形在舞臺上繪制一個(gè)320*240的黑色矩形,將其和video的位置對齊,正好能擋著(zhù)video。然后我們按F8將其轉換給影片剪輯,并命名其實(shí)例名為buffer_mc。雙擊進(jìn)入編輯狀態(tài),新建一層名為text,用文字工具輸入文字:視頻緩沖中。并將其轉換為元件創(chuàng )建一個(gè)Alpha漸變的動(dòng)畫(huà),如圖1-11:

圖1-11
返回場(chǎng)景,選擇層action,輸入一下代碼:
//設置ns緩沖時(shí)間為15秒
ns.setBufferTime(15);
//創(chuàng )建ns的onStatus處理函數,詳細請查看幫助文檔
ns.onStatus = function(info:Object){
//當緩沖為滿(mǎn)的時(shí)候,buffer_mc隱藏
if(info.code == "NetStream.Buffer.Full"){
buffer_mc._visible = false;
}
//當緩沖空的時(shí)候,buffer_mc顯示
if(info.code == "NetStream.Buffer.Empty"){
buffer_mc._visible = true;
}
//當視頻播放結束時(shí),重新播放
if(info.code == "NetStream.Play.Stop"){
ns.seek(0);
}
}
OK,導出測試一下。
第八步:
------------------------------------------------------------------------------------------------------------
下面我們來(lái)給播放器做個(gè)右鍵菜單(;^ ^)首先,在action層第一幀輸入一下代碼:
var myMenu:ContextMenu = new ContextMenu();
myMenu.hideBuiltInItems();
這里我們自定義了一個(gè)myMenu為新的ContexMenu對象,然后我們使用hideBuiltInItems()方法將“設置”和“版權聲明”以外的選項都隱藏起來(lái)。導出測試一下。 然后我們再輸入以下代碼:
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 Flvfiles",selectIt,true);
var i5:ContextMenuItem = new ContextMenuItem("Copyright 2006Sailon",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,并在該構造函數中填入相應的參數,具體的參數說(shuō)明可以查看幫助文檔^_^然后我們將myMenu的屬性coustomItems(數組)賦給i1-i5。 好,現在我們定義好了菜單,下面我們給所對應菜單寫(xiě)上方法,代碼如下:
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();
}
這里需要說(shuō)明一下,selectIt()方法在選擇flv文件后會(huì )觸發(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");
這里有個(gè)小小的遺憾目前FileReference這個(gè)類(lèi)還不支持讀取目錄的功能,所以我們所需要選擇的flv文件必須和swf文件放在同一個(gè)目錄下才可以正常播放。 OK,我們導出測試一下。最后,本文在這里只是拋磚引玉,查閱并熟悉幫助文檔里的函數方法,希望大家還可以創(chuàng )造出功能更強大更好玩的播放器來(lái)。
聯(lián)系客服