Playing a Flash Movie Backwards	Home • Tutorials • Forum • Webwasp Members • Templates • Mates • Food • Contact

Flash - Playing a Flash Movie Backwards

Free Flash Tutorial

The aim of the tutorial is to learn how to make a movie play in reverse. You will also learn how to create a controller movie clip, which will give an automated instruction from one part of a Flash movie to another, this is fundamental to programming in Flash and has many uses. You will also learn how to switch these instructions on and off. Examples of other Flash movies, that use controllers, are listed at the end of this page.

Example: Download the Flash file Int 106a

Step One: Set up the Main Stage

1. Create a new movie.
2. Rename layer 1: Car
3. Set the size to 500 x130px in: Modify > Document
4. Create a new symbol by going to: Insert > New Symbol
5. For name: Car graphic
6. For behavior: Graphic
7. Click: OK
8. Draw a car (or type the word car!). Alternatively copy and paste some clip art from Word, into the symbol, which is what I did. Make sure your car is facing to the right >.
9. Go back to the main stage by clicking on the scene 1 button:
10. Open your Library: Window > Library
11. Drag your car on to the left hand side of the stage.
12. If it is too big/small resize it with the Free Transformation tool .
13. Right click (Mac - Ctrl Click) on frame 45 and select: Insert Keyframe
14. With your Arrow tool move the car, that is on frame 45, to the right hand side of the stage.
15. Right click somewhere between frame 1 and 45, select: Create Motion Tween
    
    If you play your movie, the car should now drive from left to right. In test mode it will do this repeatedly, never going in reverse.

Step Two: The Play Button

1. Click on the Insert new layer button .
2. Name the new layer: Play
3. Open the Common button Library: Window > Common Library > Buttons
4. In the Library, double click on the Playback folder to open it.
5. Drag the gel Right button, to the right side of the stage.
6. Close the Library.
7. Go to frame 45 in the Play layer and right click, Select: Remove frames
   This should have removed that last frame of this layer. You do this because once the play head has reached frame 45, there are no more frames, therefore you cannot 'Play' forwards, because there is nowhere to go. Removing the frame removes the button.

Step Three: The Back Button

1. Click on the Insert new layer button .
2. Name the new layer: Back
3. Go to frame 2 of this layer, right click, select: Insert Blank Keyframe
   You place the back button in frame 2 for the same reason that you removed the last frame of the play layer, except the play head will be going in reverse. If the play head is on frame 1, you cannot go backwards.
4. Open the Common button Library: Window > Common Library > Buttons
5. In the Library, double click on the Playback folder to open it.
6. Drag the gel left button, to the left side of the stage.
7. Close the Library.
   
   
   Your layers and stage will look similar to this, depending on what frame the red play head is in.
   
   The play head above is in frame 2. You can see both buttons
   
   If you are in frame 1, you should only be able to see the play button on the right.
   If you are in frame 45, you should only be able to see the back button on the left, and the car will be on the left.

Step Four: Stopping the Auto Play

1. Save the movie.
2. Go to: Movie > Test Movie
3. The car should be going continuously from left to right, with the buttons momentarily disappearing.
4. Close the test window by clicking the second cross on the top right (maybe in a different place).
5. Right click on frame 1, layer Car, select: Actions
6. Select: > Actions > Movie Control > Stop
7. Do the same thing for frame: 45

The Controller Movie Clip

Up until now everything you have done is standard Flash construction. The problem with making a movie play in reverse is that there is no:

playReverse(); Do not use - does not work !

At least as far as I am aware there is no play in reverse command! I don't no why not, it seems an obvious option. Macromedia, are you listening!

There is the following script:

on (release) {
    prevFrame();
}

This is all very well, but it only goes back one frame and stops. You would have to click the back button 44 times to get back to frame 1!

A Controller Movie Clip is the answer. That is a piece of actionscript that when you click the back button repeatedly says prevFrame(); prevFrame(); prevFrame(); etc. Until you get to frame one then the controller says nothing. In other words you need to be able to switch the instruction on and off. If you could not switch it on and off, when you hit the play button, one bit of script would be saying prevFrame(); and another would say play();. This would cause an obvious conflict.

The controller has to be able to be:

• Switched on
• Repeat an instruction innumerable times
• Switched off

To be able to do this, is absolutely crucial to Flash programming. Here we are going to get a movie to play backwards, but this same principle can be used in hundreds of different ways. At the end of this tutorial you will find links to sample files that use the same system of a controller movie clip to give instructions in a variety of different circumstances.

Step Five: The Controller Movie Clip - Frame 1

You should not build a controller on the main stage because that limits your ability to switch it on and off.

1. Create a new symbol by going to: Insert > New Symbol
2. For name: Controller MC
3. For behavior: Movie Clip
4. Click: OK
5. Right click on frame 1 and select: Actions
6. Select: > Actions > Movie Control > Stop
   This is the off position. The movie clip does not go to frame 2, there are no instructions. It is dormant.

Step Six: The Controller Movie Clip - Frame 2

1. Right click on frame 2 and select: Insert Blank Keyframe
   
   Your time line should look like this.
   
2. Right click on frame 2 and select: Actions
3. Make sure the Actions panel is set to Normal.
   You do this by clicking on the side menu button ( ). Select Normal.
4. Select: > Actions > Movie Control > Goto
5. In the options above select: Type > Previous Frame
   This will place the following script:
   
       prevFrame();
   
   This is no good, as it will go to the previous frame of this movie clips time line rather than the main time line on the main stage.
   
6. Change the Actions panel to: Expert mode
   Click on the side menu button ( ). Select Expert.
7. In front of the prevFrame(); type: _root. (The dot is not a full stop, you need to type it!)
   Your script will look like this:
   
      _root.prevFrame();
   
   This will instruct the main stage the (root directory) to go back a frame. But it will only go back one frame!
   
   If you find the _root. confusing, have a look at the tutorial: Target Paths

Step Seven: The Controller Movie Clip - Frame 3

1. Right click on frame 3 and select: Insert Blank Keyframe
2. Right click on frame 3 and select: Actions
3. Select: > Actions > Movie Control > gotoAndPlay
4. For the frame option type: 2
   Your script should look like this:
   
       gotoAndPlay(2);
   
   Your time line should look like this.

The loop

In the above script gotoAndPlay(2); there is no _root. That means that the script will go to frame 2 of the current time line: The Controller movie clip

Which is what we want. So the playhead to goes back to frame 2, this will repeat the instruction on frame 2 (_root.prevFrame();). The play head in the main time line will go back one frame.

Our controller movie clip will continue to play to frame 3, as there is no instruction for it to stop.

In frame 3 of Controller, is an instruction to go and play frame 2 (gotoAndPlay(2);). The play head in the controllers time line will go and play frame 2.

This will repeat the instruction to move the playhead in the main time line back one frame.

The loop goes on indefinitely.In other words it will make the main timeline play continuously backwards.

Frame 1: Controller is switched off.
Frame 2: Instructs the main time line to go back one frame.
Frame 3: Instructs frame 2 to repeat it's instructions.

Switching the loop off/on

There are a number of ways to switch a controller on and off. We will switch it on with the back button. To switch it off we will do two things. Use the play button and also remove it from the main time line in frame 1, which will zap it into nonexistence.

You can also switch controllers on and off with instructions in the main time.

Step Eight: Setting up the Controller on the Main Stage

1. Go back to the main stage by clicking on the scene 1 button:
2. Open your Library: Window > Library
3. Select frame 2, Back layer.
4. Drag your Controller MC onto the stage.
   You can put it any place you like as it is invisible when you test the movie or view it in a web page. In Flash, an invisible Movie Clip looks like this:
   If it is highlighted it will have a cross in the middle.
   
   By placing the controller in frame 2, it does not exist in frame 1.
   
   If the controller has been looping, and the main time line going backwards, when the main play head reaches frame 1 the controller does not exist. The loop will have stopped. If the viewer clicks on the play button, the play head on the main stage will go to frame 2 and play. The controller play head will be by default on frame 1. As there is a 'stop' in that frame the loop does not play.
   
5. For the back button to instruct the controller to play, the controller must have a name. If the controller is not selected, click on it with the Arrow tool .
6. Open the Property panel: Window > Properties
7. Where it says Instance Name, type: control
   
   The controller is now ready for action.

Step Nine: Actionscript for the Back Button

1. Right click on the back button on the left.
2. Select: Actions
3. Set the Actions Panel to: Normal Mode
4. Select: > Actions > Movie Control > Goto
5. In the frame option above type: 2
   Your script will look like this:
   
       on (release) {
           gotoAndPlay(2);
       }
   
   This of course refers to the main time line not the controller, we need to change this.
   
6. Set the Actions Panel to: Expert Mode
7. Type the target path:
   
       on (release) {
           _root.control.gotoAndPlay(2);
       }

Step Ten: Play Button Actions

1. Move the play head to frame 1.
2. Right click on the play button on the right, select: Actions
3. Make sure the Actions panel is set to Normal.
   You do this by clicking on the side menu button ( ). Select Normal.
4. Select: > Actions > Movie Control > Play
   The following actionscript will be attached to the button.
   
       on (release) {
           play();
       }
   
   We will now add a line which will switch the controller off. This is important, because is the viewer clicks the play button before the car gets back to frame 1, the car will play, go forwards, the controller will instruct the car to go back and it will start to reverse again.
   
5. You may want to save and test the movie at this stage. Make sure you click the buttons before the car gets to the ends. The reverse button should always work, the play button will not, unless the car has got back to frame1.
6. If you have closed the Actions panel, right click on the play button, select: Actions
7. Click on the line of script: play();
   This selects the line and ensures that the next line of script goes in the correct place.
8. Select: > Actions > Movie Control > Goto
9. In the options above select: Goto and Stop
10. Go to expert mode.
11. In front of the gotoAndStop type: _root.control.
    
    Your actionscript should look like this:
    
        on (release) {
            play();
            _root.control.gotoAndStop(1);
        }
    
12. Your movie is now ready to save and test!

Other Flash Movies that use Controller Movie Clips

Objects move relative to mouse   First 8 samples on the page have Controller MCs
Jigsaws   Last 3 jigsaws on the page have Controller MCs

Webwasp is Phil Schulz's baby. You are welcome to contact me or become my Facebook friend: Click here