Skip to content
Nov 26 / Peter deHaan

Creating toggle buttons in Flash with ActionScript 3.0

A toggle button is a button that allows for two states, selected and unselected, similar to the behavior of the CheckBox component. This allows you to build applications that allow two different states for a button. This can be very useful if you had a data grid with several columns and wanted an easy way to allow users to toggle the visibility of each column.

When working with toggleable buttons, you’ll often use the following properties and styles:

  • toggle property – A Boolean value that indicates whether a button can be toggled.
  • selected property – A Boolean value that indicates whether a toggle button is toggled in the on or off position.
  • selectedUpIcon style – Name of the class to use as the icon when the button is selected and the mouse button is up.
  • selectedOverIcon style – Name of the class to use as the icon when the button is selected and the mouse is over the component.
  • selectedDownIcon style – Name of the class to use as the icon when the button is selected and the mouse button is down.
  • selectedDisabledIcon style – Name of the class to use as the icon when the button is selected and disabled.
  • selectedUpSkin style – Name of the class to use as the skin for the background and border when a toggle button is selected and the mouse is not over the component.
  • selectedOverSkin style – Name of the class to use as the skin for the background and border when a toggle button is selected and the mouse is over the component.
  • selectedDownSkin style – Name of the class to use as the skin for the background and border when a toggle button is selected and the mouse button is down.
  • selectedDisabledSkin style – Name of the class to use as the skin for the background and border when a toggle button is selected and disabled.

The following example creates a Button instance, sets its toggle property to true, and adds event listeners for the change and click events

Full code after the jump.

// ActionScript 3.0
// 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(evt:Event):void {
    myButton.label = "toggle = true, selected = " + myButton.selected;
    debugTextArea.appendText("[" + getTimer() + "ms] " + evt.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(evt:MouseEvent):void {
    myButton.label = "toggle = true, selected = " + myButton.selected;
    debugTextArea.appendText("[" + getTimer() + "ms] " + evt.type + "\n");
    debugTextArea.verticalScrollPosition = debugTextArea.maxVerticalScrollPosition;
}

The following example creates two toggleable buttons, flashButton and flexButton, and sets the Button instance’s emphasized property based on whether the button is currently selected or not:

// ActionScript 3.0
// 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(evt:MouseEvent):void {
    var btn:Button = evt.currentTarget as Button;
    btn.emphasized = btn.selected;
}

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

Filed under Button
Leave a Comment