Flash Tutorials: setInterval: Setting a Delay

Home • Members Tutorials Forum iSnapChat Contact Us 

 


Flash Tutorials

   

Flash Tutorial - setInterval: Setting a Delay

 

Free Flash Tutorial

 

 

 

The aim of the tutorial is to learn how to delay an action for a set amount of time using ActionScript or to get something to repeat. This is a simple piece of code which has lots of uses. Far too many to list here. In the examples below I show you how to use setInterval to build a digital timer and an analog stop watch.

 

 


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

 

 

Example A - 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. In practical terms this is not much use but it demonstrates the simplicity of the code.

Example A - Step 1: The ActionScript

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

function wait() {                // a function called 'wait'
    trace("The time is now !!"); // the action you want, in this case a trace.
}
myTimer = setInterval(wait, 1000); // calls the function after 1 second


Example A -
Step 2: 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.

 

Example B - Delay Action

Example B: Download the Flash file  Int 156b

Here we will change the delay time and send a message to the Output Window once only.

Example B - Step 1: The ActionScript

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

function wait() {                // a function called 'wait'
    trace("The time is now !!"); // the action you want, in this case a trace.
    clearInterval(myTimer); //stops the function being called again.
}
myTimer = setInterval(wait, 2000); // calls the function wait after 2 seconds

Example B - Step 2: 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.

 

Example C - Timer

Here we will look at how to run a timer.

Example C: Download the Flash file  Int 156c


Timer

Example C - Step 1: 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.

Note 1: In the Property inspector the Dynamic text box has a Variable name (Var:) not an Instance name. This is important. If you do it the other way around the movies on this page will not work !!

Note 2: The Dynamic text box has a zero. This 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.

Note 3: Also note the Character Options are set to Numerals only. This makes the movie much smaller. You can access the Charter Options by clicking on the Character button at the bottom right corner of the Property inspector.

 

Example C - Step 2: The ActionScript

Place the following ActionScript in frame 1:

function wait() {
    mySeconds++; //adds 1 to the text box: mySeconds
}
myTimer = setInterval(wait, 1000);

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

 

Example D - Timer

Here we will look at creating a reset button and changing the second label depending on what number the timer displays.

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.

Stage

On stage there is an additional 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.

The ActionScript

myLabel = "seconds";
myTimer = setInterval(wait, 1000);
function wait() {
    mySeconds++;
    if (mySeconds == 1) {
        myLabel = "second";
    } else {
        myLabel = "seconds";
    }
}

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


The reset button

Reset button is very simple:

on (release) {
    _root.mySeconds = 0;
}

 

Example E - Digital Timer

In the previous movie the seconds just keep clocking up even when you have gone over 60. Here we will look at resetting the seconds from 59 to 0 and displaying the minutes like this 2:49

Example E: Download the Flash file  Int 156e


The Stage

On stage are three Dynamic text boxes. They have the following variable names:  

myMinute  On the left.

myZero  In the middle with the zero.

mySeconds  On the right and over-lapping myZero.


The ActionScript

Frame 1 has the following ActionScript:

myMinute = 0;
myTimer = setInterval(wait, 1000);
function wait() {
    mySeconds++;
    if (mySeconds == 60) {
        myMinute++;
        mySeconds = 0;
    }
    if (mySeconds<10) {
        myZero = 0;
    } else {
        myZero = "";
    }
}

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.

 

Example F - Analog Stop Watch

This is a progression from the previous example. I have left the digital display in place but it could be removed from the stage and the analog stop watch would still work perfectly.

Example F: Download the Flash file  Int 156f

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 stage.

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

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.

Work File: Download the Illustrator file  Int 156g


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.

 Second hand with registration point at base.


Every thing that is on the stage.

The ActionScript

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 = "";
    }
}

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°


The Stop Button

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.


The Reset Button

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

_root.mySeconds=0;
Resets the variable mySeconds 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.


The Go Button


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.

 

Please indicate what you thought of this tutorial 
10 is the best: 
10 9 8 7 6 5 4 3 2 1


167072 visitors to this page since Jan 04

Phil Schulz's Facebook Profile
Webwasp is Phil Schulz's baby. You are welcome to contact me or become my Facebook friend: Click here

 Top of Page HomeMembers Tutorials Forum iSnapChat Contact Us 
 All material on this site is protected under international copyright © law. DO NOT reproduce any material from this site without written permission. Please ask as permission is often granted.