Tuesday, 27 October 2009

Button component countdown in AS3

I noticed an interesting button on a website form the other day which displayed a countdown time inside the button before actually turning into a clickable button. So, in this tutorial I will replicate the same effect using Flash Actionscript 3.0. Some knowledge of the button component and countdown timers are needed in this tutorial.

Button component countdown in AS3

Step 1

Open a new Flash AS3 file. Then select Window > Component and drag a button component into the library.

Step 2

On the timeline create a new layer called ‘Actions’. Then open up the Actions panel and enter the following code below.

//Imports the Button Class.
import fl.controls.Button;

//Set the count to ten seconds
var count:Number=10;
var myTimer:Timer=new Timer(1000,count);
myTimer.addEventListener(TimerEvent.TIMER, countdown);

/*This creates a new instance of a button and adds it to the display
list using the addChild() method, and sets the size of the buttons
to 120 width and 60 height*/
var my_button:Button = new Button();
my_button.setSize(120, 60);

/*This sets the the countdown time on the button label and disables
the button which makes it unclickable.*/

/*This function displays the countdown the countdown timer in the
button label. When the count reach 0 the button label change to 'enter'
and the button is enabled which makes it clickable*/
function countdown(event:TimerEvent):void {
my_button.label = String((count)-myTimer.currentCount);
if (my_button.label=="0") {

/*This adds the click event to the button and traces a message when
the button is enabled and the count is at 0*/
my_button.addEventListener(MouseEvent.CLICK, enterTest);
function enterTest(event:MouseEvent):void{
trace("Button hit");

Step 3

Test your button component countdown Ctrl + Enter.

You should now have a countdown timer inside your button component.


  COPYRIGHT © 2014 · ILIKE2FLASH · Theme by Ourblogtemplates

Back to TOP