User Guide

34 Creating an Application with Components (Flash Professional Only)
You will later 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. Drag an instance of the Window component from the User Interface tree in the
Components panel to the library.
The Window component symbol is now added to the library. Later in the tutorial, you
will create instances of the Window component using ActionScript.
2. In the Library panel (Window > Library), click the options menu on the right side of the
title bar and select New Symbol.
3. In the Create New Symbol dialog box, enter ProductForm for Name and select Movie Clip
for Type.
4. 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 will add ActionScript that will generate an instance of the movie clip
dynamically each time a user clicks a product in the Gift Ideas section.
5. In the Timeline for the new symbol, select Layer 1 and rename it Components.
6. Drag an instance of the Loader component from the User Interface tree in the Components
panel onto the Stage. Enter 5, 5 for the x, y coordinates respectively. 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 will add code that loads the image dynamically, based on the product that the
user selects in the Gift Ideas section.