Saturday, September 25, 2010

Using the CheckBox component

Today we will learn how to create and use the CheckBox component.

Check boxes are usually used in forms and quizzes. This component allows the user to check a box next to a label, kind of like a toggle button. Example:


You can create check boxes dynamically like this:

import fl.controls.CheckBox;

var myCheckBox:CheckBox = new CheckBox();
addChild(myCheckBox);

It has 5 properties - enabled, label, labelPlacement, selected and visible.

When enabled is set to false, the checkbox is unclickable. Label is the text next to the check box. LabelPlacement - label's location relative to the box. Selected property is false by default (the box is empty) and true when the box is checked. Visible property, when set to false, makes the component fully transparent.


You can set these properties through AS3:

myCheckBox.selected=true;

The code to the first example is simple. It adds 3 listeners for 3 checkboxes to one function called 'manage'. This function checks each check box for 'selected' property and edits the text field (the text field's instance name is theText).

cGames.addEventListener(MouseEvent.CLICK, manage);
cAnims.addEventListener(MouseEvent.CLICK, manage);
cApps.addEventListener(MouseEvent.CLICK, manage);

function manage(evt:MouseEvent):void{
theText.text=""
theText.appendText((cGames.selected)?("games "):(""))
theText.appendText((cAnims.selected)?("animations "):(""))
theText.appendText((cApps.selected)?("applications "):(""))
}

If you want to change the style of your component (change the colors, shape, etc) you can do that by clicking on the ChcekBox from the library and editing it from there.


Thanks for reading!

2 comments:

Anonymous said...

This was quite helpful, especially since I am new to FLASH and action script.

Anonymous said...

Hi,
How the size of cb be changed!

Post a Comment