Accessibility

Flex Article

 

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


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

How graphical skinning works in Flex

Flex applications are made up of many individual components. The two kinds of components you'll be concerned with are controls and containers. Controls are familiar user interface items like Button, CheckBox, and ComboBox. Containers are components that contain other controls, like Accordion, TabNavigator, and Panel. (There are other kinds of containers that help lay out controls, like HBox and VBox, but these don't typically have a visual appearance of their own, so they aren't skinnable.)

Each skinnable component has a set of named "skin parts." For most components, like Button, these skin parts represent different visual states:

  • up skin: what the button looks like in its "normal" state, when it's enabled but the mouse isn't over it
  • over skin: what it looks like when the mouse is over it, but not pressed
  • down skin: what it looks like while the user is clicking it
  • disabled skin: what it looks like when it's disabled. (I bet you saw that one coming.)

Other components have a more complex set of skin parts. For example, a ScrollBar has a set of up/over/down/disabled skins for its up arrow, a similar set of skins for its down arrow, and skins for its thumb and track.

Regardless of the component's complexity, however, each of these skin parts is a simple graphical asset. You can create skin parts as individual bitmaps in any graphic design tool, or as a set of symbols in a Flash movie. In some ways, this is similar to creating, say, a rollover image in HTML; you create one GIF or JPEG for the image's normal state and a different one for the rollover state. Unlike HTML, however, Flex 2 assigns skin parts to various components using CSS.

This might all sound rather tedious and complex: creating a bunch of little graphical files and then having to write a bunch of CSS to tie it all together. Well, that's why I wrote this article!

  • We've created template files that help you create all the skin parts at once, without having to manually manage all the individual pieces as separate files. The skin templates show you what the artwork for the default Halo Aeon skin looks like, so you can tweak it or completely replace it with your own.
  • We've also provided a base CSS file that automatically puts together all the skins for you. You might want to tweak the CSS yourself—I'll get into that later—but mostly you can just open one of the skin template files and start drawing.

However, before getting on with it, it's worth discussing one important concept: scalability.

Page 2 of 10
Previous Page
Next Page