Using ActionScript to pause and loop the timeline in Flash

David Stiller

Adobe® Flash® CS3 has come a long way from its vector animation roots and has improved significantly with ActionScript 3.0. It’s a more powerful language than ever. The really neat thing about ActionScript is it is relatively accessible for navigational programming of the sort used in presentations, banner ads, and other interactive projects you may undertake.

Here’s a recap of our recommendations:

Get into the habit of creating a Scripts or Actions layer in the main timeline and movieclip timelines, if you choose to add code to nested symbols. When everything has its place, it’s easier to find, which means it’s easier to update.
Take a pragmatic approach. Hardcore programmers may insist that you put all your code in a single frame, or better, in external files. In complex situations, that may be the best way to go. When you’re ready to undertake complex coding and the circumstances require it, go for it. In the meantime, don’t lose any sleep over doing this the old-fashioned way in Flash, which amounts to little snippets of code among many keyframes. Remember, nobody cares how it was done. They only care that it works.
Strongly type your variables.
Use comments to leave footnotes through your code. Even if you are the only one working on your files, you’ll appreciate your efforts later, when the client asks for a change. Comments help you get your bearings quickly.
Use the trace() function to help yourself see where you are in a published SWF.

Note: ActionScript has matured to the point where there are a lot of people making a very good living from writing ActionScript code. If code isn’t your thing, learn it anyway. The odds are almost 100% that you will eventually work with an ActionScript programmer, and being able to speak the language will make your design efforts even smoother.

With the advice out of the way, let’s look at two practical uses for ActionScript by applying it to two very popular requests on the Adobe support forums. People often want to know how to pause the main timeline for a certain amount of time before moving on, and they often want to know how to loop a movie a certain number of times before stopping at the end. Let’s wire them up.

Reqiuirements

To complete this article, you will need the following software and files:

Flash CS3 Professional

Sample files:

timeline_samples.zip (ZIP, 9K)

Prerequisite knowledge:

Some experience coding with ActionScript

Looping the timeline

We have all seen those banner ads that play two or three times and are replaced by another version of the ad. To loop the main timeline three times—this is a popular number for banner ads—declare a loop variable in frame 1 and initialize it to 0. Here’s how they do it:

Open the LoopTimeline.fla file. If you scrub the playhead across the timeline, the box, thanks to the tween, gets bigger.
Add a keyframe to frame 15 of the scripts layer. Select the keyframe and open the Actions panel.
Enter the following code into the Script pane:
```
this.stop();
```
This is the line that stops the playhead from moving forward, and it is also the line of code that can turn a millisecond into an eternity. If you stop the playhead, have a solid plan in place to get it back in motion.
Press the Enter/Return key, and enter the following code:
```
var timelinePause:Timer = new Timer(2000, 1);
timelinePause.addEventListener(TimerEvent.TIMER, timerHandler);
timelinePause.start();
```
The first line tells Flash to create a Timer object. In ActionScript, when you use the class name followed by parentheses, you are creating what is called a constructor, which is a fancy term for an instance of a class. The numbers between the parentheses tell Flash the duration of the timer (2,000 milliseconds, or 2 seconds) and how often to wait around for that 2 seconds. The 1 means “only wait for it once."

The next line tells Flash what to do when the two seconds are up; which is to execute a function named timerHandler. The final line tells Flash to reset the timer, and start the timer if it isn’t already running.
Press the Enter/Return key and enter the following code:
```
function timerHandler(evt:Object):void {
this.play();
}
```
As you may have guessed, this is what happens when Flash waits around for the 2 seconds. The play() method simply tells the timeline to start playing again (see Figure 1).
Save and test the movie. The box will grow, stop growing for 2 seconds, and then continue to grow.

(+) view larger
Figure 1: Pausing the Flash timeline

Looping the timeline

Open the LoopTimeline.fla file. When it opens, you will see, as you scrub the playhead across the frames, that the box grows.
Add a keyframe in frame 1 and frame 30 of the scripts layer, select the keyframe in frame 1, and open the Actions panel.
Enter the following code into the Script pane:
```
var loop:Number = 0;
```
Nothing new here—you create a variable named loop and give it a number value of 0. In many respects, what you are doing here is setting the initial value, because all of the action in this example takes place between frames 2 and 30.
Select the keyframe in frame 30 and add the following code:
```
loop = loop + 1;
if (loop < 3) {
this.gotoAndPlay(2);
} else {
this.stop();
}
```
Let’s take a look at what you have done. The first line adds 1 to the value of the variable you named loop in the first frame. The next four lines are the conditional statement that essentially says, "If the value of loop is 1 or 2 (if loop < 3), then scoot the playhead back to frame 2 (this.gotoAndPlay(2)). If it is already 3—else—then stay put on frame 30."

The first time the playhead hits frame 30, the value of loop is 1, and the playhead scoots back to frame 2. (The reason it goes to frame 2 is because frame 1 would set the value of loop to 0 again.) The next time it hits frame 30, the value of loop is changed to 2 and, again, the playhead scoots back to frame 2 and plays the animation. This time, when the playhead hits frame 30, the value of loop is changed to 3, and the playhead stays put on frame 30.
Save and test the movie.

Where to go from here

Flash Design Center
Adobe Video Workshop
Getting started with ActionScript, by Justin Everett-Church