建立新的外觀元素

建立外觀元素 SWF 檔的最好方法是，複製 Flash 隨附的其中一個外觀元素檔案，並將它當做起點。您可以在 Flash 應用程式的 Configuration/FLVPlayback Skins/FLA/ActionScript 3.0/ 資料夾內找到這些外觀元素的 FLA 檔。若要讓完成的外觀元素 SWF 檔成為「選取外觀元素」對話方塊中的選項，請將它放在 Flash 應用程式的 Configuration/FLVPlayback Skins/ActionScript 3.0 資料夾或是使用者的本機 Configuration/FLVPlayback Skins/ActionScript 3.0 資料夾中。

由於您可以設定外觀元素的顏色 (與選擇的外觀元素無關)，也就不需要編輯 FLA 檔來修改顏色。如果建立的外觀元素使用特定的顏色，而且您不想讓它成為「選取外觀元素」對話方塊中的可編輯項目，請在外觀元素 FLA 檔 ActionScript 程式碼中設定 this.border_mc.colorMe = false; 。如需有關設定外觀元素顏色的詳細資訊，請參閱 選取預先設計的外觀元素 。

在查看已安裝的 Flash 外觀元素 FLA 檔時，您可能會覺得「舞台」上似乎有些東西並不是那麼需要，但那些東西卻放入導引線圖層。一旦使用縮放 9 啟用即時預覽，您就能迅速看出 SWF 檔實際顯示的內容。

下列各節涵蓋更複雜的 SeekBar、BufferingBar 和 VolumeBar 影片片段自訂及變更方式。

使用外觀元素版面配置

當您開啟 Flash 外觀元素 FLA 檔之後，就會在主要「時間軸」上看到外觀元素的影片片段配置。出現在此相同影格中的影片片段和 ActionScript 程式碼，定義了控制項在執行階段的配置方式。

雖然「版面」圖層看起來與外觀元素在執行階段的樣式非常相近，這個圖層的內容並不會在執行階段顯示出來。其用途僅為計算控制項的擺放位置。執行階段將會用到「舞台」上的其它控制項。

「版面」圖層內含一個 FLVPlayback 組件的預留位置，名為 video_mc。所有其它控制項都會相對於 video_mc 進行排列。如果您從某個 Flash FLA 檔開始著手，而後變更了控制項的大小，則或許可藉由搬移這些預留位置片段以修復版面配置。

每個預留位置片段都有特定的實體名稱。預留位置片段的名稱包括 playpause_mc、play_mc、pause_mc、stop_mc、captionToggle_mc、fullScreenToggle_mc、back_mc、bufferingBar_mc、bufferingBarFill_mc、seekBar_mc、seekBarHandle_mc、seekBarProgress_mc、volumeMute_mc、volumeBar_mc 和 volumeBarHandle_mc。當您所選的外觀元素顏色名為 border_mc 時，片段就會重新著色。

控制項使用哪一個片段並不重要。通常，按鈕會使用一般狀態片段。其它控制項則使用該控制項本身的片段，但只是為了方便起見。最重要的是預留位置的 x (水平) 和 y (垂直) 位置，以及高度和寬度。

除了使用標準控制項，您還可以視需要額外加入更多片段。唯一的必要條件是，在「連結」對話方塊中為這類影片片段的元件庫元件選取「匯出給 ActionScript 使用」。「版面」圖層中的自訂影片片段可以擁有任何實體名稱，而非僅限上面列出的實體名稱。只有在設定片段的 ActionScript 以決定版面配置時才需要用到實體名稱。

border_mc 片段的情況比較特殊。如果您將 FlvPlayback.skinAutoHide 屬性設定為 true ，則當滑鼠移到 border_mc 片段上方時，外觀元素就會顯示出來。這對於出現在視訊播放程式邊界之外的外觀元素來說，相當重要。如需有關 skinAutoHide 屬性的詳細資訊，請參閱 修改外觀元素行為 。

在 Flash FLA 檔中，border_mc 是當做系統顏色，而且是做為 Forward 和 Back 按鈕的邊框。

border_mc 片段也是屬於外觀元素，可以利用 skinBackgroundAlpha 和 skinBackgroundColor 屬性來變更 Alpha 值和顏色。若要允許可自訂的顏色和 Alpha 值，外觀元素 FLA 檔中的 ActionScript 必須包含下列項目： 

border_mc.colorMe = true;

ActionScript 和外觀元素版面配置

一般而言，下列 ActionScript 程式碼適用於所有控制項。某些控制項具有特定的 ActionScript，定義了各控制項章節中所述的額外行為。

起始 ActionScript 是一個大型區段，指定每個組件各種狀態的類別名稱。您可以在 SkinOverAll.fla 檔案中看到這些類別名稱。例如，Pause 和 Play 按鈕的程式碼看起來會像這樣： 

