Flash CS3 Documentation

Using ActionScript 2.0 Components > Customizing Components > Using styles to customize component color and text > Setting custom styles for groups of components

Setting custom styles for groups of components

You can create custom style declarations to specify a unique set of properties for groups of components in your Flash document. In addition to the _global object's style property (discussed in Setting global styles), which determines the default style declaration for an entire Flash document, the _global object also has a styles property, which is a list of available custom style declarations. So, you can create a style declaration as a new instance of the CSSStyleDeclaration object, assign it a custom style name, and place it in the _global.styles list. Then, you specify the properties and values for the style, and assign the style name to component instances that should share the same look.

Keep in mind that when you assign the style name to a component instance, the component responds only to style properties that component supports. For a list of the style properties each component supports, see the individual component entries in the ActionScript 2.0 Components Language Reference.

To make changes to a custom style format, use the following syntax:

_global.styles.CustomStyleName.setStyle(propertyName, propertyValue);

Custom style settings have priority over class, inherited, and global style settings. For a list of style precedence, see Using global, custom, and class styles in the same document.

To create a custom style declaration for a group of components:

1. Add at least one component to the Stage.

   For more information, see Adding components to Flash documents.

   This example uses three button components with the instance names a, b, and c. If you use different components, give them instance names in the Property inspector and use those instance names in step 8.

2. Select a frame in the Timeline on which (or before which) the component appears.
3. Open the Actions panel.
4. Add the following import statement so you will have access to the constructor function for creating a new style declaration from within the CSSStyleDeclaration class:

   import mx.styles.CSSStyleDeclaration;
   

5. Use the following syntax to create an instance of the CSSStyleDeclaration object to define the new custom style format:

   var new_style:Object = new CSSStyleDeclaration();
   

6. Give your style declaration a name, like "myStyle," in the _global.styles list of custom style declarations, and identify the object containing all the properties for your new style declaration.

   _global.styles.myStyle = new_style; 
   

7. Use the setStyle() method (inherited from the UIObject class) to add properties to the new_style object, which are in turn associated with the custom style declaration myStyle:

   new_style.setStyle("fontFamily", "_serif");
   new_style.setStyle("fontSize", 14);
   new_style.setStyle("fontWeight", "bold");
   new_style.setStyle("textDecoration", "underline");
   new_style.setStyle("color", 0x666699);
   

8. In the same Script pane, use the following syntax to set the styleName property of three specific components to the custom style declaration name:

   a.setStyle("styleName", "myStyle");
   b.setStyle("styleName", "myStyle");
   c.setStyle("styleName", "myStyle");
   

You can also access styles on the custom style declaration using the setStyle() and getStyle() methods through the declaration's global styleName property. For example, the following code sets the backgroundColor style on the myStyle style declaration:

_global.styles.myStyle.setStyle("themeColor", "haloOrange");

However, steps 5 and 6 associated the new_style instance with the style declaration so you can use the shorter syntax, like new_style.setStyle("themeColor", "haloOrange").

For more information about the setStyle() and getStyle() methods, see UIObject.setStyle() and UIObject.getStyle() in the ActionScript 2.0 Components Language Reference.

Flash CS3