User Guide
44 Creating an Application with Components (Flash Professional Only)
7. 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.
8. Follow the instructions in steps 14-15 of the Billing Information instructions (see “Create
the Billing Information pane” on page 40) to add a rectangle to the bottom of the form.
Add an event listener to the Checkout button
Now you will add code to display the Checkout screen when the user clicks the
Checkout button.
■ In the Actions panel for the main page, add the following code:
// When the Checkout button is clicked, go to the "checkout" frame label.
var checkoutBtnListener:Object = new Object();
checkoutBtnListener.click = function(evt:Object) {
evt.target._parent.gotoAndStop("checkout");
};
checkout_button.addEventListener("click", checkoutBtnListener);
This code specifies that, when the user clicks the Checkout button, the playhead moves to the
Checkout label in the Timeline.
Add code for the Checkout screen
Now you’re ready to add code to the Checkout screen of the application, on Frame 10 in the
main Timeline. This code processes the data that users enter in the Billing, Shipping, and
Credit Card Information panes that you created earlier with the Accordion component and
other components.
1. In the Timeline, select Frame 10 in the Actions layer and insert a blank keyframe (select
Insert > Timeline > Blank Keyframe)
2. Open the Actions panel (F9).
3. In the Actions panel, add the following code:
stop();
import mx.containers.*;
// Define the Accordion component on the Stage.
var checkout_acc:Accordion;