User Guide
70 Chapter 5: Customizing Components
Custom style settings have priority over class, inherited, and global style settings.
For a list of the styles that each component supports, see the component entries in Chapter 6,
“Components Dictionary,” on page 91.
To create a custom style declaration for a group of components:
1.
Make sure the document contains at least one component instance.
For more information, see “Adding components to Flash documents” on page 44.
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 9.
2.
Create a new layer in the Timeline and give it a name.
3.
Select a frame in the new layer on which (or before which) the component appears.
4.
Open the Actions panel.
5.
Use the following syntax to create an instance of the CSSStyleDeclaration object to define the
new custom style format:
var styleObj = new mx.styles.CSSStyleDeclaration();
6.
Set the styleName property of the style declaration to name the style:
styleObj.styleName = "newStyle";
7.
Place the style on the _global.styles list:
_global.styles.newStyle = styleObj;
You can also create a CSSStyleDeclaration object and assign it to a new style declaration by
using the following syntax:
var styleObj = _global.styles.newStyle = new
mx.styles.CSSStyleDeclaration();
8.
Use the following syntax to specify the properties you want to define for the newStyle
style declaration:
styleObj.setStyle("fontFamily”, "_sans");
styleObj.setStyle("fontSize”, 14);
styleObj.setStyle("fontWeight”, "bold");
styleObj.setStyle("textDecoration”, "underline");
styleObj.setStyle("color”, 0x336699);
styleObj.setStyle("themeColor", "haloBlue");
9.
In the same Script pane, use the following syntax to set the styleName property of three specific
components to the custom style declaration:
a.setStyle("styleName", "newStyle");
b.setStyle("styleName", "newStyle");
c.setStyle("styleName", "newStyle");
Now you can access styles on the custom style declaration using the setStyle() and getStyle()
methods through its global
styleName property. The following code sets the backgroundColor
style on the
newStyle style declaration:
_global.styles.newStyle.setStyle("themeColor", "haloOrange");