thevein.com / tutorials / reverse behavior  
A Behavior Movie Clip
Playing Timelines Backwards
   
This Reverse Behavior is a little ActionScript trick that has been invaluable to me. We will create a Movie Clip in Flash 5 that contains only actions, and place that clip inside another Movie Clip to send its playhead in reverse, along the timeline. This Behavior Movie Clip will work in any Movie Clip it is placed into. You can use it to loop an animation like we are going to do here, and I'm sure you will find other uses for it very quickly.
 
My Files For This Tutorial
- download -		 My Completed File
- download -
 
My Artwork reverse_behavior.zip reverse_behavior.fla
 
Reverse Behaviour
   
 

1. Download the Zip file and save "animation.swf" to your hard drive. Open Flash 5 and create a new movie. Modify your Movie Settings (Ctrl+M / Cmd+M) so your movie plays at least 24fps. You can leave the stage size and colour for now.
   

2. Create a New Movie Clip symbol (Ctrl+F8 / CmdF8) and call it "morph". While in the "morph" timeline, import (Ctrl+R / Cmd+R) the "animation.swf" file you saved to your hard drive. Play the animation to see what it looks like.

We are done with this Movie Clip for now. Click on the Scene 1 tab on the top left of your timeline, to go back to the main movie (or root timeline).

The "morph" Movie Clip we just created, is the Movie Clip that is going to play forwards then backwards, to simulate a seamless looping animation.
   

3. Create another Movie Clip (Ctrl+F8 / Cmd+F8), and call it "reverse-behavior". In the "reverse-behavior" Movie Clip timeline, add this action to frame 1.

stop();  

In frame 2 of the "reverse-behavior" Movie Clip, add a blank keyframe (F7 / F7). Open the actions window for frame 2 and use Expert Mode (Ctrl+E / Cmd+E) to type in this action, exactly like I have below, for frame 2.

_parent.prevFrame();  

Go back to Normal Mode (Ctrl+N / Cmd+N). If you got an error when you went to Normal Mode, than your syntax is no good. Check your code back in Expert Mode.

Add a blank keyframe (F7 / F7) to frame 3 of "reverse-behavior". Add this action to frame 3.

gotoAndPlay(2);  
   

When your code is sound you should have three frames in the "reverse-behavior" Movie Clip with actions in them.

We added a stop action to frame 1 because it is always easier to control a Movie Clip that is stopped when it loads.

The action we added to frame 2 is going to cause any Movie Clip this "reverse-behavior" Movie Clip is placed into, to play in reverse. _parent is the ActionScript syntax that targets any Movie Clip that this reverse behavior is placed into. prevFrame means go to the previous frame.

The action in frame 3 will continuosly send the "reverse-behavior" playhead back to frame 2 of its timeline. Every time the playhead lands on frame 2, it sends _parent (any Movie Clip it's placed into) back one frame in its timeline.
   

4. Go to your main movie (root timeline). Open your Library and drag an instance of the "morph" Movie Clip onto the stage. Double click the Movie Clip on the stage so we are in the "morph" timeline.

Add 2 layers to the "morph" timeline. Name Layer 1 "animation" (this layer has the animation on it). Name Layer 2 "reverse" and name layer 3 "actions". Your "actions" and "reverse" layers should have nothing on them.
   

5. Still in the "morph" timeline, on your "reverse" layer, drag an instance of "reverse-behavior" from the Library onto the stage, just beside the animation.

You should see a little black dot with a crosshair through it like this , on your stage. If you deselect it, by clicking on a blank area of the stage, you should see a little white circle .

Our "reverse-behavior" Movie Clip is invisible because it only contains Actions. There are no graphics in it to show. You can select it just like any other Movie Clip. Click on the white dot to select the Movie Clip. Double Click the white dot to access its timeline.
   

6. Click once on the "reverse-behavior" Movie Clip on the stage to select it. Go to your Instance Panel and give this Movie Clip an instance name of "reverse". Always give Movie Clips an instance name. That's how we can target them with actions from other Movie Clips. We'll do this now.
   

7. Still in your "morph" timeline, select your "actions" layer. Select frame 1 and open the Actions window. Go to Expert Mode and type in these actions exactly like I have below.

  reverse.gotoAndStop(1);
  
  gotoAndPlay(2);  

Go back to Normal Mode (Ctrl+N / Cmd+N). If you get the error, check your code. Close the Actions window.

In the first line of code we are targeting the "reverse-behavior" Movie Clip by using its instance name. Then we are telling it to go to and stop on frame 1. This seems redundant, but it is important to keep this Movie Clip under control. If we relied only on the stop action in frame 1 of "reverse-behavior", its playhead could be caught in the repeat loop, between frames 2 and 3, when we actually want it to stop.

In the second line of code, we are simply telling this timeline to go ahead and play frame 2. Again this may seem redundant. But we will need to tell the playhead to play forwards when it returns to frame 1 from playing in reverse.
   

8. Still in the "morph" Movie Clip timeline, in the "actions" layer, add a Blank Keyframe (F7 / F7) to the last frame of the animation. Select this keyframe and open the Actions window. Go to Expert Mode. Type this Action.

reverse.gotoAndPlay(2);  

Go back to Normal Mode (Ctrl+N / Cmd+N). If you get the error, check your code. Close the Actions window.

This action is targeting the "reverse-behavior" Movie Clip on the stage. The action is telling "reverse-behavior" to go to frame 2, where it will tell this timeline to back one frame. Then "reverse-behavior" will go to frame 3, and repeat the process, till this timeline playhead reaches frame 1.

In frame 1, we have actions that send "reverse-behavior" to frame 1 and stop, and send this timeline forward onto frame 2 again, repeating this whole process again.

Test Your Movie
Save Your Movie

The biker should morph into the skater, then morph back into the biker, over and over. If you want, place the "morph" Movie Clip in the top left corner of the stage, and modify your Movie Settings (Ctrl+M / Cmd+M) to match your contents.
   
   

The reverse-behavior Movie Clip has many applications. Think of all the times you could have saved yourself keyframing and time, if you could just play a timeline in reverse. For example, try creating a Close Button that starts the reverse behavior in a window or menu (or any Movie Clip) that slid into place, to slide it back to where it came from.

 
thevein.com / tutorials / reverse behavior top
 
email: rkovacs@thevein.com © 2001 Rod Kovacs -- A RK Tutorial