Recipe 10.6. Playing the Timeline Backward

Problem

You want to play the timeline backward.

Solution

Use the prevFrame( ) action within an onEnterFrame( ) event handler method in combination with bounds checking.

Discussion

By default, each movie clip timeline (including the main timeline) plays back in a forward direction. And Flash does not have a built-in function or method that can automatically instruct a timeline to play in reverse. However, with just a bit of ActionScript code, you can cause a timeline to play backward.

The basic idea is as follows: at the frame rate of the movie, tell Flash to move the playhead back one frame. Instructing the playhead to move back one frame is fairly simple. The only challenge is to then tell Flash to call the prevFrame( ) method at the frame rate of the movie. That too is fairly simple, because there is a built-in event handler method named onEnterFrame( ) that gets called at the frame rate of the movie. Therefore, in order to instruct a timeline to play in reverse, you should define the onEnterFrame( ) event handler for the movie clip such that it calls prevFrame( ). The following example instructs a movie clip named mAnimation to play backward:

 mAnimation.onEnterFrame = function():Void {   this.prevFrame(); }; 

As you can see, you can define an onEnterFrame( ) event handler method, just as with the other already-familiar event handler methods such as onPress( ) and onRelease( ). Also notice that within the event handler method, you can refer to the movie clip object by its self-referencing this.

The onEnterFrame( ) event handler method is an event handler method for movie clips only. It will not work for buttons.

There's one catch with the code in the preceding example. The prevFrame( ) method can move to the previous frame only if there is one. And because movie clip timelines start on frame 1, the playhead cannot move before that. Therefore, what you can do is add an if/else statement within the onEnterFrame( ) event handler method that checks to see whether the current frame is the first frame. You can check the first frame using the _currentframe property. If the current frame is the first frame, you can use a gotoAndStop( ) method to go to the last frame of the timeline. That way, the playback will loop in reverse. You can determine the final frame of a timeline using the _totalframes property. The following is a modification of the preceding code, causing the playback of mAnimation to loop in reverse:

 mAnimation.onEnterFrame = function():Void {   if(this._currentframe == 1) {     this.gotoAndStop(this._totalframes);   }   else {     this.prevFrame();   } }; 

Assuming that the movie clip mAnimation exists on the first frame of the main timeline, you can cause it to play in reverse simply by adding the preceding code to the first frame of the main timeline.

If you want to allow a user to have a timeline play forward or backward, place the onEnterFrame( ) definition within an onPress( ) or onRelease( ) event handler method of a button. Then, to play the timeline forward, use another button. Within the second button, add ActionScript code that removes the onEnterFrame( ) definition and then calls the play( ) method. The following code makes references to btBackward, btPause, and btForward as the button instance names. If you use different instance names, change the code accordingly.

 // This example uses a variable to create // a reference to the timeline you want to affect. Assuming you place this // code on the main timeline then the value of this will refer to the main // timeline. If you want to affect another timeline, change the value from // this to the instance name. var mTimeline:MovieClip = this; // Define an onPress( ) event handler method for the backward button. When // the users clicks the button define the onEnterFrame( ) event handler // method for the movie clip. btBackward.onPress = function():Void {   mTimeline.onEnterFrame = function():Void {     if(this._currentframe == 1) {       this.gotoAndStop(this._totalframes); }     else {       this.prevFrame();     }   }; }; // Define an onPress( ) event handler method for the pause button. When // the user clicks the button use the delete operator to remove the // onEnterFrame( ) event handler method definition. Notice that there are // no parentheses in that line of code. Then, call the stop( ) method. btPause.onPress = function():Void {   delete mTimeline.onEnterFrame;   mTimeline.stop(); }; // Define an onPress( ) event handler method for the forward button. When // the user clicks the button use the delete operator to remove the // onEnterFrame( ) event handler method definition. Then call the play( ) // method. btForward.onPress = function():Void {   delete mTimeline.onEnterFrame;   mTimeline.play(); }; 

See Also

Recipe 10.5, Recipe 10.7