|
您可以在編寫期間和執行階段，沿水平和垂直方向變形 Button 組件。在編寫期間，請在「舞台」上選取組件，並且使用「自由變形」工具或任何「修改 > 變形」命令。在執行階段，請使用
setSize()
方法或 Button 類別適用的任何屬性 (如
height
、
width
、
scaleX
和
scaleY
)。
調整按鈕大小不會變更圖示和標籤的大小。Button 的範圍框與此 Button 的邊框相對應，並且也會指定實體的作用區域。如果您增加實體的大小，也會同時增加作用區域的大小。如果範圍框太小無法配合標籤，就會裁剪標籤以便配合。
如果 Button 的圖示比 Button 大，此圖示便會延伸超出 Button 的邊框。
搭配 Button 組件使用樣式
一般而言，將 Button 組件繪製為各種狀態時，其樣式會指定其外觀元素、圖示、文字格式以及邊框間距的值。
下列程序會將兩個 Button 置於「舞台」上，並且在使用者按一下其中一個時，將這兩個 Button 的
emphasized
屬性設定為
true
。當使用者按一下第二個 Button 時，它也會將其
emphasizedSkin
樣式設定為
selectedOverSkin
樣式，如此這兩個 Button 在相同的狀態就會顯示不同的外觀元素。
-
建立 Flash 檔案 (ActionScript 3.0)。
-
以一次一個的方式，將兩個 Button 拖曳到「舞台」，並為它們指定實體名稱為
aBtn
與
bBtn
。在「屬性」檢測器的「參數」索引標籤中，將它們的標籤命名為 Button A 與 Button B。
-
在「時間軸」之「影格 1」的「動作」面板中，加入下列程式碼：
bBtn.emphasized = true;
aBtn.emphasized = true;
bBtn.addEventListener(MouseEvent.CLICK, Btn_handler);
function Btn_handler(evt:MouseEvent):void {
bBtn.setStyle("emphasizedSkin", "Button_selectedOverSkin");
}
-
選取「控制 > 測試影片」。
-
按一下每一個按鈕，查看
emphasizedSkin
樣式對每一個按鈕的影響。
搭配 Button 組件使用外觀元素
Button 組件會使用下列外觀元素，這些外觀元素會與它的不同狀態相對應。若要編輯一個或多個外觀元素以變更 Button 的外觀，請按兩下「舞台」上的 Button 實體，以開啟其外觀元素的面板，如下圖所示：
Button 外觀元素
按鈕啟用之後，當指標移動到它上面時，就會顯示它的滑入狀態。按下按鈕時，該按鈕便會成為輸入焦點並且顯示按下狀態。放開滑鼠之後，按鈕又會回復成原來的滑入狀態。如果在按下滑鼠時將指標移開按鈕，該按鈕便會回復成原始狀態。如果將 toggle 參數設定為
true
，就會以 selectedDownSkin 顯示按下狀態、以 selectedUpSkin 顯示一般狀態，並且以 selectedOverSkin 顯示滑入狀態。
Button 停用之後，不論使用者的動作為何，都只會顯示其停用狀態。
若要編輯其中一個外觀元素，請按兩下該外觀元素，以元件編輯模式加以開啟，如下圖所示：
元件編輯模式中的 Button
此時您可以使用 Flash 編寫工具，將外觀元素編輯成自己喜歡的樣子。
下列程序會變更 Button 之 selected_over 外觀元素的顏色。
-
建立新的 Flash 檔案(ActionScript 3.0)。
-
將 Button 從「組件」面板拖曳到「舞台」。在「參數」索引標籤中，將 toggle 參數設定為
true
。
-
按兩下 Button，開啟其外觀元素的面板。
-
按兩下 selected_over 外觀元素，以元件編輯模式加以開啟。
-
將縮放控制項設定為 400%，將圖示放大以進行編輯。
-
按兩下背景，直到其顏色出現在「屬性」檢測器的「填色」顏色挑選器中為止。
-
在「填色」顏色挑選器中選取 #CC0099，將該顏色套用到 selected_over 外觀元素的背景。
-
按一下「舞台」上方編輯列左側的「後退」按鈕，回到文件編輯模式。
-
選取「控制 > 測試影片」。
-
按一下該按鈕，使其成為已選取模式。
當您將滑鼠指標移到 Button 上方時，selected_over 狀態看起來應該如下圖所示。
顯示已修改顏色之 selected_over 外觀元素的 Button
|
|
|
