Load Image File into Flash Movie with URLRequest

Flash Site @ BellaOnline
View This Article in Regular Layout

Content copyright © 2009 by Diane Cipollo. All rights reserved.
This content was written by Diane Cipollo. If you wish to use this content in any manner, you need written permission. Contact Diane Cipollo for details.

One of the most effective ways to keep the file size of your Flash^R project to a minimum is to use external assets as much as possible. Whether these assets are images, text or swf files, if they are external to the main Flash movie, they do not contribute to its download time. In this tutorial, we will learn how to use ActionScript 3 to load an external image into our main Flash movie.

This image file can be a GIF, PNG, JPEG or progressive JPEG. By default, the top left corner of the image will be aligned with the 0,0 X and Y coordinates on the Stage. However, this can be changed with ActionScript. Also be default, the image will be placed above, ie on top of, the current contents on the Stage.

Our first step is to create a variable for a new URLRequest and set the URL property to the location of the image file. In the example below, the image is in the same place as the swf file. If it were not, you would include the path along with the name of the image file in the URL property.

var myrequest: URLRequest = new URLRequest("name_of_image.jpg");
The second variable we will create is for a new loader object, which acts as a container for the image.

var myloader: Loader = new Loader();
Now we are ready to use the load method to load our myrequest URLRequest into our myloader loader object.

myloader.load(myrequest);
Of course, we don't want to do any positioning of the image until it is completely loaded into the main swf. So we will attach an event listener to our loader object which will watch the contentLoaderInfo and tell us the when the load is complete. The event listener will then call a function, which we have yet to write, to finish the placement of the image into the movie.

myloader.contentLoaderInfo.addEventListener(Event.COMPLETE, imgPlacement);
The imgPlacement function will add the loader object to the Stage via the addChild method. The image will not be visible unless we do this step to add the object to the display list. We will also use this function to set the X and Y coordinates for the image in a location other than 0,0.

function imgPlacement(event:Event):void
{
stage.addChild(myloader);
myloader.x = 20;
myloader.y = 20;
}

This code will put our image on the stage with the top left corner of the image at the 20,20 position. To remove it, you can use the unload() and removeChild() methods. Or to just replace this image on the stage with a new image, you can use the load() method to load the new image into the same loader object.

Join us in the Flash forum.