this.pauseButtonDisabledState = "fl.video.skin.PauseButtonDisabled"; 
this.pauseButtonDownState = "fl.video.skin.PauseButtonDown"; 
this.pauseButtonNormalState = "fl.video.skin.PauseButtonNormal"; 
this.pauseButtonOverState = "fl.video.skin.PauseButtonOver"; 
this.playButtonDisabledState = "fl.video.skin.PlayButtonDisabled"; 
this.playButtonDownState = "fl.video.skin.PlayButtonDown"; 
this.playButtonNormalState = "fl.video.skin.PlayButtonNormal"; 
this.playButtonOverState = "fl.video.skin.PlayButtonOver";

類別名稱並無實際的外部類別檔案；這些名稱僅由元件庫內所有影片片段的「連結」對話方塊加以指定。

在 ActionScript 2.0 組件中，「舞台」上有些影片片段是執行階段實際使用的片段。在 ActionScript 3.0 組件中，這些影片片段仍然位於 FLA 檔，但只是為了方便編輯而已。這些片段如今全都位於導引線圖層且不會匯出。元件庫中所有的外觀元素資源都設定成匯出在第一個影格，而且是使用和下列類似的程式碼動態建立： 

new fl.video.skin.PauseButtonDisabled();

此區段後面的 ActionScript 程式碼定義了外觀元素的最小寬度和高度。「選取外觀元素」對話方塊會顯示這些值，而執行階段也會使用這些值，以防止外觀元素縮放成小於其最小尺寸。如果您不想指定最小尺寸，請保留其值為未定義，或是指定為小於或等於零。 

// minimum width and height of video recommended to use this skin, 
// leave as undefined or <= 0 if there is no minimum 
this.minWidth = 270; 
this.minHeight = 60;

各個預留位置可能會套用下列屬性：

屬性

說明

anchorLeft

Boolean。將控制項放在 FLVPlayback 實體的左邊相對位置上。預設值為 true ，除非 anchorRight 明確設定為 true 致使其值預設為 false 。

anchorRight

Boolean。將控制項放在 FLVPlayback 實體的右邊相對位置上。預設值為 false 。

anchorBottom

Boolean。將控制項放在 FLVPlayback 實體的底端相對位置上。預設值為 true ，除非 anchorTop 明確設定為 true 致使其值預設為 false 。

anchorTop

Boolean。將控制項放在 FLVPlayback 實體的頂端相對位置上。預設值為 false 。

如果 anchorLeft 和 anchorRight 屬性都為 true ，則控制項會在執行階段進行水平縮放。如果 anchorTop 和 anchorBottom 屬性都為 true ，則控制項會在執行階段進行垂直縮放。

若要查看這些屬性的作用，請參閱 Flash 外觀元素的屬性用法。BufferingBar 和 SeekBar 是唯一會進行縮放並能彼此相疊於頂端的控制項，且兩者的 anchorLeft 和 anchorRight 屬性都是設為 true 。BufferingBar 和 SeekBar 左邊的所有控制項都將 anchorLeft 設定為 true ，而右邊的控制項則將 anchorRight 設定為 true 。所有控制項的 anchorBottom 都設為 true 。

您可以嘗試編輯「版面」圖層上的影片片段，讓外觀元素的控制項座落於頂端而非底端。只需要將控制項移到 video_mc 的頂端相對位置上，並將所有控制項的 anchorTop 設定等於 true 即可。

緩衝列

緩衝列具有兩個影片片段：bufferingBar_mc 和 bufferingBarFill_mc。各個片段與「舞台」上其它片段的相對位置很重要，因為它們會維持這個相對位置。緩衝列使用兩個不同的片段是因為組件會縮放 bufferingBar_mc 而非 bufferingBarFill_mc。

bufferingBar_mc 片段套用了 9 分割縮放，所以在進行縮放時，邊框將不會扭曲。bufferingBarFill_mc 片段非常寬廣，所以寬度永遠足夠而不必進行縮放。執行階段會自動遮色處理此片段，以便只顯示延伸的 bufferingBar_mc 上方的部分。根據預設，遮色片的確切尺寸是以 bufferingBar_mc 和 bufferingBarFill_mc 之間 x (水平) 位置的差異為準計算，使 bufferingBar_mc 內的左邊界和右邊界保持相等。您可以利用 ActionScript 程式碼自訂位置。

如果緩衝列不需要進行縮放，或者不使用 9 分割縮放，您即可將它當成 FLV 播放自訂 UI BufferingBar 組件般加以設定。如需詳細資訊，請參閱 BufferingBar 組件 。

緩衝列還具有下列另一個屬性：

