關於外觀元素

建立新的外觀元素
- 為所有實體建立一個外觀元素
- 為某些實體建立外觀元素

組件的外觀是由如外框、填色顏色、圖示，以及甚至是其它組件這類圖像元素組成。例如，ComboBox 就包含 List 組件，而 List 組件則包含 ScrollBar。這些圖像元素組合在一起便構成 ComboBox 的外觀。不過，組件的外觀會根據它目前的狀態而變更。例如，沒有其標籤的 CheckBox 在應用程式中看起來如下：

處於正常一般狀態的 CheckBox

如果您在此 CheckBox 上按一下並按住滑鼠按鈕，它的外觀就會變更如下：

處於按下狀態的 CheckBox

此外，當您放開滑鼠按鈕時，CheckBox 又會回復成原來的外觀，但是會多了核取記號，表示已經選取的狀態。

處於選取狀態的 CheckBox

代表組件不同狀態的圖示統稱為該組件的「外觀元素」。就像處理其它 Flash 元件一樣，您可以在 Flash 中編輯某個組件的外觀元素，藉以變更該組件在任何或所有狀態中的外觀。您可以使用兩種方式存取組件的外觀元素。最簡單的方式就是將該組件拖曳到「舞台」，然後按兩下該組件。這麼做會開啟該組件之外觀元素的面板，以 CheckBox 為例，它看起來如下：

CheckBox 的外觀元素

您也可以從「元件庫」面板，個別存取組件的外觀元素。將組件拖曳到「舞台」時，您也會將該組件連同其資源的資料夾以及組件中所包含的其它組件一併複製到元件庫。例如，如果您將 ComboBox 拖曳到「舞台」上，「元件庫」面板還會包含 List、ScrollBar 和 TextInput 組件 (都內建在 ComboBox 中)、其中每一個組件之外觀元素的資料夾，以及內含這些組件所共享之元素的 Shared Assets 資料夾。您可以編輯上述組件中任一個組件的外觀元素，只要開啟該組件的外觀元素資料夾 (ComboBoxSkins、ListSkins、ScrollBarSkins 或 TextInputSkins)，然後按兩下您要編輯之外觀元素的圖示即可。例如，按兩下 ComboBox_downSkin 會以元件編輯模式開啟該外觀元素，如下圖所示：

ComboBox_downSkin

建立新的外觀元素

如果您要為文件中的組件建立新的外觀，請編輯該組件的外觀元素來改變這些外觀元素。若要存取組件的外觀元素，只要按兩下「舞台」上的組件以開啟該組件之外觀元素的面板即可。接著，再按兩下您想要編輯的外觀元素，以元件編輯模式加以開啟。例如，您可以按兩下「舞台」上的 TextArea 組件，以元件編輯模式開啟該組件的資源。將縮放控制項設定為 400% (如有必要，也可以設為更高)，然後再編輯元件以變更其外觀。編輯完成時，所做的變更會影響文件中該組件的所有實體。另一種方式是，您可以按兩下「元件庫」面板中的特定外觀元素，以元件編輯模式在「舞台」上開啟該外觀元素。

您可以使用下列方式修改組件外觀元素：

為所有實體建立一個新外觀元素
為某些實體建立新的外觀元素

為所有實體建立一個外觀元素

根據預設，當您編輯某個組件的外觀元素時，會變更文件中該組件之所有實體的外觀。如果您要為相同的組件建立不同的外觀，則必須重製所要變更的外觀元素，並且為它們使用不同的名稱、編輯它們，再設定適當的樣式來套用它們。如需詳細資訊，請參閱為某些實體建立外觀元素。

本章說明如何改變每一個 UI 組件的一個或多個外觀元素。如果您依照這些程序之一來變更 UI 組件的一個或多個外觀元素，便會變更文件中該組件的所有實體。

為某些實體建立外觀元素

您可以使用下列一般程序，為組件的某些實體建立一個外觀元素：

在「元件庫」面板中，選取該組件之 Assets 資料夾內的外觀元素。
重製該外觀元素，並為它指定唯一的類別名稱。
編輯該外觀元素，並為它指定您想要的外觀。
為該組件實體呼叫 setStyle() 方法，將新的外觀元素指定給該外觀元素樣式。

下列程序會為兩個 Button 實體的其中一個建立新的 selectedDownSkin。

建立新的 Flash 檔案 (ActionScript 3.0) 文件。
將兩個 Button 從「組件」面板拖曳到「舞台」，並為它們指定實體名稱為 aButton 與 bButton 。
開啟「元件庫」面板，然後再開啟其中的 Component Assets 和 ButtonSkins 資料夾。
按一下以選取 selectedDownSkin 外觀元素。
按一下右鍵開啟快顯選單，然後選取「重製」。
在「重製元件」對話方塊中，為新的外觀元素指定唯一名稱 (例如 Button_mySelectedDownSkin )，然後按一下「確定」。
在「元件庫 > Component Assets > ButtonSkins」資料夾中，選取 Button_mySelectedDownSkin，再按一下右鍵開啟快顯選單。選取「連結」來開啟「連結屬性」對話方塊。
按一下「匯出給 ActionScript 使用」核取方塊。讓「匯出在第一個影格」核取方塊保持為已選取狀態，並確認類別名稱為唯一。按一下「確定」，再按一下「確定」回應警告；警告內容說明找不到類別定義，而且會建立類別定義。
按兩下「元件庫」面板中的 Button_mySelectedDownSkin 外觀元素，以元件編輯模式加以開啟。
按一下外觀元素中心處的藍色填色，直到該顏色出現在「屬性」檢測器的「填色」顏色挑選器中為止。按一下顏色挑選器，然後選取 #00CC00 做為外觀元素的填色顏色。
按一下「舞台」上方編輯列左側的「後退」按鈕，回到文件編輯模式。
在「屬性」檢測器中，按一下每一個按鈕的「參數」索引標籤，然後將 toggle 參數設定為 true 。

在「時間軸」之「影格 1」的「動作」面板中，加入下列程式碼：

bButton.setStyle("selectedDownSkin", Button_mySelectedDownSkin); 
bButton.setStyle("downSkin", Button_mySelectedDownSkin);

選取「控制 > 測試影片」。
按一下每一個按鈕。請注意，bButton 物件的按下外觀元素 (選取及未選取) 會使用新的外觀元素元件。