Tài liệu Configuring Component Properties docx

< Day Day Up >

Configuring Component Properties
As you're well aware by now, most graphical elements used in a Flash application have
configurable properties that ActionScript can access and change while the application is
running. For example, movie clip instances have properties that allow you to change their
position, rotation, and transparency. Because components are usually nothing more than
enhanced movie clips, it's obvious that they too have configurable properties that can be
accessed and changed while a movie plays; however, due to their enhanced nature,
working with component properties is slightly different from working with standard
movie clip instance properties.
Component properties can be categorized into two groups: properties that are common to
all component instances (to Macromedia-based components, at least), and properties that
are unique to each type of component. Let's look at both.
NOTE
You may have installed some third-party components that don't abide by the following
guidelines. This discussion focuses on the use and capabilities of the components that
come pre-installed with Flash.

Common Properties
In Lesson 7
, "Creating Custom Classes," you learned about object-oriented programming.
In this lesson, you put that information to use. How? Well, as already mentioned, most
component instances have a set of common properties. This is because most components
inherit properties from the UIComponent class, which itself inherits properties from the
UIObject class. Both of these object classes are automatically and invisibly added to your
project whenever you add a component instance. Let's break down this concept by
looking at the Button component.
First, UIObject is an object class that defines a number of properties:

UIObject.bottom

UIObject.left

UIObject.right

UIObject.scaleX

UIObject.scaleY

UIObject.top

UIObject.visible

UIObject.width

UIObject.x

UIObject.y


The programming that gives these properties meaning exists within the UIObject class
definition.
Next, the UIComponent class is set up to extend (inherit) all the functionalities of the
UIObject class. This means that any properties of the UIObject class become available as
properties of the UIComponent class. But the UIComponent class doesn't just inherit all
of the properties of the UIObject class; it also defines some of its own:

UIComponent.enabled

UIComponent.tabIndex


As a final step, most component classes (CheckBox, Alert, RadioButton, and so on)
inherit or extend the UIComponent class. This means that most component classes not
only inherit the enabled and tabIndex properties of the UIComponent class, but also all of
the properties of the UIObject class, because the UIComponent class extends the
UIObject class. In the end, this means that most component instances you place in your
project have the properties x, y, visible, top, bottom, enabled, tabIndex, and so on. Again,
this entire inheritance process occurs invisibly whenever you place a component instance
in a project.
Because most component instances share these common properties, it's easy to affect any
component instance using a common syntax, as the following example demonstrates:

myButton_pb.enabled = false;

myRadioButton_rb.enabled = false;

myListBox_lb.enabled = false;


No matter what kind of component instance you're scripting—Button, RadioButton, or
some other component instance—the enabled property is used in the same way and
affects the component instance in the same manner across the board.
Component properties let you control various aspects of a component instance, including
its size, position, and visibility; or they can be used to access property information
pertaining to a particular component instance. For example, the following script assigns a
value to myVariable based on the rightmost position of the component instance named
myButton_pb:

var myVariable:Number = myButton_pb.right;


Component-Specific Properties
In addition to common properties, each component class has its own set of unique
properties that allow you to work with an instance of that component class in specific
ways. For example, the NumericStepper component class has properties named
maximum, minimum, and stepSize. These properties have meaning only in the context of
scripting NumericStepper instances. Attempting to use the stepSize property in relation to
a RadioButton instance is an exercise in futility. It just won't do anything.
NOTE
There are too many component-specific properties to list here. For a complete listing of
the properties of a component class, look up its entry in the ActionScript dictionary.
Component-specific properties can also be found under each component listing in the
Actions Toolbox section of the Actions panel.


Using ActionScript in the following exercise, you'll set the initial property settings for
most of the components in an application.
1. Open Components1.fla in the Lesson10/Assets folder.
This project contains three layers: Background, Components, and Actions. The
Background layer contains all the non-component content in the project. This
includes a static image of the URL manager's interface as well as two movie clip
instances named currentWin_mc and newWin_mc. The Components layer
contains all the components used in the project. A TextInput component named
inputURL_ti accepts text input from the user; a List component instance named
listURL_lb displays a list of items; three Button component instances named
addURL_pb, deleteURL_pb, and openURL_pb work similarly to buttons; and a
couple of RadioButton component instances named currentWin_rb and
newWin_rb work in the same manner as HTML radio buttons.

Although certain component instance properties can be configured within the
authoring environment by using either the Component Inspector or the Property
Inspector, the component instances in this project have only been given instance
names. We'll use ActionScript to completely configure these instances, including
their initial properties. Before you begin scripting, it's important for you to have a
general idea of how this application will work.
When the application is finished and played within a browser window, the user
can enter a URL (www, ftp, or mailto) into the inputURL_ti component instance
and then click the addURL_pb component instance, which displays the URL in the
listURL_lb component instance. All added URLs appear in the listURL_lb
component instance. When the user selects a URL from the listURL_lb component
instance, he or she has two choices: clicking the openURL_pb component instance
opens the URL in either the current browser window or a new one (depending on
whether the currentWin_rb or newWin_rb radio button is selected); clicking the
deleteURL_pb component instance deletes the selected URL from the list. As the
user interacts with the application, these various component instances are enabled
and disabled dynamically, depending on the task the user is trying to accomplish.
The finished application will have a few more capabilities, as you'll discover the
further we progress.
To help you see how an unscripted version of the project looks and feels, let's do a
quick test.
2. Choose Control > Test Movie.