屬性

說明

fill_mc:MovieClip

指定緩衝列填色的實體名稱。預設為 bufferingBarFill_mc。

搜尋列和音量列

搜尋列也有兩個影片片段：seekBar_mc 和 seekBarProgess_mc。各個片段與「版面」圖層上其它片段的相對位置很重要，因為它們會維持這個相對位置。雖然這兩個片段都要進行縮放，seekBarProgress_mc 卻不能巢狀放置在 seekBar_mc 內，因為 seekBar_mc 會使用 9 分割縮放，而無法與巢狀的影片片段一起使用。

seekBar_mc 片段套用了 9 分割縮放，所以在進行縮放時，邊框將不會扭曲。seekBarProgress_mc 片段也進行縮放，但會扭曲變形。此片段不使用 9 分割縮放是因僅為填色用途，若發生扭曲也無所謂。

seekBarProgress_mc 片段必須搭配 fill_mc 才能運作，就像 FLV 播放自訂 UI 組件的 progress_mc 片段一樣。換句話說，片段並未以遮色處理，且會進行水平縮放。seekBarProgress_mc 達 100% 時的確切尺寸是由 seekBarProgress_mc 影片片段內的左邊界和右邊界所定義。這些尺寸依預設會保持相等，並且是以 seekBar_mc 和 seekBarProgress_mc 之間 x (水平) 位置的差異為準計算。您可以利用搜尋列影片片段的 ActionScript 自訂尺寸，如下列範例所示： 

this.seekBar_mc.progressLeftMargin = 2; 
this.seekBar_mc.progressRightMargin = 2; 
this.seekBar_mc.progressY = 11; 
this.seekBar_mc.fullnessLeftMargin = 2; 
this.seekBar_mc.fullnessRightMargin = 2; 
this.seekBar_mc.fullnessY = 11;

您可以將這段程式碼放入 SeekBar 影片片段「時間軸」內，或是和其它 ActionScript 程式碼一起放到主要「時間軸」上。如果是使用程式碼自訂尺寸而不修改版面，「舞台」上就不需要包括填色。只要其確切的類別名稱位於元件庫中，並在「影格 1」設定為「匯出給 ActionScript 使用」即可。

和 FLV 播放自訂 UI SeekBar 組件一樣，搜尋列也可以建立完整性影片片段。如果搜尋列不需要進行縮放，或者要縮放但不使用 9 分割縮放，您可以使用 FLV 播放自訂 UI 組件採用的任何方法來設定 progress_mc 或 fullness_mc。如需詳細資訊，請參閱 進度和完整性影片片段 。

由於 Flash 外觀元素中的音量列不會進行縮放，其建構方式便與 VolumeBar FLV 播放自訂 UI 組件相同。如需詳細資訊，請參閱 SeekBar 和 VolumeBar 組件 。唯一的差別在於控制點以不同的方式實作。

Seekbar 和 VolumeBar 控制點

SeekBar 和 VolumeBar 控制點位於列旁邊的「版面」圖層上。根據預設，控制點的左邊界、右邊界和 y 軸值都是依其相對於列影片片段的位置來設定。左邊界是根據控制點的 x (水平) 位置和列的 x (水平) 位置之間的差異來設定，並且右邊界等於左邊界。您可以透過 SeekBar 或 VolumeBar 影片片段的 ActionScript 自訂這些值。下列範例是 FLV 播放自訂 UI 組件曾經用過的同一段 ActionScript 程式碼： 

this.seekBar_mc.handleLeftMargin = 2; 
this.seekBar_mc.handleRightMargin = 2; 
this.seekBar_mc.handleY = 11;

您可以將這段程式碼放入 SeekBar 影片片段「時間軸」內，或是和其它 ActionScript 程式碼一起放到主要「時間軸」上。如果使用程式碼自訂值而不修改版面，「舞台」上就不需要有控制點。只要其確切的類別名稱位於元件庫中，並在「影格 1」設定為「匯出給 ActionScript 使用」即可。

若撇開這些屬性不談，控制點實為簡單的影片片段，設定方式與 FLV 播放自訂 UI 組件做法相同。兩者都具有 alpha 屬性設為 0 的矩形背景。這類背景僅為增加作用區域而顯示，非絕對必要。

背景和前景片段

影片片段 chrome_mc 和 forwardBackBorder_mc 會實作為背景片段。

「舞台」上的 ForwardBackBorder、ForwardBorder 和 BackBorder 影片片段以及預留位置 Forward 和 Back 按鈕，唯一不在導引線圖層上的是 ForwardBackBorder。它只存在於實際使用 Forward 和 Back 按鈕的外觀元素中。

您只需要透過元件庫，在「影格 1」匯出這類片段給 ActionScript 使用。