Accessibility

Flex Article

 

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


Narciso Jaramillo

Narciso Jaramillo

Adobe

Table of Contents

  1. Introduction
  2. Styling or skinning?
  3. Styling Flex components using CSS Design mode
  4. Designing skins using Creative Suite 3
  5. Importing skins into Flex Builder
Comments
Created:
25 Feb 2008
User Level:
Intermediate
Products:
Flex

Note: This article applies only to Flex 3. For information on skinning components in Flex 2, see Designing Flex 2 skins with Flash, Photoshop, Fireworks, or Illustrator.

Flex has always provided rich functionality for customizing the appearance of its built-in components. You can start with the default appearance of the components and extensively tweak their properties through CSS styles, or you can completely replace the default appearance by drawing custom vector or bitmap skins using visual design tools, such as the tools in Adobe Creative Suite.

In previous versions of Flex, the Flex Style Explorer and the skin templates in the designing Flex 2 skins article were available to help with skinning and styling. With Flex 3 and Creative Suite 3, Adobe has gone one step further: integrating the skinning and styling processes directly into the Adobe design and development tools. Now you can use Flex Builder 3 to visually style versions of built-in components. If you want to create custom skins, you can draw them using the CS3 tools, import the artwork directly into Flex Builder, and tweak fonts and other styles. No more editing CSS by hand!

This article provides an overview of the CS3 extensions and Flex Builder 3 features that automate the skinning and styling workflow. For more detailed descriptions of how to use the features, I’ll provide links to the appropriate documentation along the way.

Requirements

To create styled versions of built-in components:

To create custom component skins:

Creative Commons License
This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License

Note: The skin templates packaged with the Flex Skin Design Extensions aren’t restricted by the noncommercial license. You’re free to modify and use the skin templates however you wish.

Page 1 of 5
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.