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:
toggleproperty – A Boolean value that indicates whether a button can be toggled.selectedproperty – A Boolean value that indicates whether a toggle button is toggled in the on or off position.selectedUpIconstyle – Name of the class to use as the icon when the button is selected and the mouse button is up.selectedOverIconstyle – Name of the class to use as the icon when the button is selected and the mouse is over the component.selectedDownIconstyle – Name of the class to use as the icon when the button is selected and the mouse button is down.selectedDisabledIconstyle – Name of the class to use as the icon when the button is selected and disabled.selectedUpSkinstyle – 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.selectedOverSkinstyle – 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.selectedDownSkinstyle – 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.selectedDisabledSkinstyle – 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.
{ 0 comments… add one now }