Make sure that your current project is selected (Figure 5-8).
95
FLEX WITH PHOTOSHOP AND ILLUSTRATOR
Figure 5-8. Import Skin Artwork
Let??™s take a quick look at what else the Import Skin Artwork wizard is doing at this point. The Copy artwork
to subfolder field allows us to define the folder in our project structure that we want to copy the
images to. You may want to specify an assets folder or keep it named skinImages. Also note that the
wizard will create a CSS file in our project called skinImages.css.
10. Click Next and you??™ll see the screen in Figure 5-9.
96
CHAPTER 5
Figure 5-9. Here you select the skins you want to import.
Flex Builder is now creating a connection between the images that we created and the Button component.
This connection is guided by the file names that we gave the images. If the file names are different,
the Import Skin Artwork wizard will not recognize which image is associated with which component
Skin Part. In this case, you can manually set this by double-clicking on either the Style Selector or Skin
Part for each image.
11. Click Finish.
Once you click Finish, you??™ll see the CSS that Flex Builder automatically produced (Figure 5-10). The
CSS first specifies which component it is referring to, in this case Button, then associates an image with
each state through the Embed tag.
97
FLEX WITH PHOTOSHOP AND ILLUSTRATOR
Figure 5-10. Flex Builder creates this CSS for us.
We tell our Skinning.mxml to use this CSS file by adding the following code (in the same way we did
in Chapter 2) to the MXML file:
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83