Tutorial details:
Written by: Jesse Stratford
Time: 20 minutes
Difficulty Level: Intermediate
Requirements: Flash MX+
Topics Covered: This article describes how to use the Flash setInterval command to call functions and conduct actions at specified times or intervals.
Assumed knowledge: Familiarity with Variables, Objects, Methods, Flash MX Event Model.

This tutorial is sort of a follow up to my Delaying Events tutorial which covered how to wait X seconds before attempting an action in Flash 5. Flash MX ships with a raft of new features one of which is the capability to create Intervals. An Interval is just what you would expect: a space between two things. In this case the interval is a period of time, measured in thousandths of seconds, between one run of an operation and the next.

Intervals in Flash MX can be used not only to repeat actions every X seconds but, as a logical extension, to wait X seconds before running a set of actions, which is exactly what's covered in the older Delaying Events tutorial. This tutorial will discuss both applications and their uses.

Why Use Intervals:

Intervals are extremely useful in day to day Flash, in fact, next to loading JPEG images on the fly, they are the Flash MX functionality I have used most since MX was released. Very often we want to repeat actions throughout our movie. Consider a stock quotes application in Flash which reads information from a database. It would be no use to anyone if they had to refresh the page to view the most recent stock values, so it must refresh itself automatically. While we could hard code in this functionality with a looping movieclip, that wouldn't allow us to (easily) change the frequency of updates. A user on a 36.6kBps modem isn't going to be able to pull down updates once per second if an update consists of lots of quotes for lots of stocks, but a cable user could quite easily do so. It becomes apparent that we need to allow for flexibility in our interval, being the good application designers we are.


Intervals are established using the setinterval command and halted using the clearInterval command. setinterval works with one of two sets of arguments. In the first case, you can send setinterval a function name, an interval and a list of arguments to send to the function, and it will call that function with those arguments as regularly as your interval states, until you invoke clearInterval. The code is as follows.

function updateStockPrices(whichStock) {
        // Update code here
        trace('Updating prices for '+whichStock);
stockInterval = setInterval(updateStockPrices, 1000, "Stratford Flash Products");

To pass more arguments to your function, you just add them after "Stratford Flash Products" above, separated by commas.
The code above won't work if you want to invoke a method on an Object however, so Flash provides a second argument form for setinterval in which you supply first the Object reference, then the name of the method to call, then the interval, then any arguments the method should take. This second invocation will execute the method on the named Object as often as your interval states. The code looks like this:

function Stock(name) {
        this.name = name;
StratFlash = new Stock("Stratford Flash Products");
Stock.prototype.updateStockPrices = function() {
        // Update code here
        trace('Updating prices for '+this.name);
stockInterval = setInterval(StratFlash, "updateStockPrices", 1000);

If you're unfamiliar with Object Orientation in Flash, don't let this code put you off. The only line really relevant to this tutorial is the last line. Notice that the Object name is passed as a reference while the method name is a quoted string, and no argument is passed as the prototype makes reference to the object. If I wanted to pass any additional arguments, I would just tack them on after the 1000 in the last line above, again separated by commas.

In both of the above cases I used code beginning with:

stockInterval = setInterval(...);

This is not strictly necessary as the interval doesn't need a name to operate, however it must have a name if you wish to clear it using clearInterval, which we generally do, and it can't hurt for it to have a name even if you don't wish to clear it, so get into the habit of including a name before the command.

So, say the customer is sick of seeing the value of Stratford Flash Products fall, and they now wish to monitor their MS shares. We could use clearInterval on the previously establish interval, the syntax for which is simply:


Having cleared the interval we would have to establish a new interval for monitoring the MS shares. Anyone see what we're doing wrong? That's right! Why create a new interval when we can just reuse the earlier interval? This is where the power of not having your arguments hard coded comes in. A minor adjustment to the above code is all that's required to make our code a lot more extensible. I'll use the function call example here as those of you who know all about OOP should be able to figure out the changes required, but those of you who don't might get a little overwhelmed.

function updateStockPrices(whichStock) {
        // Update code here
        trace('Updating prices for '+whichStock);
stockToCheck = "Stratford Flash Products";
stockInterval = setInterval(updateStockPrices, 1000, stockToCheck);

We can now change the value of the item we're checking just by changing the value of the stockToCheck variable. Groovy huh?

Continued overleaf...