Checkbox component in Actionscript 3

In this tutorial you will learn how to use the checkbox component in Actionscript 3.0. A checkbox is a small box which displays a check mark when it has been clicked. Below I will show a simple example of how to use the checkbox component. I have used free stock images for this tutorial which are available from www.sxc.hu and the tweenLite plugin from greensock.com


Checkbox component in Actionscript 3

Step 1

Open a new Flash AS3 file.
Import the images you wish to use by selecting File > Import > Import to Stage. I have used an image of a monkey and a banana, but you can use whatever images you wish.




Step 2

Convert both of your images into movie clips (F8) and give them the following instance names accordingly: monkey_mc and banana_mc.


Step 3

Select Window > Components and drag two checkbox components onto the stage and place them below the images. Then give them the instance names: cb1 and cb2.




Step 4

On the timeline insert a new layer called “Actions”. Then open up the Actions panel and enter the following code:

//Import the tweenlite package.
import gs.TweenLite;

//Gives labels to the checkboxes.
cb1.label="Monkey";
cb2.label="Banana";

//Sets the initial transparency values of the movieclips.
monkey_mc.alpha=0.3;
banana_mc.alpha=0.3;

//Event listener for the checkboxes.
cb1.addEventListener(MouseEvent.CLICK, showMov);
cb2.addEventListener(MouseEvent.CLICK, showMov);

//Shows and hides the images.
function showMov(event:MouseEvent):void {
if (cb1.selected) {
TweenLite.to(monkey_mc, 1, {alpha:1});
} else {
TweenLite.to(monkey_mc, 1, {alpha:0.3});
}

if (cb2.selected) {
TweenLite.to(banana_mc, 1, {alpha:1});
} else {
TweenLite.to(banana_mc, 1, {alpha:0.3});
}
}

Step 5

Test your checkbox component Ctrl + Enter. Now trying selecting the checkboxes and you should notice the images fading in and out.



You should now be able to use the checkbox component in Actionscript 3.0.