個別設定 FLV 播放自訂 UI 組件的外觀元素

FLV 播放自訂 UI 組件可讓您自訂 FLV 檔中 FLVPlayback 控制項的外觀,並且讓您能夠在預覽網頁時查看結果。不過,這些組件並非設計成可供縮放。您應將影片片段及其內容編輯成特定大小。因此,最好的方式通常是將「舞台」上的 FLVPlayback 組件調整成您所需要的大小,並將 scaleMode 設定為 exactFit

如果要開始作業,只需從「組件」面板拖曳想要的 FLV 播放自訂 UI 組件,並將這些組件放在「舞台」上所需的位置,然後為每個組件提供實體名稱。

這些組件不需要使用任何 ActionScript 就可以運作。如果將它們放到與 FLVPlayback 組件相同的時間軸和影格,而沒有設定組件的外觀元素,FLVPlayback 組件將會自動與它們連接。如果「舞台」上有多個 FLVPlayback 組件,或是自訂控制項和 FLVPlayback 實體不在相同的時間軸上,就需要使用「動作」。

將組件放在「舞台」之後,您可以依照編輯其它任何元件的方式編輯組件。一旦您開啟組件,將會看到每個組件的設定都稍有不同。

Button 組件

各種按鈕組件具有類似的結構。按鈕包括了 BackButton、ForwardButton、MuteButton、PauseButton、PlayButton、PlayPauseButton 和 StopButton。大部分按鈕的「影格 1」上都有單一影片片段,影片片段的實體名稱為 placeholder_mc。這通常是按鈕的一般狀態實體,但不一定是如此。在「影格 2」的「舞台」上,每個顯示狀態都有四個影片片段:一般、滑入、按下和停用 (在執行階段,組件絕對不會真的進行到「影格 2」,因為放置在這裡的這些影片片段,其用處是為了能夠更方便地進行編輯,並強迫這些影片片段載入至 SWF 檔,而不需選取「元件屬性」對話方塊中的「匯出在第一個影格」核取方塊。然而,您還是必須選取「匯出給 ActionScript 使用」選項)。

若要設定按鈕的外觀元素,只要編輯這些影片片段即可。您可以變更它們的大小和外觀。

有些 ActionScript 通常會出現在「影格 1」上。您不必變更這種 Script。其用意只是停止「影格 1」上的播放磁頭,並指定哪些影片片段要用於何種狀態。

PlayPauseButton、MuteButton、FullScreenButton 和 CaptionButton 按鈕

PlayPauseButton、MuteButton、FullScreenButton 和 CaptionButton 按鈕的設定方式與其它按鈕不同;這些按鈕只有一個影格,而影格中有兩個圖層但沒有 Script。在這個影格上有兩個按鈕,其中一個按鈕位於另一個按鈕之上:PlayPauseButton 是使用 Play 和 Pause 按鈕,MuteButton 是使用 Mute-on 和 Mute-off 按鈕,FullScreenButton 是使用 full-screen-on 和 full-screen-off 按鈕,CaptionButton 是使用 caption-on 和 caption-off 按鈕。若要設定這些按鈕的外觀元素,請依照 個別設定 FLV 播放自訂 UI 組件的外觀元素 所述,設定這兩個內部按鈕的外觀元素即可,不需執行其它動作。

CaptionButton 是用於 FLVPlaybackCaptioning 組件,因此必須附加至該組件而非 FLVPlayback 組件。

BackButton 和 ForwardButton 按鈕

BackButton 和 ForwardButton 按鈕的設定方式也與其它按鈕不同。這兩個按鈕的「影格 2」上都有額外的影片片段,您可以在這一或兩個按鈕附近用來當做影格。這些影片片段並非絕對必要且沒有特殊功能,僅為便利讀者而提供。若要使用這些影片片段,只要從「元件庫」面板將影片片段拖曳到「舞台」上您想要的位置即可。如果不需要影片片段,可以選擇不要使用或是直接從「元件庫」面板中刪除。

大部分提供的按鈕都是以共通的影片片段集合為基礎,因此您可以一次變更所有按鈕的外觀。您可以善加利用這個功能,或是置換共通的片段,讓每個按鈕的外觀都不一樣。

BufferingBar 組件

緩衝列組件相當簡單:這是由隨著組件進入緩衝狀態而變得可見的動畫所組成,並且不需要透過任何特殊的 ActionScript 加以設定。根據預設,它是從左向右移動、帶有矩形遮色片的條紋列,可以產生「理髮店招牌桿」(Barber Pole) 的特效,但是這項設定並無任何特殊之處。

