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

[lukep68164364]

Hello, 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?

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

[JoãoCésar · Accepted solution]

Hi.

You can use a Tween to make the transition from the current rotation to the new rotation at every second.

import fl.transitions.Tween; // NEW
import fl.motion.easing.*; // NEW
var count:int;
var timer:Timer = new Timer(1000);
var alertSnd:Sound = new Alert();
var endSnd:Sound = new AlertEnd();
var startSnd:Sound = new AlertStart();
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.addEventListener(TimerEvent.TIMER, rot);
txt.text = "Set countdown seconds";
btnStart.enabled = false;
btnReset.enabled = false;
btnStop.enabled = false;
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.txt.text = "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.txt.text = "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.txt.text = "START";
          btnStart.enabled = true;
          btnOK.enabled = true;
    }
    else
    {
        var tween:Tween; // NEW
        if (count == 31 || count == 16)
        {
              alertSnd.play();
              count--;
              //hand.rotation += 6;
              tween = new Tween(hand, "rotation", Linear.easeNone, hand.rotation, hand.rotation + 6, 1, true); // NEW
        }
        else
        {
              count--;
              //hand.rotation += 6;
              tween = new Tween(hand, "rotation", Linear.easeNone, hand.rotation, hand.rotation + 6, 1, true); // NEW
        }
        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";
    }
}

I hope this helps.

Regards,

JC

[lukep68164364]

Thank you very much for the help. Do I need to include a tween var at the start of the code?

[JoãoCésar]

You're welcome!

You can if you want to.

Regards,

JC