Countdown Timer Animation (Dynamic) in Flash AS3


 

I play a lot of Call of Duty: Black Ops, and every time an online multiplayer game starts up, there are flashing yellow numbers for the countdown before the game begins. While they look okay, I figure I could make something look a little cooler in an easy flash tutorial to submit to the flash cove. This flash tutorials encompasses knowledge about embedding fonts, zoom effects, and timer functionality within flash and as3. Also, rather than storing each number individually in a seperate image, we dynamically use a countdown, updating a Dynamic text field instead for better efficiency. I hope that after reading through this free flash countdown tutorial, and observing the actionscript source code, you too can create a great countdown timer in flash for your very own flash game or flash application.

The actionscript source code and full source FLA file are available right here, along with an interactive flash demo of what you can achieve after covering this easy countdown timer flash tutorial.

Place the actionscript / flash file “countdown_demo.fla” in a directory/folder on your PC, and then run it using (Ctrl + Enter)

 

Here’s the mouse animation in flash we are looking to achieve:

Press the start button to see our Call of Duty Black Ops flash countdown in action! Once it is done, you can also replay via the button bottom-left in the flash demo.

So, let’s get started on the development.

Open up a new flash document. Standard 550 pixels by 400 pixels. Insert a new MovieClip, and call it “countdown“. Inside the MovieClip, create two Dynamic text boxes, and make sure they align top-left to the center! This is EXTREMELY IMPORTANT for this tutorial, or else the countdown timer’s flash font will not zoom properly! As far as font goes, I used joystix, a really great set available at the link. In this next step I’ll teach you how to embed this specific font, or any other font at that too in flash.

Up on the very top right of your Library in Flash, click the small button, and then select “New Font…

Once inside, set the name to be “joystix64” set the actual font to Joystix, and make sure the size is set to 64, which is the size we will be using in this flash tutorial!

For the two sets of text inside our countdown, set both to a “Dynamic Text Box,” and make sure the font you are using for them is NOT Joystix, but actually joystix64, which should be somewhere at the top of the font selection list.  Additionally, we need to set the embedded characters for each of the text instances. In the property manager, there’s a button titled “Character Embedding..” click that, and then embed the following characters: Numerals (0-9) and the individual letters “GO!”  As seen in the picture; make sure the total is 14 characters like mine!

Once this is all complete, make sure you actually give both countdown text instances a label! I made mine “text1” and “text2“  Once you’ve done that, the drawing up of our fonts in this flash tutorial is complete, all that’s left is some actionscript 3 coding.

 

Without further adieu, here is the actionsciprt 3 code for this easy countdown timer (Call of Duty style!) flash tutorial:

var beginning:Number = getTimer();
stage.addEventListener(Event.ENTER_FRAME,countdown_function);

function countdown_function(e:Event):void{
    var current:Number = getTimer() - beginning;
    if(current > 11000){
        countdown.text1.text = "GO!";
        countdown.text2.text = "GO!";
        stage.removeEventListener(Event.ENTER_FRAME,countdown_function);
        return;
    }
    else if(current > 10000){
        countdown.text1.text = "GO!";
        countdown.text2.text = "GO!";
    }
    else{
        countdown.text1.text = 10 - Math.floor(current / 1000);
        countdown.text2.text = 10 - Math.floor(current / 1000);
    }
    countdown.scaleX = 1 + 100 / ((current % 1000) + 1);
    countdown.scaleY = countdown.scaleX;

}

The beginning timer value just grabs the local value for a start time to reference against. getTimer() gives us the number of milliseconds passed so far in the flash game. So, we add an ENTER_FRAME listener, grab the difference between present time and starting time (in milliseconds), and do a check..

If time time is less than 10 seconds (10,000 milliseconds), set the text values for both our instances to the right number of seconds.. AKA

10 - Math.floor(current / 1000);

Also, set the scale (size) of our text to be the inverse of the inter-second moment. The closer we are to zero of mod 1000, the larger we are (scale of 2), the closer we are to 999 of mod 1000, the smaller we get (scale of 1). This gives us a zoom-in effect for the countdown timer in the flash tutorial.

If time time is greater than 10 seconds (10,000 milliseconds), but less than 11 seconds (11,000 milliseconds), set the font to “GO!” rather than a number, as we’ve hit zero.

If time is greater than 11 seconds (the first if statement in the actionscript 3 code), remove the frame listener, and leave the text statically as “GO!”

That’s all there is to it for the flash as3 code! Just be sure, that beforeyou run the flash game, you actually have an instance of the countdown text on the stage, labeled as “countdown” so the actionscript 3 code has something specific to reference!

I appreciate you guys tuning in to this sweet Call of Duty: Black Ops style countdown timer flash tutorial! As always the as3 source code is free to duplicate, so get developing!

-Dave at the Flash Cove (http://flashcove.net)

About Dave

Hey Guys! I'm Dave, an Ohio State CSE alumni who just recently started work in the industry. I'm a flash hobbyist at heart, and love making flash games and tutorials when the time permits. Check out what flash tutorials are available on the site, and don't forget to "Like Us!" on Facebook!