css"/>
Flex Builder created the Skinning.mxml file for us automatically when we created the project.
12. Add this code now.
With this code, any button component that we place in our project
acquires the look that we just created (Figure 5-11).
This button will automatically resize to match the size of your
label, or the size that you manually give it. Have a look at how it
changes when you expand it. To clearly show what is happening,
we??™ve stretched this one well beyond what you could expect from
a button (Figure 5-12). Figure 5-11. Skinned Button
component
Figure 5-12. Skinned Button component, badly scaled
You can see some very bad pixelation as the corners and lines along the left and right sides have been
stretched. This has happened because as the button scaled, the entire image scaled equally. Thankfully,
there is a way to control how different parts of the image scale: the Scale 9 feature.
98
CHAPTER 5
Scale 9
When we scale a component, we do not want it to scale equally. We want the sides to stretch up and
down, but never to stretch sideways. We want the top and bottom to stretch sideways, but never to
stretch vertically. As for the corners, we don??™t want them to stretch at all. This is what caused the pixelation
in the previous example.
Let??™s go back to our button image in Photoshop. You can also open any one of the button PNG images
that we created if that image is not handy.
1. In Photoshop, turn on the ruler. The shortcut for this is Ctrl+R (Windows) or Cmd+R (Mac).
Pages:
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84