How to Pause a Timeline (AS3)

ActionScript 3.0 Flash

If the title of this blog entry sounds familiar, it may be because you saw the ActionScript 2.0 equivalent on this site over a year ago.  In the comments to that article, a reader named Eric asked how to pause a timeline in ActionScript 3.0 (very different from AS2, as it turns out).  There’s a significant benefit to using ActionScript (whatever version) to temporarily halt the timeline, then resume after a few seconds:  it’s all about saving yourself the hassle of horizontal scrolling.  Consider pausing for five whole minutes.  At the default 12fps, that would require 3,600 frames of timeline real estate.  With code, you can pull it off in a single frame.  Let’s take a look. 

An answer short and sweet

Create a script layer, if you haven’t already.  (It’s not strictly a requirement to put ActionScript into a layer named “scripts,” “actions,” or the like, but it sure makes locating your code much quicker in cases where the FLA has dozens of layers.)  Wherever you’d like the timeline to pause, add a keyframe to your script layer and type the following (remember, this is ActionScript 3.0) …

stop();
var timer:Timer = new Timer(2000, 1);
timer.addEventListener(
  TimerEvent.TIMER,
  function(evt:TimerEvent):void {
    play();
  }
);
timer.start();

How it works

The first line, stop(), simply stops the timeline.  If you’d like, you may use the this property as a reference to the timeline you’re in — e.g. this.stop(); — but the reference is assumed in this context, and the reference points to the MovieClip instance in which the code appears (timelines are movie clips).  In AS2, there was a global function stop() that was essentially the same thing as the MovieClip.stop() method, and you distinguished between the two by preceding stop() with a movie clip reference or not (myClip.stop(), this.stop(), etc.).  In AS3, the function simply doesn’t exist, so you’re always using the MovieClip method.

Next, an arbitrarily named variable, timer, is declared and set to an instance of AS3’s new Timer class (because ActionScript is case sensitive since Flash Player 7, the instance name timer and the class name Timer are considered two different terms).  Timer allows you to delay or repeatedly trigger a function of your choosing at a specified time interval.  Two parameters are fed into the constructor:  a) 2000, which means two thousand milliseconds (2 seconds), and b) 1, which tells the Timer instance how often to trigger the desired function.  This is a change in the way setInterval() works in AS2.  The setInterval() function triggers its assigned function repeatedly until asked to stop.  A do-it-once scenario means you’ve either got to use clearInterval() to stop the triggered function after one go, or use the setTimeout() function instead of setInterval().  The Timer class combines the best of both worlds:  specify 1 to trigger something once, 0 to trigger something forever (until told to stop), and any other number to trigger a function that many times.

Next, an event handler assigns a function to the timer variable in the manner of practically all event handling in AS3:  obj.addEventListener(event, function).  In this case, the event to listen for is TimerEvent.TIMER, and the function is a function literal in the following form:

function(evt:TimerEvent):void {
  play();
}

… which neatly starts the timeline again.

Finally the Timer instance, timer, must be kicked into gear:  timer.start().

If you want to pause for three seconds, substitute 2000 with 3000.  Six and a half seconds would be 6500; and so on.

A note about variables in ActionScript 3.0

In the AS2 version of this code, a variable named interval is declared via the var keyword, much like timer is declared here.  In AS2, you may copy/paste that version into as many keyframes as you like.  Each new time the playhead sees var, it simply creates a new variable by whatever name was specified (e.g. interval), and the existing instance of that variable is overwritten.  In AS3, things are different.  Variables may only be declared once per timeline (once per object), so if you want to pause your timeline at more than one keyframe, you’ll have to leave off the var declaration in all cases after the first one. In fact, because you’ve already defined the timer eventrsquo;s function in the scriptrsquo;s first appearance, all you really need for subsequent pausing is another stop(); to re-pause the timeline followed by another trigger of the timer. Like this:

// First keyframe used …
stop();

var timer:Timer = new Timer(2000, 1);
timer.addEventListener(
  TimerEvent.TIMER,
  function(evt:TimerEvent):void {
    play();
  }
);
timer.start();

// Any keyframe after the first time used …

stop();
timer.start();

Leave a Reply