相信許多閃客朋友都想過在自己的作品中加上類似于播放器上的控制影片播放的功能,比如:暫停、播放、快進、快退、進度條等等,這樣做不僅方便瀏覽者觀看,而且也現(xiàn)顯得我等閃技之"神出鬼沒"(嘻嘻)??瓷先崿F(xiàn)起來好象很麻煩,其實只須加上一些簡單的腳本語句,即可讓你的作品擁有如同RealPlayer、Windows Media Player等播放器上的控制功能?。ㄏ旅娴睦影魳罚蠹s35k,請稍候)
圖1
以上是仿照Windows Media Player面板界面做的DEMO,它除了有基本的控制播放功能之外,還有回放、快進、快退、影片控制進度條、音量控制等功能。怎么樣,心動了吧?跟我一起來控制你的flash影片吧!(文章末尾提供.fla文件下載學(xué)習(xí))
首先,為了演示方便我們先得制作一段影片,很簡單,在主時間軸添加一些東東就可以了。我在這里做了一段動畫和音樂,它們的作用是用來替代影片的內(nèi)容。
1. 把默認(rèn)圖層命名為"音樂",Ctrl+R導(dǎo)入一個聲音文件,然后拖到這一層按聲音的長度設(shè)定幀的長度,在聲音面板上把它設(shè)為"數(shù)據(jù)流"。
2.新建個圖層命名為"動畫",按"音樂"層幀的長度做一段動畫,可隨意。俺做的就是個簡單的從圓到矩形的Shape形變。
接下來主角要出場了,我們開始做影片控制部分。這一部分要把它們?nèi)坎考拥揭粋€MC(Movie clip)當(dāng)中,這樣不僅便于"管理",而且當(dāng)你想要在別的作品加入控制功能時只要把這個總MC加入即可!另外這部分我是仿照Windows Media Player界面做的,你也可以把它做的更酷、更有創(chuàng)意和個性。
廢話少說,新建一個MC,命名為"控制面板",Ctrl+I打開實例面板,在名稱欄輸入:all。注意以后的所有東東都要添加在這個MC當(dāng)中。
1.默認(rèn)圖層命名為"背景",做個如圖2的背景。那個小喇叭是俺從Windows Media Player上抓來的,暫時借用一下。
圖2
2.新建個圖層命名為"動態(tài)文本",添加兩個動態(tài)文本框,變量名分別為"nowframe"和"allframe",它們是用來顯示當(dāng)前幀和總幀數(shù)的,以后會用得到。
3.新建一個圖層命名為"按鈕"。下面開始做控制影片播放的按鈕,一共要做八個,(如圖3)把他們依次命名為 "播放"、"暫停"、"停止"、"倒放"、"開始"、"快退"、"快進"、"結(jié)束",嫌麻煩的話flash5的共享圖庫里有的是漂亮的按鈕當(dāng)然也可以用它們來代替。把做完的按鈕加到"按鈕"這一層,排列好它們的位置。
圖3
接著開始對每一個按鈕添加腳本,首先要依次為按鈕"播放"、"暫停"、"停止"、"開始"、"結(jié)束"添加腳本。
按鈕 "播放" "暫停" "停止" 腳本 on (release) {
_root.play ();
} on (release) { _root.stop();
} on (release) {
root.stop(); _root.gotoandstop(1);
} 按鈕 "開始" "結(jié)束" 腳本 on (release) {
root.gotoandstop(1);
} on (release)
至于"倒放"、"快退"、"快進"就不能簡單的在按鈕添加腳本而達到目的,它們需要調(diào)用一個MC才能達到控制影片的目的。
4.新建一個MC,一共要用到7幀,依次為這7個關(guān)鍵幀添加腳本。
在第一幀添加:
stop ();
speed=4;//此為"快退"、"快進"的速度值,你可以調(diào)節(jié)它來控制快進、快退的速度
第2幀://"倒放"所轉(zhuǎn)到幀
_root.prevFrame ();
第3幀:
gotoandplay(2); //與第2幀形成循環(huán)
第4幀://"快退"所轉(zhuǎn)到幀
for (i=0; i<=speed; i++) {
_root.prevFrame();
}
第5幀:
gotoAndPlay (4); //與第4幀形成循環(huán)
第6幀://"快進"所轉(zhuǎn)到幀
for (i=0; i<=speed; i++) {
_root.nextFrame();
}
第7幀:
gotoAndPlay (6); //與第6幀形成循環(huán)
5.把這個MC拖到"按鈕"層,Ctrl+I打開實例面板,在名稱欄輸入:"kz"。接下來只要在"倒放"、"快退"、"快進"上添加轉(zhuǎn)到相應(yīng)幀的腳本即可。
按鈕 "倒放" "快退" "快進" 腳本 on (release) {
kz.gotoandplay(2);
} on (release) on (release) { kz.gotoandplay(6);
}
最后還須注意的是在按下"倒放"、"快退"、"快進"這三個按鈕后"kz"會陷入循環(huán),這樣再按其他按鈕就失靈了,所以還要為"播放"、"暫停"、"停止"、"開始"、"結(jié)束"這些按鈕添加一句腳本:"kz.stop();"以停止"kz"的循環(huán)。呵呵~~,如果你完成了上面的部分大功已經(jīng)告成了一半了,先Ctrl+Enter調(diào)試一下吧!
怎么樣,上面的部分可以正常工作了吧?接下來這一部分我們來制作影片進度條和音量控制條。
這一部分我們來制作影片進度條和音量控制條。
先從簡單的音量控制條部分開始做起,它需要一個可拖動的MC游標(biāo)、一個graphics的背景條和一個包含它倆的MC。
1.新建一個名為"音量游標(biāo)"的MC,在默認(rèn)層做一個如圖4的矩形。然后再新建一個名為"音量背景條"的graphics,做個如圖5的三角行。
圖4 圖5
2.新建一個名為"音量控制"的MC,把"音量背景條"拖到這一層,然后新建一個圖層,再把"音量游標(biāo)"這個MC拖到這一層,調(diào)整它們的位置(如圖6)。
圖6
完成上面的步驟后開始為"音量游標(biāo)"這個MC添加腳本,在"音量游標(biāo)"上按右鍵選ACTION,添加如下腳本:
onClipEvent (enterFrame) {
mex= getProperty(this, _x); //取得X軸坐標(biāo)值
vol.setvolume(mex/0.59); //設(shè)定音量
}
onClipEvent (load) {
vol= new Sound(); //設(shè)定實例
}
onClipEvent (mouseDown) {
if (this.hitTest( _root._xmouse,_root._ymouse)) {
startDrag (this, false, 0, 0, 59, 0);
}
}
onClipEvent (mouseUp) {
stopDrag ();
}
需要解釋的是:語句 vol.setvolume(mex/0.59);中的0.59是"音量背景條"的寬度減去"音量游標(biāo)"的寬度(也就是"音量游標(biāo)"可被拖動的長度)再除100所得(音量值為0--100),各位可以根據(jù)你做出來的具體情況計算。
在"控制面板"這個MC上新建個圖層名為"音量",把做好的"音量控制"MC拖到這一層,調(diào)整好他的位置(圖7)。
圖7
最后我們來制作影片進度條,它的制作與音量控制條的制作大同小異也是需要一個MC做為游標(biāo),一個graphics的背景條和一個包含它倆的MC。有了上面音量控制條的經(jīng)驗制作起來就很簡單了。
1.新建一個名為"影片游標(biāo)"的MC,在默認(rèn)層做一個如圖8的圖形。再新建一個名為"影片背景條"的graphics,做個如圖9的長條矩形。
圖8 圖9
2.再新建一個名為"影片進度條"的MC,同樣把"影片背景條"加在默認(rèn)層。新建一個圖層,把"影片游標(biāo)"加到這一層,調(diào)整它們的位置(圖10)。
圖10
為"影片游標(biāo)"添加如下腳本:
onClipEvent (load) {
drag = new Boolean();
drag = false;
cang = 495/_root._totalframes; // 495 為影片背景條減影片游標(biāo)所得,你可根據(jù)自己情況計算得出
}
onClipEvent (mouseDown) {
drag = true;
if (this.hitTest(_root._xmouse, _root._ymouse)) {
startDrag (this, false, 0, 0, 495, 0);
}
}
onClipEvent (mouseUp) {
drag = false;
stopDrag ();
}
onClipEvent (enterFrame) {
_root.all.allframe=_root._totalframes; //在動態(tài)文本框顯示總幀數(shù)
_root.all.nowframe=_root._currentframe; //在動態(tài)文本框顯示當(dāng)前幀
if ((drag == true) && (this.hitTest(_root._xmouse, _root._ymouse))) {
_root.all.kz.stop();
xvernier = getProperty(this, _x); //取得游標(biāo)的X軸坐標(biāo)值
_root.gotoandstop(int(xvernier/cang)); //經(jīng)過比例運算轉(zhuǎn)到相應(yīng)幀
} else if (_root._currentframe == 1) {
setProperty (this, _x, 0);
} else {
setProperty (this, _x, _root._currentframe*cang); //根據(jù)當(dāng)前幀控制游標(biāo)位置
}
}
3.在MC"控制面板"上新建一名為"進度條"的層,把"影片控制條"拖到這一層,調(diào)整它的位置(如圖11)。
圖11
好了,到這里我們的"自制flash播放器"就基本完成了。最后提醒一點:如果不希望影片一開始就播放,可以在"控制面板"這個MC中加入 onClipEvent (load) {_root.stop ();} 這個腳本。
源文件下載學(xué)習(xí)