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.
- In the Library panel (Window > Library), click the options menu on the right side of the title bar and select New Symbol.
- In the Create New Symbol dialog box, enter checkout1_mc for Name and select Movie Clip for Type.
- 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.
- Drag an instance of the ScrollPane component onto the Stage.
- 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.
- 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.
- From the Library options menu, select New Symbol.
- In the Create New Symbol dialog box, enter checkout1_sub_mc for Name and select Movie Clip for Type.
- 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.
- Drag six instances of the Label component onto the Stage. Alternatively, you can drag one instance onto the Stage, and Control-click (Windows) or Option-click (Macintosh) to drag it on the Stage to make copies. Name and position the instances as follows:
- For the first instance, enter firstname_lbl for the instance name and set the x and y coordinates to 5, 5. Click the Parameters tab and enter First Name for
text.
- For the second instance, enter lastname_lbl for the instance name and set the x and y coordinates to 5, 35. Click the Parameters tab and enter
Last Name for text.
- For the third instance, enter country_lbl for the instance name and set the x and y coordinates to 5, 65. Click the Parameters tab and enter Country for
text.
- For the fourth instance, enter province_lbl for the instance name and set the x and y coordinates to 5, 95. Click the Parameters tab and enter Province/State for
text.
- For the fifth instance, enter city_lbl for the instance name and set the x and y coordinates to 5, 125. Click the Parameters tab and enter City for
text.
- For the sixth instance, enter postal_lbl for the instance name and set the x and y coordinates to 5, 155. Click the Parameters tab and enter Postal/Zip Code for
text.
- Drag six instances of the TextInput component onto the Stage. Place a TextInput instance immediately to the right of each Label instance. For example, the x, y coordinates of the first TextInput instance should be 105, 5. Name the TextInput instances as follows:
- Name the first instance billingFirstName_ti.
- Name the second instance billingLastName_ti.
- Name the third instance billingCountry_ti.
- Name the fourth instance billingProvince_ti.
- Name the fifth instance billingCity_ti.
- Name the sixth instance billingPostal_ti.
Sometimes content in a scroll pane can be cropped if it's too close to the border of the pane. In the next few steps you will add a white rectangle to the checkout1_sub_mc movie clip so that the Label and TextInput instances are displayed properly.
- In the Timeline, click the Add New Layer button. Drag the new layer below the existing layer. (The layer with the rectangle should be on the bottom, so that the rectangle doesn't interfere with the component display.)
- Select Frame 1 of the new layer.
- In the Tools panel, select the Rectangle tool. Set the Stroke color to None and the Fill color to white.
Click the Stroke Color control in the Tools panel and click the None button--the white swatch with a red line through it. Click the Fill Color control and click the white color swatch.
- Drag to create a rectangle that extends beyond the bottom and right edges of the Label and TextInput instances.
