External SWFs - Loading them with ActionScript

23 July, 2009

If you are working on a large Flash project, or you have a complex animation to build, the best way is to build parts of it in separate FLAs and SWFs and then pull those together at run time. That is what we are going to look at today: using external SWF files with ActionScript.

As per usual, we have both an ActionScript 2 tutorial and an ActionScript 3 tutorial, so chose your poison and let's get going!

• ActionScript 2
• ActionScript 3

ActionScript 2

Calling external SWF files into a parent SWF is simple and straight forward. We will look at a basic method to get this done, and we'll touch on how you can implement a preloader on the incoming file.

It is recommended to have one parent file and then have all the external SWFs as children of that, rather than have SWF files calling in SWF files calling in SWF files etc., but both ways will work. For the sake of keeping things tidy though, it can be a good idea to keep all the external files called by the one parent.

For the purposes of this exercise we have a very simple parent and child arrangement. The parent SWF is blank and it will simply call in the child SWF which is a blue rectangle, smaller than the parent. Once that is loaded it will be positioned in the centre of the parent.

Let's take a look at the child SWF by itself first. This is the file we will be loading with the parent:

A simple blue rectangle. But wait, there's more!

Now let's look at the parent SWF in action, calling in the child SWF with ActionScript:

Perfect! The blue rectangle you see above is the same SWF file as the blue rectangle that is sitting by itself. Now let's look at the ActionScript we need on the parent to make this happen. We do not need any ActionScript on the child to be able to call it in externally.

So let's have a rundown of this ActionScript. First we create a new empty MovieClip which we have called container_mc which will hold the external SWF we call in. We set this to be at the front with the getNextHighestDepth() method.

Next we create a new Listener object we have called my_listener.

Then we set up a function to run when the onLoadComplete event fires. So when the loading of the external SWF is complete, the function will run. We also pass into this function the MovieClip we are loading so we can easily access it. In our example we have simply shifted the MovieClip 50 pixels to the right and 50 pixels down. When SWF files are loaded in they will default to 0, 0 (the top left corner) so you will have to manually shift them if you want them to go elsewhere.

Following that we set up a function to run on the onLoadProgress event. At the same rate as the frame rate of the movie, this event will fire while the SWF is loading. We are not using this function, but if a preloader was required the logic could be written in this function. At present we are simply printing out the load progress, but it's easy to see how this can be used to make a preloader.

Next we set up a new MovieClipLoader object called my_loader. Then we add the listener - my_listener - to the object.

And finally we tell the MovieClipLoader to load our SWF. In our case this is called child.swf, and we tell it to load into the MovieClip we set up earlier, container_mc.

It's as simple as that. This is the code we're using to load our example.

There are a couple of things to think about when loading in external SWFs however. If you call any other external files inside the child, MP3s for example, these are now pathed relative to the parent. Also, library items which you call in from the child need to exist in the parent library or they will fail to work. And if you're using any _root code this can cause some interesting results as the _root is now the parent, not the child.

You can download the source files we have used for this example here: external_swf_as2.zip.

ActionScript 3

Calling external SWF files into a parent SWF is simple and straight forward. We will look at a basic method to get this done, and we'll touch on how you can implement a preloader on the incoming file.

It is recommended to have one parent file and then have all the external SWFs as children of that, rather than have SWF files calling in SWF files calling in SWF files etc., but both ways will work. For the sake of keeping things tidy though, it can be a good idea to keep all the external files called by the one parent.

For the purposes of this exercise we have a very simple parent and child arrangement. The parent SWF is blank and it will simply call in the child SWF which is a blue rectangle, smaller than the parent. Once that is loaded it will be positioned in the centre of the parent.

Let's take a look at the child SWF by itself first. This is the file we will be loading with the parent:

A simple blue rectangle. But wait, there's more!

Now let's look at the parent SWF in action, calling in the child SWF with ActionScript:

Perfect! The blue rectangle you see above is the same SWF file as the blue rectangle that is sitting by itself. Now let's look at the ActionScript we need on the parent to make this happen. We do not need any ActionScript on the child to be able to call it in externally.

So let's have a rundown of this ActionScript. First we create a new Loader object which we have called child_loader. We set up the path to our SWF file with the URLRequest and then we call the load method of our Loader object, passing in the path, to load the SWF.

Next we set up a couple of functions and events so we can control the SWF when it's loaded and so we can track its progress as it loads.

We add event listeners for the COMPLETE event (when the load is complete) and the PROGRESS event (as it loads) and we assign the functions to call when the event is fired: load_completed and on_progress.

Then we set up the functions.

The load_complete function runs when the COMPLETE event fires. So when the loading of the external SWF is complete, the function will run. In our example we have simply shifted the MovieClip 50 pixels to the right and 50 pixels down. When SWF files are loaded in they will default to 0, 0 (the top left corner) so you will have to manually shift them if you want them to go elsewhere.

Following that we set up a function to run on the PROGRESS event. At the same rate as the frame rate of the movie, this event will fire while the SWF is loading. We are not using this function, but if a preloader was required the logic could be written in this function. At present we are simply printing out the load progress, but it's easy to see how this can be used to make a preloader.

It's as simple as that. This is the code we're using to load our example.

There are a couple of things to think about when loading in external SWFs however. If you call any other external files inside the child, MP3s for example, these are now pathed relative to the parent. Also, library items which you call in from the child need to exist in the parent library or they will fail to work. And if you're using any _root code this can cause some interesting results as the _root is now the parent, not the child.

You can download the source files we have used for this example here: external_swf_as3.zip.

ferrari_chris