製作自已的 flash 影片播放面版

在flash cs3裡要自已做一個播放面版其實是很簡單的事，雖然在flash cs3裡有一堆內建的面版可以選擇，但真正要拿來做商業應用大家應都會自已再重做一個，所以接下來就描述一下怎麼去修改出一個屬於自已的播放面版。

1.首先做一個播放外框、播放(暫停)按鈕、音效按鈕，如下圖

2.接下來我們的video跟播放bar都要用flash cs3裡面的內建組件 FLVPlayback與SeekBar來完成。



3.拉出FLVPlayback組件與SeekBar組件到場景上，在FLVPlayback組件參數設定裡把FLVPlayback的skin設定成「無」，因為我們不用flash cs3內建的播放面版。





4.接下來就是修改組件，把SeekBar組件修改成自已的風格。在SeekBar上按滑鼠右鍵->編輯，會進到SeekBar組件裡，裡面有二格影格如下圖，圖層說明如下：

script圖層
this.handleLinkageID = "SeekBarHandle"; //設定播放頭
this.handleLeftMargin = 2; //SeekBarHandle左偏移(不用動)
this.handleRightMargin = 2; //SeekBarHandle右偏移(不用動)
this.handleY = 11;//SeekBarHandle上下偏移量
assets圖層：SeekBarHandle(影片播放的磁頭)
progress圖層：播放bar
outline圖層：播放bar的外框



修改progress跟assets圖層裡的元件如下圖所示。可看到修改assets裡的SeekBarHandle後位置有一點下面，所以這時要調整scripts圖層裡的this.handleY 改成 this.handleY=5，這樣播放的紅色磁頭就會在中間。



5.接下來就要下指令去控制影片播放了場景上的元件分別給myVideo、player_mc、sound_mc、mySeekBar的名稱，然後加入底下程式碼。

import fl.video.FLVPlayback;
import fl.video.VideoEvent;

var sound:SoundTransform;//sound
sound = myVideo.soundTransform;
mySeekBar.width = 200;
myVideo.seekBar = mySeekBar;
myVideo.source="test.flv";//影片位置

/*影片播完*/
myVideo.addEventListener(VideoEvent.COMPLETE, goCOMPLETE);
function goCOMPLETE(e:VideoEvent):void {
myVideo.seek(0);
player_mc.gotoAndStop(2);
}

/*sound_mc*/
sound_mc.buttonMode = true;
sound_mc.addEventListener(MouseEvent.CLICK, soundClick);
function soundClick(evt:MouseEvent):void
{
var tmp:MovieClip = (evt.target as MovieClip);
if( tmp.currentFrame == 1 )
{
sound.volume = 0;
myVideo.soundTransform = sound;
tmp.gotoAndStop(2);
}else{
sound.volume = 1;
myVideo.soundTransform = sound;
tmp.gotoAndStop(1);
}
}

/*player_mc*/
player_mc.buttonMode = true;
player_mc.addEventListener(MouseEvent.CLICK, playerClick);
function playerClick(evt:MouseEvent):void
{
var tmp:MovieClip = (evt.target as MovieClip);
if( tmp.currentFrame == 1 )
{
myVideo.pause();
tmp.gotoAndStop(2);
}else{
myVideo.play();
tmp.gotoAndStop(1);
}
}

stop();

6.這樣就完成一個flv flash player了，其實完成這樣的flash player不難，把播放外框跟按鈕整修的漂亮一點就好了 ^^

demo　　download