AS3 How to and Tips > Loading External Assets

One of the most versatile features of Flash is the ability to import swf files into a "containing" Flash movie and the ability for the "containing movie" to interact with the imported swf. We have addressed various aspects of this issue with our previous tutorials, External Clips in Flash CS3, Loading External SWF Files for a Dynamic Presentation, and Loading and Unloading SWF's with 'stage' References in AS3.

In the simple example shown below, the external swf (built from the file ext.fla included for download) consists of a 400 by 200 movie that has a global variable called total and a public function called updateBackAndTotal, which takes a single color parameter as an argument. A call to updateBackAndTotal(clr) draws a rectangle with color clr to fill the stage of the external swf and adds as text the value of the total variable.

The file ext.swf on its own is shown first. Note that there is no user interface that allows the updateBackAndTotal function to be called or the total variable to be changed.

We now use a "main movie" called holder.swf to load the ext.swf file shown above and treat it as a native MovieClip. In this way, all global variables and functions (and stage assets and timeline) of the ext.swf object can be accessed and controlled by the holder.swf movie. The final product is shown here:

Download

Download the two fla files for this tutorial in the following compressed folder.

The code for the external swf file, ext.fla

The file ext.fla has nothing on the stage initially -- everything is created with ActionScript. We first create the components to be displayed, a shape and a textfield. More importantly we create the global variable total, initially 0, so we can illustrate how this variable can be accessed and changed by a "containing movie."

var shBackground:Shape = new Shape();

var tfMessage:TextField = new TextField();

var total:Number = 0;

addChild(shBackground);

Next we create the textfield, centered on the stage, with no text yet assigned.

tfMessage.x = 50;

tfMessage.y = 50;

tfMessage.width = 300;

tfMessage.height = 100;

tfMessage.background = true;

tfMessage.border = true;

tfMessage.backgroundColor = 0xFFFFFF;

tfMessage.defaultTextFormat = new TextFormat("Arial",16,0x000000,true);

addChild(tfMessage);

The updateBackAndTotal function will be used to draw the background and place text on the screen. The point is that this function can be called directly by the "containing movie." Note that we use the global variable total to provide a value to be displayed on the screen -- this is done to illustrate how the global variable total can be accessed from the "containing movie."

function updateBackAndTotal(c:uint):void {

shBackground.graphics.clear();

shBackground.graphics.lineStyle(2,0);

shBackground.graphics.beginFill(c);

shBackground.graphics.drawRect(1,1,398,198);

shBackground.graphics.endFill();

tfMessage.text = String(total);

}

Finally we call the function above so a default background and starting value (0) appear.

updateBackAndTotal(0xFFFFAA);

The code for the main movie, holder.fla

Our "main movie," which we refer to sometimes as the "containing movie," does have a few assets on the stage. These consist of an input text box called txtAdd and buttons called btnAdd and btnClear. All else seen on stage above is static text.

In the script for our "main movie" we first create the MovieClip variable mcExt that will eventually point to the contents of the external swf file. On the second line we are prohibiting the user from typing anything other than positive integers in the input box onscreen. We do this simply to avoid having to deal with user input errors in this example.

var mcExt:MovieClip;

txtAdd.restrict = "0123456789";

To load an swf file we use a Loader object and its contentLoaderInfo property. Note that a thoughtful designer would also add a handler for the event IOErrorEvent.IO_ERROR so the program does not crash if the file is missing. Again, we will keep this example simple by omitting this.

var ldr:Loader = new Loader();

ldr.contentLoaderInfo.addEventListener(Event.COMPLETE, swfLoaded);

ldr.load(new URLRequest("ext.swf"));

When the asset is ready (i.e., Event.COMPLETE is fired), we assign the content of the loaded asset to the variable mcExt and place it on stage.

function swfLoaded(e:Event):void {

mcExt = MovieClip(ldr.contentLoaderInfo.content);

ldr.contentLoaderInfo.removeEventListener(Event.COMPLETE, swfLoaded);

mcExt.x = 50;

mcExt.y = 50;

addChild(mcExt);

}

The addNumber function below, triggered by a click of btnAdd, adds the Number in txtAdd.text to the value of total within the mcExt MovieClip. (Note the logical reference mcExt.total for this value.) It then similarly calls the updateBackAndTotal function within the mcExt MovieClip to update the background color and number displayed on the screen. We use a random color in the updateBackAndTotal function so the user can detect that the button click has occurred.

btnAppend.addEventListener(MouseEvent.CLICK, addNumber);

 

function addNumber(e:MouseEvent):void {

mcExt.total = mcExt.total + Number(txtAdd.text);

mcExt.updateBackAndTotal(Math.floor(Math.random()*Math.pow(2,24)));

}

The clearTotal function below, triggered by a click of btnClear, clears the contents of txtAdd.text, sets the total variable in mcExt to 0, and then calls the updateBackAndTotal function within the mcExt MovieClip to update the background color and number displayed on the screen.

btnClear.addEventListener(MouseEvent.CLICK, clearTotal);

 

function clearTotal(e:MouseEvent):void {

txtAdd.text = "";

mcExt.total = 0;

mcExt.updateBackAndTotal(0xFFFFAA);

}

Back to AS3 How To and Tips              Back to Flash and Math Home

We welcome your comments, suggestions, and contributions. Click the Contact Us link below and email one of us.

Adobe®, Flash®, ActionScript®, Flex® are registered trademarks of Adobe Systems Incorporated.