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();

myButton.x = myButton.y = 50

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

myButton.addEventListener(MouseEvent.CLICK, sayHi);

function sayHi(MouseEvent):void{

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!


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