You create scale values for the other states only if they differ from the upSkin.
4. Save the CSS, return to the MXML file, and refresh the view. Your buttons should now be scaling
properly (Figure 5-15).
Figure 5-15. Our buttons are now properly scaling.
For more information on skinning Flex with CSS, especially if you are using Flex Builder 2, see
???Designing Flex 2 Skins with Flash, Photoshop, Fireworks, or Illustrator??? by Narciso Jaramilo at the Flex
Developer Center website (http://www.adobe.com/devnet/flex/articles/flex_skins.html). This
article shows the process of bringing in Flex skins and also includes a Photoshop file showing the
default skins of Flex components (Figure 5-16).
100
CHAPTER 5
Figure 5-16. Photoshop file showing the default skins of Flex components
101
FLEX WITH PHOTOSHOP AND ILLUSTRATOR
Using the CSS Design view
You can see how each component is created by using the CSS Design view. As Figure 5-17 shows,
selecting the Design view in the CSS displays the default images as well as the newly embedded images
for the specified component.
Figure 5-17. Skin parts for a button
102
CHAPTER 5
1. Just for experimentation, create a new CSS file by choosing File ?¤ New ?¤ CSS File (Figure 5-18).
Figure 5-18. Create a new CSS file.
By entering an empty set of CSS for the component that you want to examine, you can see the default
images that make up the component. For example, if you enter the CSS shown in Figure 5-19, you can
see the images that make up a ComboBox component (Figure 5-20).
Pages:
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86