Applying custom images to Buttons

Avg. Rating 3.4

Tags:

Problem

You want to use a set of custom images as Button states.

Solution

Use the upSkin, overSkin, downSkin, and disabledSkin style properties of the Button class to apply custom JPG, GIF, or PNG images to any button. These attributes can be set directly on a Button instance or as part of a CSS style definition.

Detailed explanation

The solution below results in a button that uses custom images as the button’s background for its various states. In this case we are setting the upSkin, overSkin, downSkin, and disabledSkin directly on the Button instance.

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
	layout="horizontal" backgroundColor="#FFFFFF">
	
	<mx:Button label=""
		upSkin="@Embed('images/text_button_up.png')"
		overSkin="@Embed('images/text_button_over.png')"
		downSkin="@Embed('images/text_button_down.png')"
		disabledSkin="@Embed('images/text_button_disabled.png')"
	/>
	
</mx:Application>

Note that we use the @Embed compiler directive to force the image assets to get bundled into the final application SWF. It’s important to embed the images in this way so that there is no loading delay when the button switches from state to state.

If the button images you are using don’t require a text label to be displayed on the button you can provide an empty string ("") as the value for the label property of the button so that Flex won’t draw its own label text on top of the graphic.

If you would like Flex to display a text label on your custom button, and you’d like the button images to scale to accommodate label text of varying length, you can include scale grid information in your skin attribute values. The scale grid values you use will depend on the size and design of your button images. Below is one example. Note, in this example we’re setting the skin attributes in a CSS style definition and then applying that style to multiple Button instances via the styleName attribute. Also note that when we use the Embed directive in a CSS declaration no "@" is used.

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
	layout="horizontal" backgroundColor="#FFFFFF">
	
	<mx:Style>
		.customButton {
			color: #FFFFFF;
			text-roll-over-color: #FFFFBB;
			text-selected-color: #9999FF;
			disabled-color: #333333;
			up-skin: Embed(
				source="images/button_up.png",
				scaleGridTop="15",
				scaleGridBottom="20",
				scaleGridLeft="15",
				scaleGridRight="28");
			over-skin: Embed(
				source="images/button_over.png",
				scaleGridTop="15",
				scaleGridBottom="20",
				scaleGridLeft="15",
				scaleGridRight="28");
			down-skin: Embed(
				source="images/button_down.png",
				scaleGridTop="15",
				scaleGridBottom="20",
				scaleGridLeft="15",
				scaleGridRight="28");
			disabled-skin: Embed(
				source="images/button_disabled.png",
				scaleGridTop="15",
				scaleGridBottom="20",
				scaleGridLeft="15",
				scaleGridRight="28");
		}
	</mx:Style>
	
	<mx:Button label="This button is enabled"
		styleName="customButton"
	/>
	
	<mx:Button label="This button is disabled"
		styleName="customButton"
		enabled="false"
	/>
	
</mx:Application>

Author: Kristopher Schultz - Resource Interactive (www.resource.com)

ImageButtonDemo.zip