5. Draw in a new button up state using the Flash drawing tools.
118
CHAPTER 6
Figure 6-4. The Button_skin MovieClip showing keyframes representing button states
As you are drawing the new button up state, you are free to include any kind of texture, gradient, or
visual style that is appropriate for your project. Keep in mind the Scale 9 guides so that your buttons
scale correctly. For this example, create a button with a gradient fill and a second smaller button with
an opposite gradient on top of it (Figure 6-5). The second opposite gradient provides a sense of depth
and will be used in the second part of this example to show the use of tweens in buttons.
Figure 6-5. Button Up skin in Flash
It is useful to use this first button state as the starting point for all the other states.
6. Copy the button in the up state.
7. Go to the keyframe containing the down state (Frame 12).
8. Remove the default button visuals and paste in the button visuals you created for the up state.
To ensure that the button visuals are pasted in the exact same x and y location as the up state
button, choose Edit ?¤ Paste in Place or press Ctrl+Shift+V (Windows) or Command+Shift+V
(Mac).
9. Modify the visuals for the down state by rotating the smaller button 180 degrees. You can also
add other changes such as making the outline of the button white (Figure 6-6).
119
FLEX BUILDER AND FLASH
Figure 6-6. Button Over skin in Flash
10. Repeat the process of creating a new button state visual based on the up state (steps 7??“9) for
the down and disabled states.
Pages:
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94