To create snazzy buttons to be used in Flex

What you will need:

Flex Component Kit for Flash CS3

(Free from adobe http://www.adobe.com/products/flex/flexdownloads)

Flash (CS3 for this tutorial)

Flex Builder (Flex Builder 3 for this tutorial)

Some photo editing software (Fireworks CS3 for this tutorial, Photoshizzle works too!)


So once you get the Flex Component Kit installed…here is what you do.


Step 1: Open up Fireworks/Photoshop

Step 2: Select the picture you want to use as your button, or create your own. I am going to use this picture for my button

We don’t want the user to be able to click where there is white space, now do we? So to do this, I am going to delete the white back ground and have a transparent back ground. That should be simple enough to do without going into detail.


Step 3: Now that I have my transparent image, I am going to save it as a PNG. This will be my up-skin. What that means is when the button is just sitting there; this is what it will look like.

Step 4: I am now going to add a stroke effect to my picture. That will serve as my

over-skin. What that means is when the user has their mouse over the button it will change to this picture. Save this as a PNG



Step 5: I am now going to darken the color of my picture. That will serve as my

down-skin. What that means is when the user clicks my button it will change to this picture. Save this as a PNG



Step 6: I am now going to create a grayed out version of my picture to serve as my disable-skin. What that means is when the button is disabled, this picture will display. Save this as a PNG



So now I have 4 pictures. One for each button state (Up, Down, Over, Disabled)


Step 7: Open up Flash and create a new action script 3 file. Import all 4 of your picture into the library. Check the little box to “Import as a single flattened bitmap” and then say ok! You should now have the 4 images in your library as well as 4 symbols. Just ignore the symbols.


Step 8: This is the tricky part. Drag your up-skin picture to your stage. With the picture selected, go to Modify>> Break Apart (Ctrl + B). Deselect the picture by click in the blank area of the stage. Then click your Lasso Tool. Now with your Lasso Tool selected, you should have an option for a magic wand tool. (On my PC it’s the 3rd from the bottom)


Step 9: Now click the white area that was transparent in your original PNG. It should turn black. Once you have your white area selected…delete it by pushing the delete key! Once that is done, go back and click your Selection Tool (black arrow). Select all of your button. You can just draw a big box around it if you have lots of little pieces.


Step 10: Convert your picture to a movie clip. To do this hit F8, or go to Modify>>Convert to Symbol. Now name your button something like “mybttn_up” You can not have spaces or funky characters in this name. Flex will strip them out and you won’t know what your button skin name is later on. You should see your new movie clip over in your library now.


Now Repeat Steps 8, 9, and 10 for the rest of your pictures.


Step 11: You should now have all 4 of your pictures fixed up with no white space, and converted to movie clips. Now select all 4 movie clips in your library and go to Commands>>Convert Symbol to Flex Component. If you get a pop up about the frame rate, just hit ok.


Step 12: Go to File>>Publish. That will generate an SWC file with your button skins in it. If you go to File>>Publish Settings you can change your default save location. Once you have your SWC file, its time to open Flex 3


Step 13: Open Flex and create a new project, or use an existing one. In your SRC folder, create a new folder called swc. Right click the folder and choose import. Choose file system, then hit browse. Find the folder where your SWC was published. Import the SWC file.


Step 14: Right click the project folder that your just created (not the SWC folder…the master project folder) and go to properties! Find Flex Build Path in the list and click it. Now click the Library Path tab. There should be a button on the right that says Add SWC. Click it! Browse to your src folder, and then to your swc folder and choose your SWC file and click OK x2.


Step 15: Once that is finished, go to your code view and find your mx:Application tag at the very top. Inside there add this xmlns:bttn_skins="*" That creates your namespace for your button skins… you can name the btt_skins whatever you want it doesn’t really matter as long as its not mx, or something you’ve already used.


Step 16: Now create a button on your project.

<mx:Button x="220" y="118"

 upSkin="tp_up" downSkin="tp_down" overSkin="tp_over" disabledSkin="tp_dis"/>


For the upSkin property put in there what you named your up-skin movie clip in Flash. Then do the same for overSkin, downSkin, and disabledSkin.


Run your Flex project and if you did everything correct, you have a cool new button!