CHAPTER 6
182
Building a Theme Using Flash Catalyst
1. Open Flash Catalyst CS 5 and select Create “New Project from Design File” ➤ “From Adobe
Illustrator AI File…”
2. Browse and select the DarkNight.ai file. You can keep all the default options and click OK. At
this point Catalyst opens with the design artwork (see Figure 6-3).
Figure 6-3. Adobe Flash Catalyst showing DarkNight design
CREATING THEMES IN FLEX 4
183
Creating a Button Component
1. The next step is to convert the artwork into components. Select all the graphics that are
related to the Button, and in the HUD (Heads Up Display) select “Convert Artwork to
Component menu”
➤ “Button” (see Figure 6-4).
Figure 6-4. Converting artwork to component menu in HUD
2. Double-click the button and you can see the states available (see Figure 6-5).
Figure 6-5. Button states mode
CHAPTER 6
184
3. In the screen where you see all the states, you can make changes to certain properties in
Catalyst. Select the Over state, mark the graphics (other than the text), and in the properties
files select Appearance
➤ Blend mode: Luminosity (see Figure 6-6). Additionally, you can
modify the graphic in Illustrator by selecting the graphic, right-click
➤ Edit in Adobe Illustrator
CS5. We will be modifying the document in Illustrator and once we are done, we can select
Done in Illustrator (see the top option in Figure 6-7). All we have done is change the color of
the background so it will be noticeable once you hover over the button.
Figure 6-6. Properties window showing Appearance options
CREATING THEMES IN FLEX 4
185
Figure 6-7. Adobe Illustrator showing options to save the document
4. Select the Down state, mark the graphics (other than the text), and modify the graphics so
the user will be able to notice a difference. At this point you can run the project using File
➤
Run Project. The browser opens and you can see the different states for the button. See
Figure 6-8.
CHAPTER 6
186
Figure 6-8. Browser showing project
Creating a Text Input Component
1. Select the Text Input graphic and in HUD Convert Artwork to Component ➤ Text Input. See
Figure 6-9.
Figure 6-9. Converting artwork to text input

Get AdvancED Flex 4 now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Start your free trial