Create Your Own Image Buttons In Flex 4

The more I use Flex the more I love its extensibility. Being able to extend, view, or copy the native Flex code makes my job so much easier. Here’s a short tutorial demonstrating how it can help. I promise there isn’t much typing involved, but if you just want to skip to the coding and view the final source you can do so by right-clicking the finished help button at the bottom of the post and clicking “View Source”.

Flex doesn’t offer an image button, but let’s say you need one for an application that requires a question mark help button. Here’s one way to do it:

Quick Note: The following tutorial assumes that you’re using Flash Builder 4. If you’re using another coding environment, the code will remain the same but you may have to modify some of the specified shortcuts or menu options.

First, create a new project named ImageButtonExample.

Next, create an “images” folder under “src”.

You’re going to need some help button images so you can create your own or you can use these:

The three buttons are for three button states: up, over, and down. Save them into the “images” folder you just created as helpnormal.png, helpover.png and helpdown.png.  Make sure you refresh your images folder after saving the images into it so your images are recognized by the application. If you forget this step you will receive errors indicating that Flex can’t find the files.

Next, create a new package named myClasses where you can store the classes you create (best practice is to store your classes in their own package). [ Right-click “src” and then select New > Package then enter myClasses in the Name field and click Finish ].

Now create a new ActionScript Class in the myClasses package. Call your new Class ImageButton and tell it to use spark.components.Button as its Superclass. [ Right-click myClasses then select New > ActionScript Class. Enter ImageButton in the Name field and spark.components.Button in the Superclass field then click Finish ].

What you end up with should look like this:

package myClasses
{
	import spark.components.Button;

	public class ImageButton extends Button
	{
		public function ImageButton()
		{
			super();
		}
	}
}

For the most part, the Spark Button handles almost everything your button needs. I’ll come back to the need for extending a little later.

For now create a new package named mySkins by following the same procedure you used to create myClasses above.

Create a new Skin for your Button in mySkins named HelpButtonSkin using ImageButton as its Host Component. [ Right-click mySkins then select New > MXML Skin. Enter HelpButtonSkin in the Name field and myClasses.ImageButton in the Host Component field then click Finish ].

What you’ve been given there in your new Skin is the skin tothe Flex Spark Button. This can be very handy if you just want to make a few small changes. For this project, however, you’ll be using very little of that code. So, instead of telling you everything you need to remove, I’m just going to give you the end result:

<?xml version="1.0" encoding="utf-8"?>

<s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009"
			 xmlns:s="library://ns.adobe.com/flex/spark"
			 xmlns:fb="http://ns.adobe.com/flashbuilder/2009"
			 minWidth="48" minHeight="48"
			 alpha.disabled="0.5">

	<!-- host component -->
	<fx:Metadata>
		<![CDATA[
		/* @copy spark.skins.spark.ApplicationSkin#hostComponent 	*/
		[HostComponent("myClasses.ImageButton")]
		]]>
	</fx:Metadata>

	<!-- states -->
	<s:states>
		<s:State name="up" />
		<s:State name="over" />
		<s:State name="down" />
		<s:State name="disabled" />
	</s:states>

	<s:Rect left="0" right="0" top="0" bottom="0" >
		<s:fill>
			<s:SolidColor color="0xffffff" alpha="1" />
		</s:fill>
	</s:Rect>

	<s:BitmapImage source="@Embed('images/helpnormal.png')" includeIn="up, disabled"/>
	<s:BitmapImage source="@Embed('images/helpover.png')" includeIn="over"/>
	<s:BitmapImage source="@Embed('images/helpdown.png')" includeIn="down"/>

</s:SparkSkin>

Basically, you’re replacing everything between the closing states tag and the closing SparkSkin tag with a Rectangle and three BitmapImages. What you’re doing is creating a hit area for the button by defining a rectangle with an alpha of .1 . This will not be visible but will register when someone rolls over its area. This will allow for some margin of error around your button.

Next, you’re embedding the three help button images in the skin. They won’t all appear at the same time because you’ve told them in which states they should appear by using the includeIn property. The possible states you can used are defined just above the added code. They were put there automatically by Flex because you based the Skin on a Button.

