CheckBox Component

CheckBox Component

Flash CS4 ActionScript 3.0 Tutorial

 

How to Add Pre-Built CheckBox Component to Your Flash File

 

 

Flash ships with several Components. Components are pre-packaged objects that allow you to quickly add elements, such as scroll bars, text boxes and buttons.

Components can be added to the stage using the drag and drop method from the Components panel or added with ActionScript. The Component parameters are altered with the Component Inspector or ActionScript.

This example shows how to add a CheckBox Component using the drag and drop method and with ActionScript. It also describes changing the Component parameters with the Component Inspector and ActionScript. To talk to a Component with ActionScript, it must first be added to the Library.

Components are actually Movie Symbol objects regardless of the Component. If you are developing in ActionScript 2.0, you will see a different set of Components available.

For more information on the other Components, see topics, Button Component, ColorPicker Component, ComboBox Component, DataGrid Component, Label Component, List Component, NumericStepper Component, ProgressBar Component, RadioButton Component, ScrollPane Component, Slider Component, TextArea Component, TextInput Component, TileList Component, UILoader Component and UIScrollBar Component.

Tutorial Elements

CheckBox Component with instance name ckBox01_mc

 

Step One

Open a new Flash document and add a new layer.

Step Two

Name the upper layer Actions and the lower one Content.

Step Three

Select the first frame of the Content layer and open the Components panel (Window > Components).

Step Four

Double-click the CheckBox Component icon to a add a CheckBox to the center of the stage. The CheckBox and it's assets are also added to the Library.

Step Five

With the CheckBox selected open the Properties panel and change it's x and y settings to 100 and 100.

Step Six

With the CheckBox still selected, open the Component Inspector (Window > Component Inspector).

Step Seven

Click the word Label in the Value column and change the text to Apples, then press Enter. The label on the CheckBox updates.

Step Eight

With the CheckBox still selected, open the Properties panel and assign it an instance name of ckBox01_mc..

Step Nine

Open the ActionScript panel for the only keyframe in the Actions layer by Option double-clicking (PC - Alt double-clicking) the keyframe.

Step Ten

Copy/Paste the following code in the ActionScript Panel:

import fl.controls.CheckBox;

var ckBox02_mc:CheckBox=new CheckBox();

ckBox02_mc.label="Oranges";

ckBox02_mc.x=300;

ckBox02_mc.y=100;

addChild(ckBox02_mc);

ckBox01_mc.addEventListener(MouseEvent.CLICK, onClick01);

function onClick01(e:MouseEvent):void {

if (e.target.selected==true) {

trace("You chose Apples");

} else {

trace("You didn't choose Apples");

}

}

ckBox02_mc.addEventListener(MouseEvent.CLICK, onClick02);

function onClick02(e:MouseEvent):void {

if (e.target.selected==true) {

trace("You chose Oranges");

} else {

trace("You didn't choose Oranges");

}

}

Step Eleven

Click the Auto Format button to format the code

Step Twelve

Test your movie by pressing Cmd/Return (PC - Ctrl/Enter). The two check boxes appear on the stage. Whenever a box is clicked, a You chose [fruit name] or You didn't chose [fruit name] message appears in the Output panel.

Dissecting the Code

The first line of the code at Step Ten imports the code necessary to talk to the CheckBox class. Line two establishes a new CheckBox variable named ckBox02_mc. This is the second check box that we are adding to the stage with ActionScript. It's label value and location are set with the next few lines of code.

Line 6 adds the ckBox02_mc to the stage.

Line 7 adds an event listener to ckBox01_mc. Whenever the box is clicked, the function onClick01 is run. The function includes an if statement to determine if the box is selected or not. Depending on the result, one of two statements are traced.

The final block of code repeats the process for the second CheckBox.

More Component Options

In this example we showed how to change the CheckBox label. You can use this same method to change the other CheckBox values shown in the Component Inspector (i.e., enabled, labelPlacement, selected and visible). You can also alter the size to accommodate more text by changing the width property (i.e., ckBox01_mc.width=200;)