Playing A Timeline Backwards

July 8, 2006

I wrote the following for someone who wanted his animated menu buttons to do the following; onRollOver, play the current buttons' timeline to the end and onRollOut, no matter where you are on the timeline, play the timeline backwards. With that said, lets take a look at how we can use the onEnterFrame method of the MovieClip class to control the playback of a movie clip's timeline.
 

The Setup

To start, we need a MovieClip to represent a menu button. I created a simple mcCircle symbol with a textfield to show the clips current frame and added a shape for a background. On the root timeline, create a new layer for our code and give your MovieClip an instance name; keep the layer's name relative to the objects in its frame(s) such as ActionScript & mcCircle. We now need to add to mCircle's timeline, the original request only called for six frames but for the purpose of showing you and our friend this effect, I made mine twenty frames long and added a new textfield in each frame.
 

 

onRollOver

Now that our MovieClip is ready, return to the root timeline, select the ActionScript layer and open the Actions (F9) panel. Start by stopping mcCircle's timeline and declaring two variables; fcurrent, who keeps track of the clips current frame and fgoal, who simply keeps a record of the total number of frames of our clip.

  1. stop();
  2.  
  3. mcCircle.gotoAndStop(1);
  4. mcCircle.fcurrent = mcCircle._currentframe;
  5. mcCircle.fgoal = mcCircle._totalframes;

mcCircle.fcurrent equals 1 and mcCircle.fgoal equals 20
 
Onto our onRollOver action. We begin by enabling mcCircle's onRollOver method to use our own moveForward function; this allows you to reuse moveFoward with all the buttons in your menu. Inside moveForward we want to create a script that moves the current timeline forward one frame at a time until it reaches its goal.

  1. stop();
  2.  
  3. mcCircle.gotoAndStop(1);
  4. mcCircle.fcurrent = mcCircle._currentframe;
  5. mcCircle.fgoal = mcCircle._totalframes;
  6. mcCircle.onRollOver = moveForward;
  7.  
  8. function moveForward () {
  9.     var me = this;
  10.     if (me.fcurrent != me.fgoal) {
  11.         me.fcurrent++;
  12.         me.gotoAndStop(me.fcurrent);
  13.     }
  14. }

var me = this; equals _root.mcCircle when you roll over the movieclip mcCircle. The if statement checks whether the current frame, fcurrent, has reached our fgoal. When the condition is not met, we increase our fcurrent variable by one and move the timeline accordingly.

If you roll over the movieclip, you will notice that the timeline is only moving one frame at a time. To continuously move the timeline we need to add an onEnterFrame loop prior to our if statement and apply it the movieclip. The else statement, simply stops the loop when moveForward has reached the last frame / fgoal.
 

  1. function moveForward () {
  2.     var me = this;
  3.     me.onEnterFrame = function () {
  4.         if (me.fcurrent != me.fgoal) {
  5.             me.fcurrent++;
  6.             me.gotoAndStop(me.fcurrent);
  7.         } else {
  8.             delete me.onEnterFrame;
  9.         }
  10.     }
  11. }


 

onRollOut

Now that our movieclip moves forward all the way to the last frame without stopping, even if you rollOut prior to reaching the fgoal frame, our next step is to add our onRollOut action(s) to complete the effect. Begin by making a copy of our moveForward function, moveBackwards; all we want from moveBackwards is to do the opposite of moveForward; check if fcurrent is back to frame 1, if it has not, move one frame back, one at a time.

  1. function moveForward () {
  2.     var me = this;
  3.     me.onEnterFrame = function () {
  4.         if (me.fcurrent != me.fgoal) {
  5.             me.fcurrent++;
  6.             me.gotoAndStop(me.fcurrent);
  7.         } else {
  8.             delete me.onEnterFrame;
  9.         }
  10.     }
  11. }
  12.  
  13. function moveBackwards () {
  14.     var me = this;
  15.     me.onEnterFrame = function () {
  16.         if (me.fcurrent != 1) {
  17.             me.fcurrent--;
  18.             me.gotoAndStop(me.fcurrent);
  19.         } else {
  20.             delete me.onEnterFrame;
  21.         }
  22.     }
  23. }

 
 Last but no least, enabled mcCircle's onRollOut method to use our moveBackwards function.

  1. stop();
  2.  
  3. mcCircle.gotoAndStop(1);
  4. mcCircle.fcurrent = mcCircle._currentframe;
  5. mcCircle.fgoal = mcCircle._totalframes;
  6. mcCircle.onRollOver = moveForward;
  7. mcCircle.onRollOut = moveBackwards;

 

The Source

actionscript-marlonvalenzuela-net-p58.zip

Tags: , ,

Leave a Reply

You must be logged in to post a comment.