Accessibility

Flex Article

 

Designing Flex 2 skins with Flash, Photoshop, Fireworks, or Illustrator


Narciso Jaramillo

Narciso Jaramillo

Adobe

Table of Contents

  1. Introduction
  2. How graphical skinning works in Flex
  3. Scalability
  4. Using Flash
  5. Using Photoshop
  6. Using Fireworks
  7. Using Illustrator
  8. Editing scale-9 grids for bitmaps & tweaking styles
  9. Creating multiple skins for one component
  10. Testing your skins and styles
Comments
Created:
27 June 2006
Modified:
16 April 2007
User Level:
Intermediate

Note: This article was written for Flex 2. Flex 3 comes with a set of extensions for Creative Suite 3 that work with new features in Flex Builder 3 to automate the skinning workflow described in this article. For more information on skinning with Flex 3, see Designing Flex 3 skins and styles using Creative Suite 3 and Flex Builder 3.

Note: This article has been updated for Adobe Flex 2.0.1 and Adobe Illustrator CS3. Flex 2.0.1 resolved some issues described in this article originally. Additionally, Flex Builder 2.0.1 now also works on Macintosh.

This article has been updated to explain how you can use Adobe Illustrator CS3 (as well as Flash, Photoshop, and Fireworks) to create Flex skins. Please note that we have tested the ZIP archives below for Flash, Photoshop, and Fireworks, and they work with Adobe Flex Buidler 2.0.1 and the CS3 versions of those products.

With Flex 2, it's easy to build applications that look good right out of the box, using the built-in Halo Aeon theme. However, Flex also gives you several ways to customize the look of your application's components. If you want to keep the basic look of the Aeon theme, but modify it (by changing colors, the rounding of corners, and so on), you can style the Flex components using CSS. However, if you want to redesign the appearance of the Flex components more radically, you can do so by creating a new set of skins for the Flex components that completely replace the built-in theme.

If you're not sure whether you want to use styling or skinning, try playing with the Flex Style Explorer (requires Flash Player 9) or use Flex Builder's Design mode to get a sense of how far you can go with styling. If you can get the look you want using styles, that's great—you can copy the CSS code out of the Style Explorer and hand it off to your developer. But if you need a more unique look, then this article is for you.

This article describes how to use Flash, Photoshop, Fireworks, or Illustrator to create a set of skins for the Flex component set. Using the skin template files provided with this article, you can draw your new skins, then go through a simple export process to create the skin asset files that Flex needs. You won't have to learn MXML or ActionScript—the languages that Flex applications use—but, depending on how your skins are designed, you might need to do a little tweaking in the CSS file that we've provided. If you don't know CSS, don't worry; I'll walk you through the steps involved.

Requirements

One of the following:

Flash 8 (or above)

Fireworks 8 (or above)

Optional: Flex Builder 2.0.1 (includes SDK) – For testing the skin you create

One of the following (depending on which application you use)

Prerequisite knowledge

Some familiarity with CSS is helpful.

Page 1 of 10
Next Page

About the author

Narciso (nj) Jaramillo oversees product design (and occasionally writes code) for the Flex product line. He started at Macromedia in 1997 as an engineer on Dreamweaver 1.0, and helped lead design and development for several versions. He also led design and UI development for Macromedia Contribute and contributed to the design of the cross-product Macromedia UI. In his spare time, nj enjoys taking way too many pictures of his daughter and playing jazz piano. You can read more at his fitfully-updated blog, much ado about something.