AS3 Timer - Add zero to single digit countdown, change font colour

Question

I need help with a timer. I'd like to create a bomb-like digital countdown timer for a game.

1. Using a digital font
2. always double digits eg 10, 09...01, 00 (to look like a bomb timer).
3. And finally during the last few seconds, turning the font red to increase the drama.

What I currently have below is a basic countdown timer, 20-0. The countdown variable starts at 20, is reduced by one every 1000ms and this number is shown in the text field. But the font is generic, once the count gets below ten the numbers don't have a zero in front of them, and I have no idea how to change the font colour in the final seconds.

public class UsingATimer extends Sprite
{
    //The Timer object
    public var timer:Timer= new Timer(1000, countdown);
    public var countdown:Number = 20;

    //The Text objects
    public var output:TextField = new TextField();
    public var format:TextFormat = new TextFormat();

    public function UsingATimer()
    {
        //Initialize the timer
        output.text = countdown.toString();
        timer.addEventListener(TimerEvent.TIMER, countdownHandler);
        timer.start();

        //Set the text format object
        format.font = "Helvetica";
        format.size = 200;
        format.color = 0x000000;
        format.align = TextFormatAlign.RIGHT;

        //Configure the output text field   
        output.defaultTextFormat = format;
        output.autoSize = TextFieldAutoSize.RIGHT;
        output.border = false;
        output.text = "20";

        //Display and position the output text field
        stage.addChild(output);
        output.x = 200;
        output.y = 100;

    }
    public function countdownHandler(event:TimerEvent):void
    {
        countdown--;
        output.text = countdown.toString();
    }

}

If there are no basic digital fonts I'll have to embed one, which I should be okay with but any help with the other two problems would be greatly appreciated.

Sorry if the code is all over the place, I'm a beginner.

Thanks for your time.

Answer 1

I think you've mostly got it already. What you can do is inside your countdown handler, just check if the value is less then 10, if so append a 0 in front before displaying.

countdown--;
if(countdown < 10){
    output.text = "0" + countdown.toString();
} else {
    output.text = countdown.toString();
}

Then to change the colour, it would be the same logic, check for what number you want it to change colour on, then change the colour in your TextFormat object and apply it to your TextField.

For a digital font, you could search for and embed one in to flash, but if all you need are numbers/limited characters, you could also make one as well with movie clips/graphics since they are relatively straight forward. Depends on how fancy you need it I guess as well as how flexible.