Animating Sections In and Out Independently

Created January 26, 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.

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


This project consists of the main SWF, which is a 1-frame SWF that has a Loader, and 2 buttons (a red and a blue button) which will load the other sections.

This 1-frame swf has all the Action Script 3 code.

The project also has 2 external SWFs.

Organizing the files:

For this example, I created a new AS3 .fla named 'externalLoads.fla' which will create the parent swf/main timeline. On its stage, I created 2 MovieClip symbols to act as buttons. One is a simple red rectangel given the instance name 'red' , and the other a blue rectangle given the instance name 'blue'.

There are several possibilities to choose from in making your 'sections' which are sometimes mistakenly called 'pages'. Your sections could be: different frames on the main time-line ( an out-moded way of doing it and not recommended); different 'scenes' ( likewise outmoded and not recommeded); they could be individual self contained MovieClips that are all on the stage, which we would then manipulate their visibilities; they could be individual MovieClips added/removed from the Library; or they could be externally loaded SWFs.

We will be loading external SWFs, thus we have a Loader on the main timeline as mentioned earlier.

I have seen a lot of interest in this subject, but have never run across a tutorial to explain it. I wish I had this tutorial a while back ! I am taking the most simple approach I can with this, using no external/imported classes. Once understood, you should be able to adapt this logic to whichever techniques you use.

The External SWFs

flash .fla screenshot

For this tutorial example, I created 2 external SWFs : red.swf,and blue3.swf
The above image shows a screenshot of red.swf timeline and stage.

Setting up the External SWFs

The bottom Layer(background color) just has a rectangle shape the size of the stage filled with a color - red or blue - depending on the SWF. You should note that an external SWF is loaded with a default background color of transparent, no matter what you set for the background color in the Properties Inspector. To have the background color appear is beyond the scope of this tutorial. To get around this - and I love simple 'work-arounds' - i just create a shape for the background color.

I did this to give specific, obvious feedback that one or the other SWF is being loaded, and an obvious indication of WHEN it is loading.

The next Layer (animated circle) is our simple animation for this example. It will be as complex as you can dream up ( and keep straight...). It is nothing more than a simple shape (a circle) turned into a MovieClip. It is then animated along its X position.

The red.swf will be the initially loaded SWF. What I wanted to happen is that the initial animation has the circle enter from the left and travel right. It will stop in the middle. Then when the other button is selected ( in this case the blue button), the red.swf will play its OUT animation( the circle animating in reverse), before loading the blue.swf, which has a similar circle animating in and stopping ( except that it animates in from the right. I hope that is clear. If not - play with the example at the top of this page.

You should already see from the screenshot above that this is accomplished by using Frame Labels. There is no code whatsoever inthe external swf. Let me repeat that: there is NO CODE whatsoever IN THE EXTERNAL SWF. All code is placed only on the first ( and only ) frame of the main timeline.

Of course this code can ( and should ) be wriiten from external classes, but that is also beyond the scope of this tutorial. For simplicities sake, it is placed on the first frame of the timeline.

The circle MovieClip is animated from the left to the center.This is the 'in' animation. Then these frames are copied, and pasted, and this copied frame animation is then reversed so that it goes from the center, back to the left of the stage. This is the 'out' animation.

The next layer (copy) has text. I put text to give additional immediate feedback as to where we are on the loaded SWF's timeline.

Frame Labels are placed on all these key frames. The first frame is labeled 'in'. Where the circle stops in center is labeled 'stop'. The next frame Label is labeled "out", and ends at "end" . Note that the "out" frames and frame label could easily be the very next frame after "stop", but i extended the frames so we could easily read the frame label in the screen shot.Likewise I extended the frames after "end" so we could read that frame label.

A re-cap of what we want to happen is this: when the external swf is loaded, it will play from frame one and then stop on the 'stop' frame. It will be told to stop there by code on the main timeline. Then, when the user clicks on another button, this swf will gotoAndPlay from the "out" frame to the end, playing it's 'out' animation. THEN and only then will it load the appropriate next swf , which will likewise play from its 'in' frame to it's 'stop' frame.

For this to work, both external SWFs need to be organized in the same manner - that is, they have to have the same Frame Labels (with the smae names !), which correspond to the same points for each SWF. The animations themselves, the length of the animations,etc, can be different - it couldbe the entire SWF sliding in and out, or whatever you dream of,as long as the correct frame labels are there and named exactly the same .

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 screenshot

Line 1: creates the Loader which will load the external SWFs. If I needed it positioned exactly, I could give it specific X and Y positioning.

Lines 3&4: adds a CLICK listener to the red and blue buttons onthe stage

5) tells the Loader which SWF to (initially) load

6) this line creates a new MovieClip, which we will use to 'cast the Loader Object as a MovieClip'. all this means is that we are telling Flash that the stuff being loaded into the Loader IS a movieclip with a timeline that can be manipulated, as opposed to a non-timeline Oject, like an image in jpeg, gif or png format.

9) this line adds a listenr to the content of the Loader. we want to know when it has loaded COMPLETE, so we can proceed from there. If some code is seena nd executed before the Loader has actually finished loading, we can get errors.

