I'm as excited as anyone about the prospect of Flash Catalyst, but I recently discovered that skinning in Flex 3 is down right easy. When I first was learning Flex, I had Studio 8, so I managed to completely overlook how easy the developers of Flex Builder and CS3 had made it to skin Flex components–without even leaving design view. When I got my new computer a few months ago, I finally was able to put CS4 on it, and so now I am totally blown away with the synergy between these two Adobe products to make skinning so easy anyone can do it, even with out Catalyst.

Today, I'd like to show you how to create the following button:

I am a long time fan of Fireworks for making digital graphics, so I'm going to show this amazing process starting out there. I think the steps are similar in Photoshop and Illustrator. I will leave the Flash steps for another day.

To create the skin graphcs, you'll need to launch the "New Flex Skin" Command.

I'm just creating a Button skin, so I am going to select "Button" from the dialogue.

That gives me a template file that looks like this:

Notice the layer names. I'm pretty sure that the "Export Flex Skin" does a modified "Layers to Files" export, so you could easily add the rest of the states supported by the Button component. For that matter, you could probably create a template for your own custom components by simply following the conventions in the existing templates, then using the "Export Flex Skin" command to export from that point. I don't yet know how to add a custom template to the list in the dialogue for "Specific Components," but if I find out, I'll let you know.

One thing I already found out is that the Button_disabled layer is not named with the right thing to be able to allow the graphic to have the right name to import correctly. You have several options:

1. Rename the layer now to Button_disabledSkin
2. Rename the exported graphic to Button_disabledSkin.png
3. Manually add Button_disabled.png to the actual disabledSkin style and delete the nonexistant disabled style that Flex will try to populate if you leave things as they are now.

I'll leave it to you to decide how to handle this. I chose option #2, because I didn't notice until I tried to import the skin graphics that there was a problem.

The next thing we're going to do is to create the custom graphics. What I did was fairly conservative, because I didn't want to get into how to make more unusual graphics work with nine slicing. I'm not going to go into the specifics of how I made these, since it's fairly standard stuff and this is going to be a long tutorial anyway.

Once the graphics were finished, I exported the Flex skin, using Commands>Flex Skinning>Export Flex Skin..

At that point, I was done with Fireworks and switched to Flex. I just created a basic file with a button in the center of an Application. I set the font size to 20 on the button so that I could make sure that the scale 9 grid was working once the button was skinned.

You can get to the automated skin creation in two different ways here. First, you can click "Convert to CSS" in the properties for the example button. I don't like this option, because it makes you do too much manually. The option I prefer is to go to File>Import>Skin Artwork. This brings up a dialogue that looks like this:

I browsed to the folder I exported the images to earlier, and I told Flex to copy the files created by Fireworks into my local "assets" folder. Because of the problem I mentioned earlier, I performed this step several times, and it came up with a different default name for the css sometimes. So in subsequent screen captures, you'll see the css file as "assets.css." The next dialogue allows you to choose what graphics map to what states.

You could use this dialogue to map the four graphics exported by Fireworks to the selected up, over, down, and disabled states as well, but I chose not to. Once you click "Finish", Flex opens your newly created css file in design view. To me, this is the main advantage of having your styles in a separate css file–when you go into design view, you are seeing the CSS separate from the components used in the application.

We want to keep the rounded corners from scaling when the button is used larger or smaller than the template size. At the same time, we want to keep the swirl in the top left from scaling if the button itself is large or small. To accomplish these goals, we are going to edit the nine slice grid. The nine slice grid allows us to tell Flex what it is allowed to stretch and what it isn't. Flex is not allowed to stretch the four slices on each corner, but it will stretch the five in the centers—the center of each side and the center of the component—as needed to allow the component to stretch to fit its contents. Because the swirl came so close to where the bottom corners start to curve, I blew the contents of the design window up to make my job easier.

One feature of this view is that it will adjust the nine slice grid for all of the skins as you drag the guide lines in any of the skins. Depending on what you're doing, this can be nice or it can be annoying. If your graphics are such that you need different grids for the different skin parts, you'll need to edit the css file in code view and use your own values.

I also decided that I wanted to change the color of the text in the disabled state, so I exited the "Edit Scale Grid" mode and switched to the extended properties, where I changed the "disabledColor" to a light yellow-orange.

I would have liked to change the down color in the same way, but it is not a separate style. So next week, we'll look at getting a little more control over our button by creating a stateful skin.

Note that the O'Reilly blogging software, Movable Type, makes it a real chore to upload and embed all of the graphics for a post that is this graphic heavy. So I have hosted the graphics on my own site. Unfortunately, in the process, I lost some of the features that enable graphics to be scaled down in-line. That's why many of the larger graphics are cut off. To view this post in its entirety, go to Easy Skinning.

Read more from Amy Blankenship.