User Guide

Accordion component (Flash Professional only) 99

■ For the childNames property, enter shippingAddress, billingAddress, and checkout.

These strings are the ActionScript names of the accordion’s children.

■ For the childLabels property, enter Shipping Address, Billing Address, and Checkout.

These strings are the text labels on the accordion headers.

■ For the childIcons property, enter AddressIcon, AddressIcon, and CheckoutIcon.

These strings specify the linkage identifiers of the movie clip symbols that are used as the

icons on the accordion headers. You must create these movie clip symbols if you want icons

in the headers.

Select Control > Test Movie.

To use ActionScript to add children to an Accordion component:

Select File > New and create a Flash document.

Drag an Accordion component from the Components panel to the Stage.

In the Property inspector, enter the instance name myAccordion.

Drag a TextInput component to the Stage and delete it.

This adds the component to the library so that you can dynamically instantiate it in step 6.

In the Actions panel on Frame 1 of the Timeline, enter the following:

myAccordion.createChild("View", "shippingAddress", {label: "Shipping

Address"});

myAccordion.createChild("View", "billingAddress", {label: "Billing

Address"});

myAccordion.createChild("View", "payment", {label: "Payment"});

This code calls the createChild() method to create its child views.

In the Actions panel on Frame 1, below the code you entered in step 5, enter the following code:

var o = myAccordion.shippingAddress.createChild("TextInput", "firstName");

o.move(20, 38);

o.setSize(116, 20);

o = myAccordion.shippingAddress.createChild("TextInput", "lastName");

o.move(175, 38);

o.setSize(145, 20);

This code adds component instances (two TextInput components) to the accordion’s children.

Customizing the Accordion component (Flash Professional only)

You can transform an Accordion component horizontally and vertically during authoring and at

runtime. While authoring, select the component on the Stage and use the Free Transform tool or

any of the Modify > Transform commands. At runtime, use the

setSize() method (see

UIObject.setSize()).

The

setSize() method and the Transform tool change only the width of the accordion’s headers

and the width and height of its content area. The height of the headers and the width and height

of the children are not affected. Calling the

setSize() method is the only way to change the

bounding rectangle of an accordion.