Setting individual icons for different states on a Button control in Flash with ActionScript 3.0

by Peter deHaan on November 26, 2008

in Button

In a previous example, “Setting icons on the Button component with Flash and ActionScript 3.0″, we saw how to add an icon to a Button control by setting the icon style.

The following example shows how you can set separate icons for each button state (up, down, over, etc) by setting the individual button styles (upIcon, downIcon, overIcon, etc).

Full code after the jump.

// ActionScript 3.0
// 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(evt: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(evt:Event):void {
    myButton.toggle = toggleCheckBox.selected;
}

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

{ 0 comments… add one now }

Leave a Comment

You can use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="">

Previous post:

Next post: