Playing a Movie Clip Forwards <--> Backwards

[h1]Forward <--> Reverse Movieclip Play[/h1]
Okay, as requested by Smeck, this tutorial will show you how to make a Movie Clip play forwards/backwards, depending upon the roll-over / roll-out of the mouse.

Need to know:

How to make a Movie Clip
Basic Actionscript (variables, conditional statements [if - else])
How to add instance names
How to navigate instance names (_parent, _root.instance., this.)
Clip Events ( onClipEvent(enterFrame), onClipEvent(load), on (rollOver), on (rollOut) )

The Basic Idea
All you want to happen is this:

Have a Movie Clip with a few frames in it play forward to end on roll over, then backwards to start on roll out
When the Movieclip reaches the last frame, it stops (or starts again from beginning if it's a loop)
Or, when it reaches first frame (when playing backwards [loop only]), go to end

For Continuous Loop Animation
Here's my example of a roll-over loop:

<a href="http://www.graphicaddicts.net/ssj/F%20-%20B%20tut/Foward%20-%20Reverse%20-%20loop.swf" target="_blank">http://www.graphicaddicts.net/ssj/F%20-%20B%20tut/Foward%20-%20Reverse%20-%20loop.swf</a>
If this isn't the one you want, read this part to understand the idea, but follow the scripts from the next part.

Okay, the basic idea is to do the following:

Set a variable on the looping Movie Clip - Boolean (true / false)
Use and if / else statement to check if it's on the first or last frame
Make it go to the last frame if it's on first (so it looks like it's playing backwards), or go to the first frame to the last (so it looks like it's looping normally)

So, let's look at what we need to get going. To start, you can make you're animation Movie Clip. So, draw your initial image, and press F8 (the shortcut for Convert To..). Now, select the 'Movie Clip' radial button, and name it whatever you please. Now, drag that out into your movie, and double click the Movie Clip itself. Here it looks like another timeline, but inside the Movie Clip. This is where you do the animation that you want to loop. I just did a square bouncing back and forth. Once done with this, go back into the main timeline:
and single click the Movie Clip again, but this time, go into the 'Properties' tab (CTRL + F3). Give it any instance name you like, but for the purpose of this tutorial, I'll call it "pie" (without the quotes). Next up, we create another Movie Clip (or button, whichever you feel more conformable with, I'll use a Movie Clip). Just draw the Up state for buttons, and the first frame for Movie Clips. Now, drag this out into the frame, and position it wherever you like. Finally, the actual script parts:
On the Animation Movie Clip:

Code:

onClipEvent (load) {
stop();
f = false
}
onClipEvent (enterFrame) {
if (this._currentframe == this._totalframes) {
this.gotoAndStop(1);
} else if (this._currentframe == 1) {
gotoAndStop(this._totalframes);
}
if (f == true) {
this.nextFrame();
} else if (f != true) {
this.prevFrame();
}
}

Not too much code, but it's all you need! Here's what it means:

Code:

onClipEvent (load) {

Clip Event load - When the Movie Clip is loaded on the frame, this action will run (because it will only load with the frame, this is like a one-time action!)

Code:

stop();
f = false

This tells the Movie Clip to stop [stop();], and sets a variable (Boolean) [f = false].

Code:

onClipEvent (enterFrame) {

This is where most actions always happen, the scripts under this event will execute at the same frame rate as your movie itself.

Code:

if (this._currentframe == this._totalframes) {

Okay, these are a couple of functions I haven't talked about yet, but they're really strait forward:
"this._currentframe" - The current frame of the Movie Clip (or whatever the 'this' is, if you did "_root.currentframe", you'd get the current frame of the main timeline).

"this._totalframes" - This will return a number of the last frame, just like _currentframe, it's whatever the 'this' is, if you did "_root.totalframes", it'll return the last frame of the main timeline.

So, what that if statement does is check if the current frame is equal to the last frame (if it's at the end), and if it is:

Code:

this.gotoAndStop(1);

It tells the Movie Clip to goto and stop on the first frame!

Code:

} else if (this._currentframe == 1) {

Now, this checks that else (the if statement above this one) isn't true, AND this if statement IS true (check if the current frame is 1 (beginning), then it executes the action:

Code:

gotoAndStop(this._totalframes);

This tells the Movie Clip to stop on the Last frame (for the loop)

Code:

if (f == true) {
this.nextFrame();
} else if (f != true) {
this.prevFrame();
}

This is where our Boolean come in handy. If 'f' (the Boolean) is true, then it keeps going to the next frame, or playing forward. Else, if 'f' isn't true, then it will keep going to the previous frame, or playing backwards.

Moving on to where the rollOver and rollOut comes in handy, add this to the button:

Code:

on (rollOver, dragOver) {
_root.pie.f = true;
}
on (rollOut, dragOut, releaseOutside) {
_root.pie.f = false;
}

Okay, here's what this does:

Code:

on (rollOver, dragOver) {

First, checks if the person either rolls over, or drags over (click + hold, then move mouse out / over).

Code:

_root.pie.f = true;

Then, it goes to the looping Movie Clip (I gave it the instance name "pie", remember?), and tells it to set that Boolean 'f' to false!

Code:

on (rollOut, dragOut, releaseOutside) {
_root.pie.f = false;
}

This is just the opposite of the first part, it checks if you either roll out, drag out, or release outside, then it sets 'f' to false!

One Time Forward / Backward
Here's my example of the Open / Close:

Create a Movie Clip, first frame should be where it stops in a 'closed' state, and last frame is the 'open' state
Drag it in, name it what you like.
If you plan to have the Movie Clip itself be the button, then draw an invisible square around the while area, and convert that to another Movie Clip
If not, then make your normal Movie Clip button

Now, for actions:
On the Doors:

Code:

onClipEvent (load) {
stop();
f = false
}
onClipEvent (enterFrame) {
if (f == true) {
this.nextFrame();
} else if (f != true) {
this.prevFrame();
}
}

Basically, it's the same code as before, but with no 'loop' if/else statement!

Code:

on (rollOver, dragOver) {
_root.pie.f = true;
}
on (rollOut, dragOut, releaseOutside) {
_root.pie.f = false;
}

And now, it's just the EXACT same thing! It's that simple!

The two examples:

<a href="http://www.graphicaddicts.net/ssj/F%20-%20B%20tut/Foward%20-%20Reverse%20-%20open%20()%20close.swf" target="_blank">http://www.graphicaddicts.net/ssj/F%20-%20B%20tut/Foward%20-%20Reverse%20-%20open%20()%20close.swf</a>[Doors]

If you like this tutorial, please Click Here to register.

Click the link below to download the Flash files for this tutorial.
Playing a Movie Clip Forwards <--> Backwards - Continuous Loop FLA
Playing a Movie Clip Forwards <--> Backwards - Single Loop FLA

Graphic Addicts Forums