Animating Sections In and Out Independently via the Timeline

Created April 20, 2010    Last Updated: September 18, 2011

Skill Level: Intermediate. Actionscript version: AS3

Flash skills needed:
  1. Creating MovieClip symbols
  2. Simple animation
  3. Using ActionScript panel

This tutorial is going to show you how to set up your Flash files to have your sections not only animate 'in'(easy), but also to have an 'out' animation play(not so easy...)before having the next section come in with its 'in' animation. This will all be done on the Timeline. While I no longer advocate doing timeline animations or navigation like this, I still get requests for information on how to do it this way. Once you understand the concepts used here, you should then be better equipped to start changing over from timeline based work to working with external classes/ document class.

This is not meant to be a complete template, but to be used for a learning experience. Therefore it is not 'complete'. I purposely did not bother to do such things as disable a button once clicked so it won't activate the section again, etc.

Likewise you will see some things in the 'if' statements that could be written more succintly. I kept them written in 'long form' to more easily illustrate what is going on.

This also relies on nested functions which are not a best practice. With all these caveats in place, let's continue...

Here is the finished piece that we will be aiming for:


This is basically accomplished using frame labels, Enter Frame event listeners, and compound logic utilizing "if" statements.

We use Enter Frame event listeners to help us avoid having any code ( even a simple stop(); action ) on any frame other than the first frame.

Screen Shot of the FLA:

screen shot

You can see that this file is set up with several layers. There is a 'buttons' layer which contains the three movie clips symbols that are used as 'buttons'. They are the rectangular red, yellow, and blue symbols at the top of the swf. These symbols have the instance names of "red" , "yellow", and "blue" respectively.

The 3 layers above them have the animations for the red, yellow, and blue ball on the left side of the swf. These will represent your in and out animations, and will be as elaborate as you can dream up. If you play with the SWF above, you will see that each of the round balls have 3 parts to their animations. You can consider these the "in" animation , where in this case the ball travels from the left of the SWF to the center, a 'stop' section where the ball stays static in the center of the swf ( well, approximately the center...) until further user input occurs, and the 'out' section, where the ball travels in reverse back to the left side of the swf.

Each animation has 3 frame labels on the l'labels' layer. These are 'redin', 'yellowin' and 'bluein' which begin the ball movement from the left to the center. Then there are also 'redstop', 'yellowstop' and 'bluestop' which corespond to the static frame wherre the ball stays put in the center. Then the 'redend', 'yellowend' and 'blueend' labels are the las frame of the 'out' animation. By clever reference to these we can make happen what we want to occur.

To paraphrase what we want to happen, let's say we click on the red button. That would then play the red 'in' animation , which is the red ball traveling to the center. The red ball should then stop and wait for user input. When the user chooses and clicks another button, the red button shold return to the left ( thus playing its 'out' animation) and THEN the next section's 'in' animation should play, and that ball should stop in the center, etc etc etc.

Make sense ? Now we need to write the code on the main timeline which will make this all work. It might seem a little confusing at first, but I will try to explain it line by line. It really is not that much code at all.

Here is a screen shot of the code on the main timeline:

ACTIONS:

actionscript

Line 1: stops the timeline from moving past the first frame.

Lines 3-5: adds an Event Listener to the 3 buttons. They all trigger the same function, callaed 'buttonFunction'.

Line 8) writes the function 'buttonFunction' The rest of the code is actually all inside this one function. It uses nested functions based on 'if/else' logic statements.

Line 10 inside the function sets up a convenient variable called 'stopper' which will keep track of the name of which ever button is clicked.

The first if/else statement breaks this function into 2 parts ( see lin 10 and line 32 ). It is checking to see if the frame we are starting from is either one of the 'stop' frames, or, basically, the first frame, which is where the playhead would ONLY be at the very beginning. I kept it this way to make this and illustrate this as more flexible. We could have written LESS code if we would be satisfied with having one of the initial sections stopped at their 'stop' frame, rather than having them ALL off to the left.

