We??™ll use the same image as a base so that it is in the same position.
This prevents the button from moving a pixel or two over as it jumps to its over state. Figure 5-4
shows an example of how this button can look in its over state.
Figure 5-4. The over state of our button
4. Modify your image and save it as a PNG-24 called Button_overSkin.png.
93
FLEX WITH PHOTOSHOP AND ILLUSTRATOR
5. Repeat this process to create and save images for the down state (Button_downSkin.png,
Figure 5-5) and the disabled state (Button_disabledSkin.png, Figure 5-6).
Figure 5-5. The down state of our button
Figure 5-6. The disbaled state of our button
This should provide us with four images of the button as it would look through its different states.
The next step is to bring them into a button in Flex. To do this, we??™ll use CSS.
Connecting Photoshop skins
Start by switching from Photoshop to Flex so you can import your newly created button skins.
6. Open Flex Builder and create a new project called Skinning (File ?¤ New ?¤ Flex Project).
7. Bring the images into Flex Builder by selecting File ?¤ Import.
This opens a dialog box that guides you through the import process for various file types. We are looking
for Skin Artwork, which is found in the Flex folder (Figure 5-7).
8. Select Skin Artwork and click Next.
94
CHAPTER 5
Figure 5-7. Importing a skin
9. Using the browse function, find the folder that holds the images that we just created (this folder
should be called skinImages).
Pages:
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82