Loading External Images Into Flash Using the Loader Component

By Blue_Chi | Flash | Intermediate

There are many different ways to load content dynamically into the Flash player. Loading external content to Flash makes updating the content much faster as you will not have to go back to the FLA file each time you want to update your website. This tutorial will teach you one of the easiest methods to load external SWF files and images into the Flash movie, we will use the ready-made Loader Component to load an external JPEG file into our movie at run time.

Here is an example:

This Flash movie loads this image at real time.

As said earlier, this example uses a ready-made component included with Flash called "Loader". Components are custom made movie clips with advanced functionality and simple interface, examples of commonly used components are text scrollers, radio buttons, and media players. We are going to use the Loader component in this tutorial, using this component, we simply put the URL of our JPG image and our job is done.

Start off by creating an empty folder in your desktop. This folder should contain your FLA file and the image that you want to dynamically load into the movie. You can use the image that we used in our example here to try it out. Simply save this image in the empty folder, create a new Flash movie and make sure you save it in the same folder as the image.

Make sure both files are in the same folder.

Now back in Flash, open the Components panel, it should be found under "Window" if it is not already visible on the side menu.

The components panel should have a collection of the different components available. It is possible to create your own custom components, but this is outside the scope of this tutorial. The one that we need here is the "Loader" component. You will have to drag the icon onto the stage to get an instance of it.

Select your Loader instance and access the Properties panel (Ctrl+F3), there should be a parameters tag that you will need to click on. From there, you can alter some properties of our component, the configurable parameters will depend on the component used.

If you want to see the trick working instantly you can simply edit the "contentPath" field and put the name of the our image in there, if you have used the image I gave you then the name should be oman3d_logo.jpg, make sure you write the extension name of the file. You can test the movie now to see the file magically loaded into the scene! (Ctrl+Enter)

That might have been what you've been wanting to learn, but there is a lot more. First of all, you may want to resize the image, you can physically just change the size of our component directly on the stage. You can do that by either changing the Width and Height values from the properties panel, or use the Scale tool from the tool bar to do the job. Changing the size of the component will only affect the size of the image loaded if the scaleContent parameter was set to "true", if you change that to "false" the image will load in its original size, both options will be required for different projects.

The URL of our file does not have to be hardcoded into our Flash movie, you can also dynamically tell Flash the name of your image using ActionScript. To be able to do this you will have to first give our component an instance name so that we can control the component using ActionScript. The instance name of the component could be edited from the parameters panel or the properties panel. Lets name our component "myLoader".

This time we will tell our component the name of the image that it'll need to load using ActionScript. Make sure you remove the name of the image in the parameters (contentPath) before we start. Click once on the only Frame in the timeline and access the Action panel.

The name of the image to be loaded is to be stored in the contentPath property of our component, we name our component myLoader, we can edit this property directly by typing down the following code:

myLoader.contentPath = "oman3d_logo.jpg";

Make sure you put the quotation marks around the name of the file as it is a string. This should do the job once again, test the movie to see the image loaded. Now that we can tell the component what image to load using ActionScript makes it possible for us to do anything we want with it. It is possible now to tell the component to load a certain variable that is created somewhere else or loaded from a separate text file. Here is an example

myLoader.contentPath = myVariable;

This variable could be loaded from an external text file, you can learn how to do that in this tutorial.

This concludes our tutorial, I hope that you learnt how to load your images using the Loader component as it can save you time and make your projects much more dynamic. Other components feature other helpful functionality as well and you should experiment with them on your own.

- End of tutorial.