Flex Article

Designing Flex 3 skins and styles using Creative Suite 3 and Flex Builder 3

Importing skins into Flex Builder

Regardless of the design tool you used to create the skins, the next step is to use Flex Builder to import the skins into a Flex application.

1. In Flex Builder, open an existing project, or create a new project using File > New Project.
2. Choose File > Import > Skin Artwork...
3. Browse to the skin artwork you created.
   1. If you used Photoshop or Fireworks to create your skins, then choose “Folder of images:” and browse to the folder that was created by Export Flex Skin...
   2. If you used Illustrator or Flash to create your skins, then choose “SWC or SWF file:” and browse to the Illustrator SWF or Flash SWC that was created. (If you used Flash, be sure to choose the SWC file that it published, not the SWF file that also gets created during the publish step.)
4. Make sure your project from step 1 is selected in the project tree.
5. Click Next. The dialog will show a list of all the symbols or bitmaps in the file or folder you chose. Based on the name of each symbol or bitmap, the dialog will guess which component and state or part it represents. For example, it will assume an image named “Button_upSkin.png” represents the up state of the Button component. If you used the Flex Skin Design Extensions as described here, everything on this page will be automatically set up correctly.
6. Verify that all the symbols or bitmaps are correctly mapped and click Finish. Flex Builder creates a new CSS file referring to all the skins you imported, and displays the file in CSS Design mode. It also automatically attaches the new CSS file to your main application.

Editing skin properties in Flex Builder

At this point, your Flex project is now using the skins you imported, so if you add components to your main application file, you’ll see the skins you created. However, there are a couple of things you may want to tweak before you do this.

9-slice scaling grids. If you created your artwork in Photoshop or Fireworks, you’ll need to adjust the 9-slice scaling grids on your bitmaps. (For a discussion of 9-slice scaling, see the Scalability section of the Flex 2 skinning article.) Here’s how:

1. Make sure you’re in the CSS Design mode for the skin CSS file created during import. If you’re not, open the skin CSS file and click the Design button in the toolbar.
2. From the Style dropdown in the toolbar, choose a component for which you want to edit the scale grid.
3. In the upper-right corner of the CSS Design mode, click the Edit Scale Grid button. The design area switches to show the scale grid overlaid on each skin part you imported for that component.
4. Drag the dashed lines to adjust the scale grid. Note that the same scale grid is used for all the skin parts for a given component.
5. When you’re done, click the Edit Scale Grid button again to switch back to the normal view.
6. Save the file.

Text styles. When editing the skins for components like Button, you may have noticed that the skins didn’t have text in them. Text styles like font, color, and size are set through CSS in Flex, not through the skin.

1. Make sure you’re in CSS Design mode for the skin CSS file as above.
2. Decide whether you want to set text styles for all components, or for a specific component.
   
   • If you want to use one font for your whole application, click the New Style button, choose “All components (global)”, and click OK. Another dialog will appear asking which component you want to preview the global style as (since the global style applies to all components, Flex Builder needs to know which one you want to look at while you’re tweaking its style properties). Choose Label and click OK.
   • If you want to set a font for a specific component, just choose the component from the dropdown.
3. In the Flex Properties panel on the right, use the controls in the Text section to change the text. You can also tweak some other styles, such as the padding of the label within the control.
4. Save the file.

Note that you can mix and match global and per-component text styles. For example, if you want all your controls to use Myriad Pro, and you want most controls to use a 10pt size, but a few need to use a 12pt size, create a global style that specifies Myriad Pro 10pt as the font, then select the specific components that need to be different and set them to 12pt.

Other style properties. If you went through the styling section of this article, you might notice that a lot of the style properties that were available to you while styling aren’t shown when you’re editing a skinned component. That’s because these style properties are only tweakable when you use the default skin of the component. When you replace the skin with your own artwork, Flex doesn’t know how to do things like change the corner radius or the background color of the artwork, so those style properties no longer have any effect.

Testing your skins

Once you’ve done all your tweaking, you might want to test your skins out in a real application, so you can see how they respond to different component sizes. Jump back to the section on Testing your styles in an application to see how to do this. (Note that you won’t need to type in the <mx:Style> tag mentioned there, as the skin importer will already have added that tag for you.)

Where to go from here

If you’re ready to dive in and start styling and skinning, take a look at the extensive online documentation on CSS Design mode and Importing Skins into Flex Builder. If you’re a Flash designer/developer interested in creating fully-functional custom components that work in Flex, read the documentation on the Flex Component Kit for Flash CS3.

Page 5 of 5

Previous Page