At the last Seattle Flex User Group meeting, I presented a brief demonstration on skinning using Fireworks CS4 and Flex Builder 3. Because it’s so easy to do, it went by pretty quick so I thought I’d post the steps here to give people a reference if they want to try it themselves.
Before you skin, there’s a couple of things you need to know:
- How to use Fireworks. It’s really not that hard. Maybe easier than Photoshop if you’re starting out, and because it’s built for web graphics (vs. photo editing) it’s got some features that make styling buttons and stuff a breeze.
- How to read. See, the labels on the buttons are mostly words, not pictures. The good news is, if you’re reading this, you’ve already got this one covered.
For this tutorial, I’m going to be using a PC, but the Mac steps are the same. If you want to see screenshots of the process using a Mac, view Nate Becks blog, specifically this blog post. He’s an amazing developer with a lot of helpful things to say on his blog.
Ok, let’s get started.
First off, you’ll need to open Fireworks CS4. If you have Fireworks CS3 or earlier, I’d seriously consider upgrading because there are some really cool features in the new products. In Fireworks CS4, there’s some additions related to Rich Internet Applications, one of which is super easy Flex skinning.
From the Fireworks menu, choose Commands > Flex Skinning > New Flex Skin .
You’ll be prompted to choose either Multiple components or Specific components.
If you only need to skin one component, or specific components, you can select Specific components and you’ll go through essentially the same steps. The difference is, you’ll have one Fireworks document for each component instead of all the components contained on a single document.
Skinning Multiple Components
If you want to skin multiple different components, you could select Multiple components and you’d be presented with all the components on one document.
As you can see, you could really go nuts customizing the look and feel of your application.
Take a look at the layers panel. If your layers panel isn’t visible, choose Window > Layers from the top menu or press F2.
There’s all the components organized in folders. Inside each folder is a Group. If you want to edit one of the components, you need to ungroup the item before you’ll be able to start editing the peices of that component. To do this, highlight the group and choose Modify > Ungroup from the top menu or press Ctrl+Shift+G.
Now you have the individual pieces of that component accessible and editable. Here’s where your skills at using Fireworks come in handy. You can change gradient colors, opacities, shapes, etc. to your hearts content. I won’t go into the details of how to use Fireworks here.
One thing I would like to point out here is that the default components use a lot of transparency in the skins. The advantage of that the component will take on the color of the background it’s placed on, with some shading or highlighting to give it depth. For example, if you look at the button skin, you’ll see that the pieces are translucent highlights and an outline. If you place the button on a red background, it will be red with a white highlight. The button will “match” your application background this way. If you create opaque components, you’ll end up having to change the skin whenever the color theme of the application changes.
Don’t change the name of the folder that contains the component! Flex uses the names to determine which graphics go with what component. Changing the name will make extra work for yourself.
Once you have changed all the components necessary to make your application look unique, you’ll need to export that skin.
Exporting the Skin Graphics
Go to Commands > Flex Skinning > Export Flex Skin . You’ll be presented with a dialog that says “Select Folder” where you select a folder to place all the skin images in. This doesn’t have to be a folder inside your Flex project since we’ll see in a moment that Flex will automatically copy the files into the project when we import the skin. You could, for example, place all these images into a folder related to your client so you could import the same skin graphics for a future project for that client. Just be sure you double-click the folder so you’re inside it and the button says select “foldername”. In my case, I created a folder called clientSkins and am about to export all the graphics files into that folder.
After you select the folder by pressing the button, you’ll briefly see a window letting you know the script is processing, then it will disappear.
If you browse to that folder, you’ll see png files for each component and most of them have files for each state (upSkin, overSkin, downSkin, disabledSkin, etc.).
Now, we have skins available to use. We’ll need to move to Flex Builder now to import those skins for use in our project!
Importing Into Your Flex Project
Open up Flex Builder 3. Again, if you don’t have Flex Builder 3 yet, I would highly recommend the upgrade. If you’re serious about building web applications, there’s a lot of great improvements over previous versions in Flex Builder 3.
You can only skin a project after it has been created so you either need to create a new project or open an existing project that you want to skin with you’re newly created design.
Once the project is open, go to File > Import > Skin Artwork .
You’ll be presented with a dialog where you can select either a Folder of Images or a SWC or SWF file. In this case, you’ll want to select a Folder of Images. Choose Browse and select the folder where you exported the graphics from Fireworks. You’ll notice that some of the other fields in the dialog are automatically filled in for you. If you would like to change where the skin graphics are copied to, you can do that here. The dialog won’t let you place them outside your src folder. You can also change what the stylesheet will be called that the styles are defined in.
Once you click Next, you’ll be presented with another window showing all the graphics and how they map to the actual parts as Flex knows them. If you didn’t change the names of anything, it should all map correctly and you can click Finish.
What you’ll end up with is a css file (clientSkins.css in my case) that tells Flex where to get all the customized graphics for the skins.
If you look in your default application file (Main.mxml or whatever you called it) you’ll see a line added.
<mx:Style source="clientSkins.css"/>
At this point any component you throw on the stage will use your skin.
Congratulations, you’ve just skinned your application!