雖然外觀元素 SWF 檔中的緩衝列由於必須在執行階段縮放而使用了 9 分割縮放,但 BufferingBar FLV 自訂 UI 組件因為具有巢狀影片片段,以致既不會也「無法」使用 9 分割縮放。如果您想要讓 BufferingBar 變得更寬或更高,可能就得變更其內容而非縮放組件。

SeekBar 和 VolumeBar 組件

儘管 SeekBar 和 VolumeBar 組件具有不同的功能,但仍有些類似。這兩種組件都有控制點、都使用相同的控制點追蹤機制,並且都支援巢狀的片段以追蹤進度和完整性。

FLVPlayback 組件中的 ActionScript 程式碼有許多地方都假設 SeekBar 或 VolumeBar 組件的註冊點 (也稱為「原點」或「零點」) 位於內容的左上角,因此,請務必維持這個慣例。否則,您的控制點以及進度和完整性影片片段可能發生問題。

雖然外觀元素 SWF 檔中的搜尋列由於必須在執行階段縮放而使用了 9 分割縮放,但 SeekBar FLV 自訂 UI 組件因為具有巢狀影片片段,以致既不會也「無法」使用 9 分割縮放。如果您想要讓 SeekBar 變得更寬或更高,可能就得變更其內容而非縮放組件。

控制點

控制點影片片段的實體是在「影格 2」上。和 BackButton 及 ForwardButton 組件一樣,組件絕對不會真的進行到「影格 2」;因為放置在這裡的這些影片片段,是為了能夠更方便地進行編輯,並強迫這些影片片段載入至 SWF 檔,而不需選取「元件屬性」對話方塊中的「匯出在第一個影格」核取方塊。然而,您還是必須選取「匯出給 ActionScript 使用」選項。

您可能會注意到,控制點影片片段的背景具有 Alpha 設為 0 的矩形。這個矩形會增加控制點作用區域的大小,以便更輕易地擷取,而不需要將它的外觀變更為類似按鈕的感應狀態。由於控制點是在執行階段動態建立的,所以一定是影片片段,而不是按鈕。這個 Alpha 設為 0 的矩形並非絕對必要,您通常可以使用任何想要的影像來取代控制點的內部。不過,最好應將註冊點置中對齊控制點影片片段的中央。

下列 ActionScript 程式碼位於 SeekBar 組件的「影格 1」,用來管理控制點:

stop(); 
handleLinkageID = "SeekBarHandle"; 
handleLeftMargin = 2; 
handleRightMargin = 2; 
handleY = 11;

由於「影格 2」的內容之故,必須呼叫 stop() 函數。

第二行指定要將哪個元件當做控制點;若您只是編輯「影格 2」上的控制點影片片段實體,就不需要變更這項設定。在執行階段,FLVPlayback 組件將於「舞台」上建立指定影片片段的實體成為 Bar 組件實體的同級實體,亦即兩者具有相同的父影片片段。因此,如果您的列位於根層級,則控制點一定也會在根層級。

變數 handleLeftMargin 會判斷控制點的原始位置 (0%),而變數 handleRightMargin 則判斷控制點將在何處結束 (100%)。這些數字代表列控制項從左到右的位移,正數標示列內的周圍限制,而負數標示列的外圍限制。這些位移會根據控制點的註冊點,指定控制點可以到達的位置。如果您將註冊點放在控制點的中央,則控制點的最左邊和最右邊將會超出邊界。搜尋列影片片段的註冊點必須放在內容的左上角,才能正常地運作。

變數 handleY 會判斷控制點相對於列實體的 y 位置。這是根據每個影片片段的註冊點來決定。樣本控制點中的註冊點位於三角形的尖端,放在相對於可見部位的地方,與隱藏的感應狀態矩形無關。此外,列影片片段的註冊點必須保持在內容的左上角,才能正常地運作。

因此,根據這些限制,如果列控制項設定在 (100, 100) 位置,且其寬度為 100 像素,則控制點的範圍介於水平 102 至 198 像素,並垂直保持 111。如果您將 handleLeftMargin handleRightMargin 變更為 -2,且將 handleY 變更為 –11,則控制點的範圍介於水平 98 至 202 像素,並垂直保持 89。

進度和完整性影片片段

