Tutorial: Page (1) of 2 - 04/19/06 Email this story to a friend. email article Print this page (Article printing at MyDmn.com).print page facebook

Creating Timers in Flash, Part 2

Two more ways to skin the same cat By Kevin Schmitt

Timing stuff in Flash isn't exactly the glitziest of tasks, but sometimes it just has to be done. In our last installment, we went over two relatively basic methods for creating timers, each with varying degrees of simplicity and/or accuracy. Today we're going for as much accuracy as we can, and we're going in two completely opposite directions. Intriguing? I thought so. I am, after all, the master of suspense, so let's get down to business, shall we?

Method 3: setInterval

Yes, we are at Method 3. No, we haven't jumped ahead; Methods 1 and 2 were outlined in our previous installment, which is available here. So now that you're all caught up, let's forge ahead. The setInterval method is similar to the getTimer() method we went through last time, in that it "exists" outside any frame-based activity you may have going on in your movie. It's also potentially even more accurate than the getTimer() method, because it doesn't rely on how fast a single frame runs inside of your movie in order to operate. Now, to the lay person (or, in this case, the Flash designer who may not be intimately familiar with ActionScript), setInterval can appear to be one strange-looking piece of code. It almost works backwards from the way you'd expect it to, as it sets up and references code first that you haven't even written. Lost yet? No worries?here's the example, and then we'll walk through it.

01 | var interval:Number = 5;
02 | function someCodeToRun() {
03 |     clearInterval(mySetInterval);
04 |     trace(interval+" seconds have elapsed");
05 | }
06 | mySetInterval = setInterval(this, "someCodeToRun", interval*1000);

Since I just got through saying how backwards this method may seem, I might as well back that up by explaining Line 6 first. Line 6 is the "meat" of the code, since it's where you actually set the interval in the setInterval function. So, let's break it down. First, here's Line 6 once again in its entirety:

mySetInterval = setInterval(this, "someCodeToRun", interval*1000);

  • mySetInterval If I've said it once, I've said it a thousand times: things really get moving in Flash once you assign a name to something. That's certainly true in this case, where we've turned the code that follows into a variable by giving it a name; in this case, naming it mySetInterval will allow us to refer to it as such later on. I mean earlier on. Sorry?that whole backwards code thing. Bear with me; it will all make sense soon enough.
  • setInterval() This is the "parent" function, so there's not too much extra explanation needed here. All the good stuff is happening inside the parentheses anyway.
  • this This (or, in this case, this) simply sets the target for the setInterval function to watch. We haven't done anything fancy that would require targeting any other object (like place a Movie Clip instance on the Stage or anything), so chances are that you won't need to change this very much.
  • "someCodeToRun" This is a custom function that will be called when the setInterval period has passed. You can sneak a peek at the code in Lines 2-5 to see what this function does, but that would be cheating, wouldn't it?
  • interval*1000 The length of the interval. Why isn't this just a number? If you remember from last time, I introduced the habit of defining the desired interval (in seconds) as a variable (shown on Line 1 here), so you can easily change the number of seconds you want the timer to count off. But what's with the ol' asterisk-one-thousand garbage? Well, like getTimer(), the setInterval function operates on milliseconds, so I'm just performing a bit of math there, multiplying the 5 second interval (again, defined in Line 1) by 1000 to convert it to milliseconds.

So far, so good, right? Now, since we're working backwards, let's go over the custom someCodeToRun function. Remember, this is the code that gets called when the interval has elapsed, so, like all of the other methods we've discussed so far, we're just going to write a trace that tells us that time's up (fig. 1):

Figure 1

That explains Line 4, but what's going on with Line 3? Here it is again:


The clearInterval call is pretty simple. If it's present, and the name of your variable is contained in its cute little parentheses, it will effectively erase your interval. If you don't use clearInterval, the interval that you've set will just reset and start counting again, which itself is a useful feature in certain situations. So if you want to time something once, make sure to clear the interval using clearInterval in your custom function. If you want a repeating interval, don't clear the interval.

So that's pretty much that. One lingering question, though: why do we have to write the custom function first that clears the interval that isn't written until later? The answer is that a function has to be defined before you can call it. It doesn't matter that you're calling a variable name that hasn't been read first?just because you've written a function doesn't mean you've run it yet, so it's "inactive" code. You "activate" it by calling it in the body of the setInterval function on Line 6. If you were to rearrange things and move Line 6 up to Line 2, for example, you'd get an error because you're calling a function that hasn't been defined yet.

One last thing before we move on. The setInterval method is arguably the most accurate way of measuring time in Flash, because the frame rate of the movie is not a factor at all. Setting an interval tells Flash to start counting regardless of the frame rate, so even if your movie is set to 1 frame per second, you won't have to worry about an enterFrame function or (heavens forfend) a "physical" play head in the Timeline messing things up. Still with me here? Good. We still have one more method yet to discuss, one that wasn't really meant to be used to measure time but does the job just as well (and very accurately to boot). Pray tell, what is it?

Page: 1 2 Next Page

Related Keywords:flash, flash 8, flash 8 professional


Our Privacy Policy --- @ Copyright, 2015 Digital Media Online, All Rights Reserved