Loading External Files (Flash AS3)

Introduction

One of the most useful features of Flash is the ability to load files that are outside of the Flash file during runtime. This way, small Flash files can be created that load in larger files—like sounds or video. It's also useful if we want to change the files being loaded—for example we can create a picture gallery that can be customized with different pictures, or an MP3 player that allows us to update our playlist. To do this we make use of two Flash classes—the Loader() class and the URLRequest() class.

Before we can add items to a Flash movie you will need some items to add. Create a folder and place a .jpg image inside. Also create a .swf file of some sort and put that inside as well. If you don't have any handy, you can use these.

Loading external images and placing them on the stage

Open a new Flash file and save it right away as loadExternalEx.fla.
Choose the first frame and open the actions window. The basic code for loading an object is pretty simple:
```
var myLoader:Loader = new Loader();
var myRequest:URLRequest=new URLRequest("pinta.jpg");
myLoader.load(myRequest); 
addChild(myLoader);  
```
First an instance of the Loader() class is created. Then an instance of the URLRequest() class, which is pointed toward the object to be loader (of course, if you're loading something other than the "pinta.jpg," you'll have to adjust the code accordingly). The loader than loads the requested image, and finally it's placed on stage with the addChild() method. Try it out.

We can also combine a couple of lines like this:

var myLoader:Loader = new Loader();
myLoader.load(URLRequest=new URLRequest("pinta.jpg")); 
addChild(myLoader);

Adding user interaction

Let's add a little complexity by giving the user the power to place the external object on stage and also giving her the ability to remove it. Create two buttons. We'll use one to load an object and place it on to the stage and the other to remove it. Call the first button loadItem_btn and the second removeItem_btn.
Create a new layer and call it "actions." Select the first frame and open the Actions window.

Next we need to alter the code we wrote above; first add some space between the Loader declaration and the lines that follow:

var myLoader:Loader = new Loader();


var myRequest:URLRequest=new URLRequest("pinta.jpg");
myLoader.load(myRequest); 
addChild(myLoader);

Now we can add listeners for our buttons; we'll insert these in the gap created above. Each listener will call its own function (written later); let's call the functions loadPic1 and removePic1:

var myLoader:Loader = new Loader();
loadItem_btn.addEventListener(MouseEvent.CLICK, loadPic1);    
removeItem_btn.addEventListener(MouseEvent.CLICK, removePic1);  

var myRequest:URLRequest=new URLRequest("pinta.jpg");
myLoader.load(myRequest); 
addChild(myLoader);

Now we need to wrap the loadPic1 function around the URLRequest code:

var myLoader:Loader = new Loader();
loadItem_btn.addEventListener(MouseEvent.CLICK, loadPic1);    
removeItem_btn.addEventListener(MouseEvent.CLICK, removePic1);  

function loadPic1(MouseEvent):void {
    var myRequest:URLRequest=new URLRequest("pinta.jpg");
    myLoader.load(myRequest); 
    addChild(myLoader);  
}

Fianlly let's write the removePic1 function. Place this at the end of the script:
```
function removePic1(MouseEvent):void { 
    myLoader.unload();    
}  
```
Try it out.
Now some of you may be saying—"Hey! The picture is covering my remove button!" depending on where you placed the buttons on stage (and the size of your image). How can you insure that your image does not cover the button? Well there are several options:
1. Move the button so it's positioned clear of the image;
2. Move the image's location;
3. Have the image appear underneath the button in the stacking order.
Solutions 2 and 3 require a bit more coding. Let's reposition the picture first.

We can speciy the position of our image simply by adding an x and y property to the loader:

function loadPic1(MouseEvent):void { 
    var myRequest:URLRequest=new URLRequest("pinta.jpg");
    myLoader.load(myRequest); 
    myLoader.x=150; 
    myLoader.y=10; 
    addChild(myLoader);    
}

Of course, you can (and should) change the x and y coordinates to position your image where you would like it to appear.

Now let's adjust the stacking order. First, position your image so that it covers the removeItem_btn when it appears.

Now add the following new line of code:

function loadPic1(MouseEvent):void { 
    var myRequest:URLRequest=new URLRequest("pinta.jpg");
    myLoader.load(myRequest); 
    myLoader.x=150; 
    myLoader.y=10; 
    addChild(myLoader); 
    setChildIndex(myLoader, 0);   
}

This places the loader at position 0 in the stacking order—which is the bottom-most position, thus everything else on the stage (including our buttons) will be above the image.

Loading external .swf files

This method is not limited to jpeg photos. In fact, you can load a variety of file types, including other Flash .swf files. If you downloaded the folder with the Pinta picture (above) you should also have a file called starSpin.swf. Swap out "pinta.jpg" and replace it with "starSpin.swf" and try your movie again.This is particularly handy for large multi-screen Flash projects. Each screen can be turned into its own mini Flash movie (.swf) and loaded into a main timeline as needed.

Attaching loaded objects to other movie clips

As we did in a previous exercise, it's possible to attach these loaded files to movie clips that are already on the timeline.

Create an empty movie clip (a movie clip that contains no artwork inside its timeline).
Give this movie clip the instance name "holder_mc," and position it somewhere towards the middle of the stage.

Now all you need to do is add the holder's instance name to the add and command like so:

function loadPic1(MouseEvent):void { 
    var myRequest:URLRequest=new URLRequest("pinta.jpg");
    myLoader.load(myRequest); 
    //myLoader.x=150; 
    //myLoader.y=10; 
    holder_mc.addChild(myLoader); 
    //setChildIndex(myLoader, 0);   
}

Note that I comment-out the lines that position the loader since they no longer apply (we're using the holder to position the loader). Try it now.

Unload vs. removeChild

There are at least two ways to remove an object from the stage: unload (as used above) and removeChild. For example, the removePic1 function above could be writen as follows:

function removePic1(MouseEvent):void { 
    holder_mc.removeChild(myLoader);    
}

This method let's you specify which object you wish to remove by it's parent object. The former method will clear any and all objects loaded with myLoader, no matter where they were added.

Daniel C. Fergus

Artist & Educator