Using styles to customize component color and text

Flash provides style properties that you can edit for every UI component. Within the documentation for each specific component, you'll see a table that lists the modifiable styles for that component (for example, you can see a table of styles for the Accordion component in "Using styles with the Accordion component" in the ActionScript 2.0 Components Language Reference). Additionally, UI components inherit the setStyle() and getStyle() methods from the UIObject class (see UIObject.setStyle() and UIObject.getStyle() in ActionScript 2.0 Components Language Reference). For a component instance, you can use the setStyle() and getStyle() methods to set and get style property values, as shown later in Setting styles on a component instance.

NOTE

 

You cannot set styles for the media components.

Using style declarations and themes

In a broader scope, styles are organized within style declarations where you can control style property values across multiple component instances. A style declaration is an object created by the CSSStyleDeclaration class, and its properties are the style settings you can assign to components. Style declarations in ActionScript are modeled after the way "cascading style sheets" (CSS) affect HTML pages. For HTML pages, you can create a style sheet file that defines style properties for the content in a group of HTML pages. With components, you can create a style declaration object and add style properties to that style declaration object to control the appearance of components in a Flash document.

Furthermore, style declarations are organized within themes. Flash provides two visual themes for components: Halo (HaloTheme.fla) and Sample (SampleTheme.fla). A theme is a set of styles and graphics that controls the appearance of components in a document. Each theme provides styles to the components. The styles used by each component depend in part on what theme the document uses. Some styles, such as defaultIcon, are used by the associated components regardless of the theme applied to the document. Other styles, such as themeColor and symbolBackgroundColor, are used only by components if the corresponding theme is in use. For example, themeColor is used only if the Halo theme is in use, and symbolBackgroundColor is used only if the Sample theme is in use. To determine what style properties you can set for a component, you must know which theme is assigned to that component. The style tables for each component in ActionScript 2.0 Components Language Reference indicate whether each style property applies to one or both of the supplied themes. (For more information, see About themes.)

Understanding style settings

As you use styles and style declarations, you'll notice that you can set styles in various ways (at the global, theme, class, style declaration, or style property levels). And, some style properties may be inherited from a parent component (for example, an Accordion child panel may inherit a font treatment from the Accordion component). Here are a few key points about style behavior:

Theme dependence The style properties you can set on a particular component are determined by the current theme. By default, Flash components are designed to use the Halo theme, but Flash also provides a Sample theme. So, when you read a style properties table, like the one for the Button component in Using styles with the Button component in the ActionScript 2.0 Components Language Reference, notice which theme supports the style you want. The table indicates Halo, Sample, or Both (meaning both themes support the style property). To change the current theme, see Switching themes.

Inheritance You cannot set inheritance within ActionScript. A component child is designed either to inherit a style from the parent component, or not.

Global style sheets Style declarations in Flash don't support "cascading" for Flash documents the way CSS does for HTML documents. All style sheet declaration objects are defined at the application (global) level.

Precedence If a component style is set in more than one way (for example, if textColor is set at the global level and at the component instance level), Flash uses the first style it encounters according to the order listed in Using global, custom, and class styles in the same document.


Flash CS3