Tài liệu Customizing UI Components With ActionScript ppt

NOTE 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

< 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

NOTE

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

NOTE

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 >