Customizing the Button component

You can transform a Button component horizontally and vertically both while authoring and at runtime. While authoring, select the component on the Stage and use the Free Transform tool or any of the Modify > Transform commands. At runtime, use the setSize() method (see UIObject.setSize()) or any applicable properties and methods of the Button class (see Button class). Resizing the button does not change the size of the icon or label.

The bounding box of a Button instance is invisible and also designates the hit area for the instance. If you increase the size of the instance, you also increase the size of the hit area. If the bounding box is too small to fit the label, the label clips to fit.

If an icon is larger than the button it will extend beyond the button's borders.

Using styles with the Button component

You can set style properties to change the appearance of a button instance. If the name of a style property ends in "Color", it is a color style property and behaves differently than non-color style properties. For more information, see Using styles to customize component color and text.

A Button component supports the following Halo styles:

Using skins with the Button component

The Button component uses the ActionScript drawing API to draw the button states. To skin the Button component while authoring, modify the ActionScript code within the ButtonSkin.as file located in the First Run\Classes\mx\skins\halo folder.

If you use the UIObject.createClassObject() method to create a Button component instance dynamically (at runtime), you can skin it dynamically. To skin a component at runtime, set the skin properties of the initObject parameter that is passed to the createClassObject() method. These skin properties set the names of the symbols to use as the button's states, both with and without an icon.

If you set the icon parameter while authoring or the icon ActionScript property at runtime, the same linkage identifier is assigned to three icon states: falseUpIcon, falseDownIcon, and trueUpIcon. If you want to designate a unique icon for any of the eight icon states (if, for example, you want a different icon to appear when a user presses a button) you must set properties of the initObject parameter that is passed to the createClassObject() method.

The following code creates an object called initObject to use as the initObject parameter and sets skin properties to new symbol linkage identifiers. The last line of code calls the createClassObject() method to create a new instance of the Button class with the properties passed in the initObject parameter, as follows:

var initObject = new Object();
initObject.falseUpIcon = "MyFalseUpIcon";
initObject.falseDownIcon = "MyFalseDownIcon";
initObject.trueUpIcon = "MyTrueUpIcon";
createClassObject(mx.controls.Button, "ButtonInstance", 0, initObject); 

For more information, see About skinning components, and UIObject.createClassObject().

If a button is enabled, it displays its over state when the pointer moves over it. The button receives input focus and displays its down state when it's clicked. The button returns to its over state when the mouse is released. If the pointer moves off the button while the mouse is pressed, the button returns to its original state and it retains input focus. If the toggle parameter is set to true, the state of the button does not change until the mouse is released over it.

If a button is disabled it displays its disabled state, regardless of user interaction.

A Button component uses the following skin properties: