Making The Seconds Hand On A Countdown Timer Spin Rather Than Tick

Question

I am a teacher and have been looking for a customisable countdown timer to use in lessons (I also want to be able to embed it Powerpoint).

I have found the code below which works but I would like to freshen up the graphics and possibly make the second hand spin smoothly rather than tick.

The graphics side is not a problem but I am struggling with the code. I can get the hand to move at smaller increments by changing

hand.rotation +=6;  
// to  
hand.rotation +=1; 

but it still only moves at 1 increment per second. Could anyone point me in the right direction please?

The code:

// "Countdown Timer" by Lemmyz

//variables
var count:int;
var timer:Timer = new Timer(1000);

//Sound objects
var alertSnd:Sound = new Alert();
var endSnd:Sound = new AlertEnd();
var startSnd:Sound = new AlertStart();

//Button event listeners
btnStart.addEventListener(MouseEvent.MOUSE_UP, timerStart);
btnStop.addEventListener(MouseEvent.MOUSE_UP, timerStop);
btnReset.addEventListener(MouseEvent.MOUSE_UP, timerReset);
btnOK.addEventListener(MouseEvent.MOUSE_UP, setCount);

//timer object
timer.addEventListener(TimerEvent.TIMER, rot);

//init
txt.text = "Set countdown seconds";
btnStart.enabled = false;
btnReset.enabled = false;
btnStop.enabled = false;

//Functions
function setCount(evt:MouseEvent):void
{
    count = parseInt(inputNum.text);
    btnStart.enabled = true;
    txt.text = "Press START.\n" + count + " secs remaining";
}

function timerStart(evt:MouseEvent):void
{
    endSnd.play();
    timer.start();
    btnStart.enabled = false;
    btnReset.enabled = false;
    btnOK.enabled = false;
    btnStop.enabled = true;

}

function timerStop(evt:MouseEvent):void
{
    timer.stop();
    btnStop.enabled = false;
    btnReset.enabled = true;
    btnStart.enabled = true;
    btnStart.label = "RESUME";
}

function timerReset(evt:MouseEvent):void
{
    timer.stop();
    hand.rotation = 0;
    count = parseInt(inputNum.text);
    btnStop.enabled = false;
    btnReset.enabled = false;
    btnOK.enabled = true;
    btnStart.label = "START";
    txt.text = "Timer reset to " + count + " secs. " + count + " secs remaining";
}

function rot(evt:TimerEvent):void
{
    if (count==0)
    {
        timer.stop();
        hand.rotation = 0;
        count = 60;
        btnReset.enabled = false;
        btnStop.enabled = false;
        btnStart.label = "START";
        btnStart.enabled = true;
        btnOK.enabled = true;
    }
    else
    {
        if (count==31||count==16)
        {
            alertSnd.play();
            count--;
            hand.rotation +=  6;
        }
        else

    {
        count--;
        hand.rotation +=  6;
    }
    if (count==0)
    {
        txt.text = "Time's up! Timer is reset. Press START again.\n" + count + " secs remaining.";
        startSnd.play();
    }
    else
    {
        txt.text = count + " secs remaining";
    }
}
}

Thank you in advance.

Answer 1

This line of code means timer will trigger every one second (1000 ms):

//variables
var timer:Timer = new Timer(1000);

If you change it to a smaller number, 100 for example, it will call the rot function every 100 ms. But I can see that there are dependencies in your code counting on that 1000 number, so your timer would probably not work.

I think in your case best practice is to "tween" the hand rather than changing the timer intervals. Instead of hand.rotation += 6; try this function:

import fl.transitions.Tween;
...
// wherever you start the timer call tweenHand function
timer.start();
tweenHand();
...
// also instead of every hand.rotation += 6; call tweenHand function
tweenHand();
...
function tweenHand(): void {
    var currRotation: Number = hand.rotation;
    var myTween: Tween = new Tween(hand, "rotation", null, currRotation, currRotation + 6, 1, true);
    myTween.start();
}