Using SetInterval() in Flash ActionScript

By Blue_Chi | Flash CS3 | ActionScript 1+2 | Beginner

This tutorial will teach you the basics on how to use the setInterval() method in Flash to execute code repeatedly at given time intervals so that, for example, you can flip a page once every two seconds or move a box a step every one second. You are not expected to have any advanced knowledge of ActionScript, but you must be able to know the basics of ActionScript Functions before you can use the setInterval() method as it needs one to operate.

Using setInterval()

setInterval() is an ActionScript tool or method that lets you execute a specific code repeatedly through certain time interval in milliseconds. In order for setInterval() to execute code, that code must be run through a Function. The general format in which setInterval is used is as follows:

setInterval(myFunction, myTime);

Where myFunction is the name of the function to be executed and myTime is the time interval between each time the code is repeated.

For example, we can output the word 'Hello' once every 2 seconds by creating a function that outputs the word 'Hello' and then pass this function to our setInterval() method.

function myHello (){
trace("Hello");
}

setInterval(myHello,2000);
It is important to note that you must type down the name of the function without the brackets when used within the setInterval method.

The function is first executed after 2000 milliseconds elapse (i.e. 2 seconds), and then again each time 2000 milliseconds pass forever or until the interval is ended using clearInterval().

You can type the code above in your Actions panel to see the world Hello outputted once every two seconds until you close the movie. Of course, in reality, you might want to be able to stop the repetitive execution of your function at some point. To do this, you will need the clearInterval() method.

Using clearInterval()

clearInterval() is a method to be used to stop a setInterval() method. It can only be used on setInterval() methods that have an ID name. If a setInterval() method does not have an ID name, there is no way to stop that interval. To create an ID name for a setInterval() we can simply define it the same way we would define any variable:

var myInterval = setInterval(myHello, 2000);

We can now stop this interval at any time by passing the ID of our interval to the clearInterval() method this way:

var myInterval = setInterval(myHello, 2000);
clearInterval(myInterval);

Our example above might not make any sense in real life because you are clearing your interval before it even gets executed once, but it shows you that your interval stops. I'll show you a more practical example below.

Practical Example

We are going to create a practical example on how to use setInterval to perform a certain task and then stop when that task is fulfilled. In this example, we are going to create a box that moves by a small distance every half a seconds until it reaches a certain point. In reality, the box will move using an interval that will be cleared using a conditional when the box reaches the point which it needs to stop at. Check out the sample FLA below to see what we are going to create.

To create the example above, start up a new ActionScript 1/2 Flash file and draw a box, select it and press F8 to convert it to a Symbol, select MovieClip and click OK. Now access the Properties Inspector and assign the instance namebox_mc to it. Now right-click, the only frame you have on your timeline and select Actions to open up the Actions Panel. Type the following code to do the trick.

function moveBox() {

box_mc._x += 10;

if (box_mc._x>300) {
clearInterval(myInterval);
}

}

box_mc.onRelease = function() {

box_mc._x = 0;
myInterval = setInterval(moveBox, 500);
};

You can now test your movie, click on the box and see the animation rolling and then stopping when the box reaches 300px.

Our code is pretty simple, we first create a function called moveBox, our function simply added the _x property of the box by 10 pixels, and then a conditional is set to clear an interval called myInterval if the _x property exceeds 300.

We later set a command to the .onRelease event handler property of our box, set the _x property to zero just in case the box was elsewhere, and then create our myInterval interval, assigned our function to it and asked it to call it once every 500 milliseconds.

This concludes our tutorial, the usage of setInterval can be much more complex than what we shown in the example above, but it should show you the basic function of this ActionScript method. Please feel free to post any questions you have at the Oman3D Forum.

- End of Tutorial.