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.
- Follow steps 1-9 of the Billing Information instructions (see Create the Billing Information pane) 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.
- 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.
- 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.
- 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.
- 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.
- 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.
- Drag an instance of the Button component onto the Stage and position it at the bottom of the form, below the ccMonth_cb instance. Name the new instance checkout_button. Set the x and y coordinates to 125, 135. In the Property inspector's Parameters tab, set the
label property to Checkout.
- Follow the instructions in steps 14-15 of the Billing Information instructions (see Create the Billing Information pane) to add a rectangle to the bottom of the form.