IF we could be satisfied with that, we could make these changes: delete lines 32 - 44 ( but leave the closing brace on line 32. Delete line 12, AND change line 1 to gotoAndStop('redstop'); ( or 'yellowstop'/'bluestop' ).

Let's explore the 'else' section of the initial 'if/else' statement, lines 32 - 43. Remember that this is only triggered at the very beginning, for the first click.

Line 33 adds an Enter-Frame event listener. this will continuously listen and cyle through the coresponding function every time the playhead enters a frame. Even a seemingly stopped movie is still entering the same frame at the frame rate of the movie ( if your file is set up with a frame rate of 12 or 30, then it is still entering that very frame 12 ( or 30 ) times a second).

Line 34 tells the playhead to go to and play the event.target.name + "in" if you clicked the red button, which has the instance name of 'red', then the event target name is 'red'. so 'red' + 'in' becomes 'redin', which is where you want it to play from. once it is playing, the listener from line 33 is firing the function written in lines 36 - 43. If read, this function is saying "if the playhead has reached the 'stop' label, then the playhead should stop. It also removes the eventlistener for this function since it is no longer needed.

If the playhead is actually stopped on a 'stop' label when we click on a button, then lines 12 - 26 of the function ( the 'if' section of the overal 'if/else' statement) will apply.

Line 12 ( the 'if' statement) says " if the current label is one of the 'stop' labels, then ...

Line 13: play - it tells the playhead to play, which would be the 'out' animation.

Line 14: addds an Enter Frame event listener with the funtion written on Line 15.

This nested function has another 'if/else' statment which says - if as the out animatin is playing, if it reaches an 'end label ( it will ...) then it should:

Line 18: stop - the playhead stops.

Line 19 removes the now not needed event listener, and another one is added on Line 20.

Line 21: tells the playhead to goto and play the 'in' animation for the button that was clicked.

Lines 23 - 26 are another duplicate function that will stop the animation once it reaches the 'stop' label.

So there you go. I think I have written this code as succint as possible. I am always open to comments or suggestions on how to do this in a better or 'cleaner' manner.

HERE's THE CODE TO COPY:

stop();

red.addEventListener(MouseEvent.CLICK, buttonFunction);
yellow.addEventListener(MouseEvent.CLICK, buttonFunction);
blue.addEventListener(MouseEvent.CLICK, buttonFunction);

function buttonFunction(event:MouseEvent):void {

var stopper:String=event.target.name;

if (currentLabel=='redstop' || currentLabel=='yellowstop' ||currentLabel=='bluestop') {
play();
stage.addEventListener(Event.ENTER_FRAME, frameFunction2);
function frameFunction2(event:Event):void {

if (currentLabel=='redend' || currentLabel=='yellowend' ||currentLabel=='blueend') {
stop();
stage.removeEventListener(Event.ENTER_FRAME, frameFunction2);
stage.addEventListener(Event.ENTER_FRAME, frameFunction1);
gotoAndPlay(stopper +"in");

function frameFunction1(event:Event):void {
if (currentLabel==stopper + "stop") {
stop();
stage.removeEventListener(Event.ENTER_FRAME, frameFunction1);

}
}
}
}
} else {
stage.addEventListener(Event.ENTER_FRAME, frameFunction1);
gotoAndPlay(event.target.name +"in");

function frameFunction1(event:Event):void {
if (currentLabel==stopper + "stop") {
stop();
stage.removeEventListener(Event.ENTER_FRAME, frameFunction1);

}
}
}
}


If you have questions or comments, feel free to let me know.

You must have 'styles' or 'CSS' disabled. That's OK.

If so, and you see this, please DO NOT fill out the next 3 fields: name, email and zipcode. Thank you.

Name:

Email:

Just continue on to the rest of the form below this. Thank you.








Thanks for helping us control spam by filling in this question:
What is 10 + 3 = ? (Use numerals only)