Search Flex Samples

Skinning With Flex 3 CSS Explorer

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.

Flex Builder 3 Deisng View Button

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

Flex Builder 3 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'.

Flex Builder 3 New Style Box

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

Flex Builder 3 Button Design preview

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

Flex Builder 3 Skin Button

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

Flex Builder 3 Skin Image Drop Down

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'.

Flex Builder 3 Image Choser

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:

Flex Builder 3 New Button Choser

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

Flex Builder 3 Edit Scale 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.

Flex Builder 3 Scale Lines

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

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.



Related Flex Samples

Learn Flex: Flex Samples | Flex Video Tutorials Flex Examples