Flex Article

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

Styling or skinning?

When you want to customize the appearance of a Flex component, you have two options. One is to tweak the default appearance of the component using styling. Each Flex component has an extensive set of style properties you can set to change its appearance: the roundness of corners, the colors used for fill gradients, the font, color, and size of text, and so on. Figure 1 shows examples of customized looks you can create purely through styling.

Figure 1.Examples of styled Flex buttons. On the left is the default Flex button appearance; the other two are buttons created by setting style properties. The button on the right was designed by Peter Baird of Adobe Consulting.

If you want to explore the styling capabilities of the Flex components, jump ahead to Styling Flex components using CSS Design mode.

If you find that you can’t achieve the look that you want purely through styling, or if you just want to draw the appearance rather than tweaking a bunch of knobs, then you can use Adobe design tools to draw graphical skins for your components. Skins allow you to completely customize the appearance of a component. Figure 2 shows the greater flexibility you have when using graphical skins.

Figure 2.Examples of skinned Flex buttons. Credits, from left to right: Ralf Sczepan, fleksray.org; Jeff Bennett, Media Innovation Group/Yahoo!; Juan Sanchez, scalenine.com.

To learn more about skinning Flex components, jump ahead to Designing skins using Creative Suite 3.

Page 2 of 5

Previous Page

Next Page