[AS3] Loading External Images In Flash CS5 Using the UILoader Component AS3

Displaying images by loading dynamically using Flash CS5 “UILoader” component is very straight forward.

Flash CS5 offer three categories of Components, Flex, User Interface and Video. There are number of components for each User Interface and Video categories. We are going to use the UILoader component from User Interface category in this tutorial, using this component, we simply put the URL of our image and our job is done.

Inside Flash CS5, open the Components panel, it’s under “Window” (Ctrl+F7) if it is not already opened on the side menu.

Scroll down to UILoader component and drag the icon onto the stage to create an instance of it.

Select UILoader instance on stage and access the Properties panel (Ctrl+F3), select the ‘Component Parameters’ box and configure the available properties, ‘autoLoad’, ‘enabled’, ‘maintainAspectRatio’, ‘scaleContent’, ‘source’ and ‘visible’.

The most important property is the ‘source’ where you provide the image relative or absolute path. Please note that the path of image file does not have to be hardcoded here. You can leave ‘source’ property blank and set this property using AS3 to dynamically change the images for this place holder.

To set source property using ActionScript3 (AS3), first give this UILoader component instance a unique name so that we can access the component. The instance name of the component could be edited from the parameters panel or the properties panel. Name your component “imageLoader”.

Click once on the first Frame in the timeline and access the Action panel.

The name of the image to be loaded is to be stored in the ‘source’ property of your component using following snippet:

imageLoader.source = 'your_image.jpg';

You can also place this image ina variable and then update the variable value dynamically on a click or mouse move event. You can also load the images names from the external XML files or define them in an array inside flash.

var img_url = 'your_image.jpg';

imageLoader.source = img_url;

Hope that helps!

Cheers.