SeekBar 組件具有「進度」影片片段,而 VolumeBar 具有「完整性」影片片段,但實際上,任何 SeekBar 或 VolumeBar 都可能具有其中一種影片片段,或是兩種影片片段都有或都沒有。就結構上來看,它們是相同的,且行為也很類似,但不同的是,它們追蹤不同的值。當 FLV 檔下載時,進度影片片段會填滿 (只能用於 HTTP 下載,因為如果從 FMS 進行串流處理,則會永遠是填滿的),而當控制點從左向右移動時,完整性影片片段就會填滿。

FLVPlayback 組件會藉由尋找特定的實體名稱,以找出這些影片片段實體,因此,您的進度影片片段實體必須具有與父影片片段一樣的列影片片段,並且具有實體名稱 progress_mc。完整性影片片段實體則必須具有實體名稱 fullness_mc。

您可以設定內含或不含巢狀 fill_mc 影片片段實體的進度和完整性影片片段。VolumeBar fullness_mc 影片片段會顯示「具有」fill_mc 影片片段的方法,而 SeekBar progress_mc 影片片段會顯示「沒有」fill_mc 影片片段的方法。

當您想要使用不會縮放且不會扭曲外觀的填色時,具有巢狀 fill_mc 影片片段的方法會很有用。

在 VolumeBar fullness_mc 影片片段中,巢狀 fill_mc 影片片段實體會以遮色處理。您可以在建立影片片段時將它遮色,或是在執行階段動態建立遮色片。如果您使用影片片段做為遮色片,請將實體命名為 mask_mc 並加以設定,使 fill_mc 能夠如百分比為 100% 般顯示出來。如果您不遮色處理 fill_mc,動態建立的遮色片將會是矩形,且大小與 fill_mc 以 100% 顯示時的大小相同。

fill_mc 影片片段將以兩種遮色片方式之一呈現,視 fill_mc.slideReveal 為 true false 而定。

如果 fill_mc.slideReveal 為 true ,則 fill_mc 會從左向右移動,透過遮色片顯露。若百分比為 0%,便會向左移動,如此一來,透過遮色片便沒有東西可顯露。隨著百分比的增加,它會漸漸向右移動,直到百分比為 100%,再返回建立所在的「舞台」位置。

如果 fill_mc.slideReveal 為 false 或未定義 (預設行為),則遮色片會從左向右重新調整大小,以呈現更多 fill_mc。當百分比為 0% 時,遮色片會水平縮放至 05,而隨著百分比增加, scaleX 會一直增加至 100%,此時便會呈現完整的 fill_mc。您不需要將 scaleX 設定為 100,因為 mask_mc 可能已經在建立時進行縮放。

沒有 fill_mc 的方法比具有 fill_mc 的方法來得簡易,但會水平扭曲填色。如果不希望出現扭曲,您必須使用 fill_mc。SeekBar progress_mc 會說明這個方法。

進度或完整性影片片段會依百分比進行水平縮放。百分比為 0% 時,實體的 scaleX 是設定為 0,讓它隱藏起來。隨著百分比增加, scaleX 會跟著調整到 100%,而片段的大小將與當初在「舞台」上建立時的大小相同。同樣地,您不需要將 scaleX 設定為 100,因為片段實體可能已經在建立時進行縮放。

連接您的 FLV 播放自訂 UI 組件

如果您將自訂 UI 組件放到與 FLVPlayback 組件相同的時間軸和影格,而沒有設定 skin 屬性,FLVPlayback 組件將會自動與它們連接,並不需要使用任何的 ActionScript。

如果「舞台」上有多個 FLVPlayback 組件,或是自訂控制項和 FLVPlayback 不在相同的時間軸上,就必須撰寫 ActionScript 程式碼將自訂 UI 組件連接到 FLVPlayback 組件的實體。首先,您必須為 FLVPlayback 實體指定一個名稱,然後使用 ActionScript 將 FLV 播放自訂 UI 組件實體指派給對應的 FLVPlayback 屬性。在下列範例中,FLVPlayback 實體是 my_FLVPlybk,句點 (.) 後面的部分是 FLVPlayback 屬性名稱,而 FLV 播放自訂 UI 控制項實體是在等號 (=) 的右邊:

