You might have developed a lot of static flash applications in which all the images and the swf clips are embedded in the flash file. If you want to develop more dynamic applications in Flash then this practice is not very good. Some applications require images and swfs to be loaded from some external source. There are two major ways to implement this. One way is to use actionscript to load these external assets, but this method requires expertise in actionscript and it is a little bit time consuming too. Another, much simpler, way is to use the UILoader component. In this tutorial I am going to show you how to use UILoader to easily create dynamic Flash applications.
The first thing that you need to do is to create an ActionScript 3.0 document in flash and save it somewhere. We need some images to load in the UILoader so place an image in the same folder as the flash source file. I will be loading a simple image of a circle in flash.
Now go back to your flash document and press ctrl+F7 to open the components library. Find the UILoader in the components library and drag it to stage.
Once you drag the UILoader to stage, you would see a box on the stage that has the text "fl.containers.UILoader" written in it. This box is meant only to give you visual aid and it would not appear in the published swf. Now click on the UILoader and open the properties panel. In the properties panel you would see a bunch of properties under the "Component Parameters" tab. These are the properties that we are concerned about right now.
The most important properties of these are the "Maintain Aspect Ratio", "Scale Content" and the "Source" properties. All of these properties are pretty much self-explanatory but I will explain these anyways. The "Source" property defines the location of the external asset to be loaded. You can give a relative path in this property i.e. in my case if I want to load the circle.png file so in the source parameter I would just write "circle.png" alt="img".
After I give the path to the circle, the UILoader box will remain the same but when I press ctrl+Enter to test the movie, I can see the circle image being loaded.
Let's see how the "Maintain Aspect Ratio" and the "Scale Content" properties work. The size of my circle image is 200px x 200px .I resize my UILoader to 200x100.
Now when I press ctrl+Enter to test my movie, I would still see the whole image being loaded in its correct resolution. But when I check the "scale content" in the component parameters, I would see the image being scaled to 200x100.
Now let's check the "Maintain Aspect Ratio". When I check this box, the circle would be resized to 100x100. This is because flash is keeping the width to height ratio of the image the same as the original image now.
You can use the UILoader to create dynamic flash applications that can change their state very easily without the need to modify the source fla file. Use this component wisely and you would definitely save a lot of time in developing flash applications.
