Button組件是可調整大小的矩形按鈕，用戶可以使用鼠標或空格鍵按下它以便在應用程序中發起一個動作。 你可以在Button實例中添加自定義圖標。 你也可以將Button實例的行為從按壓方式改變為撥動方式。 撥動按鈕在點擊時處於按下狀態並且在再次點擊之后返回彈起狀態。按鈕是許多表單和web應用程序的基本組成部分。 你可以在你希望用戶啟動事件的任意位置使用按鈕。 例如，大多數表單具有一個Submit按鈕。 你也可以在演講膠片中添加Previous和 Next按鈕。下面將描述使用該組件的最流行和有用的方法。
注：下面的范例均要求你的文檔庫包含一個Button組件。
使用ActionScript創建Button 組件的實例
為了能夠使用 ActionScript動態地創建Button類的一個新實例，首先你需要從 Components面板中將該組件的一個拷貝拖拽至你當前的 Flash 文檔庫中。 然后，你需要使用import語句導入fl.controls.Button類。 這一步驟是必需的，因為組件文件不是以隱含方式導入的，就像flash.* 包一樣。 一旦 Button類導入你的當前文檔，你可以使用new運算符創建一個新的Button 實例。 最后，使用addChild() 方法可以將新的實例添加至顯示列表中。
注：如需看到哪個文件是以隱含方式導入的， 參見Adobe Flash CS3 Configuration\ActionScript 3.0 文件夾中的implicitImports.xml XML文件。
范例
下面的范例動態地創建Button組件的一個新的實例並且將其添加至顯示列表中。 你必須首先從Component的面板中將該組件的一個拷貝拖拽至文檔庫中。
import fl.controls.Button; var myButton:Button = new Button(); addChild(myButton);
結果
你需要為本范例下載下列源文件：
- using_button_component_section01_example1.zip (ZIP, 390K)
設置Button 組件的標簽
通過設置Button組件實例的 label屬性可以改變在該組件實例上顯示的文本。 該標簽只能接受純文本 (不能接受HTML格式文本)，但可以通過使用 setStyle() 方法創建一種文本格式並且將其應用於該按鈕來對文本進行格式化。 如需了解關於如何處理按鈕文本格式化的更多信息，參見設置文本格式。
如果你正在使用 Button實例的圖標，則你可以控制文本標簽與圖標的相對擺放位置，通過使用ButtonLabelPlacement類的一個常量來設置 labelPlacement屬性可以實現這一任務。 如需了解關於如何處理按鈕圖標的更多信息，參見設置圖標。
注：對一個Button組件設置label屬性將會下發一個labelChange事件(由fl.events.ComponentEvent.LABEL_CHANGE 常量表示)。
范例
下面的范例創建一個新的Button實例並且將按鈕的標簽設置為 "Click me"。
import fl.controls.Button; var myButton:Button = new Button(); myButton.label = "Click me"; addChild(myButton);
結果
你需要為本范例下載下列源文件：
- using_button_component section02 example1.zip (ZIP, 390K)
調整按鈕的尺寸和位置
有若干種你可以用於在Stage中調整實例大小和改變實例位置的方法和屬性。 使用下列兩種技巧之一即可實現對組件實例進行大小調整： 1) 設置 width和 height 屬性，或 2) 調用 setSize()方法(繼承自fl.core.UIComponent)。setSize() 方法帶有兩個參數(width和height) 並且能夠對組件的大小進行相應的調整。 使用上述兩種技巧之一將產生一個下發的resize事件 (由fl.events.ComponentEvent.RESIZE常量表示) 。 通過監聽該事件，你可以偵聽到什么時候組件實例已經進行大小調整以及必要時給出響應。使用setSize()方法替代width和height 屬性的一個優點是 resize 事件只下發一次而不是兩次 (一次用於width 屬性，另一次用於height屬性)。
除了使用x和y屬性設置組件的x-軸和y-軸之外，你也可以使用 move()方法 (它類似於 setSize()方法，由UIComponent類繼承而來) 在Stage中調整組件的位置。 設置組件的x屬性或y屬性、或調用實例的move()方法均會引起組件下發一個move事件(由 fl.events.ComponentEvent.MOVE 常量表示)。
范例
下面的范例創建一個Button實例，並且使用 setSize()方法對其進行大小調整以及使用move()方法對其進行位置調整。
import fl.controls.Button; var myButton:Button = new Button(); myButton.label = "Click me"; myButton.setSize(120, 40); myButton.move(10, 10); addChild(myButton);
結果
你需要為本范例下載下列源文件：
- using_button_component section03 example1.zip (ZIP, 390K)
下面的范例創建一個新的Button實例並且偵聽其下發的resize 和move 事件。
// Import the required component classes. import fl.controls.Button; import fl.events.ComponentEvent; // Create a new TextField object, and add it to the display list. var myTextField:TextField = new TextField(); myTextField.autoSize = TextFieldAutoSize.LEFT; myTextField.multiline = true; myTextField.text = ""; myTextField.x = 140; myTextField.y = 10; addChild(myTextField); /* Create a new Button component instance, add listeners for the move and resize events, and add it to the display list. */ var myButton:Button = new Button(); myButton.label = "Click me"; myButton.addEventListener(ComponentEvent.RESIZE, resizeHandler); myButton.addEventListener(ComponentEvent.MOVE, moveHandler); myButton.setSize(120, 40); myButton.move(10, 10); addChild(myButton); /* Handler function for the Button component instance. This function appends text to the text field after the button was resized. */ function resizeHandler(evt:ComponentEvent):void { var btn:Button = evt.currentTarget as Button; myTextField.appendText("component was resized. w:" + btn.width + ", h:" + btn.height + "\n"); } /* Handler function for the Button component instance. This function appends text to the text field after the button was moved. */ function moveHandler(evt:ComponentEvent):void { var btn:Button = evt.currentTarget as Button; myTextField.appendText("component was moved. x:" + btn.x + ", y:" + btn.y + "\n"); }
結果
你需要為本范例下載下列源文件：
- using_button_component section03 example2.zip (ZIP, 422K)
檢測按鈕何時按下
通過偵聽下發的click事件 (使用flash.events.MouseEvent.CLICK 常量) 或 change事件 (使用flash.events.Event.CHANGE常量) ，你可以檢測到一個Button實例何時按下。 通過利用ActionScript 3.0，你可以使用addEventListener() 方法偵聽各種事件。 關於ActionScript 3.0的事件處理的更多信息，請參閱Event handling Quick Start 文章。
注：ActionScript 2.0 能夠提供三種事件處理模型。 ActionScript 3.0可以通過使用一種簡單事件處理模型簡化相應的處理過程。 另外，ActionScript 2.0不使用常量作為事件名稱，但ActionScript 3.0使用常量作為事件名稱。
下面范例為一個名稱為myButton的Button實例的click事件創建一個偵聽器。
// Requires a Button component instance on the Stage with an instance name of "myButton". myButton.addEventListener(MouseEvent.CLICK, clickHandler); function clickHandler(eventObj:MouseEvent):void { trace("clicked"); }
關於處理組件事件的更多信息，請參閱Flash CS3 用戶界面組件入門 （Getting started with Flash CS3 user interface components ）的 Handling events部分：快速入門文章。
如需了解關於Button組件事件的更多信息，參見創建自動重復按鈕和創建撥動按鈕。
范例
下面范例使用一個事件偵聽器來檢測何時按鈕的click事件已經下發以及相應地更新標簽。
// Import the required component classes. import fl.controls.Button; // Create a new Button component instance, and add it to the display list. var myButton:Button = new Button(); myButton.label = "Click me"; myButton.move(10, 10); myButton.addEventListener(MouseEvent.CLICK, clickHandler); addChild(myButton); /* Handler function for the Button component instance. This function updates the button's label property when the button is clicked. */ function clickHandler(event:MouseEvent):void { myButton.label = "Ouch!"; }
前面的范例能夠偵聽該click事件。 在本文的后面章節中，你還將了解到如何才能偵聽buttonDown和change事件。
你需要為本范例下載下列源文件：
- using_button_component section04 example1.zip (ZIP, 390K)
范例
如果你希望在鼠標落在實例上時按鈕能夠顯示一個手型光標，你需要將按鈕實例的useHandCursor 屬性設置為true：
import fl.controls.Button; var myButton:Button = new Button(); myButton.label = "useHandCursor = true"; myButton.width = 160; myButton.move(10, 10); myButton.useHandCursor = true; addChild(myButton);
結果
你需要為本范例下載下列源文件：
- using_button_component section04 example2.zip (ZIP, 390K)
開啟和禁止Button實例
在許多情形下，你可能希望在你的應用程序中禁用按鈕。 例如，你可能希望防止用戶兩次敲擊Submit按鈕，或你可能希望禁用Submit按鈕直到用戶首先選擇了復選框。
注：當一個Button實例被禁用時，你可以指定使用替代的圖標、皮膚和文本格式。 如需了解更多信息，參見ActionScript 3.0 Reference for the Adobe Flash Platform中的繼承的disabledIcon、isabledSkin、disabledTextFormat、selectedDisabledIcon和selectedDisabledSkin式樣。
范例
下面范例創建兩個Button實例。 第一個實例在啟動之后將允許用戶點擊按鈕。 第二個實例將其enabled 屬性設置為false，這將能夠防止用戶與組件進行互動以及下發其click事件：
// Import the required component classes. import fl.controls.Button; // Create a new Button component instance and add it to the display list. var enabledButton:Button = new Button(); enabledButton.label = "enabled = true"; enabledButton.move(10, 10); enabledButton.addEventListener(MouseEvent.CLICK, clickHandler); addChild(enabledButton); /* Create a new Button component instance, set the enabled property to false, and add it to the display list. */ var disabledButton:Button = new Button(); disabledButton.enabled = false; disabledButton.label = "enabled = false"; disabledButton.move(120, 10); disabledButton.addEventListener(MouseEvent.CLICK, clickHandler); addChild(disabledButton); /* Handler function for the enabledButton and disabledButton button instances. This function updates the target button's label property when the button is clicked. */ function clickHandler(event:MouseEvent):void { var btn:Button = event.currentTarget as Button; btn.label = "Ouch!"; }
結果
你需要為本范例下載下列源文件：
- using_button_component section05 example1.zip (ZIP, 390K)
設置按鈕式樣
ActionScript 3.0 User Interface組件也具有一個支持skinning和styling組件的全新方法。 現在可以使用setStyle() 方法處理Button的式樣設置。 你可以通過使用 getStyleDefiniton()方法獲得每個Button組件的本機和繼承式樣的列表。 通過設置各種Button式樣，你可以完成下列任務：
- 設置按鈕使用的圖標
- 為按鈕的標簽指定一種文本格式
- 嵌入字體
- 通過改變Button皮膚來改變其外觀
- 為自動重復按鈕指定時間間隔以便下發
buttonDown事件。
setStyle()– 在 Button實例中設置一個式樣屬性。getStyle()– 檢索一個style屬性，該屬性是在按鈕的式樣查找鏈中設置的。clearStyle()– 從 Button實例中刪除一個式樣屬性。getStyleDefinition()– 為當前按鈕檢索默認的式樣圖。
范例
下面的范例使用getStyleDefinition()方法來顯示Button組件的式樣名稱和默認值的列表。 在數據柵格中點擊皮膚格式能夠顯示選中皮膚的預覽。 該范例要求文檔庫中包含Button、DataGrid和 UILoader組件。
// Import the required component classes. import fl.containers.UILoader; import fl.controls.Button; import fl.controls.DataGrid; import fl.controls.dataGridClasses.DataGridColumn; import fl.data.DataProvider; // Create some variables. var styleArray:Array = new Array(); var styleObject:Object = Button.getStyleDefinition(); var styleName:String; /* Convert the styles returned from the getStyleDefinition() method into an array of objects so it can be converted to a data provider. */ for (styleName in styleObject) { styleArray.push({name:styleName, value:String(styleObject[styleName]), data:styleObject[styleName]}); } // Sort the items in the styleArray array alphabetically by name. styleArray.sortOn("name", Array.CASEINSENSITIVE); // Create a new DataGridColumn object. var nameCol:DataGridColumn = new DataGridColumn("name"); nameCol.headerText = "Style name:"; // Create a new DataGridColumn object. var valueCol:DataGridColumn = new DataGridColumn("value"); valueCol.headerText = "Default value:"; /* Create a new DataGrid component instance, add the two DataGridGolumn objects created earlier, set the data provider to the styleArray array, and add to the display list. */ var styleGrid:DataGrid = new DataGrid(); styleGrid.addColumn(nameCol); styleGrid.addColumn(valueCol); styleGrid.dataProvider = new DataProvider(styleArray); styleGrid.setSize(530, 300); styleGrid.move(10, 10); styleGrid.addEventListener(Event.CHANGE, changeHandler); addChild(styleGrid); /* Create a UILoader component instance, and add it to the display list. This UILoader will be used to display the selected style, as long as it is a visual asset. */ var previewLoader:UILoader = new UILoader(); previewLoader.setSize(530, 70); previewLoader.move(10, 320); addChild(previewLoader); /* Handler function for the UILoader component instance. This function gets the currently selected item in the data grid and attempts to set the UILoader instance's source property to the selected item's data property. If the item cannot be displayed in a UILoader, the UILoader instance's source property is set to null which causes any previously displayed content to be cleared. */ function changeHandler(event:Event):void { var item:Object = DataGrid(event.currentTarget).selectedItem; try { previewLoader.source = getDefinitionByName(item.data); } catch (error:*) { previewLoader.source = null; } }
結果
你需要為本范例下載下列源文件：
- using_button_component section06 example1.zip (ZIP, 514K)
關於使用setStyle()方法設置式樣的范例，參見下列章節：
設置文本格式
當定制一個按鈕時，你將很可能希望從改變其標簽的文本格式入手。 改變textFormat式樣允許你指定一個新的TextFormat對象 (flash.text.TextFormat) 以便在顯示該標簽時使用。 這使得你可以修改標簽的對齊方式（alignment）、顏色（color）、字體粗細（font weight）（黑體）、字體強調（font emphasis）（斜體）、字體風格（font face）和 字體大小（font size）以及其它屬性。
注： 應用程序並不支持TextFormat類的所有屬性。 例如，為 TextFormat對象設置url屬性對 Button實例不起作用。
當處理文本格式時，你將經常使用下列屬性和式樣：
textFormat式樣 – 用於顯示按鈕標簽的TextFormat對象，通過設置TextFormat屬性，例如字體、顏色和大小等，可以實現這一任務。disabledTextFormat式樣 – 當按鈕被禁用時，用於顯示按鈕標簽的TextFormat對象。embedFonts式樣 – 表示嵌入字體外形是否用於顯示文本字段。 如需了解更多信息，參見嵌入字體部分。textField屬性 – 一個按鈕內部文本字段的引用。
范例
下面的范例創建一個新的TextFormat對象並且將按鈕的文本設置為紅色粗體字體。
// Import the required component classes. import fl.controls.Button; // Create a new TextFormat object which will be used for the button's label. var myTextFormat:TextFormat = new TextFormat(); myTextFormat.bold = true; myTextFormat.color = 0xFF0000; /* Create a new Button component instance and set the textFormat style to the TextFormat object created earlier. */ var myButton:Button = new Button(); myButton.label = "Click me"; myButton.move(10, 10); myButton.setStyle("textFormat", myTextFormat); addChild(myButton);
結果
你需要為本范例下載下列源文件：
- using_button_component section07 example1.zip (ZIP, 390K)
你也可以為禁用的Button實例設置文本格式。
范例
下面范例演示如何為禁用的Button實例設置文本格式：
// Import the required component classes. import fl.controls.Button; // Create a new TextFormat object which will be used when the button is enabled. var enabledTextFormat:TextFormat = new TextFormat(); enabledTextFormat.bold = true; enabledTextFormat.font = "Comic Sans MS"; enabledTextFormat.size = 14; // Create a new TextFormat object which will be used when the button is disabled. var disabledTextFormat:TextFormat = new TextFormat(); disabledTextFormat.color = 0xFF0000; disabledTextFormat.font = "Comic Sans MS"; disabledTextFormat.italic = true; disabledTextFormat.size = 12; /* Create a new Button component instance, set the textFormat style, and add the button to the display list. */ var enabledButton:Button = new Button(); enabledButton.label = "enabled = true"; enabledButton.setStyle("textFormat", enabledTextFormat); enabledButton.setSize(140, 40); enabledButton.move(10, 10); addChild(enabledButton); /* Create a new Button component instance, set the textFormat style, and add the button to the display list. */ var disabledButton:Button = new Button(); disabledButton.enabled = false; disabledButton.label = "enabled = false"; disabledButton.setStyle("disabledTextFormat", disabledTextFormat); disabledButton.setSize(140, 40); disabledButton.move(160, 10); addChild(disabledButton);
結果
你需要為本范例下載下列源文件：
- using_button_component section07 example2.zip (ZIP, 390K)
你可以通過textField屬性訪問Button實例的內部textField對象。
范例
下面范例演示如何使用textField屬性創建具有多行標簽的按鈕，以便訪問Button實例的內部textField對象：
// Import the required component classes. import fl.controls.Button; // Create a new TextFormat object and set the align property to "center". var myTextFormat:TextFormat = new TextFormat(); myTextFormat.align = TextFormatAlign.CENTER; /* Create a new Button component instance, set the textFormat style to the TextFormat object created earlier, and add the button to the display list. */ var myButton:Button = new Button(); myButton.label = "The quick brown fox jumped over the lazy dog"; myButton.textField.wordWrap = true; myButton.setStyle("textFormat", myTextFormat); myButton.setSize(120, 60); myButton.move(10, 10); addChild(myButton);
結果
你需要為本范例下載下列源文件：
- using_button_component section07 example3.zip (ZIP, 390K)
嵌入字體
Flash文檔的嵌入字體允許你在不改變字體的情形下旋轉文本字段 (例如按鈕標簽)。 此外，它還允許你應用高級的消除鋸齒技術，該技術能夠增加小尺寸（例如10點或10點以下）字體的可讀性。 使用嵌入字體還允許你使用你的Flash文檔中的字體，而用戶可能沒有在他們的計算機中安裝這些字體。
注：使用嵌入字體的最大不足之處是它增加你的應用程序的文件大小或下載文件大小。
使用具有Button實例的嵌入字體是一個多步驟過程：
- 通過在Library面板的彈出菜單（Library面板的右上角）中選中New Font，在Flash文檔庫中創建一個新的字體符號。
- 在 Font Symbol Properties 對話框中，選中期望的字體風格（font face）和屬性。
- 為 Font 符號設置鏈接信息。
- 使用 ActionScript創建一個新的Font 符號實例。
- 創建一個新的 TextFormat 對象並且指定嵌入字體風格的名稱。
- 將Button實例的embedFonts 式樣設置為true。
- 將Button實例的textFormat式樣設置為在步驟5創建的TextFormat對象。
如需了解關於嵌入字體的更多信息，參見嵌入字體快速入門文章。
提示：如果你正在使用具有Button實例的嵌入字體，你可以啟動高級消除鋸齒功能以便改善較小尺寸字體的視覺質量。
范例
下面范例創建兩個Button實例，為其中一個實例開啟嵌入字體，然后對每個按鈕進行90度旋轉操作。 該范例需要在你的Flash文檔庫中提供一種具有 MyFont的鏈接類的字體。
// Import the required component classes. import fl.controls.Button; // Create a new Font object from the MyFont linkage in the library. var myFont:Font = new MyFont(); /* Create a new TextFormat object and set the font name to the Font object's fontName property. */ var myTextFormat:TextFormat = new TextFormat(); myTextFormat.font = myFont.fontName; /* Create a new Button component instance, set the rotation to 90 degrees, set the embedFonts style to true, set the textFormat style to the previously created TextFormat object, and add the button to the display list. */ var embedTrue:Button = new Button(); embedTrue.rotation = 90; embedTrue.width = 120; embedTrue.label = "embedFonts = true"; embedTrue.move(30, 10); embedTrue.setStyle("embedFonts", true); embedTrue.setStyle("textFormat", myTextFormat); addChild(embedTrue); /* Create a new Button component instance, set the rotation to 90 degrees, set the embedFonts style to false (default), set the textFormat style to the previously created TextFormat object, and add the button to the display list. Since the font is not embedded for this button instance, the button's label will not display any text after the button is rotated. */ var embedFalse:Button = new Button(); embedFalse.rotation = 90; embedFalse.width = 120; embedFalse.label = "embedFonts = false"; embedFalse.move(60, 10); embedFalse.setStyle("embedFonts", false); embedFalse.setStyle("textFormat", myTextFormat); addChild(embedFalse);
結果
你需要為本范例下載下列源文件：
- using_button_component section08 example1.zip (ZIP, 410K)
范例
下面范例演示如何使用textField 屬性針對Button實例的嵌入文本字段應用高級消除鋸齒功能。該范例需要在你的Flash文檔庫中提供一種具有MyFont的鏈接類的字體。
// Import the required component classes. import fl.controls.Button; // Create a new Font object from the MyFont linkage in the library. var myFont:Font = new MyFont(); // Create a new TextFormat object and set the font name and font size. var myTextFormat:TextFormat = new TextFormat(); myTextFormat.font = myFont.fontName; myTextFormat.size = 8; /* Create a new Button component instance, set the embedFonts style to true, set the nested text field's antiAliasType property to "normal", and add the button to the display list. */ var normalAliasButton:Button = new Button(); normalAliasButton.label = "AntiAliasType.NORMAL"; normalAliasButton.setStyle("embedFonts", true); normalAliasButton.setStyle("textFormat", myTextFormat); normalAliasButton.textField.antiAliasType = AntiAliasType.NORMAL; normalAliasButton.width = 140; normalAliasButton.move(10, 10); addChild(normalAliasButton); /* Create a new Button component instance, set the embedFonts style to true, set the nested text field's antiAliasType property to "advanced", and add the button to the display list. */ var advancedAliasButton:Button = new Button(); advancedAliasButton.label = "AntiAliasType.ADVANCED"; advancedAliasButton.setStyle("embedFonts", true); advancedAliasButton.setStyle("textFormat", myTextFormat); advancedAliasButton.textField.antiAliasType = AntiAliasType.ADVANCED; advancedAliasButton.width = 140; advancedAliasButton.move(160, 10); addChild(advancedAliasButton);
結果
你需要為本范例下載下列源文件：
- using_button_component section08 example2.zip (ZIP, 410K)
創建具有emphasized屬性的按鈕
在創建應用程序過程中，你可能希望強調某個按鈕。 例如，如果你有一個帶有一個Submit 和一個Cancel 按鈕的簡單反饋表格，你可能希望在Submit按鈕周圍添加邊框以便用戶能夠更易於看見它。 使用Button組件可以方便地為Button實例添加強調效果，因為你只需將emphasized 屬性設置為true。當處理具有強調屬性的按鈕時，你將經常使用下列屬性和式樣：
emphasized屬性 – 一個布爾（Boolean）值，表示當按鈕處於彈起狀態時是否在Button組件周圍添加邊框。emphasizedPadding式樣 – 填料，用像素表示，用於定義Button邊界的雙線之間。emphasizedSkin式樣 - 皮膚，當按鈕添加強調效果時使用。
范例
下面范例創建一個具有強調效果的按鈕。
// Import the required component classes. import fl.controls.Button; /* Create a new Button component instance, set the emphasized property to true, and add the button to the display list. */ var myButton:Button = new Button(); myButton.label = "emphasized = true"; myButton.emphasized = true; myButton.width = 120; myButton.move(10, 10); addChild(myButton);
結果
你需要為本范例下載下列源文件：
- using_button_component section09 example1.zip (ZIP, 390K)
范例
下面范例使用Slider組件的一個實例來控制Button實例的emphasizedPadding式樣的值。 該范例要求文檔庫中包含Button組件和Slider組件。
// Import the required component classes. import fl.controls.Button; import fl.controls.Slider; import fl.events.SliderEvent; /* Create a new Button component instance, set the emphasized property to true, and add the button to the display list. */ var myButton:Button = new Button(); myButton.label = "emphasized = true"; myButton.emphasized = true; myButton.width = 120; myButton.move(10, 10); addChild(myButton); /* Create a new Slider component instance, set the liveDragging property to true, and add the slider to the display list. */ var mySlider:Slider = new Slider(); mySlider.liveDragging = true; mySlider.minimum = 0; mySlider.maximum = 10; mySlider.value = 2; mySlider.tickInterval = 1; mySlider.width = 120; mySlider.move(10, 65); mySlider.addEventListener(SliderEvent.CHANGE, changeHandler); addChild(mySlider); /* Handler function for the Slider component instance. This function sets the emphasizedPadding style to the value of the slider. */ function changeHandler(event:SliderEvent):void { myButton.setStyle("emphasizedPadding", event.value); }
提示：具有強調效果的邊界是從 Button 實例的外圍邊界估算的。 如果 Button實例放置於 x 和y 的坐標均為 20像素的位置，並且其emphasizedPadding式樣設置為5，則具有強調屬性的邊界的左上角將位於 15像素位置。
你需要為本范例下載下列源文件：
- using_button_component section09 example2.zip (ZIP, 430K)
設置圖標
當使用Button組件時，你可以有選擇地指定按鈕標簽旁邊的圖標。 這使得你能夠方便地為一個Submit按鈕添加一個檢查標志圖標以及為一個Cancel按鈕添加一個紅色X，或你能夠將一個產品徽標放置在其名稱的旁邊。
當處理圖標時，你將經常使用下列式樣：
icon– 類的名稱，當沒有選中撥動按鈕並且鼠標沒有落在按鈕上時用作圖標。disabledIcon– 類的名稱，當按鈕禁用時用作圖標。downIcon– 類的名稱，當沒有選中撥動按鈕並且鼠標處於按下狀態時用作圖標。overIcon– 類的名稱，當沒有選中按鈕並且鼠標落在組件之上時用作圖標。upIcon– 類的名稱，當沒有選中撥動按鈕並且鼠標沒有落在按鈕上時用作圖標。selectedDisabledIcon– 類的名稱，當按鈕被選中並且禁用時用作圖標。selectedDownIcon– 類的名稱，當選中按鈕並且鼠標按鈕處於按下狀態時用作圖標。selectedOverIcon– 類的名稱，當選中按鈕並且鼠標落在組件之上時用作圖標。selectedUpIcon– 類的名稱，當選中按鈕並且鼠標按鈕處於彈起狀態時用作圖標。
如需了解關於撥動按鈕的更多信息，參見 創建撥動按鈕。
注：設置 Button 實例的icon式樣能夠為每個按鈕的狀態 (up, down, over, disabled等) 設置默認圖標。
范例
下面范例演示如何設置一個Button實例的icon式樣。 注意，范例中只設置了icon式樣，並且該圖標可以自動傳導至其它圖標式樣。
// Import the required component classes. import fl.controls.Button; /* Create a new Button component instance, set the icon style to the BulletCheck linkage in the library, and add the button to the display list. */ var myButton:Button = new Button(); myButton.label = "Confirm"; myButton.move(10, 10); myButton.setStyle("icon", BulletCheck); addChild(myButton);
結果
你需要為本范例下載下列源文件：
- using_button_component section10 example1.zip (ZIP, 390K)
你可以使用 labelPosition 屬性確定按鈕標簽與圖標的相對位置。
范例
下面范例演示labelPosition 屬性的4個可能值，使用的常量源自ButtonLabelPosition類 (fl.controls.ButtonLabelPosition)。 該范例需要在你的Flash文檔庫中提供一個具有AdobeLogo的鏈接類的符號。
// Import the required component classes. import fl.controls.Button; import fl.controls.ButtonLabelPlacement; /* Create a new Button component instance, set the icon style to the AdobeLogo linkage in the library, set the labelPlacement property to "left", and add the button to the display list. */ var buttonLeft:Button = new Button(); buttonLeft.label = "ButtonLabelPlacement.LEFT"; buttonLeft.labelPlacement = ButtonLabelPlacement.LEFT; buttonLeft.setStyle("icon", AdobeLogo); buttonLeft.setSize(200, 60); buttonLeft.move(10, 10); addChild(buttonLeft); /* Create a new Button component instance, set the icon style to the AdobeLogo linkage in the library, set the labelPlacement property to "right", and add the button to the display list. */ var buttonRight:Button = new Button(); buttonRight.label = "ButtonLabelPlacement.RIGHT"; buttonRight.labelPlacement = ButtonLabelPlacement.RIGHT; buttonRight.setStyle("icon", AdobeLogo); buttonRight.setSize(200, 60); buttonRight.move(10, 80); addChild(buttonRight); /* Create a new Button component instance, set the icon style to the AdobeLogo linkage in the library, set the labelPlacement property to "top", and add the button to the display list. */ var buttonTop:Button = new Button(); buttonTop.label = "ButtonLabelPlacement.TOP"; buttonTop.labelPlacement = ButtonLabelPlacement.TOP; buttonTop.setStyle("icon", AdobeLogo); buttonTop.setSize(200, 60); buttonTop.move(10, 150); addChild(buttonTop); /* Create a new Button component instance, set the icon style to the AdobeLogo linkage in the library, set the labelPlacement property to "bottom", and add the button to the display list. */ var buttonBottom:Button = new Button(); buttonBottom.label = "ButtonLabelPlacement.BOTTOM"; buttonBottom.labelPlacement = ButtonLabelPlacement.BOTTOM; buttonBottom.setStyle("icon", AdobeLogo); buttonBottom.setSize(200, 60); buttonBottom.move(10, 220); addChild(buttonBottom);
結果
你需要為本范例下載下列源文件：
- using_button_component section10 example2.zip (ZIP, 390K)
通過設置textPadding 屬性，你可以在按鈕圖標和其標簽之間指定留出的空間大小。
范例
下面范例使用Slider組件來控制Button實例的圖標和標簽之間文本填料的數量。 該范例需要在你的文檔庫中提供一個具有AdobeLogo的鏈接類的符號以及一個Button和Slider組件。
// Import the required component classes. import fl.controls.Button; import fl.controls.Slider; import fl.events.SliderEvent; /* Create a new Button component instance, set the icon style to the AdobeLogo linkage in the library, set the textPadding style to 5 pixels, and add the button to the display list. */ var myButton:Button = new Button(); myButton.label = "textPadding: 5"; myButton.setStyle("icon", AdobeLogo); myButton.setStyle("textPadding", 5); myButton.setSize(140, 40); myButton.move(10, 10); addChild(myButton); /* Create a new Slider component instance, set the liveDragging property to true, and add the slider to the display list. This slider will be used to control the amount of text padding between the button instance's icon and label text. */ var mySlider:Slider = new Slider(); mySlider.minimum = 0; mySlider.maximum = 15; mySlider.value = 5; mySlider.liveDragging = true; mySlider.tickInterval = 1; mySlider.width = myButton.width; mySlider.move(10, 60); mySlider.addEventListener(SliderEvent.CHANGE, changeHandler); addChild(mySlider); /* Handler function for the Slider component instance. This function sets the button instance's textPadding style based on the current value of the slider. */ function changeHandler(event:SliderEvent):void { myButton.setStyle("textPadding", event.value); myButton.label = "textPadding: " + event.value; }
結果
你需要為本范例下載下列源文件：
- using_button_component section10 example3.zip (ZIP, 431K)
通過設置一個或更多Button的圖標式樣，你可以為任何Button狀態指定不同的圖標。
范例
下面范例為一個Button實例設置一個icon式樣：
// Import the required component classes. import fl.controls.Button; import fl.controls.CheckBox; /* Create a new Button component instance, set the various icon styles, and add the button to the display list. */ var myButton:Button = new Button(); myButton.label = "icons"; myButton.enabled = true; myButton.toggle = true; myButton.setStyle("upIcon", BulletCheck); myButton.setStyle("overIcon", BulletWarning); myButton.setStyle("downIcon", BulletCritical); myButton.setStyle("disabledIcon", IconCheck); myButton.setStyle("selectedUpIcon", BulletCheckSelected); myButton.setStyle("selectedOverIcon", BulletWarningSelected); myButton.setStyle("selectedDownIcon", BulletCriticalSelected); myButton.setStyle("selectedDisabledIcon", IconCheckSelected); myButton.setSize(120, 40); myButton.move(10, 10); addChild(myButton); /* Create a new CheckBox component instance, and add it to the display list. This button will control whether or not the button instance is enabled. */ var enabledCheckBox:CheckBox = new CheckBox(); enabledCheckBox.label = "enabled"; enabledCheckBox.selected = myButton.enabled; enabledCheckBox.move(10, 60); enabledCheckBox.addEventListener(Event.CHANGE, enabledChangeHandler); addChild(enabledCheckBox); /* Create a new Button component instance, and add it to the display list. This button will control whether or not the button instance is toggled. */ var toggleCheckBox:CheckBox = new CheckBox(); toggleCheckBox.label = "toggle"; toggleCheckBox.selected = myButton.toggle; toggleCheckBox.move(10, 80); toggleCheckBox.addEventListener(Event.CHANGE, toggleChangeHandler); addChild(toggleCheckBox); /* Handler function for the enabled check box. This function gets called when the value of the enabledCheckBox is changed, and sets the button's enabled property based on whether the enabledCheckBox instance is currently selected. */ function enabledChangeHandler(event:Event):void { myButton.enabled = enabledCheckBox.selected; } /* Handler function for the toggle check box. This function gets called when the value of the toggleCheckBox is changed, and sets the button's toggle property based on whether the toggleCheckBox instance is currently selected. */ function toggleChangeHandler(event:Event):void { myButton.toggle = toggleCheckBox.selected; }
結果
你需要為本范例下載下列源文件：
- using_button_component section10 example4.zip (ZIP, 430K)
你可以從一個遠端位置下載圖像然后將其用於按鈕圖標。
范例
下面范例演示如何使用一個Loader 實例和一個UILoader組件實例從一個按鈕圖標下載一個遠端圖像：
// Import the required component classes. import fl.controls.Button; import fl.containers.UILoader; // Create a new Loader instance, and load an external PNG image. var logo:Loader = new Loader(); logo.contentLoaderInfo.addEventListener(Event.COMPLETE, completeHandler1); logo.load(new URLRequest("http://www.helpexamples.com/flash/images/logo.png")); // Create a new UILoader component instance and load an external PNG image. var logo2:UILoader = new UILoader(); logo2.scaleContent = false; logo2.addEventListener(Event.COMPLETE, completeHandler2); logo2.load(new URLRequest("http://www.helpexamples.com/flash/images/logo.png")); // Create a new Button component instance, and add it to the display list. var myButton:Button = new Button(); myButton.label = "Loader"; myButton.move(10, 10); myButton.setSize(140, 100); addChild(myButton); // Create a new Button component instance, and add it to the display list. var secondButton:Button = new Button(); secondButton.label = "UILoader"; secondButton.move(160, 10); secondButton.setSize(140, 100) addChild(secondButton); /* Handler function for the Loader instance. This function sets the icon style for the myButton button instance, and updates the button's display using the validateNow() method. */ function completeHandler1(event:Event):void { myButton.setStyle("icon", logo); myButton.validateNow(); } /* Handler function for the UILoader component instance. This function sets the icon style on the secondButton button instance, and updates the UILoader and Button components display using the validateNow() method. */ function completeHandler2(event:Event):void { secondButton.setStyle("icon", logo2); logo2.validateNow(); secondButton.validateNow(); }
結果
你需要為本范例下載下列源文件：
- using_button_component section10 example5.zip (ZIP, 410K)
創建自動重復按鈕
當利用Flash創建應用程序或游戲時，你可能常常希望一個按鈕連續不斷地下發事件，只要用戶一直按下Button實例。 例如，如果你希望創建一個自定義數字步進電動機，則你將會希望數字一直增加或減少，只要用戶按下箭頭鍵不動。 類似地，如果你希望創建一款游戲，則你可能希望游戲角色一直奔跑，只要用戶不斷點擊按鈕。 Button 組件具有一個 autoRepeat 屬性 (繼承自 fl.controls.BaseButton 類) ，它能夠在用戶將鼠標按鈕在組件上按下保持不動時，控制buttonDown事件 (由 fl.events.ComponentEvent.BUTTON_DOWN常量表示) 的下發次數超過一次。
通過使用 repeatDelay 和repeatInterval 式樣 (繼承自 fl.controls.LabelButton 類)，你可以控制初始buttonDown 事件之前的延時以及在按鈕處於按下狀態時事件下發的頻率。 repeatDelay 式樣能夠確定在buttonDown 事件首次被下發之后及在buttonDown事件第二次發送之前的等待 ms數量(默認值為 500 ms)。repeatInterval式樣能夠確定在由repeatDelay式樣指定的延時之后下發的 buttonDown 事件之間的時間間隔，單位為ms (默認值為 35ms)。 例如，如果你將repeatDelay 式樣設置為 2000，將repeatInterval 式樣設置為500，則第一個 buttonDown 事件將在用戶按下按鈕之后的 2 秒 (2000 ms) 之后下發，並且只要用戶一直按下按鈕，則每隔500 ms 下發一次 buttonDown 事件。
范例
下面的范例創建一個Button實例，將其autoRepeat屬性設置為true，並且為buttonDown和click事件添加事件偵聽器。
// Import the required component classes. import fl.controls.Button; import fl.controls.TextArea; import fl.events.ComponentEvent; var init:Boolean = false; /* Create a new Button component instance, set its autoRepeat property to true, and add it to the display list. */ var myButton:Button = new Button(); myButton.autoRepeat = true; myButton.label = "autoRepeat = true"; myButton.width = 120; myButton.move(10, 10); myButton.addEventListener(ComponentEvent.BUTTON_DOWN, buttonDownHandler); myButton.addEventListener(MouseEvent.CLICK, clickHandler); addChild(myButton); // Create a new TextArea component instance, and add it to the display list. var debugTextArea:TextArea = new TextArea(); debugTextArea.setSize(200, 100); debugTextArea.move(10, 40); addChild(debugTextArea); /* Handler function for the Button component instance. This function gets called whenever the button instance dispatches the buttonDown event. This function checks the value of the init variable, and if true clears any existing text from the text area, next a string is appended to the debugTextArea instance, and scrolls the text area to the last line. */ function buttonDownHandler(event:ComponentEvent):void { if (init) { debugTextArea.text = ""; init = false; } debugTextArea.appendText("[" + getTimer() + "ms] " + event.type + "\n"); debugTextArea.verticalScrollPosition = debugTextArea.maxVerticalScrollPosition; } /* Handler function for the Button component instance. This function gets called whenever the button instance dispatches the click event. This function appends a string to the debugTextArea instance, and scrolls the text area to the last line. Finally, the init function is reset to true. */ function clickHandler(event:MouseEvent):void { debugTextArea.appendText("[" + getTimer() + "ms] " + event.type + "\n"); debugTextArea.verticalScrollPosition = debugTextArea.maxVerticalScrollPosition; init = true; }
結果
你需要為本范例下載下列源文件：
- using_button_component section11 example1.zip (ZIP, 472K)
創建撥動按鈕
撥動按鈕是一種具有兩種狀態-選中和棄選的按鈕，它的行為與 CheckBox組件相似。 這種按鈕允許你創建具有兩種不同狀態按鈕的應用程序。 如果你具有帶有若干欄的數據柵格並且希望通過一種簡單方式允許用戶在每個欄之間切換，則這一功能非常有用。
當處理具有切換屬性的按鈕時，你將經常使用下列屬性和式樣：
Toggle屬性 – 布爾（Boolean）值，表示一個按鈕是否可以切換。selected屬性 – 布爾（Boolean）值，表示一個撥動按鈕是否可以在開或關的位置切換。selectedUpIcon式樣 – 類的名稱，當選中按鈕並且鼠標按鈕處於彈起狀態時用作圖標。selectedOverIcon式樣 – 類的名稱，當選中按鈕並且鼠標落在組件之上時用作圖標。selectedDownIcon式樣 – 類的名稱，當選中按鈕並且鼠標按鈕處於按下狀態時用作圖標。selectedDisabledIcon式樣 – 類的名稱，當按鈕被選中並且禁用時用作圖標。selectedUpSkin式樣 – 類的名稱，當選中撥動按鈕並且鼠標沒有落在組件之上時用作背景和邊界的皮膚。selectedOverSkin式樣 – 類的名稱，當選中撥動按鈕並且鼠標落在組件之上時用作背景和邊界的皮膚。selectedDownSkin式樣 – 類的名稱，當選中撥動按鈕並且鼠標按鈕處於按下狀態時用作背景和邊界的皮膚。selectedDisabledSkin式樣 – 類的名稱，當選中和禁用撥動按鈕時用作背景和邊界的皮膚。
范例
下面的范例創建一個Button實例，將其toggle屬性設置為true，並且為change和click事件添加事件偵聽器。
// Import the required component classes. import fl.controls.Button; import fl.controls.TextArea; import fl.events.ComponentEvent; /* Create a new Button component instance, set the toggle property to true, and add it to the display list. */ var myButton:Button = new Button(); myButton.toggle = true; myButton.label = "toggle = true, selected = " + myButton.selected; myButton.width = 200; myButton.move(10, 10); myButton.addEventListener(Event.CHANGE, changeHandler); myButton.addEventListener(MouseEvent.CLICK, clickHandler); addChild(myButton); // Create a TextArea component instance, and add it to the display list. var debugTextArea:TextArea = new TextArea(); debugTextArea.setSize(200, 100); debugTextArea.move(10, 40); addChild(debugTextArea); /* Handler function for the Button component instance. This function sets the button's label to the value of the button's selected property, and updates the text area instance with the type of event that was dispatched. */ function changeHandler(event:Event):void { myButton.label = "toggle = true, selected = " + myButton.selected; debugTextArea.appendText("[" + getTimer() + "ms] " + event.type + "\n"); debugTextArea.verticalScrollPosition = debugTextArea.maxVerticalScrollPosition; } /* Handler function for the Button component instance. This function sets the button's label to the value of the button's selected property, and updates the text area instance with the type of event that was dispatched. */ function clickHandler(event:MouseEvent):void { myButton.label = "toggle = true, selected = " + myButton.selected; debugTextArea.appendText("[" + getTimer() + "ms] " + event.type + "\n"); debugTextArea.verticalScrollPosition = debugTextArea.maxVerticalScrollPosition; }
結果
你需要為本范例下載下列源文件：
- using_button_component section12 example1.zip (ZIP, 472K)
范例
下面范例創建兩個具有切換屬性的按鈕：flashButton和 flexButton，並且根據當前按鈕是否被選中設置 Button實例的 emphasized屬性：
// Import the required component classes. import fl.controls.Button; /* Create a new Button component instance, set the button's toggle, selected, and emphasized properties, and add it to the display list. */ var flashButton:Button = new Button(); flashButton.label = "Flash"; flashButton.toggle = true; flashButton.selected = true; flashButton.emphasized = flashButton.selected; flashButton.move(10, 10); flashButton.addEventListener(MouseEvent.CLICK, clickHandler); addChild(flashButton); /* Create a new Button component instance, set the button's toggle, selected, and emphasized properties, and add it to the display list. */ var flexButton:Button = new Button(); flexButton.label = "Flex"; flexButton.toggle = true; flexButton.selected = false; flexButton.emphasized = flexButton.selected; flexButton.move(120, 10); flexButton.addEventListener(MouseEvent.CLICK, clickHandler); addChild(flexButton); /* Handler function for the flashButton and flexButton instances. This function sets the emphasized properties for the target button based on the value of the target button's selected property. */ function clickHandler(event:MouseEvent):void { var btn:Button = event.currentTarget as Button; btn.emphasized = btn.selected; }
結果
你需要為本范例下載下列源文件：
- using_button_component section12 example2.zip (ZIP, 390K)
更多信息
如需了解該話題的更多信息，參見ActionScript 3.0 Reference for the Adobe Flash Platform的"Button class"部分，以及Using ActionScript 3.0 Components的"Using the Button" 部分。