Creating emphasized Button components in Flash with ActionScript 3.0

When building applications, often you might want to add emphasis to a certain button. For example, if you had a simple feedback form with both a Submit and a Cancel button, you may want to add a border around the Submit button to make it a bit more visible to the user. Adding emphasis around a Button instance is easy using the Button component, as you only need to set the emphasized property to true.

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

• emphasized property – A Boolean value that indicates whether a border is drawn around the Button component when the button is in its up state.
• emphasizedPadding style – The padding, in pixels, to be applied between the double lines that define the Button’s perimeter.
• emphasizedSkin style – The skin to be used when a button has emphasis.

Full code after the jump.

The following example creates an emphasized button:

// ActionScript 3.0
// Import the required component classes.
import fl.controls.Button;
 
/* Create a new Button component instance, set the emphasized property to 
   true, and add the button to the display list. */
var myButton:Button = new Button();
myButton.label = "emphasized = true";
myButton.emphasized = true;
myButton.width = 120;
myButton.move(10, 10);
addChild(myButton);

The following example uses an instance of the Slider component to control the value of the Button instance’s emphasizedPadding style. This example requires both a Button component and a Slider component in the library:

// ActionScript 3.0
// Import the required component classes.
import fl.controls.Button;
import fl.controls.Slider;
import fl.events.SliderEvent;
 
/* Create a new Button component instance, set the emphasized property to
   true, and add the button to the display list. */  
var myButton:Button = new Button();
myButton.label = "emphasized = true";
myButton.emphasized = true;
myButton.width = 120;
myButton.move(10, 10);
addChild(myButton);
 
/* Create a new Slider component instance, set the liveDragging property to
   true, and add the slider to the display list. */
var mySlider:Slider = new Slider();
mySlider.liveDragging = true;
mySlider.minimum = 0;
mySlider.maximum = 10;
mySlider.value = 2;
mySlider.tickInterval = 1;
mySlider.width = 120;
mySlider.move(10, 65);
mySlider.addEventListener(SliderEvent.CHANGE, changeHandler);
addChild(mySlider);
 
/* Handler function for the Slider component instance. This function sets the
   emphasizedPadding style to the value of the slider. */
function changeHandler(evt:SliderEvent):void {
    myButton.setStyle("emphasizedPadding", evt.value);
}

Tip: The emphasized border is calculated from the outer edge of the Button instance. If the Button instance is positioned at an x and y position of 20 pixels and has its emphasizedPadding style set to 5, the top left corner of the emphasized border would be at 15 pixels.

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

Tagged as: Button, emphasized, emphasizedPadding