Với thành phần tùy biến giao diện người dùng phải đối mặt với ActionScript Let's it-hầu hết lập trình không thể chăm sóc ít hơn về khía cạnh thiết kế của một ứng dụng. Họ chỉ muốn nhìn thấy nó làm việc. Tuy nhiên, không có nhận được xung quanh một thực tế là trong thế giới thực, một ứng dụng tuyệt vời, tìm kiếm cũng quan trọng như là một động đúng chức năng một. Bởi vì các thành phần giao diện người dùng là yếu tố trực quan...
Nội dung Text: Customizing UI Components With ActionScript
< Day Day Up >
Customizing UI Components With ActionScript
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.
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:
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
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
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 4, "Using
Scripting global styling changes is similar to scripting individual components; however,
instead of naming the individual component instance, you reference the global style
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:
4. listURL_lb.setStyle("fontStyle", "italic");
6. listURL_lb.setStyle("color", 0x006699);
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.
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:
5. deleteURL_pb.setStyle("color", 0x990000);
7. openURL_pb.setStyle("fontWeight", "bold");
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:
6. _global.style.setStyle("themeColor", "haloOrange");
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.
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
6. Close the test movie to return to the authoring environment. Save this file as
This step completes this exercise and the lesson.
< Day Day Up >