Tutorial: Page (1) of 2 - 03/14/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 1

Simple and straightforward to start By Kevin Schmitt

If you do any sort of ActionScripting in Flash at all, eventually you're going to come across a situation where you'll need some kind of timer. Whatever the need?a countdown clock, a simple pause before directing some sort of action, or even a timeout feature for a kiosk application?there are a bunch of ways to do it, so let's start with the two simplest.

Method 1: ol' (not-so) reliable frame-based timers

I'm guessing there are some of you out there who may be a tad shy about ActionScript. As one of those who formerly had the bejeezus scared out of them at the mere thought of writing a script, I do sympathize. However, the simplest (read: not so much ActionScript) way to make a timer is also the least reliable one to accurately measure time from within Flash. Nonetheless, it's still good in a pinch if you don't want to get your hands messy.

Now, in all of these methods, we're going to create a timer that counts to five seconds and then calls a trace event confirming that five seconds have indeed elapsed. Not super-exciting, but enough to illustrate the core concept without a lot of extraneous garbage getting in the way. To start, fire up Flash, create a new movie, head to the Properties panel, and make sure the frame rate is set to 30 fps (fig. 1).

Figure 1

With that out of the way, let's set up our frames in the Timeline:

  • Create a new layer (Insert:Timeline:Layer)
  • Change the name of Layer 1 (the bottom one) to "labels" and Layer 2 (the top one) to "actions"
  • In the "labels" layer, create a new keyframe at frame 2 by clicking once on frame 2 and hitting the F6 key
  • With frame 2 in the "labels" layer still selected, go to the Properties panel and enter "loop" in the Frame Label field
  • (optional) Click once on frame 31 in the "labels" layer and hit the F5 key to stretch out the visible portion of the Timeline (this will make the entire "loop" label visible in the Timeline)
  • In the "actions" layer, click once on frame 31 to select it, and then hit the F6 key to create a new keyframe
Once all that is done, your timeline should look something like Figure 2:

Figure 2

What we've done is nothing more than create one second's worth of frames and a loop point to jump back to. Now, let's add the minimal ActionScript needed to make this work. Click once on frame 1 of the "actions" layer, head to the Actions panel (Window:Actions), and enter the following script:

var interval:Number = 5;
var currentTime:Number = 0;

Not much going on there; I'm just defining a couple of variables. The first, interval, will be used to define what number (in seconds) I'm counting to (in this case, 5). Now, I've entered in a whole number here, but you can easily use fractional values (in decimal points, e.g., 2.5) if you like. The second variable, currentTime, exists to set the clock to zero right off the bat. Otherwise, there would be no basis for comparison later. Now, let's add the other script. Click on the keyframe you made at frame 31 of the "actions" layer and enter the following into the Actions panel:

01 | currentTime++;
02 | if (currentTime<interval) {
03 |   gotoAndPlay("loop");
04 | } else {
05 |  stop();
06 |  trace(interval+" seconds have elapsed");
07 | }

I've added line numbers this time to make the forthcoming explanation easier, so make sure to get rid of those if you're doing a simple copy and paste into the Actions panel. Now go ahead and test your movie (Control:Test Movie). A blank screen will appear, and then approximately five seconds later, your Output window should display the following:

Figure 3

Score! Now, just in case that mishmash of code I just told you to write means little, if anything, here's the line-by-line analysis of what I did:

Line 1: currentTime++;
The ++ is the quickest way of adding one to any variable. Since I set currentTime to 0 in the first frame, the first time Flash runs through this frame currentTime will be set to 1, the second time to 2, and so on. And since the frame rate is 30 fps, and since I created 30 blank frames between the loop point and this script, adding one to the currentTime variable is the equivalent of counting off seconds.

Line 2: if (currentTime<interval) {
I've got to check how currentTime compares to the interval I originally set, so an if...then statement is needed to run the comparison. On this first line, I'm simply asking if currentTime is less than interval.

Line 3: gotoAndPlay("loop");
This is the code that runs if currentTime is, in fact, less than interval. I need to have the loop run, so I'm sending the play head back to the loop point at frame 2. As an aside, why is the loop point located at frame 2 anyway? Well, if it's at frame 1, interval would reset to zero (because that's where we put that code), and the counter would never get past 1. Hence, the label is at frame 2.

Line 4: } else {
This line is a continuation of line 2, as the else statement will run the code once currentTime is no longer less than interval. To close out the if...then statement we started back in line 2, we also need a closing curly brace on line 7.

Line 5: stop;
Remember, lines 5 and 6 are the code that runs once currentTime is no longer less than interval, so the first order of business is to stop the play head from advancing or looping bak to the loop point. A simple stop() will suffice here.

Line 6: trace(interval+" seconds have elapsed");
The payoff. Sorry it's not more exciting, but a simple trace will have to do. (In my defense, I did dress it up a bit by placing the interval variable into the trace call.) It's been five seconds, the loop has been broken, and here's the code that executes once all is said and done.

Now, I mentioned that this method is rather unreliable. How, you might ask? Simple. Frame-based timers are defined by the frame rate you specify in your overall Flash movie, but in reality, not every machine will play back movies at the rate you want. And since a frame-based timer goes through every frame regardless of the speed of hte host machine, a five second timer may play back in five seconds on one computer but may take eight seconds on another (or even longer, depending on the complexity of the movie and what is being rendered in each frame). There's also the somewhat messy issue of having to adjust the number of blank frames in the middle if you ever have to change the overall frame rate of your movie. So while the frame-based method is one of the more hassle-free ways of creating a timer, if you want any semblance of accuracy you'll be better off using one of the other methods I'll be getting to right about now.

Page: 1 2 Next Page

Related Keywords:flash, flash professional, flash 8, flash 8 professional, studio 8

Content-type: text/html  Rss  Add to Google Reader or
Homepage    Add to My AOL  Add to Excite MIX  Subscribe in
NewsGator Online 
Real-Time - what users are saying - Right Now!

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