Creating an Animation Controller in Flash

By Blue_Chi | Flash | Intermediate

This tutorial will teach you how to create a control panel for your basic animations so that you can fast forward, rewind, pause and play the animation. An example of the result movie could be seen in the sample movie below.

The movie speeds up forwards or backwards by telling the main timeline repeatedly to go three frames ahead or backgrounds using the GotoAndStop command. This command is being repeated by creating a temporary empty movie clip that executes this command continuously. You are required to have basic ActionScript knowledge to follow this tutorial.

To save time and to concentrate on the topic of the tutorial I will provide you with the starting FLA to follow this tutorial. This file has the stage ready, no instance names or ActionScript has been put in there yet.

It is essential to mention that the type of controller that we are going to create in this tutorial will only work for animations occurring in a single timeline, animation that is embedded in separate movie clip symbols would not be controlled by the flow of time in the main timeline because of their nature as independent timelines. As seen in our FLA, the animation is created using several layers in the same timeline and a graphic symbol.

We will start off by giving our buttons instance names, click on a button to select it and then access the Properties Panel to be able to assign an instance name for the button. Name your buttons rewind_btn, pause_btn, play_btn, and forward_btn.

That should make our stage ready, we will now start scripting our buttons. Click on the very first frame in the Action layer and then open up the Actions Panel. We will assign all of our code on the very first frame of our timeline instead of putting the code on the buttons themselves, this way all of our code could be found in one place instead of being scattered all over the FLA file.

We will start with the easiest part of our code. We will stop the movie from playing automatically, we will make the play button start playing, and the pause button do it's job as well. The code for this is self-explanatory:

stop();
play_btn.onRelease=function (){
play();
}
pause_btn.onRelease=function(){
stop();
}

You may want to test your movie now to see that these buttons work fine. The remaining part is to code our forward and rewind buttons.

The action in the fast forward button will tell the movie to go three frames ahead instead of going one frame at a time. The problem here is that a button usually tells a single command at a time, if you tell a button to go three frames ahead, it will go three times ahead and then stop. We want a repeated action in that it goes three frames ahead and then go three times ahead, and so on. This could be done in several ways, the way that we will do it here is by creating an empty movie clip that runs on its and keeps telling the main timeline to go three times ahead. The button will merely create this movie clip. The name of our new movie clip is controller_mc:

forward_btn.onPress=function (){
_root.createEmptyMovieClip("controller_mc",1);
controller_mc.onEnterFrame=function(){
_root.gotoAndStop(_root._currentframe+3);
}
}

This should make our button create the new movie clip that repeats the command, the movie clip will continue to run though even when you release your button, we have to stop the command when we release the button. This can be done by deleting the new movie clip using the following command:

forward_btn.onRelease=function (){
controller_mc.removeMovieClip();
}

This should make our forward button work, we'll repeat the same code for our rewind button, this time we will tell the root movie to go three frames behind.

rewind_btn.onPress=function (){
_root.createEmptyMovieClip("controller_mc",1);
controller_mc.onEnterFrame=function(){
_root.gotoAndStop(_root._currentframe-3);
}
}
rewind_btn.onRelease=function (){
controller_mc.removeMovieClip();
}

This should make our controller be usable, test the movie to see that both buttons work. This is not the end though, some problems could still occur to spoil the playback of our movie. First of all, our controller adds three times to the current frame number, what if we were at frame 99 and the total number of frames in our movie was 100. Adding 3 to 99 equals 102. We do not have such a frame, this will result to have this command ignored and we will stay at frame 99. To solve this problem we will tell the movie to stop at the last frame of our movie if we get a number greater than the total number of frames in our movie. To do so we will have to add the following code to our script:

forward_btn.onPress=function (){
_root.createEmptyMovieClip("controller_mc",1);
controller_mc.onEnterFrame=function(){
_root.gotoAndStop(_root._currentframe+3);

if (_root._currentframe+3 > _root._totalframes){
_root.gotoAndStop(_root._totalframes);
}
}
}

The same should be done to the function of our rewind button, but this time if the result we get is less than 1, which is the first frame in our timeline.

rewind_btn.onPress=function (){
_root.createEmptyMovieClip("controller_mc",1);
controller_mc.onEnterFrame=function(){
_root.gotoAndStop(_root._currentframe-3);

if (_root._currentframe-3 < 1){
_root.gotoAndStop(1);
}
}
}

This solved the first issue with our code, the second problem is more about the user's attitude, flash treats unreleasing the button differently if the user releases his click on the button itself or outside it. It is possible to release the click outside the button by holding the button and then moving the mouse, once the mouse is not over the button hit area you can release it to discover that your normal release command was not executed. To avoid this we should duplicate our release code for the buttons release outside status as well. We are not changing our release function, we are just adding the same code for the button's release outside function.

forward_btn.onRelease=function (){
controller_mc.removeMovieClip();
}

forward_btn.onReleaseOutside=function (){
controller_mc.removeMovieClip();
}
rewind_btn.onRelease=function (){
controller_mc.removeMovieClip();
}

rewind_btn.onReleaseOutside=function (){
controller_mc.removeMovieClip();
}

This should conclude our coding, if you have written everything that we have mentioned you should get the following code:

stop();
play_btn.onRelease=function (){
play();
}
pause_btn.onRelease=function(){
stop();
}
forward_btn
.onPress=function (){
_root.createEmptyMovieClip("controller_mc",1);
controller_mc.onEnterFrame=function(){
_root.gotoAndStop(_root._currentframe+3);
if (_root._currentframe+3 > _root._totalframes){
_root.gotoAndStop(_root._totalframes);
}
}
}
forward_btn.onRelease=function (){
controller_mc.removeMovieClip();
}
forward_btn.onReleaseOutside=function (){
controller_mc.removeMovieClip();
}
rewind_btn.onPress=function (){
_root.createEmptyMovieClip("controller_mc",1);
controller_mc.onEnterFrame=function(){
_root.gotoAndStop(_root._currentframe-3);
if (_root._currentframe-3 < 1){
_root.gotoAndStop(1);
}
}
}
rewind_btn.onRelease=function (){
controller_mc.removeMovieClip();
}
rewind_btn.onReleaseOutside=function (){
controller_mc.removeMovieClip();
}

This concludes our tutorial, it is possible to create the same feature using ActionScript intervals instead of creating an empty movie clip, this was a method that I personally use and you should not be surprised to realise that there are some more efficient ways of doing this. Here is the end result FLA just in case you had any problems. I hope that you learnt something new and please do feel free to post at the forum if you have any further questions.

- End of Tutorial.