Flash CS4 Resources
A component’s styles generally specify values for its skins, icons, text formatting, and padding when Flash draws the component in its various states. For example, Flash draws a Button with a different skin to show its down state, which occurs when you click the mouse button on it, than it does to show its up or normal state. It also uses a different skin when it’s in a disabled state, which is caused by setting the enabled property to false.
You can set styles for components at the document, class, and instance levels. In addition, some style properties can be inherited from a parent component. For example, the List component inherits ScrollBar styles by inheriting from BaseScrollPane.
You can set styles to customize a component in the following ways:
Understanding style settings
Here are a few key points about using styles:
Accessing a component’s default styles
You can access the default styles for a component using the static getStyleDefinition() method for the component class. For example, the following code retrieves the default styles for the ComboBox component and displays the default values for the buttonWidth and downArrowDownSkin properties:
import fl.controls.ComboBox; var styleObj:Object = ComboBox.getStyleDefinition(); trace(styleObj.buttonWidth); // 24 trace(styleObj.downArrowDownSkin); // ScrollArrowDown_downSkin
Setting and getting styles on a component instance
Any UI component instance can call the setStyle() and getStyle() methods directly to set or retrieve a style. The following syntax sets a style and value for a component instance:
This syntax retrieves a style for a component instance:
var a_style:Object = new Object(); a_style = instanceName.getStyle("styleName");
Notice that the getStyle() method returns the type Object because it can return multiple styles having different data types. For example, the following code sets the font style for a TextArea instance (aTa) and then retrieves it using the getStyle() method. The example casts the returned value to a TextFormat object to assign it to a TextFormat variable. Without the cast, the compiler would issue an error for attempting to coerce an Object variable to a TextFormat variable.
import flash.text.TextFormat; var tf:TextFormat = new TextFormat(); tf.font = "Georgia"; aTa.setStyle("textFormat",tf); aTa.text = "Hello World!"; var aStyle:TextFormat = aTa.getStyle("textFormat") as TextFormat; trace(aStyle.font);
Use TextFormat to set text properties
Use the TextFormat object to format text for a component instance. The TextFormat object has properties that allow you to specify text characteristics such as bold, bullet, color, font, italic, size, and several others. You can set these properties in the TextFormat object and then call the setStyle() method to apply them to a component instance. For example, the following code sets the font, size, and bold properties of a TextFormat object and applies them to a Button instance:
/* Create a new TextFormat object to set text formatting properties. */ var tf:TextFormat = new TextFormat(); tf.font = "Arial"; tf.size = 16; tf.bold = true; a_button.setStyle("textFormat", tf);
The following illustration shows the effect of these settings on a button having a Submit label:
Style properties set on a component instance through setStyle() have the highest priority and override all other style settings. However, the more properties you set using setStyle() on a single component instance, the slower the component will render at run time.
Setting a style for all instances of a component
You can set a style for all instances of a component class using the static setComponentStyle() method of the StyleManager class. For example, you can set the color of text to red for all Buttons by first dragging a Button to the Stage and then adding the following ActionScript code to the Actions panel on Frame 1 of the Timeline:
import fl.managers.StyleManager; import fl.controls.Button; var tf:TextFormat = new TextFormat(); tf.color = 0xFF0000; StyleManager.setComponentStyle(Button, "textFormat", tf);
All Buttons that you subsequently add to the Stage will have red labels.
Set a style for all components
You can set a style for all component using the static setStyle() method of the StyleManager class.