Monday, September 20, 2010

Using the Button component: Part 1

Today we will learn how to use the Button component.

Button component is a rectangular button with a changeable size, that can be pushed by the user using click or space key. It is possible to add a thumbnail to the button. We can also make it toggle-able, so that the button remains pushed when we click it once, and goes back to default when we click it the second time.

When a Button component is in focus, user can interract with it using these keys:

Shift+Tab - Changes focus to the previous object
Space - Presses or releases the button and calls the "click" event.
Tab - Changes focus to the next object
Enter/Return - Changes focus to the next object, if the button is set as the default button through FocusManager.

To set a button as the default button (a button, that receives "click" event once the user presses Enter key), use the FocusManager.defaultButton property. In the next example, a button with an instance of enterButton is set as default:

FocusManager.defaultButton = enterButton;

Button component has 5 properties. They can all be set through the Component Inspector, or dynamically, using AS3. The properties are: emphasized, label, labelPlacement, toggle, selected. They will be all discussed in-depth in the next tutorials. Setting the parameters is simple:

myButton.emphasized = true;

In the example below you can see what you can do with the Button component by just changing some parameters:


This is how you create a Button dynamically:

import fl.controls.Button;

var myButton = new Button();
addChild(myButton);

myButton.x = myButton.y = 50
myButton.label="Test"
myButton.emphasized=true

Using Buttons is really simple. Just add a listener and create a function.

myButton.addEventListener(MouseEvent.CLICK, sayHi);

function sayHi(MouseEvent):void{
trace("hi!");
}

Button components can be used in any application, because they are fully customizable.

In the next tutorial we will learn how to add an icon to our button!

Related:

Using Button component part 2
Using Button component part 3
Using Button component part 4
Using Button component part 5

1 comment:

Morty said...

aah.. I need the second part of this tutorial. Can you give me just a quick tip how to add a Sprite to a button via actionscript? Anyway thanks for this article.. :-)

Post a Comment