User Guide

Create the checkout screen 43
Create the Credit Card Information pane
The movie clips for the Credit Card Information pane are also similar to those for the Billing
and Shipping Information panes. However, the nested movie clip for the Credit Card
Information pane has somewhat different fields than the other two panes, for credit card
number and other card data.
1. Follow steps 1-9 of the Billing Information instructions (see “Create the Billing
Information pane” on page 40) to create the movie clips for the Credit Card Information
pane. Note these naming differences:
■ For the first movie clip, enter checkout3_mc for the symbol name and checkout3_sp
for the instance name. In the Property inspector’s Parameters tab, set the
contentPath
property to checkout3_sub_mc.
■ For the second movie clip, enter checkout3_sub_mc for the symbol name.
2. Drag four instances of the Label component onto the Stage. Name and position the
instances as follows:
■ For the first instance, enter ccName_lbl for the instance name and set the x and y
coordinates to 5, 5. Click the Parameters tab and enter Name On Card for
text.
■ For the second instance, enter ccType_lbl for the instance name and set the x and y
coordinates to 5, 35. Click the Parameters tab and enter Card Type for
text.
■ For the third instance, enter ccNumber_lbl for the instance name and set the x and y
coordinates to 5, 65. Click the Parameters tab and enter Card Number for
text.
■ For the fourth instance, enter ccExp_lbl for the instance name and set the x and y
coordinates to 5, 95. Click the Parameters tab and enter Expiration for
text.
3. Drag an instance of the TextInput component onto the Stage and position it to the right
of the
ccName_lbl instance. Name the new instance ccName_ti. Set the x and y
coordinates to 105, 5. Set the width to 140.
4. Drag an instance of the ComboBox component onto the Stage and position it to the right
of the
ccType_lbl instance. Name the new instance ccType_cb. Set the x and y coordinates
to 105, 35. Set the width to 140.
5. Drag another instance of the TextInput component onto the Stage and position it to the
right of the
ccNumber_lbl instance. Name the new instance ccNumber_ti. Set the x and
y coordinates to 105, 65. Set Width to 140.
6. Drag two instances of the ComboBox component onto the Stage. Position one to the right
of the
ccExp_lbl instance, and position the other one to the right of that. Name the first
new instance ccMonth_cb. Set Width to 60 and the x and y coordinates to 105, 95. Name
the second ccYear_cb. Set Width to 70 and the x and y coordinates to 175, 95.