Skip to content
Nov 25 / Peter deHaan

Setting Button component styles in Flash with ActionScript 3.0

The following example uses the getStyleDefinition() method to display a list of the Button component’s style names and default values. Clicking the skin styles in the data grid displays a preview of the selected skin. This example requires the Button, DataGrid and UILoader components to be in the library.

Full code after the jump.

// ActionScript 3.0
// 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(evt:Event):void {
    var item:Object = DataGrid(evt.currentTarget).selectedItem;
    try {
        previewLoader.source = getDefinitionByName(item.data);
    } catch (error:*) {
        previewLoader.source = null;
    }
}

The ActionScript 3.0 User Interface components also have a completely new method for skinning and styling components. Setting Button styles is now handled using the setStyle() method. You can get a list of each of the Button component’s native and inherited styles by using the getStyleDefiniton() method. By setting various Button styles you can do the following tasks:

  • Set icons to use with a button
  • Assign a text format for the button’s label
  • Embed fonts
  • Change a Button’s skins to change its appearance
  • Specify the interval for an auto-repeating button to dispatch buttonDown events

When working with styles, you’ll often use the following methods:

  • setStyle() – Sets a style property on a Button instance.
  • getStyle() – Retrieves a style property that is set in the style lookup chain of the button.
  • clearStyle() – Deletes a style property from a Button instance.
  • getStyleDefinition() – Retrieves the default style map for the current button.

For more information on the Flash/ActionScript 3.0 Button component, see the “Using the Button component” Flash Quick Start on Adobe.com.

Leave a Comment