User Guide

40 Creating an Application with Components (Flash Professional Only)
4. Drag an instance of the Button component from the User Interface tree in the Components
panel onto the lower-right corner of the Stage. In the Property inspector, enter
back_button for the instance name. Click the Parameters tab, and enter Back for the
label property.
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 will use the ScrollPane
component to display the child movie clip so that the user can scroll through the information
fields.
Create the Billing Information pane
First you will 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.
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 checkout1_mc for Name and select Movie
Clip for Type.
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.
4. Drag an instance of the ScrollPane component onto the Stage.
5. In the Property inspector, enter checkout1_sp for the instance name. Set the W and H
values to 300, 135. Set the x and y coordinates to 0, 0.
6. Click the Parameters tab. Set the contentPath property to checkout1_sub_mc.
The checkout1_sub_mc movie clip appears inside the scroll pane, and contains the Label
and TextInput components. You will create this movie clip next.
7. From the Library options menu, select New Symbol.