The uiImage class is used to display an image, the source of which can either be a MovieClip symbol in the library, or an external SWF/GIF/JPG/PNG file.

When using external bitmap images (GIF/JPG/PNG), the uiImage class will load from the external source only once and use cached data if the same source is requested subsequently again by the same or other uiImage instances. This is efficient because the same BitmapData is used across different uiImage instances that use the same image source. This is why image icons in Aspire UI scrollable lists do not suffer from the “flickering” symptom (which you will experience when using Flash/Flex components).

The uiImage class does not have any specific API for preloading external bitmap images. However, you can preload images easily using a dummy uiImage object:

var img:uiImage = new uiImage();
img.source = "ImageToPreload.png";

The loading of an external image begins once the “source” property is set, even if the uiImage instance is never actually added to the display list.

It may also be worthwhile to note that as of v1.2.4, the uiImage class will load an external resource only once, even if multiple instances request the same resource at the same time before it has been loaded. In other words, only one connection to an external image source will be made. Once the image is loaded, all instances using that same source will be updated.

uiImage dispatches an Event.CHANGE event when the external image is fully loaded, therefore you can listen to this event to be notified when the (pre)loading has completed.

var img:uiImage = new uiImage();
img.addEventListener(Event.CHANGE, on_imgLoad);
img.source = "ImageToPreload.png";
 
function on_imgLoad(evt:Event):void
{
    evt.target.removeEventListener(evt.type, on_imgLoad);
    // 
}

Aspire UI Components
Aspire UI is a library of Actionscript 3.0 (AS3) classes for building flexible and lightweight UI elements in Adobe Flash applications. Key features include easy skinning using PNG image files, automatic tab focus ordering, CSS text styles, and layout management. This is a pure AS3 library with no dependency on the Flex framework.

You may experiment with the various features by downloading the trial version.

Other Posts You Might Enjoy:

• uiImage: Using Embedded And/Or Dynamically Generated BitmapData
• Using uiImage: Drawing Solid Border/Frame Around The Image
• uiImage: Resizing While Maintaining Original Aspect Ratio
• uiModel: Using External XML As Data Source During Run-Time
• uiImage: Loading Resources From Foreign Domains

Trackback URI | Comments RSS