Customizing UI Components with ActionScript
Let's face itmost coders couldn't care less about the design aspects of an application. They just want to see it work. However, there's no getting around the fact that in the real world, a great-looking application is just as important as a properly functioning one.
Because user interface components are visual elements, their appearance must fit in well with the overall design of your application. Fortunately, they have the built-in capability to be styled and customized in various ways using ActionScript. This allows you to easily change visual features such as colors, fonts, margins, and more.
The look of components can also be changed in more dramatic ways by using Flash's drawing tools to tinker with the graphical elements that make up a component. Because the focus of this book is ActionScript, in this section we'll look only at visual aspects that can be changed using a script.
Following are some of the visual aspects of components that can be changed:
borderColor fontSize fontStyle fontWeight marginLeft marginRight textAlign textDecoration
For a complete listing and definitions of style properties that can be changed, look for "Supported Styles" in Flash's Help documentation.
Components can be styled on several different levels, including individually and globally. Components can also be styled as a class (such as RadioButton, CheckBox, or Button) so that all instances of that class share the same attributes. Although this strategy might be useful in some cases, individual and global styling are likely to be more commonly used, so we'll focus on those techniques.
Individual styling changes applied to an instance will override global styling changes in relation to that instance.
To set a style property for an individual component instance such as fontSize, you use the following syntax:
To set its border color, you use the following syntax:
When setting color styles, which would include any style property whose name ends with Color, there is the built-in capability to use color names instead of hexadecimal values:
Most common color names (black, red, green, blue, and so on) can be used. For greater versatility, use hex values. For more information about hex values, see Lesson 5, "Built-in Classes."
Scripting global styling changes is similar to scripting individual components; however, instead of naming the individual component instance, you reference the global style object:
This script will cause all component instances to use a font size of 14.
In the following exercise, we'll use both individual and global styling to give our application its final beautiful appearance.