Recipe 11.24 Customizing a Component's Appearance
11.24.1 Problem
You want to customize the
appearance
of an instance of a UI component.
11.24.2 Solution
Use the setStyleProperty( ) method to
set the
colors for each of the style properties or use a
FStyleFormat object to apply changes to more
than one component at a time.
11.24.3 Discussion
You can change the appearance of all Flash UI components using the
globalStyleFormat object, as detailed in Recipe 11.25. You can also modify the artwork
in the Skins folders in the Library to change all instances of a
particular type of component. However, you can also modify the
appearance of each instance individually using the
setStyleProperty( ) method. The advantage of
this technique is, of course, that you can modify each instance
without affecting all other instances.
Each Flash UI component instance has the following style properties:
- arrow
-
Color of the arrow in the scrollbar and combo boxes
- background
-
Color of the background when the component is active
- backgroundDisabled
-
Color of the background when the component is disabled (dimmed)
- check
-
Color of the checkbox's check
- darkshadow
-
Color of the darkened inner shadow for a border
- embedFonts
-
Whether or not to embed fonts for text
- face
-
The main color of a component
- focusRectInner
-
Color of inner focus rectangle
- focusRectOuter
-
Color of outer focus rectangle
- foregroundDisabled
-
Color of a component's foreground when in a disabled
state
- highlight
-
Color of the inner portion of the highlight
- highlight3D
-
Color of the outer portion of the highlight
- radioDot
-
Color of a radio button's dot
- scrollTrack
-
Color of a scroll track on a scrollbar
- selection
-
Color of the highlight for a selection, such as in a combo box or
list box
- selectionDisabled
-
Color of the highlight for a selection in a component in a disabled
state
- selectionUnfocused
-
Color of the highlight for a selection in a component when the
instance does not have keyboard focus
- shadow
-
Color of the shadow
- textAlign
-
How to align the text ("right",
"left", or
"center")
- textBold
-
Either true (bolded) or false
(regular)
- textColor
-
Color of text
- textDisabled
-
Color of text in a disabled component instance
- textFont
-
Name of the font to use
- textIndent
-
Number of pixels by which to indent the first line of text
- textItalic
-
Either true (italicized) or
false (regular)
- textLeftMargin
-
Left margin in pixels
- textRightMargin
-
Right margin in pixels
- textSelected
-
Color of text in a selected item (such as in a combo box or list box)
- textSize
-
The size of the text font in points
- textUnderline
-
Either true (underlined) or
false (regular)
You can set the style properties of an instance by using the
setStyleProperty( ) method. The method takes two
parameters: the name of the style property as a string and the value
you want to assign to the property. For example:
myComboBox.setStyleProperty("arrow", 0x0000FF);
Notice that not all components support all styles. If you set a style
that is not applicable for a component instance, Flash will simply
ignore that style. For example, a checkbox component uses the
"check" style but ignores the
"radioDot" style. Conversely, a
radio button uses the "radioDot"
style but ignores the "check"
style.
You can also use an FStyleFormat object to
affect the same types of changes. FStyleFormat
is most useful when you want to apply the same color scheme to more
than one (but not all) components in your movie. Here are the steps:
Create a new FStyleFormat object: fstyle = new FStyleFormat( ); Use the addListener( ) method to define the
component or components that the object should affect: fstyle.addListener(myComboBox, myListBox, myCheckBox); Set the values for the properties of the
FStyleFormat object: fstyle.face = 0x0000FF;
fstyle.background = 0xFF0000; Apply the changes with applyChanges(
): fstyle.applyChanges( );
 | 
