Designing skins using Creative Suite 3

You’ve tweaked every style property you can find, but you just can’t get that scrollbar to look right. What to do? Just draw it! Using the Adobe Creative Suite 3 design tools, you can fully customize the look of the built-in Flex components with ease.

This section doesn’t go into all the details of creating skins with each design tool; I’ll just provide an overview of the process. For a more detailed description, take a look at the documentation on Importing Skins into Flex Builder.

Which design tool should you choose? Here are some tips to help you decide:

• If you want to create bitmap skins, use Photoshop or Fireworks.
• If you want to create vector skins with animation between the states of a component—for example, if you want the background of a button to become lighter over 50 ms when you mouse over it—use Flash.
• If you want to create vector skins, but you don’t need animation, use Illustrator or Flash.

Before you get started, you’ll need to download and install the CS3 Flex skinning extension for your chosen design tool. You can download them from the Adobe website. Follow the instructions there to install the appropriate extension.

If you’re using Flash, you’ll also need to install the Flex Component Kit for Flash CS3.

Creating skins in Photoshop, Illustrator, or Fireworks

For Photoshop, Illustrator, and Fireworks, the skinning extensions provide two new menu items: New Flex Skin and Export Flex Skin. (In Photoshop and Illustrator, they’re in the File > Scripts submenu; in Fireworks, they’re in the Commands > Flex Skinning menu.) The general process for creating a skin in these tools is as follows:

1. Choose the New Flex Skin menu item. This brings up a dialog box that lets you choose to create skins for all the Flex components at once or just for a specific component.
2. A skin template appears, either showing all the components, or the specific component you chose in the first step. The template shows the artwork for the default Flex skin for reference, but you can completely erase and redraw this artwork as you like.
3. The skin artwork is organized differently depending on the tool:
   1. In Photoshop, the skin artwork is organized into layers with names corresponding to various skin parts and states—for example, the Button skin has four layers named Button_upSkin, Button_overSkin, Button_downSkin, and Button_disabledSkin, corresponding to the different states of the button. (The skin layers are in layer groups with the same names—you can ignore these; just edit the actual layers directly.)
   2. In Fireworks, the artwork is organized into named layer folders.
   3. In Illustrator, the artwork is organized into named symbols.
4. Edit the layers, layer folders, or symbols to draw your new skin artwork.
5. When you’ve created all your skins, save the file into a folder of your choice.
6. From the menu, choose Export Flex Skin. For Photoshop and Fireworks, this will create a folder of PNG images; for Illustrator, this will create a single SWF file containing symbols for the skin parts. In all cases, the resulting skin file(s) will be saved in the same directory as the template file you saved in step 4.

Creating skins in Flash

For Flash, the process is a little different. There are no new menu items; instead, the skinning extension installs the skin templates as document templates in Flash. Also, the skins in Flash are structured differently from the other design tools to allow you to create animations between the different states of a component.

1. Choose File > New and click the Templates tab.
2. Choose the Flex Skins category. You can choose a specific component, or choose flex_skins to edit all the components at once.
3. Note that most components are represented by a single symbol (as opposed to multiple symbols or layers as in the other design tools). The different states of each component (for example, the up, over, down, and disabled states of a Button) are represented in the timeline for the symbol. We’ll explore this by editing and animating a Button skin in the next few steps.
4. Double-click the Button symbol to edit it.
5. Look at the timeline for the “states” layer. Note that it has frame labels for the different states. Select the frame containing the “up” label.
6. Select the “art” layer (making sure you’re still in the “up” frame) and draw your artwork for the up state. (Don’t draw into the “states” layer—it’s just a placeholder for the state labels.)
7. Select the other labeled frames and edit the artwork so it looks right for those states (making sure you’re still editing the “art” layer). Note that if you want to create animations between the different states, you’ll need to copy and paste the artwork you drew in the “up” frame into the other keyframes and modify the pasted artwork.
8. Take a look at the “transitions” layer in the timeline. Note that frame 10 is labeled “up-over:start”, and frame 11 is labeled “up-over:end”. These labels represent the start and end of the animation that will play when the button goes from its up state to its over state. However, right now they’re right next to each other, and there are no tweens, so no animation will play.
9. Drag the “up-over:start” frame label to the left and drop it into frame 2. (You’ll now see the label on the timeline.)
10. Create an animation in the “art” layer between frame 2 and frame 11 using the standard Flash tweening commands.
11. Do the same with the other frame labels in the “transitions” layer.
12. Edit the skins of other components as you like.
13. Save the file into a folder of your choice.
14. When you’re done, choose File > Publish. This will automatically create a SWC file containing symbols for the skin parts.

Be sure not to change the names of any of the frame labels for the states or transitions—otherwise the skin won’t work properly in Flex.

By default, transitions are automatically reversed when you go from a later state to an earlier state. For example, if the user moves the mouse pointer over the button, then moves it out, the button goes back from its over state to its up state, and Flex plays the up-to-over transition in reverse. If you want to create a different reverse transition for this case, you’ll need to create another animation somewhere else on the timeline, with the frame label “over-up:start” at the beginning and “over-up:end” at the end.

You can do a lot more with Flash and Flex together than I’ve described here--you can even create fully-functional Flex components in Flash. For more information, take a look at the documentation on the Flex Component Kit for Flash CS3.

Technical notes

Here are a few notes to keep in mind as you create skins in the various design tools.

• You can adjust the 9-slice scaling grids of the skin symbols directly in Illustrator and Flash. Photoshop and Fireworks don’t support 9-slice editing for layers (Fireworks does have 9-slice support, but it isn’t compatible with this skinning workflow), so you’ll need to edit the 9-slice grids in Flex Builder, as described in Editing skin properties in Flex Builder below. (For a discussion of 9-slice scaling, see the Scalability section of the Flex 2 skinning article.)
• In the Photoshop template, each skin part is represented by the contents of a single named layer (e.g. Button_upSkin) inside a layer group of the same name. Due to a technical limitation of the Photoshop export script, adding extra layers to the layer group containing the skin part layer doesn’t automatically include those layers in the skin—only the individual Button_upSkin layer is exported as the button skin. If you need to use multiple layers to build up a skin part, do the following:
  1. Delete the placeholder content inside the layer for the skin part you want to create (e.g. Button_upSkin). Don’t delete the layer, though!
  2. Create the various layers you want to build up for the skin part. You can create these anywhere, but it’s convenient to put them in the layer group containing the skin part.
  3. Create a selection around the multi-layer artwork.
  4. If your artwork uses transparency, hide the background layer.
  5. Choose Edit > Copy Merged.
  6. Select the original skin part layer (Button_upSkin, in this example) and paste in the content.
• In Illustrator, be sure to use the Export Flex Skin command rather than using the standard SWF export. Due to a technical issue, Flex skins exported from Illustrator need to be in a Flash Player 8-compatible SWF rather than a Flash Player 9 SWF. The Export Flex Skin command takes care of this detail for you.
• The New Flex Skin dialog lets you create multiple skins for the same component—for example, if you want to create different variations of a Button. For more information on this, see the documentation on Importing Skins into Flex Builder.

Page 4 of 5

Previous Page

Next Page