Title: Reverse Animation using Button Actions
Time: 20 Mins
Difficulty Level: Intermediate
Topics Covered: Reverse Animating a movie, Motion Path, Paths to Object
Author: Chris Calangi
Website: More flash templates here!
This tutorial deals with reverse animating a flash movieclip. Please see the finish product:
You can download the sourcecode here.
To start the tutorial, Open up Flash and make a new document with the dimensions 550px and 400px and a frame rate of 40 fps. So that the animation runs smoothly.
Create a new symbol by pressing ctrl F8 or Insert > New Symbol alternatively. Inside the symbol create a big circle. This will serve as the motion path for the animation. And create a smaller one in a different layer. This will be the object that will animate. I converted the small circle into a movie clip by selecting it and pressing F8 and named it "circle1". Ofcourse you can name it to whatever you want but I advice you to name your symbols that not only you can understand but people in general too.
Well this is actually how to orient an object in the path, and since this is an intermediate Tutorial I'll be skipping on how I orient the circle into the path. In the end you should have something like this:
Now going into Scene 1, you should have a movieclip there. Name it to "anim1" so you can reference the movie later on. To continue the tutorial. I made a new symbol by, pressing ctrl-F8 again or Insert > New Symbol alternatively. I named it controller. Inside this movieclip I made 3 keyframes. The first frame has this code :
stop();
_parent.anim1.play();
and the 2nd frame has this code:
if (_parent.anim1._currentframe == 1)
_parent.anim1.gotoAndStop(28)
else
_parent.anim1.prevFrame();
and the 3rd frame has this code:
gotoAndPlay(2);
I'll explain the code later. Next Drag the newly created movieclip anywhere on the stage and give it an instance name controller. Now make a button and name it to Reverse. Add this action for the button:
on (rollOver) {
controller.gotoAndPlay(2);
}
on (rollOut) {
controller.gotoAndStop(1);
}
To explain the code on the controller, the first frame invokes a stop action so that the movie controller wouldn't play, this is essential when you use a movieclip as a controller like this. The second one invokes playing our animation, the one with a motion path. We place a play action since we'll be using a stop action when the animation should be reverse. Moreover, since you're inside the movieclip. We use _parent to access the the movieclip that's inside the stage. Since this is made for an Intermediate User, you should be now comfortable with paths to objects and variables in flash.
The second Frame is what makes the reverse animation. What it does is, it first checks if its on the first frame of the movieclip. Since we're dealing with reverese animation. If we're on the 1st frame, the next frame would be the last frame. In this case frame 28. If the movieclip is not on the first frame, it simply goes to the previous frame.
The third frame just invokes the command on the 2nd frame by going back to the second frame. This will go on and go on, until an action is invoked.
Now in the button, the first action just goes the the 2nd frame of controller, which is actually a loop, because the frame after that just tells the movieclip to go to frame 2 and play. Take note that we didn't use _parent.controller to access the controller. That is because we're inside a button, which is a whole different scenario if you're inside a movieclip. Lots of people make a mistake on this.
To move on the tutorial. the second Action which is a rollout behaviour just tells the controller to go to frame 1 and stop. Again what frame does is stopping the movieclip controller to play and making the animation to play in the right order.
That's it, a simple but effective reverse animation. There are a lot's of use of this. And I know this technique will come in handy, Till next time :)