Aspire UI Components (Flash ActionScript 3.0) Docs


Strictly speaking, the uiImage component is not a UI control - it is not focusable and the user does not interact with the component. It is used to display an image, which can either be a movieclip symbol in the library, or an external SWF/GIF/JPG/PNG file.

Using uiImage

ActionScript 3.0 Example

import com.ghostwire.ui.containers.uiScrollPane;
import com.ghostwire.ui.controls.uiImage;
var img:uiImage = new uiImage("garden.jpg");
// ** the scrollpane **
var sp:uiScrollPane = new uiScrollPane();
// ** add to display list **

uiImage example

In the example above, the uiImage component is used to load an external image “garden.jpg” stored in the path “assets/images/” (relative to the SWF). The component is added to the content area of a uiScrollPane instance.


The image source can be an external SWF/GIF/JPG/PNG file (file name) or an embedded image (class name). The uiImage component does not differentiate between file name and class name. It will simply first attempt to find the source in the library of the SWF - if the source is embedded in the SWF and therefore available, it will be used. Otherwise, the component will attempt to load externally.

When loading external images, the default path is “assets/images/” (relative to the SWF). To load from a different path, prefix the source with “url:”, example “url:images/garden.jpg”.

var img:uiImage = new uiImage("url:images/garden.jpg");

uiImage example

NOTE: If you specify the image source without any file extension, the uiImage assumes that it should add the default file extension ”.png” when loading externally.

Multi-State Images

You can supply multiple sources to make a multi-state image (one that changes according to which visual state it is in). To supply multiple sources, set this property to a string value with the following format:


For example: myIcon.source = “icon.png|over|icon_over.png|down|icon_down.png”;

The defaultSource is for the default “up” state.

The other possible states are:

  • over
  • down
  • disabled
  • emphasized
  • emphasized_over
  • emphasized_down
  • selected
  • selected_over
  • selected_down
  • selected_disabled


A uiImage instance if unconstrained will automatically resize itself to display the specified image fully. If you wish to fix the size explicitly, use the setSize(width,height) method.

If you would like to resize the image while retaining its aspect ratio, you should specify only width or height, and set the other side as -1 (negative one). For example, setSize(100,-1) will resize the image to 100 pixels wide, and the height will be computed based on the original aspect ratio.

var img:uiImage = new uiImage("url:images/garden.jpg");

Resizing while maintaining aspect ratio

The other way to resize the image while maintaining aspect ratio is to set the maintainAspectRatio property to true, in which case the width and height parameters specified when calling this method simply indicates the space within which the image will reside. The uiImage component instance will still assume the specified size, but the image will be fitted within the area using the original aspect ratio. The alignment properties alignX and alignY set on the uiImage instance will be used to position the image within the specified space.

See Also

API Reference

For more information on the members of the com.ghostwire.ui.controls.uiImage class, please refer to the API Reference.

Recent changes RSS feed Creative Commons License Donate Powered by PHP Valid XHTML 1.0 Valid CSS Driven by DokuWiki