< Day Day Up >
Customizing UIComponentsWithActionScript
Let's face it—most 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.
N
OTE
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 may be
useful in some cases, individual and global styling are likely to be more commonly used,
so we'll focus on those techniques.
When an individual component instance is styled a certain way, only that instance's
appearance changes. When components are styled globally, all component instances are
affected.
N
OTE
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:
myComponentInstance.setStyle("fontSize", 14);
To set its border color, you use the following syntax:
myComponentInstance.setStyle("borderColor", 0x006633);
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:
myComponentInstance.setStyle("borderColor", "green");
TIP
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 4
, "Using
Object 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:
_
global.style.setStyle("fontSize", 14);
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.
1. Open Components5.fla.
This project continues from where we left off in the preceding exercise. We'll
insert several lines of code at the end of the existing code on Frame 1.
2. With the Actions panel open and Frame 1 selected, add the following script at the
end of the current script:
3.
4. listURL_lb.setStyle("fontStyle", "italic");
5.
6. listURL_lb.setStyle("color", 0x006699);
7.
These two lines of script set the fontStyle and color properties of the listURL_lb
instance. Setting the fontStyle property to italic causes text in the component to
appear italicized; the color property determines the color of the text. Yes, it seems
as though the property for changing the font color should be called fontColor, but
it's not. It's simply color.
NOTE
For items in a List component instance, the color property refers to the color of
text when the item is not selected.
3. Add this script at the end of the current script:
4.
5. deleteURL_pb.setStyle("color", 0x990000);
6.
7. openURL_pb.setStyle("fontWeight", "bold");
8.
The first line causes the text on the Delete button to appear red, as a proper Delete
button should. The next line boldfaces the text on the Open button.
One more global change and our application will be finished.
4. Add the following line of script at the end of the current script:
5.
6. _global.style.setStyle("themeColor", "haloOrange");
7.
As you've probably noticed during the testing phases of this project, all the
component instances are highlighted in a greenish tint whenever you interact with
them. This tint is known as haloGreen. With this line of script, we've set the global
themeColor property of all component instances to haloOrange, causing them to
take on an orange tint when you interact with them.
TIP
A third possible value for this property is haloBlue.
Time for one final test.
5. Choose Control > Test Movie.
When the application appears, you'll notice that the Add button glows orange
when manipulated. Add some URLs. As you interact with the other elements, they
also glow orange. In addition, the word Delete appears on the Delete button in red,
and the word Open appears bold on the Open button. Items in the URL list appear
italicized at all times, in addition to appearing blue when not selected.
This is just a small sampling of the dozens of style changes that can be made using
ActionScript.
6. Close the test movie to return to the authoring environment. Save this file as
Components6.fla.
This step completes this exercise and the lesson.
< Day Day Up >
.
< Day Day Up >
Customizing UI Components With ActionScript
Let's face it—most coders couldn't care. interface components are visual elements, their appearance must fit in well
with the overall design of your application. Fortunately, they have the built-in