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.