Greg Goralski

Created
7 July 2008
Prerequisite knowledge
Some knowledge of Flex, Photoshop, and Illustrator.
 
User level
Intermediate
Required products
Flex Builder (Download trial)
Illustrator (Download trial)
Photoshop (Download trial)
Sample files

 
Additional Requirements

 
Read the complete chapter
We have looked at using CSS to control the visual look of your applications. Using CSS is the most effective and quickest way to have an impact, and there are many changes you can make through CSS. But there will always come a point where you want a more dramatic change—a point where you want to control not just the color and rounding of a button but also its shape and texture.
 
That is where skinning comes in. In a nutshell, skinning within Flex involves replacing the look of a component with an image. The idea is simple, but to execute it effectively often takes quite a bit of tweaking as each component is created by a series of smaller pieces or a representation for each state. The results can be very compelling, allowing you to create a distinct visual for your application.
 
Figure 1. The eight states of a Button component
Figure 1. The eight states of a Button component
This chapter covers the following topics:
 
  • Building skins in Photoshop
  • Connecting Photoshop skins
  • Scale 9
  • Using the CSS Design view
  • Skinning Flex components in Illustrator using SWF files
  • Importing the Illustrator skins into Flex Builder