actionscript 3 - AS3 - Countdown Timer Bar - HowTo / Tutorial?

Question

I'm looking to create a 60 second countdown timer bar. I've already got a text timer that counts back from 60, but I'd also like to have a visual green bar that reduces as time ticks down. I'm including two graphics to show what I'm trying to create.

Can anyone point me in the right direction? Whether it's some raw code to work with or an online tutorial, it would be tremendously helpful, as I'm a bit stuck on this part of my project.

Thank you kindly!

Answer 1

Since this is related to a previous question, I'm using the code from that answer as a starting point:

import flash.events.TimerEvent;
import fl.transitions.Tween;
import fl.transitions.easing.None;
import flash.text.TextField;
import flash.display.Shape;

var nCount:Number = 12;
var myTimer:Timer = new Timer(1000, nCount);
timer_txt.text = nCount.toString();
var totalBarWidth:Number = 500;

// this is the shape we will be updating as the timer counts down
var bar:Shape = new Shape();
addChild(bar);

// initialize the graphics of the bar
updateBar();

myTimer.start();
myTimer.addEventListener(TimerEvent.TIMER, countdown);
// add a complete listener to fade out the TextField
myTimer.addEventListener(TimerEvent.TIMER_COMPLETE, fadeOut);

function countdown(e:TimerEvent):void
{
    nCount--;
    if(nCount == 10) 
    {
        // if the count is at 10, switch the text color to red
        timer_txt.textColor = 0xFF0000;
    }
    updateBar(); // update the graphics of the bar
    timer_txt.text = nCount.toString();
}
function updateBar():void 
{
    bar.graphics.clear();
    // figure out if we're using a green or red fill based off of nCount
    bar.graphics.beginFill(nCount > 10 ? 0x00FF00 : 0xFF0000);
    /* draw the rectangle based off the ratio of nCount to the total
    repeatCount of the timer */
    bar.graphics.drawRect(0, 0, totalBarWidth * (nCount/myTimer.repeatCount), 20);
    bar.graphics.endFill();
}
function fadeOut(e:TimerEvent):void 
{
    // I prefer GreenSock for tweening, but this is how you'd do it with the buil-in Flash Tween
    var t:Tween = new Tween(timer_txt, "alpha", None.easeNone, 1, 0, .5, true);
}

Please note: there are many better ways of doing this. For example, I would probably draw the rectangle at full width, and then tween the scaleX property for a smoother look. This is just the a bare bones example to get you started.