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);
myTimer.start();

/*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);
addChild(my_button);

/*This sets the the countdown time on the button label and disables
the button which makes it unclickable.*/
my_button.label=String(count);
my_button.enabled=false;

/*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") {
       my_button.label="Enter";
       my_button.enabled=true;
   }
}

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