10-14) these lines write the function of what we want to happen once the Loader has completed loading. what we want to happen is:

Line 11: to first now declare the MovieClip we created in Line 6 to be defacto the content of the Loader. once again, this allows us to now call to elements inside the externally loaded swf, just like they were any other movieclip on the stage.

Line 12: we now add the Loader to the Display List - this is how it actually appears for us to see it !

Line 13: this line attaches a listener to the loaded clip. it checks this code every frame (ENTER_FRAME). this is a good way to talk to the timeline of the loaded clip, all from the first frame of the main timeline ( an important concept ).

Line 15: this is the function it will listen for every frame of the external swf/loaded clip.

Line 16:I am telling it to recognize that as it is playing, when it reaches the label called 'stop' , to , well, stop. this is written as a typical 'if statement'.

Line 17: this removes the eventListener that is no longer needed ( a good practice to prevent excess memory usage or leakage. get into the habit of recognizing when the need for an eventListener is over, and to remove it.

RECAP - up to now, we have taken care of all the code to load the initial SWF, and to have it stop once its 'in' animatiaon has finished. Next we will write the CLICK functions for the 2 movieclip/buttons (see lines 3 and 4) and tell it how to handle swapping out the external SWFs.

Line 20: declares the function from Lines 3 and 4.

Remember, once a button is clicked, we want the loaded swf to play its 'out' animation, and THEN to laod the new SWF, and to let it play to the 'stop' frame.

Line 22: tells the currently loaded SWF to play its 'out' animation

Line 23: adds another ENTER_FRAME listener which is constructed on Line 24:

Line 24: constructs this function that is listening on every frame for:

Line 25: as it is playing its 'out' animation, when it reaches the label 'end' :

Line 26: it first removes the no longer needed event listener and then

Line 27: tells it to now perform a new function which is written next.

Line 30: this function is constructed

Line 31: I take advantage of being able to recognize the name of a movie clip ( in our case the movieclip/buttons) by this phrase ( evt.target.name). The event(evt) is the MouseEvent.CLICK from either Line 3 or 4. The target.name is the specific name of whichever button( the 'target) was clicked. Thus the evt.target.name for the button with the instance name 'red' is .... red.

So using this, I can now create a variable, a String, which will hold the information of which button was clicked, and turn it into a String coresponding to which SWF we are trying to load. by having the names of the buttons and their coresponding SWFs the same, this becomes easy. Therefore instance named button 'red' wants to load 'red.swf' and instance named button 'blue' wants to load 'blue.swf'. You see that the variable tells it to add the '.swf' to the end of the name, and thus to be equal to the SWF we want to load! great !

Line 32: tell s the Loader to load this SWF from Line 31

Line 33: adds the now familiar Listener to know when the loading is COMPLETE

Line 34: writes the COMPLETE fuction:

Line 35: asks the content of the Loader to be recognized as a movieclip ( nothing new here...)

Line 36: asks for the loaded SWF to appear in the Display List ( nothing new here either..)

Line 37: adds a familiar ENTER_FRAME listener

Line 40: the ENTER_FRAME function is constructed, and begins with the familiar "if" statement, which once again listens for the SWF to reach the label 'stop' and to stop.

Line41: the unecessary Listener is removed.

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:

var myLoader:Loader = new Loader();

red.addEventListener(MouseEvent.CLICK, loadsRed);
blue.addEventListener(MouseEvent.CLICK, loadsRed);
myLoader.load(new URLRequest("red.swf"));
var loaderClip:MovieClip = new MovieClip();

myLoader.contentLoaderInfo.addEventListener(
Event.COMPLETE,loaderLoads); function loaderLoads(evt:Event):void{
loaderClip=myLoader.content as MovieClip;
addChild(myLoader);
loaderClip.addEventListener(Event.ENTER_FRAME, frameFunction);
}
function frameFunction(evt:Event):void{
if(loaderClip.currentLabel=="stop"){loaderClip.stop();
loaderClip.removeEventListener(Event.ENTER_FRAME, frameFunction);} }

function loadsRed(evt:Event):void{

loaderClip.gotoAndPlay("out");
loaderClip.addEventListener(Event.ENTER_FRAME, frameFunction3);
function frameFunction3(evt:Event):void{
if(loaderClip.currentLabel=="end"){
loaderClip.removeEventListener(Event.ENTER_FRAME, frameFunction3);
newFunction();
}
}
function newFunction():void{
var myRequest:String = evt.target.name + ".swf";
myLoader.load(new URLRequest(myRequest));
myLoader.contentLoaderInfo.addEventListener(
Event.COMPLETE,loaderLoads); function loaderLoads(evt:Event):void{
loaderClip=myLoader.content as MovieClip;
addChild(myLoader);
loaderClip.addEventListener(Event.ENTER_FRAME, frameFunction2);
}

function frameFunction2(evt:Event):void{ if(loaderClip.currentLabel=="stop"){
loaderClip.stop();loaderClip.removeEventListener(
Event.ENTER_FRAME, frameFunction2);
}
}
}

}


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)