The uiImageButton component is used to render a button that contains a single image/icon. This post shows how the component can be set up so the embedded image is swapped automatically when the visual state of the button changes.

The image source can be defined via the constructor:

var imgbtn:uiImageButton = new uiImageButton("icon.png");

Or via the source property:

var imgbtn:uiImageButton = new uiImageButton();
imgbtn.source = "icon.png";

Images are loaded during run-time from the “assets/images” folder. This path can be changed via the uiImage.path property (the image within the uiImageButton control is rendered using an instance of the uiImage class).

Button States
A button has multiple visual states:

• up
• over
• down
• disabled

In the case of a toggle button (toggle property set to true), the following states also apply:

• selected
• selected_over
• selected_down
• selected_disabled

Defining Multiple Image Sources
If you want the embedded image to change according to the visual state of the button, all you need to do is specify the various image sources when defining the source property, in the following way:

var imgbtn:uiImageButton = new uiImageButton();
imgbtn.source = "icon.png|over|icon_over.png|down|icon_down.png";
// imgbtn.source = "defaultimage|state|image|state|image|etc.";

The first image is used for the “up” (default) state, and the other images for the respective indicated states. You are not required to specify alternative images for all the possible visual states, only those states where an alternative image is desired. Where undefined, the default “up” image will be used.

Example

var imgbtn:uiImageButton = new uiImageButton();
imgbtn.source = "unlocked.png|over|unlocked_over.png|selected|locked.png|selected_over|locked_over.png";
imgbtn.toggle = true;
imgbtn.move(10, 10);
addChild(imgbtn);

ImageButtonDemo Class

package
{
	import com.ghostwire.ui.controls.uiImageButton;
	import com.ghostwire.ui.managers.uiSkins;
 
	import flash.display.Sprite;
	import flash.events.Event;
 
	public class ImageButtonDemo extends Sprite
	{
		public function ImageButtonDemo()
		{
			// ** make sure stage is not null **
			addEventListener(Event.ADDED_TO_STAGE,init);
		}
 
		private function init(evt:Event):void
		{
			removeEventListener(Event.ADDED_TO_STAGE,init);
 
			// ** let assets preload before starting application **
			uiSkins.manager.addEventListener(Event.INIT, main);
		}
 
		private function main(evt:Event):void
		{
			// ** main application code **
			var imgbtn:uiImageButton = new uiImageButton();
			imgbtn.source = "unlocked.png|over|unlocked_over.png|selected|locked.png|selected_over|locked_over.png";
			imgbtn.toggle = true;
			imgbtn.move(10, 10);
			addChild(imgbtn);
		}		
	}
}

uiLabelButton/uiPushButton/uiCheckBox/uiRadioButton/etc.
The above works the same way with uiLabelButton, uiPushButton, uiCheckBox, uiRadioButton and any other components that embed the uiImage component. The rendering of the images is actually done by the uiImage component.

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 of these components 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 a trial version.

Other Posts You Might Enjoy:

• uiImage: Using Embedded And/Or Dynamically Generated BitmapData
• uiImage: Preloading External Bitmap Images
• uiImage: Loading Resources From Foreign Domains
• Using AspireUI Components with MDM Zinc 3.0
• uiImage: Resizing While Maintaining Original Aspect Ratio

Comments RSS