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.
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(); sp.content.addChild(img); // ** add to display list ** addChild(sp);
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
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"); addChild(img);
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.
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:
uiImage instance if unconstrained will automatically resize itself to display the specified image fully. If you wish to fix the size explicitly, use the
If you would like to resize the image while retaining its aspect ratio, you should specify only
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"); img.setSize(100,-1); addChild(img);
The other way to resize the image while maintaining aspect ratio is to set the
maintainAspectRatio property to
true, in which case the
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
alignY set on the
uiImage instance will be used to position the image within the specified space.
For more information on the members of the
com.ghostwire.ui.controls.uiImage class, please refer to the API Reference.