Changing the Style of a Component

I l @ ve RuBoard

Flash's components have a nice look to them. But if all Flash developers start using them, soon all our Flash movies will look alike.

Fortunately, you can customize the components in many different ways. You can even create custom skins for them. Let's take a look at three ways to customize components using ActionScript.

Global Customization

Using the globalStyleFormat object, you can customize the look of all your components at once. Here is an example that changes the text color of all text in all components to blue:

 globalStyleFormat.textColor = 0x0000FF; globalStyleFormat.applyChanges(); 

The applyChanges command causes the change to occur. Until then, you can set more properties. Here is a more detailed change:

 globalStyleFormat.textColor = 0x0000FF; globalStyleFormat.textFont = "Arial"; globalStyleFormat.textSize = 18; globalStyleFormat.textBold = true; globalStyleFormat.applyChanges(); 

You can change much more than just the font. The number of style items is too long to list here. You can change the color and style of checks in CheckBoxes, circles in RadioButtons, arrows in ScrollBars, background colors, highlight colors, selection colors, and so on. Check any of the various Flash help systems to see a complete list.

Grouped Customization

Although the globalStyleFormat object is used by all the components on the stage, you can create your own style objects that can be used by one or more components that you specify.

You do this by creating an FStyleFormat object. When you do this, your new object has the same set of properties as the globalStyleFormat object.

For instance, you can create a style object and set its color to magenta like this:

 myStyle = new FStyleFormat(); myStyle.textColor = 0xFF00FF; 

Any style elements that are not explicitly set are just not included in the style object. So when you apply this style to a component, that aspect of its style will not change.

To apply the style to a component, use the addListener command:

 myStyle.addListener(radiobutton1); 

If this seems like an odd use for addListener , you are right. But think of it like this: You are telling the component to listen to the style object.

Single Component Customization

You can also set any one of the style attributes for a component directly. However, you can't do it using nice and neat dot syntax like you would expect. Instead, you need to use the setStyleProperty command. This takes the style property as a string in the first parameter and the value you want to set it to as the second parameter.

 checkbox1.setStyleProperty("textColor",0xFF0000); 

So using these three methods of setting component styles, you can customize your components to your heart's content.

I l @ ve RuBoard