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

9 comments:

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  

@zaviour54

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:
selected_up
up
selected_over
over
selected_disabled
disabled
selected_down
down
focusRectSkin

Thanks,

iliketo 6 November 2009 at 03:03  

@J

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) {
trace("all");
}

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  

@J

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

John Q 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