Tuesday, 29 September 2009

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.

//Sets the initial transparency values of the movieclips.

//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.


zavior54 27 October 2009 at 15:47  

Nice stuff!
I was just wondering if instead of using images from within the FLA, you could use external .swf's?

iliketo 27 October 2009 at 15:50  


I haven't really tried using external swf files, so i'm not really sure if it would work. I suppose you can try.

J 4 November 2009 at 13:33  

Great work,
I see that '.selected' can be traced, but is it possible to trace when different scenarios are active, such as:


iliketo 6 November 2009 at 03:03  


I'm not really sure what you mean. I think the scenarios you listed are skin properties for the checkbox. Take a look the AS3 checkbox component reference.

J 9 November 2009 at 12:35  

I was wondering how to disable and enable a button within the following if statement:

if (a_mc.box.selected&&b_mc.box.selected&&d_mc.box.selected) {

And I was also trying to figured how selected_disabled a checkbox button through actionscript?
Any help would be appreciated,

iliketo 9 November 2009 at 14:18  

@ J

You need to use the ‘enabled’ property to disable a button within your ‘if statement’, so you can use the following:

yourButtonInstanceName.enabled = false;

Also you can use the exact same property for the checkbox, so you can use:

yourCheckboxInstanceName.enabled = false;

J 10 November 2009 at 07:58  

Great - Thanks.
I have 6 checkboxes and want to disable 3 unchecked buttons when 3 are selected. I can do this with if statements but id have to write about 30 if statements.
Is there a quick way to disable checkboxes when 3 of 6 are checked.
So for instance if I clicked boxes 1,2,3 then 4,5,6 would be disabled.

iliketo 10 November 2009 at 09:10  


The if statement you wrote in your previous comment will work just fine.

Anonymous 21 April 2011 at 14:29  

Great code, I know just how to use it in a current project. Thanks!

  COPYRIGHT © 2014 · ILIKE2FLASH · Theme by Ourblogtemplates

Back to TOP