Count Up Timer in Flash with Actionscript

Posted on May 3, 2014 in Flash Category with Medium Difficulty

In this tutorial you will learn how to create a simple count up timer in Flash with Actionscript 2. We will use a movie clip animation as the timer for seconds. Read further to understand how the count up timer is made without advanced coding.

Version Used: Flash CS

Step 1 - Document Settings

Create a new document (File - New) and select ActionScript 2.0 with 800px Width, 400px Height and set the Frame Rate to 30 fps. Background color can be white or any color you want.

Flash Stopwatch Timer Document Settings

Step 2 - Creating the Count Up Timer Components

For this count up timer we will need to create 3 dynamic text fields (one for hours, one for minutes and one for seconds). To do that select the Text Tool (T) text-tool-flash and draw 3 classic dynamic text fields on the scene and write inside them 2 zeros. It is very important to give the 3 dynamic texts an instance name, so we can work with them in the script. You can also add a static text above the zeros to indicate the hour, minute and second.

You can set the field type in the Properties Panel (CTRL+F3). Under the instance name there are 2 drop downs. First must be Classic Text and the second Dynamic Text. Also make sure to embed fonts flash-embed-fonts to render them correctly (select only Numerals from the list).  Check the image below if you have any doubts.

dynamic text settings

Creating the Start , Pause and Reset Buttons

With the Rectangle Primitive Tool (R), draw 3 buttons below the timer components and add some text above the buttons using the Text Tool. Now select each button with his text and convert them to a single button. Just right click on the and select Convert to Symbol (or press F8) and choose the Type to Button. In the end you should have this:

count up timer components

Step 3 - Creating an Empty Movie Clip to Serve as Timer

Once we are done with the count up timer components, we'll need a movie clip that runs our code every second and with this method we will add the dynamic counting in text fields.

Create any shape you want (we will create a rectangle), right click on it and select Convert to Symbol (or press F8). Now choose the Type to Movie Clip and click OK.

This movie clip will stay hidden and will only execute the code every 30 frames per second. You can either move it outside the scene or you can make it invisible by setting the opacity to 0. In this tutorial we moved it outside the scene and added the instance name timerClip.


Now double click your newly created movie clip and in timeline, go to frame 30 and insert a frame (or press F5). This animation will repeat over and over, every 30 frames (remeber when you created a new document, you've set the frames to 30 per second), so 30 frames means 1 second.


Step 4 - Adding the Count Up Timer Script to Root Frame

After adding 30 frames inside the new movie clip, you can return to the root scene flash-root-scene-icon and select the first frame and press F9 to open the Action Script Panel (or simply right click on the frame and select "Actions").

First we need to initialise all variables, including timers text and also we need to stop the movie clip and scene animation from playing to control them later by code.

stop(); // stop the scene animation
timerClip.stop(); // stop the movie clip animation

// initialise variables
var hour:Number = 0;
var minute:Number = 59;
var second:Number = 57;

// set all text timers to 0
hours.text = "0" + hour;
minutes.text = "0" + minute;
seconds.text = "0" + second;

We now have the variables declared, which will contain integer numbers. Notice that we added a zero in front of the variable. The timer will count from "01" to "09" and then he will change to 10. For that we will need to take out the extra zero to avoid displaying the timer with a permanent leading zero.

To make everything work, based on the movie clip animation timer, we will need to setup a function for our movie clip named timerClip.  This function runs the code instide every frame and for that we need to run the code only every 30 frames, which means 1 second. Function named onEnterFrame is intended to be used only for movie clips.

Make sure to add the following code below variables. Our code will look like this:

timerClip.onEnterFrame = function() {
	if (this._currentframe == 30) {		
		second += 1;

		if (second > 59) {			
			second = 0;
			seconds.text = "0" + second;
			minute += 1;			

			if (minute >= 10) {
				minutes.text = minute;
			} else {
				minutes.text = "0" + minute;

			// HOURS
			if (minute > 59) {
				minute = 0;
				minutes.text = "0" + minute;				
				hour += 1;

				if (hour >= 10) {
					hours.text = hour;
				} else {
					hours.text = "0" + hour;
		} else {			
			if (second >= 10) {
				seconds.text = second;
			} else {
				seconds.text = "0" + second;


Great! If you test the project nothing happens because you stopped the movie clip animation from the beginning.

onEnterFrame - is a function that will execute the code within it every frame of the movieclip. In our case we added an if statement to run the code only on frame 30. which means 1 second.

Step 5 - Adding Actions to Buttons

To add a event to a button click on it and open the Action Script Panel (F9). We need to trigger the code when the mouse button is clicked or released. Here we will do with the release event.

Code for Start Button

To start the timer, add the code below to start button.

on(release) {;

Code for Stop/Pause Button

To stop the timer, you must stop the movie clip animation. Just add the code below to it.

on(release) {

Code for Reset Button

If you want to reset the count up timer to zero, you first need to stop the timer and set the variables and text from all fields to zero.

on(release) {

	hour = 0;
	minute = 0;
	second = 0;

	hours.text = "00";
	minutes.text = "00";
	seconds.text = "00";

Final Results

Now that you have everything set up, you can test the count up timer by pressing CTRL+ENTER. Check the flash results below.

Download .FLA File

Related Articles
  1. Christina says:

    I need a count up clock that starts with a certain amount of days, like 52, and move up from there, and I don’t need a pause or stop function. Is there a similar way I can use this?

  2. Lisa says:

    I followed everything on this tutorial but apparently, nothing is working when I click on the start button while testing the movie. Is there anything I’m doing wrong? Here are the links to what I did.

    How can I get this to work?

  3. Jason Roper says:

    Hi and great tutorial!

    I want to show count up in hundredths of seconds..


    How do I change this to show count up in hundredths of seconds?


    • Hello Jason,

      This is just a simple timer created mostly with text. To count hundredths of seconds you need to write a good code and to use another method, which is the function setInterval() that executes something in a function every 1 second for example. Here is a short code for you:

      countSecondsFunction = function() {
      	// stuff to do when counting
      countUpVar = setInterval(countSecondsFunction, 1000);
      // 1000 milliseconds = 1 second

      And if you want to count hundredths of seconds you need to do some math:

      countHundredthsFunction = function() {
      	// stuff to do
      countUpVar = setInterval(countHundredthsFunction, 1);
      // 1 millisecond = 0.001 seconds
Hint: Wrap your code syntax (html, css or others) between <pre> and </pre> tags. All comments are moderated.

+ two = 4

Subscribe by E-mail

HTML-TUTS is built under the mighty WordPress platform.