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( ); |