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:
Set styles on a component instance. You can change color
and text properties for a single component instance. This is effective
in some situations, but it can be time-consuming if you need to
set individual properties on all the components in a document.
Set styles for all components of a given type in a document.
If you want to apply a consistent look to all components of a given
type, for example to all CheckBoxes or all Buttons in a document,
you can set styles at the component level.
The values of style
properties set on containers are inherited by contained components.
Flash
does not display changes made to style properties when you view components
on the Stage using the Live Preview feature.
Understanding style settingsHere
are a few key points about using styles:
- Inheritance
- A component child is set to inherit a style from the parent component
by design. You cannot set inheritance for styles within ActionScript.
- Precedence
- If a component style is set in more than one way, Flash
uses the first style it encounters according to its order of precedence.
Flash looks for styles in the following order until a value is found:
Flash looks for a style property on the component instance.
If the style is one of the inheriting styles, Flash looks
through the parent hierarchy for an inherited value.
Flash looks for the style on the component.
Flash looks for a global setting on StyleManager.
If the property is still not defined, the property has the
value undefined.
Accessing a component’s default stylesYou 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 instanceAny 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:
instanceName.setStyle("styleName", value);
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 propertiesUse 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 componentYou 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 componentsYou can set a style for
all component using the static setStyle() method
of the StyleManager class.
Drag a List component to the Stage and give it an instance
name of aList.
Drag a Button component to the Stage and give it an instance
name of aButton.
Press F9 or select Actions from the Window menu to
open the Actions panel, if it isn’t already open, and enter the
following code in Frame 1 of the Timeline to set the color of text
to red for all components:
import fl.managers.StyleManager;
var tf:TextFormat = new TextFormat();
tf.color = 0xFF0000;
StyleManager.setStyle("textFormat", tf);
Add the following code to the Actions panel to populate the
List with text.
aList.addItem({label:"1956 Chevy (Cherry Red)", data:35000});
aList.addItem({label:"1966 Mustang (Classic)", data:27000});
aList.addItem({label:"1976 Volvo (Xcllnt Cond)", data:17000});
aList.allowMultipleSelection = true;
Select Control > Test Movie or press Ctrl+Enter
to compile the code and test your content. The text in both the
button label and in the list should be red.
|
|
|