Saturday, 11 July 2009

Simple stopwatch in Actionscript 3

In this Flash tutorial you will learn how to create a simple stopwatch in Actionscript 3.0. The stopwatch uses the AS3 Timer class and contains three buttons: a start, stop and reset. This tutorial is similar to the countdown timer in AS3, but counts up the seconds instead of counting down.

Simple stopwatch in Actionscript 3

Step 1

Open a new Flash AS3 File.
Create three buttons on the stage using the shape tools. Alternatively, you can use the built in buttons library like I have by selecting Window > Common Libraries > Buttons. I have used "round grey" from the buttons rounded folder.




Step 2

Select each button in turn and give them the following instance names respectively: start_btn, stop_btn and reset_btn.




Step 3

Select the dynamic text tool and drag a rectangle shape on the stage like below. Then give your dynamic text the instance name “myText_txt”.




Step 4

On the timeline create a new layer called “Actions”. Select the first frame and hit F9 to open up the actions panel and enter the following code:

//1.
myText_txt.text = "0";
var myTimer:Timer=new Timer(1000,0);
myTimer.addEventListener(TimerEvent.TIMER, stopWatch);

//2.
function stopWatch(event:TimerEvent):void {
myText_txt.text=String(myTimer.currentCount);
}

//3.
start_btn.addEventListener(MouseEvent.CLICK, startClock);
stop_btn.addEventListener(MouseEvent.CLICK, stopClock);
reset_btn.addEventListener(MouseEvent.CLICK, resetClock);

//4.
function startClock(event:MouseEvent):void {
myTimer.start();
}

//5.
function stopClock(event:MouseEvent):void {
myTimer.stop();
}

//6.
function resetClock(event:MouseEvent):void {
myTimer.reset();
myText_txt.text="0";
}

Code:
1. This initially sets the stopwatch at zero seconds you can change this if you want to start the stopwatch from a different number. The second line of code creates a new timer with the instance name “myTimer”. The first parameter is the interval value in milliseconds which is the delay between each timer event, so 1000 would equal a one second interval. The second parameter is the repeated count. The repeated count is set to zero which means it will keep counting indefinitely. The next line is the event listener for the timer. The “Timer.event.Timer” is the event and stopwatch is the function which is called every time for the event.
2. This is the stopwatch function which converts a number into a string and displays the current timer count.
3. These are the event listeners for the buttons which have the mouse click event.
4. The startClock function starts the timer.
5. The stopClock function stops the timer.
6. The resetClock function resets the timer and sets the stopwatch number to zero.


Step 5

Test your stopwatch Ctrl + Enter.




You should now have a simple stopwatch in Actionscript 3.0. The source files can be downloaded here.

16 comments:

Kristaps 27 November 2009 03:24  

oh, thank you!

Anonymous 15 December 2009 12:33  

thank you for this amazing AS3.0 script, you made my day, i just have one inquiry.

i want to add another function to this timer which enable the time value to be divided by a number (assume 100) and showing the result dynamically after they click on stop.

how do i achieve this function?

iliketo 15 December 2009 15:54  

@Anonymous

I'm not sure if this is the effect you want, but try the following code.

function dividTime(dividNum:int){
var my_Result:Number = myTimer.currentCount/dividNum;
myText_txt.text = String (my_Result);
}

Anonymous 16 December 2009 07:15  

thanks, yes i did minor alteration to the code and i placed it in the function "stopClock" and it works perfectly. thank you again :)

hootymcboob 9 March 2010 04:44  

Hi thanks for this, it's a great help! I've tweaked it slightly so the number increases forever (or until the flash file stops) and was wondering if it's possible to use it to initiate other tweens. Basically what I've done is made the background of my file move from right to left and I want it to speed up after every 15 seconds or so. Is this kind of thing possible?

Cheers again!

VIncent 21 March 2010 07:22  

This code is TREMENDOUSLY helpful! Thank you!

One other question: How could I make the stopwatch display the elapsed time with hundredths of a second value (i.e. 1.54)?

Any help would be greatly appreciated.

guilty_soldier 3 January 2012 03:57  

Hi all,
This is a great stopwatch tutorial. Is it possible to make the time (seconds) appear as hours, minutes and seconds like this format 00:00:00?
Please help!!!

iliketo 4 January 2012 07:51  

@guilty_soldier

The easiest way is to create three dynamic text fields with the names: sec_txt, min_txt and hr_txt.

This code should get you started.

var sec,min,hr:uint = 0;
sec_txt.text = min_txt.text = hr_txt.text = "00";

var timer:Timer = new Timer(1000);
timer.addEventListener(TimerEvent.TIMER, timerHandler);
timer.start();

function timerHandler(e:TimerEvent):void{

var sec:String = String(uint(timer.currentCount%60));
var min:String = String(uint((timer.currentCount/60)%60))
var hr:String = String(uint((timer.currentCount/60)/60));

sec_txt.text = (uint(sec)< 10) ? "0" + sec:sec;
min_txt.text = (uint(min)< 10) ? "0" + min:min;
hr_txt.text = (uint(hr) < 10) ? "0" + hr:hr;
}

sgralha 11 January 2012 11:33  

I, How can I get the stoped time for another frame? It is, save the time when it stoped and show in another frame "You stoped the clock at 158"

Thank you

iliketo 11 January 2012 14:47  

I don’t believe the variable can be accessed in a different frame if you are coding on the main timeline.

How have you coded it?

sergio 22 February 2012 11:07  

how can add a mili seconds? also when i do ctrl+enter it runs my stop watch but automatically. how can i fix that?

i did make so it has 3 text fields so it has secs,hr,min.

also if i hit reset it resets the fields but starts back at the time i hit reset and keeps doing up.

iliketo 28 February 2012 02:12  

@Sergio

Milliseconds – You should be able to tweak the code I wrote in the above comment to accommodate milliseconds. It’s not difficult.

Ctrl + Enter runs stop watch – It looks like your stop watch is set to start when you export the swf. You need to add the timer start() method to the start button.

Reset field – Your need to call the reset() method and set the text field back to zero.

Unknown 28 April 2012 10:29  

how do you get it to start automatically at a specific frame? how do you get it to stop when you press the spacebar and not the stop button?
thankss

iliketo 29 April 2012 09:57  

@Unknown,

Start automatically at a specific frame – You can use the currentFrame property inside an enter frame event.

Stop with the space bar - Take a look at the Detect key press post.

Sten Lodenstijn 16 June 2012 08:25  

@iliketo

I'm having problems with tuning the code for milliseconds. I don't know how to properly set the milliseconds in order to 'add' the next second. Any help is appreciated!

iliketo 17 June 2012 02:22  

@Sten,

Take a look at the code I posted in the comments above. It should get you started.

  COPYRIGHT © 2014 · ILIKE2FLASH · Theme by Ourblogtemplates

Back to TOP