User Guide

Build the application architecture 25
Create a movie clip with component instances to display product details
In the application, a pop-up window appears when a user clicks on a product in the Gift Ideas
section. The pop-up window contains component instances that display information for the
product, including a text description, image, and price. To make this pop-up window, you’ll
create a movie clip symbol and add instances of the Loader, TextArea, Label, NumericStepper,
and Button components.
Later in the tutorial, you’ll add ActionScript that dynamically creates an instance of this movie
clip for each product. These movie clip instances will be displayed in the Window component,
which you added to the library earlier. The component instances will be populated with elements
from the external XML file.
1. In the Library panel (Window > Library), click the options menu on the right side of the title
bar and select New Symbol.
2. In the Create New Symbol dialog box, enter ProductForm for Name and select Movie Clip for
Behavior.
3. Click the Advanced button. Under Linkage, select Export for ActionScript, leave Export in First
Frame selected, and click OK. A document window for the new symbol opens in symbol-
editing mode.
For movie clip symbols that are in the library but not on the Stage, you must select Export for
ActionScript so that you can manipulate them using ActionScript. (Exporting in first frame
means that the movie clip is available as soon as the first frame loads.) Later in the tutorial
you’ll add ActionScript that will generate an instance of the movie clip dynamically each time a
user clicks a product in the Gift Ideas section.
4. In the Timeline for the new symbol, select Layer 1 and rename it Components.
5. Drag an instance of the Loader component from the UI Components folder in the Components
panel onto the Stage. Set the X, Y coordinates to 5, 5. Enter image_ldr for the instance name.
Click the Parameters tab in the Property inspector. Select
false for autoLoad and false for
scaleContent.
The Loader component instance will be used to display an image of the product. The
false
setting for
autoLoad specifies that the image will not load automatically. The false setting for
scaleContent specifies that the image will not be scaled. Later in the tutorial you’ll add code
that loads the image dynamically, based on the product that the user selects in the Gift Ideas
section.
6. Drag an instance of the TextArea component from the UI Components folder in the
Components panel onto the Stage. Place it next to the Loader component. Set the X, Y
coordinates to 125, 5. Enter description_ta for the instance name. Click the Parameters tab in
the Property inspector. For
editable, select false. For html, select true. For wordWrap, select
true.
The TextArea component instance will be used to display a text description of the selected
product. The selected settings specify that the text cannot be edited by a user, that it can be
formatted with HMTL tags, and that lines will wrap to fit the size of the text area.