Building an Address Book > Adding Components
Building an Address Book > Adding Components |
|
Adding Components
Even for application developers, Macromedia Flash is very much a visual authoring environment. In our address book, all but two of the interface elements are manually placed at author time. The interface is made up of text fields and the new Flash UI Components. The components are dragged into the movie from Flash's Components panel. The text fields are created with the Text tool. Once they are created, these interface elements are linked to ActionScript using the Property inspector. A typical application-building process is:
1 |
Drag a component from the Components panel to the movie stage. |
2 |
Position and size the component using the Arrow tool and the Free Transform tool. (Other placement aids include "Snap to Pixels", "Snap to Grid", "Snap to Objects", "Snap to Guides", and the Align panel. For details, see Help > Using Flash.) |
3 |
In the Property inspector, give the component an instance name. |
4 |
In the Property inspector, assign any desired parameters for the component (for example, a button label or a series of items in a ListBox). |
5 |
In the Property inspector, assign a callback function to be invoked when the component is activated by the user. |
Below is a list of author-time Flash UI Components in our address book. A diagram shows the placement of each component. We also place "Done" and "Cancel" PushButton components at runtime with ActionScript. Note that each component is named with a suffix corresponding to its type (_lb for Listbox, _pb for PushButton, and _cb for ComboBox). This enables Flash MX's "code hinting" feature for each component.
 |
ListBox component: contactListBox_lb |
|
PushButton components: addButton_pb, removeButton_pb, editButton_pb, sortAZButton_pb, sortZAButton_pb |
|
ComboBox component: phoneComboBox_cb |
To learn what's involved in placing components at author time, we'll run through
the steps for adding the contactListBox_lb component to our movie.
The other components of our address book are placed according to a similar procedure:
each is dragged from the Components panel to the stage and then sized if necessary.
For more practice placing components, complete the Introduction to Components
Tutorial (Help > Tutorials).
To place the contactListBox_lb component:
1 |
Open the Components panel (Window > Components). |
2 |
From the Components panel, drag an instance of the ListBox component to the Stage.
|
3 |
Select the Arrow tool. |
4 |
Click the ListBox instance and drag it to the desired position. |
5 |
Select the Free Transform tool. |
6 |
To size the ListBox: while holding shift, drag the ListBox's bottom-right corner handle. The shift key maintains the ListBox's original horizontal and vertical proportions. |
Creating Text Fields
In addition to components, our address book uses text fields to display text on-screen text and to retrieve text input. Unlike components, text fields are created using the Text tool, not the Components panel.
To create a text field:
1 |
Select the text tool. |
2 |
Click and drag a rectangle on Stage. This defines the border of the text field. |
3 |
In the Property inspector, choose "Dynamic Text" for display-only text fields, or "Input Text" for user-editable text fields. |
3 |
Click "<Instance Name>" and enter a name for the text field. ActionScript will use the name to represent the text field as an object. |
For more information about using text fields, see Help > Using Flash.
|