Now open the application mxml file that was created automatically when you created the project. It’s probably under (default package) and it’s probably named ImageButtonExample.mxml . Just above the closing Application tag, insert your ImageButton component using “mySkins.HelpButtonSkin” as its SkinClass. [ Enter an opening tag (“<“) and begin typing “ImageButton”. A dropdown should appear while you’re type and it should contain myClasses:ImageButton. DoubleClick it. That will not only complete the component name for you, it will also add myClasses as a namespace in the opening Application tag. After ImageButton enter skinClass=”mySkins.HelpButtonSkin” and then close the tag. ]

Your application file should look like this:

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
			   xmlns:s="library://ns.adobe.com/flex/spark"
			   xmlns:mx="library://ns.adobe.com/flex/mx"
			   xmlns:myClasses="myClasses.*"
			   minWidth="955" minHeight="600" >

	<myClasses:ImageButton skinClass="mySkins.HelpButtonSkin"  />

</s:Application>

Now, save all files and run your application. You should see the normal help image in the upper left corner of your browser. If you hover over it and click it, it will change images to the appropriate state image. Pretty slick!

The one thing that’s lacking at this point is the hand cursor. By default, when you roll over a Spark Button the arrow remains. Luckily, we’ve already extended the button so we can quickly add that last bit of functionality!

Open ImageButton.as and just below the “super()” line add a new line that says “this.buttonMode=true;” so that your class now looks like this:

package myClasses
{
	import spark.components.Button;

	public class ImageButton extends Button
	{
		public function ImageButton()
		{
			super();
			this.buttonMode = true;
		}
	}
}

Now run your application again and mouse over your button.

Presto, a hand cursor! You’ve now created your own image button that you can easily reuse or enhance. Great job!

To view the source , right-click on the finished help button below and then click “View Source”:

-rG

Update: Creating the ImageButton class is not a necessity, but I think it makes a good example of how to extend a class and modify it for your own purposes. In this particular case, you could use the Spark Button instead of ImageButton in ImageButtonExample.mxml. To get the hand cursor to show up you can specify buttonMode="true" as a property in the tag, like this: <s:Button buttonMode="true" skinClass="mySkins.HelpButtonSkin" />.

11 thoughts on “Create Your Own Image Buttons In Flex 4

  1. If you are using Flex 4, you may want to look into converting these images into FXG graphics, this way if you ever want to modify anything about the image (size, color, etc.) you can do it with a simple code change. Catalyst makes this easy, you can import your graphic from illustrator and it will generate code for you.

    1. Thanks for the comment Kyle. Great point about the FXGs. I wouldn’t include them in this particular tutorial since they’re a blog post (or several posts) unto themselves, but definitely something to consider, especially for applications with an emphasis on performance.

      Catalyst is also a great tool, though it’s not found in most developers’ tool boxes at this point in time. It can be a huge time saver and very effective at communicating a desired look and feel.

      Glenn

  2. Although you show how to make an image appear to be a button like the other tutorials on the net you fail to show how to connect those buttons to actionscript during any of their states. Might i suggest you do so as to set yourself apart from the rest of the tutorials.

  3. thx for the tutorial,
    I have a Q. can I change the icon images dynamically, for example am creating a video player with play/pause button, so I wanna change the images for every state, from play to pause when the play button is clicked. What I ve done for now is creating 2 buttons one for the play and one for the pause and change the value of the visibility property according to the state, hope there is a better solution.
    thx anyways

  4. great tutorial, i have a question. what if i want to make a play/pause button with this tutorial, ive managed to make it change from play to pause on click but as soon as i let the click go it will change to play again, how can i make it stay on pause when the button is pressed and play if the button is released

    1. You probably don’t need the answer to this anymore but to make the button stay pause all you would need to do is make ImageButton extend ToggleButton instead of Button. After which you will need to add the extra states that this gives you.

      “upAndSelected” would mean you press the button while it is on ‘play’ and then change the button to ‘pause’. (downAndSlected will do the opposite of that)

      Hope this helped if you didn’t have the answer already!

Comments are closed.