Recipe 11.24 Customizing a Component s Appearance

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:

1. Create a new FStyleFormat object:

   fstyle = new FStyleFormat(  );

2. Use the addListener( ) method to define the component or components that the object should affect:

   fstyle.addListener(myComboBox, myListBox, myCheckBox);

3. Set the values for the properties of the FStyleFormat object:

   fstyle.face  = 0x0000FF; fstyle.background = 0xFF0000;

4. Apply the changes with applyChanges( ):

   fstyle.applyChanges(  );