MACROMEDIA FLASH MX 2004-USING COMPONENTS Use Manual page 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.
In the Library panel (Window > Library), click the options menu on the right side of the title
1.
bar and select New Symbol.
In the Create New Symbol dialog box, enter ProductForm for Name and select Movie Clip for
2.
Behavior.
Click the Advanced button. Under Linkage, select Export for ActionScript, leave Export in First
3.
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.
In the Timeline for the new symbol, select Layer 1 and rename it Components.
4.
Drag an instance of the Loader component from the UI Components folder in the Components
5.
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
scaleContent
The Loader component instance will be used to display an image of the product. The
setting for
autoLoad
scaleContent
that loads the image dynamically, based on the product that the user selects in the Gift Ideas
section.
Drag an instance of the TextArea component from the UI Components folder in the
6.
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
.
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.
.
specifies that the image will not load automatically. The
specifies that the image will not be scaled. Later in the tutorial you'll add code
editable
false
, select . For
false html
Build the application architecture
for and
autoLoad
false
, select . For
true wordWrap
for
false
false
setting for
, select
25