//FLVPlayback instance = my_FLVPlybk 
my_FLVPlybk.playButton = playbtn; // set playButton prop. to playbtn, etc. 
my_FLVPlybk.pauseButton = pausebtn; 
my_FLVPlybk.playPauseButton = playpausebtn; 
my_FLVPlybk.stopButton = stopbtn;  
my_FLVPlybk.muteButton = mutebtn; 
my_FLVPlybk.backButton = backbtn; 
my_FLVPlybk.forwardButton = forbtn; 
my_FLVPlybk.volumeBar = volbar; 
my_FLVPlybk.seekBar = seekbar; 
my_FLVPlybk.bufferingBar = bufbar; 

以下將會逐步建立自訂的 StopButton、PlayPauseButton、MuteButton 和 SeekBar 控制項:

  1. 將 FLVPlayback 組件拖曳到「舞台」上,並賦予實體名稱 my_FLVPlybk

  2. 透過「組件檢測器」將 source 參數設定為 http://www.helpexamples.com/flash/video/cuepoints.flv

  3. 將 Skin 參數設定為「無」。

  4. 將 StopButton、PlayPauseButton 和 MuteButton 拖曳到「舞台」並放在 FLVPlayback 實體之上,從左邊垂直堆放。在「屬性」檢測器中,指定每個按鈕的實體名稱 (例如 my_stopbttn my_plypausbttn my_mutebttn )。

  5. 在「元件庫」面板中,開啟 FLVPlayback Skins 資料夾,再開啟下方的 SquareButton 資料夾。

  6. 選取 SquareBgDown 影片片段,並在「舞台」上按兩下加以開啟。

  7. 按一下滑鼠右鍵 (Windows) 或 Control+按一下 (Macintosh),再從選單中選取「全選」,然後刪除元件。

  8. 選取「橢圓形」工具,在相同的位置繪製橢圓形,然後將填色設定為藍色 ( #0033FF )。

  9. 在「屬性」檢測器中,將「寬度」(W:) 設為 40 ,將「高度」(H:) 設為 20 。將 x 座標 (X:) 設為 0.0 ,將 y 座標(Y:) 設為 0.0

  10. 對 SquareBgNormal 重複執行步驟 6 到 8,但是將填色改為黃色 ( #FFFF00 )。

  11. 對 SquareBgOver 重複執行步驟 6 到 8,但是將填色改為綠色 ( #006600 )。

  12. 編輯按鈕內各種元件圖示的影片片段 (PauseIcon、PlayIcon、MuteOnIcon、MuteOffIcon 和 StopIcon)。您可以在 FLV Playback Skins/ Label Button/Assets 底下的「元件庫」面板中找到這些影片片段 (其中 Label 是按鈕的名稱,例如 Play、Pause 等等)。為每個影片片段執行下列步驟:

    1. 選取「全選」選項。

    2. 將顏色變更為紅色 ( #FF0000 )。

    3. 縮放 300%。

    4. 將內容的「X:」位置變更為 7.0 ,以修改每個按鈕狀態中圖示的水平位置。

      備註: 藉由這種位置變更方式,可以避免開啟每個按鈕狀態,以及移動圖示影片片段實體。
  13. 按一下時間軸上方的藍色向後箭頭,以返回「場景 1」、「影格 1」。

  14. 將 SeekBar 組件拖曳到「舞台」放在 FLVPlayback 實體的右下角。

  15. 在「元件庫」面板中,按兩下 SeekBar 以在「舞台」上開啟。

  16. 將組件縮放至 400%。

  17. 選取外框,並將顏色設定為紅色 ( #FF0000 )。

  18. 按兩下 FLVPlayback Skins/Seek Bar 資料夾中的 SeekBarProgress,並將顏色設定為黃色 ( #FFFF00 )。

  19. 按兩下 FLVPlayback Skins/Seek Bar 資料夾中的 SeekBarHandle,並將顏色設定為紅色 ( #FF0000 )。

  20. 按一下時間軸上方的藍色向後箭頭,以返回「場景 1」、「影格 1」。

  21. 選取「舞台」上的 SeekBar 實體,並賦予實體名稱 my_seekbar

  22. 在「時間軸」的「影格 1」的「動作」面板中,新增視訊類別的 import 陳述式,並指定按鈕和搜尋列名稱給對應的 FLVPlayback 屬性,如下列範例所示:

    import fl.video.*; 
    my_FLVPlybk.stopButton = my_stopbttn; 
    my_FLVPlybk.playPauseButton = my_plypausbttn; 
    my_FLVPlybk.muteButton = my_mutebttn; 
    my_FLVPlybk.seekBar = my_seekbar;
  23. 按 Control+Enter 測試影片。