png, Button_overSkin.png,
Button_downSkin.png, Button_disabledSkin.png)
skinImages.css
flex_skins.psd
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
91
FLEX WITH PHOTOSHOP AND ILLUSTRATOR
Chapter 5
smaller pieces or a representation for each state. The results can be very compelling, allowing you to
create a distinct visual for your application.
Anatomy of a button
In Flex, when you look at a component, such as a button or a
check box, you are really seeing an image that defines the
visual appearance of the component in that state. For example,
as you can see in Figure 5-1, a button consists of eight
different states. In this chapter, we will replace the images for
the first four. For simplicity, we won??™t be concerned with the
button in selected mode.
Building skins in Photoshop
Let??™s begin by working with Photoshop to create a button that
has a dramatically different appearance to a standard Flex
button.
Pages:
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80