In this post, I talked about how easy it is to skin a button in Flex.  While my example will work just as easy in Flex 2 as Flex 3, there is an easier way.  Flex Builder 3 gives us the ability to visually style and skin Flex components.  Flex Builder 3 includes a CSS editor with a design view which allows you to see your styles and skins as you edit them.

First, open up Flex Builder 3, if you do not have Flex Builder 3, you can get a beta version here, and create a new project.  As before, under your source folder, create directories named {project}/assets/css and {project}/assets/images.  Download the images we will use here and extract them to the {project}/assets/images directory.

Next, right-click on the {project}/assets/css directory and select 'New --> CSS File' and name it how you see fit. Flex Builder will create and open the file for you.  If you are in source view, switch to design view by click the 'Design' button.

Once in Design View, click the 'New Style' Button.

 

 In the window that pops up, make sure you select the 'Specific Component' radio button option, and in the Component drop down, you choose 'Button'.  Now click 'OK'.

You will now have a preview of the default button styles and skin.

 

 Click the 'Skin' button in the upper right corner of the 'Flex Properties' pod.

 

Next, select 'Image Files' from the drop down labeled 'Skin:'

 This will open up the 'Choose Image Files' window.  In this window, select the image you wish to use for each 'state' of a button and click 'OK'.

 You will probably receice a warning about the changes not being reflected until you 'refreshsh' the view. Click 'OK'.  If you don't see the new images being used for the skin of the button, click 'Design' from the main toolbar menu and choose 'Refresh'.  You should now have a preview that looks like this:

 

Lastly to set the 'scale nine' lines for scaling the image correctly click the 'Edit Scale Grid' button.

 

Your preview window shoud change slightly.  You will now see scale line over the images.  You can move these lines until the scaling areas are correct. 

If you click the 'Source' button, you should now see code that looks similar to this.

Button
{
   upSkin: Embed(source="../images/button_up.png",scaleGridBottom="17",scaleGridLeft="0",scaleGridTop="0",scaleGridRight="0");
   overSkin: Embed(source="../images/button_over.png",scaleGridBottom="15",scaleGridLeft="0",scaleGridTop="0",scaleGridRight="0");
   downSkin: Embed(source="../images/button_down.png",scaleGridBottom="15",scaleGridLeft="0",scaleGridTop="0",scaleGridRight="0");
   disabledSkin: Embed(source="../images/button_disabled.png",scaleGridBottom="15",scaleGridLeft="0",scaleGridTop="0",scaleGridRight="0");
}

You can follow this procedure for other components you wish to skin as well. You can also edit the CSS file manually and the changes should be reflected in design view. 

I have never been a big fan of 'design' views, but Adobe did it right in Flex Builder 2 and improved on it in Flex Builder 3. 

We're sorry, our spam filtering system has tagged your comment as spam. Please re-word your comment and try again.