MACROMEDIA FLASH MX 2004-USING COMPONENTS Use Manual page 28

Later in the tutorial, you'll create movie clips to use as children in the Accordion instance, to
display the Billing, Shipping, and Credit Card Information panes.
In the main Timeline for the application, move the playhead to Frame 10 (labeled Checkout).
1.
Make sure the Form layer is selected.
Insert a blank keyframe on Frame 10 in the Form layer (select the frame and select Insert >
2.
Timeline > Blank Keyframe).
With the new keyframe selected, drag an instance of the Accordion component from the UI
3.
Components folder in the Components panel onto the Stage. In the Property inspector, enter
checkout_acc for the instance name. Set Width to 300 pixels and Height to 200 pixels.
Drag an instance of the Button component from the UI Components folder in the Components
4.
panel onto the Stage. In the Property inspector, enter back_button for the instance name. Click
the Parameters tab, and enter
About the Billing, Shipping, and Credit Card panes
The Billing, Shipping, and Credit Card Information panes are built with movie clip instances that
are displayed in the Accordion component instance. Each pane consists of two nested movie clips.
The parent movie clip contains a ScrollPane component, used to display content in a scrollable
area. The child movie clip contains Label and TextInput components where users can enter
personal data, such as name, address, and so on. You'll use the ScrollPane component to display
the child movie clip so that the user can scroll through the information fields.
Create movie clips for the Billing Information pane
First you'll create two movie clips that will display the Billing Information form fields: a parent
movie clip with the ScrollPane component instance, and a child movie clip with the Label and
TextArea component instances.
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 checkout1_mc for Name and select Movie Clip
2.
for 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.
Drag an instance of the ScrollPane component onto the Stage.
4.
In the Property inspector, enter checkout1_sp for the instance name. Set the W and H
5.
coordinates to 300, 135. Set the X and Y coordinates to 0, 0.
Click the Parameters tab. Set the
6.
The checkout1_sub_mc movie clip will appear inside the scroll pane, and will contain the
Label and TextInput components. You'll create this movie clip next.
From the Library options menu, select New Symbol.
7.
28 Chapter 2: Creating an Application with Components (Flash Professional Only)
for the property.
Back label
property to
contentPath
.
checkout1_sub_mc