2. Type in the CSS as shown in Figure 5-19.
3. Select Design view.
Figure 5-19. CSS without attributes
103
FLEX WITH PHOTOSHOP AND ILLUSTRATOR
Figure 5-20. Skin parts for the ComboBox
Skinning Flex components in Illustrator using SWF files
Creating the skins for your Flex components in Illustrator follows a similar process but with some significant
time-saving techniques available. You start in the same way, by creating the image for the
component state, but the transition to Flex Builder is smoother. This is done by saving each state as a
symbol and exporting the whole set as a .swf file. As with Photoshop, you use CSS to connect the
symbols created in Illustrator and the components in Flex, but the information for the Scale 9 is contained
within the symbols.
Let??™s walk through the process by creating a ComboBox skin within Illustrator.
1. Create a new document in Illustrator (Figure 5-21) and name it ComboBoxSkins.
Figure 5-21. New Illustrator document
104
CHAPTER 5
2. Draw an image of how you would like the up state of the ComboBox to look (Figure 5-22).
Figure 5-22. The up look for our ComboBox
3. Now convert this drawing to a symbol by dragging it onto the Symbols panel (Figure 5-23). To
open the Symbols panel, press Shift+Ctrl+F11 (Windows) or Shift+Cmd+F11 (Mac). You can
also open it by choosing Window ?¤ Symbols from the main menu.
Figure 5-23. Converting the drawing to a symbol
When the symbol is being created, you will be prompted to define the symbol name (Figure 5-24);
type in ComboBox_UpSkin.
Pages:
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87