Animating Sections In and Out Independently via Code

Created Oct 13, 2011    Last Updated: October 16, 2011

External SWFs act as webpage 'sections' or 'pages', and are animated in and out using actionscript.

Skill Level: Intermediate. Actionscript version: AS3

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

What's different about this tutorial is that the previous tutorial, 'Animating Sections in and out independently relied on external SWFs which had timeline based animations. This tutorial uses external SWFs which are all Sprites, that is, they are just 1 frame timelines. This keeps with better flash developing skills and moves us closer to full OOP programming.

 

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

The Main SWF

The main swf has the 3 buttons with instance names 'yellow', 'red' and 'blue' at the top of the file. Code will create a Loader, which will load either 'page-yellow.swf', 'page-red.swf', or 'page-blue.swf' depending on which button is clicked.

The External SWFs

The 3 external SWFs were created as just one frame swfs. mine were created as 400px x 400px files. They can be as simple or complicated as you want.

The external SWFs are named based on the buttons that will call them from the main SWF. So since our buttons are in the main swf are named 'yellow' 'red', and 'blue', we will call the external swfs names based on and which contain those names.

So my button with instance name 'yellow' will call my swf named 'page-yellow.swf', and button 'red' will call 'page-red.swf' and button 'blue' will call 'page-blue.swf'. This is done so we can easily concatenate the names. Concatenate really means to combine. So we can combine the name ( String) of the button 'red' with some other strings to come up with the name of the external swf 'page-red.swf'. If you see that top the name 'red', I can add "page-" before it and '.swf' after it to become 'page-red.swf'. See Line 30 of our code to see it in action. Choose your own names, but keep them related to each other so you can work with them easily and save alot of extra coding.

The Transition / Animation strategy

Greensock's TweenLite will help us to animate the Loader. I chose to have my 'page transitions' as coming in from the left, then also going back to the left. I choose to do this by animating only the 'width' property. That should make sense now if you look at the final example again. Of course you can choose to animate it in and out however you want. A classic way is just to have a simple fade in, then fade out using the 'alpha' property. Or you can choose to manipulate whatever or how many properties you want.

TweenLite is a tweening engine that I highly recommed. I am in no way affiliated with them, I just use it and think it makes coding animations so very much easier. It is free, but once you use it and realize how much it simplifies your coding life, I do recommend you supporting their efforts.

Screen Shot of the Main SWF's Code:

screen shot

Explanation of the Code

Line 1: Imports my version of TweenLite. Your version and path to its location will differ.

Line 3: Creates a Loader.

Line 4: Loads a first external swf into the Loader. You don't need to do this, I just helps start the whole laoding process.

Line 6: Creates a variable called 'loaderClip'. It is a MovieClip. This line, along with Line 11, is optional, as they are only needed if you require the main SWF to communicate into the loaded SWF. See the tutorial on External SWF Communication for more information on this.

Lines 8 and 9: Has the Loader listening for when it is COMPLETEly loaded, then it will carry out the function.

Line 10: The function begins.

Line 12: Optional ( See explanation for line 6). If used, this tells the MovieClip variable that was declared in Line 6 to be the contents of the Loader.

Line 13: Adds the Loader to the stage.

Lines 14 and 15: Positions the Loader where I want it.

Line 16: The Loader is given a width of 0, so that we can begin the transition, which will expand the width to its full size ( 400px).

Line 17: Tweens/animates the Loader via TweenLite to expand to its full width.

Lines 18 and 19: Removes the Event Listener, whicih is no longer needed. It is always best to remove Listeners once they are no longer needed. You can always add them back as needed, as we will below.

Lines 22-24: Adds Event Listeners to the buttons which will load the external SWFs. They all use the same function.

Line 26: Creates a new variable, a String, which will be used in the next function to create the name of the next external swf to load, based on which button is clicked.

Line 27: Begins the function for the buttons.

Line 29: Here's where we use that String variable. The 'evt.target.name' gives us the name of whichever button was clicked. So we can combine it to create a String with the name of the correct external SWF to load, which will be used in the URLRequest.

Line 30: Now that we have the value of 'newSWF' determined, we next want to animate/tween out the Loader with the currently loaded external SWF. This is done via TweenLite, which tweens the Loader's width back to 0.

We are also taking advantage of TweenLite's ability to let us call a function AFTER the tween is complete. In this case our 'onComplete' parameter calls the function on Line 34.

Line 34: Begins this function called once the Loader has been tweened 'out'.

Line 36: Loads the Loader with the 'newSWF'.

Line 37: Sets up another Listener for the Loader to listen for when it is COMPLETEly laoded. This is similar to the first time such a Listener was used ( Line 8). However, this time , we do not need all the other lines inside that function, such as 'addChild' - the Loader IS already added. We don't need the positioning, nor setting its width to 0, as that is already in place. When the Loader is loaded completely, it will carry out the function in Line 41.

Line 41: Begins the function

Line 42: The loaded Loaded is now tweened, back to its width of 400px.

Line 43: The Listener is removed as its job is done, until a new SWF is loaded ( in which case it is added back in the function on Line 34).

Note

To keep the scope of this tutorial concise, certain things were left out which you might want to incorporate using this in a 'real world' setting. The first would be to use some sort of pre-loader, especially if your external SWFs were large. Second would be to disable the button's event listener for the active button. Third would be to disable all buttons until the Loader has fully loaded.

The first is for your user's convenience , the second and third prevent errors and other issues from arising.

Here's the Code to copy:

     import gs.*;

var myLoader:Loader = new Loader();
myLoader.load(new URLRequest("page-yellow.swf"));

var loaderClip:MovieClip;

myLoader.contentLoaderInfo.addEventListener
(Event.COMPLETE,loaderLoads);
function loaderLoads(evt:Event):void
{
	loaderClip = myLoader.content as MovieClip;
	addChild(myLoader);
	myLoader.y = 100;
	myLoader.x = 0;
	myLoader.width = 0;
	TweenLite.to(myLoader, 1, { width:400} );
	myLoader.contentLoaderInfo.removeEventListener
	(Event.COMPLETE,loaderLoads);
}

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

var newSWF:String;
function loadsRed(evt:Event):void
{
	newSWF = "page-" + evt.target.name + ".swf";
	TweenLite.to(myLoader, 1, { width:0, onComplete:loadNewSWF } );
	
}

function loadNewSWF():void
{
	myLoader.load( new URLRequest(newSWF));
	myLoader.contentLoaderInfo.addEventListener
	(Event.COMPLETE,loaderLoads2);
}

function loaderLoads2(evt:Event):void
{
	TweenLite.to(myLoader, 1, { width:400} );
	myLoader.contentLoaderInfo.removeEventListener
	(Event.COMPLETE,loaderLoads);
}

     

Here is the same example, using the same external SWFs, and the same main SWF, with the exception that in this file's code, we animate 4 different properties at once - the width,the height, the alpha, and the rotation. This might seem garish(or maybe not), but does illustrate that your transitions are not limited to a single property.


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)