So to get the the new year started off I decided to write a quick tutorial about two items that almost any Flex programmer can take advantage of. One is how to change the icon on a button at runtime and the other is using symbols in a flash .swf file for those icons. The major advantage of using the symbols is that you can use a single flash file to hold all the icons you need for your application. And what application wants to have completely static icons on their buttons? Ok, probably most, but we will ignore the nay sayers so that we can have some fun.

Let's take look at a quick example that shows what we will be learning in this tutorial. We have a very simple application below that has a single large button in the middle that changes its icon. The icon is chosen randomly from three that we have, which were all embedded from a single flash .swf file. Well, what are you waiting for? Start clicking. Also feel free to right click and grab the source files.

The first thing we are going to create the flash .swf file. I built my icons in Flash CS3. Once you open up Flash you can draw your first shape. Below is quick screenshot of Flash with a simple shape drawn.


Once we have the shape we can convert it to a symbol by selecting the entire object and right clicking and going down to "Convert to Symbol", image below. Then a window will pop up, in which we will put the name of the symbol. We also at this point click the check box about half way down to export to actionscript and give the symbol a class name. This will enable us to use the class name in Flex to embed the specific symbol. Images for both steps are below.



Once we have all that done you can build some more symbols, and once we have all our symbols built we now publish the .swf file by going to file->publish. Now that we have our .swf with our symbols in it we can start building the Flex application.

The first thing we do is build the basic application using a panel, a couple text components and a single button. The text components just hold the informational stuff in the application. And I like using a panel for the nice title header. The button is the component we are going to use throughout the tutorial so I gave it an id also. You can see this below.


Next we will add some script to embed the icons we are going to use. We do this by adding a <Script> tag to the top of the application and adding our three private variables for the icons. To embed a .swf symbol we use an Embed tag above our private var which is of Class type. There are two ways we can embed the symbol. The first method is [Embed(source='assets/button_icons.swf', symbol='square')] which will use the .swf file and pull out the specified symbol; the second method is a shorthand which is [Embed(source='assets/button_icons.swf#square')] which uses the # to specify the symbol. In this application we use the shorthand method and the <Script> is below.


The next thing we need to do is initialize the button icon, and we use the icon style to do this. To initialize it we add the icon style to the mxml component declaration by setting the icon attribute to {icon1}. We also want to capture the click event for this button, so we set it to a function which called updateIcon. The updated button mxml is below.


Now we just need to write the updateIcon function. This function will update the icon style on the button to switch it to a random icon. We do this by creating a random number between 0 and 2. Once we have the random number we can use the setStyle function on the button to change the icon style. You can see the new function below.


And that pretty much takes care of it. Nothing that complex but the concepts can be used all over the place and can be very useful. Here is the full source code:


If anyone has any questions or thoughts please just drop a comment. I hope everyone can take away a little bit from this.