learning Flash: Creating a Stop Watch	Home • Food • Mates • Members • Tutorials • Forum • Buy Templates • Contact Us

Flash Tutorial - Delays, Timers & Stop Watches

Free Flash Tutorial

Creating Analog & Digital Stop Watches

You will now learn to create both a Digital Stop Watch and an Analog Stop Watch. These have control buttons to let the user manage the Stop Watch Clock. In the Flash Movie below you have both a Digital Stop Watch and an Analog Stop Watch in one. Both Stop Watches are independent of one another and the Digital Display could be removed and the Analog Stop Watch would still work perfectly. Alternatively you could do it the other way around and use only the Digital Stop Watch.

Example F: Download the Flash file  Int 156f

Analog & Digital Stop Watch with Control Buttons.

This is a progression from the previous example. You will need to look at the instructions in the previous section if you want the Digital Stop Watch included as part of your Flash file.

Analog Stop Watch: The Clock Face

You could draw the clock face in Flash but I think it would difficult. I find it is much easier to draw things like that in a graphics program. I drew the face in Illustrator and pasted it onto the Main Stage in Flash.

If you wish you could download the Illustrator file and from Flash go to: File > Import

Work File: Download the Illustrator file  Int 156g

You don't have to have Illustrator on your computer, Flash will recognize the file format and place it on the stage. Although you do need to import it into an open Flash file.

Analog Stop Watch: The Hands

There are two hands on stage which sit on top of the face. They are both symbols with Instance names:

myMinuteHand

mySecondHand

The registration point (centre of the symbol) is at the bottom of the hands. This is important, otherwise they will not rotate correctly.

 
My second hand with registration point at base.

Place the two clock hands on the clock face in the correct position:

The clock is now assembled.

Open the Button Library (F11) and place three buttons on the Main Stage:

Everything is now ready for the ActionScript.

Analog Stop Watch: The ActionScript

Place the following ActionScript in Frame 1:

myMinute = 0;
myTimer = setInterval(wait, 1000);

function wait() {
    mySeconds++;
    _root.mySecondHand._rotation += 6;
    _root.myMinuteHand._rotation += .1;
    if (mySeconds == 60) {
        myMinute++;
        mySeconds = 0;
    }
    if (mySeconds<10) {
        myZero = 0;
    } else {
        myZero = "";
    }
}

Analog Stop Watch: The ActionScript Explained

There are two lines which different from the script in the previous example. One controls the movement of the second hand and the other the movement of the minute hand.

_root.mySecondHand._rotation += 6;
This moves the second hand 6°

I get to that by 360° in a circle divided by 60 seconds equals 6° movement every second: 360°/60 = 6°

There are 3600 seconds in an hour so if you do a similar equation for the minute hand: 360°/3600 = 0.1°

_root.myMinuteHand._rotation += .1;
This moves the minute hand 0.1°

Analog Stop Watch: The Stop Button ActionScript

on (release) {
    clearInterval(myTimer);
}

Stops the setInterval from running, which means the function 'wait' is no longer called so the actions contained within that function also stop. In this case the hands on the stop watch and digital display stop moving.

Analog Stop Watch: The Reset Button ActionScript

on (release) {
    _root.mySeconds = 0;
    _root.myMinute = 0;
    _root.myZero = 0;
    _root.myMinuteHand._rotation = 0;
    _root.mySecondHand._rotation = 0;
    clearInterval(myTimer);
}

_root.mySeconds = 0;
Resets the variable mySeconds to zero.

_root.myMinute = 0;
Resets the variable myMinute to zero.

_root.myZero = 0;
Resets the variable myZero to zero.

_root.mySecondHand._rotation = 0;
Resets the Second hand to the up-right vertical position.

_root.myMinuteHand._rotation = 0;
Resets the minute hand to the up-right vertical position.

clearInterval(myTimer);
Stops the clock. If you don't do this and you press the Reset button when the stop watch is running the hands would go back to zero and then start to move again.

Analog Stop Watch: The Go Button ActionScript

on (release) {
    clearInterval(myTimer);
    myTimer = setInterval(wait, 1000);
}

clearInterval(myTimer);
Stops the clock! You might well ask why? If the setInterval is running and then tell setInterval to run again it will run twice simultaneously! This will mean that the clock speed would go too fast: Two ticks per second! Imagine if you click the go button ten times. That's right the second hand will go around the clock face every 6 seconds!! Not much good as a timer!

myTimer = setInterval(wait, 1000);
Starts the setInterval so the goes again.

Your stop watch should now be ticking nicely at one tick per second.

This stop watch would not need very much additions to become a normal analog clock. All it would need is the hour hand and to know what the time is. Flash can get the time from the local clock on the computer it is running on or from a sever - but that's nothing to do with setInterval, so I am not going to go there.

Cross Ref: Making an: Analog Clock

That's it so I hoped you found this tutorial useful.