Delays, Timers & Stop Watches: In this tutorial you will learn how to delay an action for a set amount of time using ActionScript or to get something to repeat. This is extremely useful in two ways. In enables you to set delays so that a particular action or event will only happen after a certain amount of time has lapsed. This ActionScript lets you set up events that will repeat a set intervals. The ActionScript used to achieve this is very simple. This code has lots of uses and in the examples below I show you how build a Digital Timer and an Analog Stop Watch.

 

 

Example of using setInterval to create a Analog Stop Watch. More about this later.

 

This Flash tutorial is split up in to six sections: Repeat Action, Delayed Action, Creating a Timer, Timer with a Reset Button, Creating a Digital Timer, Repeat Actions and Creating an Analog Stop Watch.

 

Repeat Action

Delayed Action

Creating a Timer

Timer with a Reset Button

Creating a Digital Timer

Creating an Analog Stop Watch

Repeat Action

Example A: Download the Flash file  Int 156a

This is a very simple example of getting something to repeat. It sends a message repeatedly (every second) to the Output Window. It would be very easy to adjust the ActionScript so that Flash would repeat some any other action. This repeat action is set to go at every second, you could adjust this to a delay of just a fraction of a second or a prolonged delay of several minutes or more.

Repeating message in the Output Window.

In practical terms this is not much use but it demonstrates the simplicity of the code.

Repeat Action: The ActionScript

Open a new Flash Movie and place the following code in frame 1:

 

Repeat Action: Test the Movie

Test your movie: Control > Test Movie

You should see the following in the Output Window:

The time is now !!
The time is now !!
The time is now !!

etc...

Once the setInterval has started it just keeps on going. While you are testing the movie try and close the Output Window. You will find that it just jumps right back at you.

You can create any action at all by replacing line 2: trace("The time is now !!"); with any action that you may want.

If you want a different delay change the 1000 (1000 milliseconds) to a different number. 2000 would be 2 seconds.

Delayed Action

Example B: Download the Flash file  Int 156b

In the Flash Movie that you will learn to build now there is a pre set delay and then an action will happen but this time it will not repeat but only happen once. In this instance the ActionScript will send a delayed message to the Output Window.


A single message is displayed in the Output Window.

Delayed Action: The ActionScript

Add line 3 to the code in Frame 1 and change the time to 2 seconds (Bits in red):

   

Delayed Action: Test the Movie

Test your movie: Control > Test Movie

You should see the following in the Output Window:

The time is now !!

After two seconds the message will appear in the Output Window once only.

That's about all there is to setting a delay or getting an action to repeat! The power of this code is what you place in the function, which could be anything.

Creating a Timer

In this example you will learn to make a Flash Movie with a Timer. In this case I have made a Digital Display for the timer which shows you the time lapsed in seconds. As the display is only in seconds when the timer gets to 60 it keeps going up in whole seconds to 61, 62 etc. In the next example I will show you how to create a timer that displays minutes and seconds.

Example C: Download the Flash file  Int 156c

Timer that counts in seconds.

Timer: The Stage

There is some standard static text on stage but what is more important is a Dynamic text box called: mySeconds

The settings for the Dynamic Text box.

Variable Name: In the Property inspector the Dynamic text box has a Variable name (Var:) not an Instance name:


Variable name: mySeconds

This is important. If you do it the other way around the Flash files described in this tutorial will not work !!

---

Zero: The Dynamic text box has a zero typed into it:


Variable is set to zero.

Zero is the starting point for the timer. If you did not do this it would be blank until the delay of 1 second had passed and only then display the number 1.

---

Character Options: Also note the Character Options are set to Numerals only:

This setting makes the Movie much smaller. You can access the Charter Options by clicking on the Embed button at the right end of the Property inspector.

---

Timer: The ActionScript

Place the following ActionScript in Frame 1:

   

It is so simple it needs no explanation, I hope?

A Timer with a Reset Button

Here we will look at creating a Timer with a Reset Button. This re-sets the Timer back to zero. There is another new feature in that the second label changes according to the elapsed time. So the Timer displays 1 second and then 2 seconds. Press the timers Reset Button and you will see:

Example D: Download the Flash file  Int 156d

Timer with reset button.

The label '' changes depending on the time:

  (not 1 seconds)

It is a small difference and most of you will have missed it, but of course you cannot have '1 seconds'. What is more interesting than being grammatically correct is how it is done.

Timer with Reset: The Stage

On stage the text box with the word 'seconds' has been removed and replaced with a blank Dynamic text box called: myLabel

Otherwise it is the same as the previous example - except for the Reset button which I will come back to.

Timer with Reset: The ActionScript

Place the following ActionScript in Frame 1:

   

Timer with Reset: ActionScript Line by Line

myLabel = "seconds";
Sets the Dynamic text box myLabel to display the word seconds at the start.

myTimer = setInterval(wait, 1000);
Calls the function every 1 second.

function wait() {
The start of the function

mySeconds++;
Adds 1 to the Dynamic text box mySeconds every time the function is called.

if (mySeconds == 1) {
If mySeconds equals 1 then...

myLabel = "second";
myLabel displays the word second

} else {
If mySeconds does not equal 1 then...

myLabel = "seconds";
myLabel displays the word seconds

Timer with Reset: The Reset Button

The Reset Button ActionScript is very simple:

 

Creating a Digital Timer

In the previous Flash Movie the seconds just keep clocking up even when you have gone over 60. Here you will learn how to create a standard type of Digital Timer Display. In the Timer below the clock displays just like a traditional Digital Clock. You will learn how to reset the seconds from 59 back to 0 and display the minutes and seconds like this 2:49

Example E: Download the Flash file  Int 156e

Digital Timer: The Stage

On stage are three Dynamic text boxes:

The Main Stage in Flash.

Thee three Dynamic text boxes have the following Variable Names:  

myMinute  On the left.

myZero  In the middle with the zero.

mySeconds  On the right and over-lapping myZero.

If I zoom in on the Dynamic Text boxes you can see that myZero over-laps mySeconds:

The Text boxes are one on top of the other and overlap.

Digital Timer: The ActionScript

Frame 1 has the following ActionScript:

   

Digital Timer: ActionScript Line by Line

myMinute = 0;
Sets the Dynamic text box myMinute to display 0 at the start.

myTimer = setInterval(wait, 1000);
Calls the function named 'wait' every 1 second.

function wait() {
Start of the function 'wait'.

mySeconds++;
Increases the number of mySeconds by 1 every time the function is called.

if (mySeconds == 60) {
If mySeconds equals 60 then do the following...

myMinute++;
Increase myMinute by one.

mySeconds = 0;
Resets mySeconds back to zero.

That is the end of the code which controls the relationship between the minutes and second display. The next bit displays an extra zero in front of the second when the seconds are single digits.

For example: A digital timer would display: 1:05 for 1 minute, 5 seconds not 1: 5 which is what the display above would show. You see in ActionScript: 00 or 01 or 02 etc are not numbers. What would be displayed is 0, 1, 2 etc. The next bit of code adds in this false 'digital' zero.

if (mySeconds<10) {
If mySeconds is a number less than 10 then do the following...

myZero = 0;
myZero will display zero.

} else {
Otherwise (if my zero is ten or more) myZero will do the following...

myZero = "";
Display nothing (because there is nothing between the quote marks).

Therefore this last bit of ActionScript simply turns the false zero on or off when needed. The text boxes overlap so that the false zero displays in the correct place.

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:

   

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

   

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

   

_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

 

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.

Kaynak webwasp.co.uk/tutorials/b56-setInterval/tutorial.php