ADOBE® FLEX® 3: USING THE FLEX COMPONENT KIT FOR FLASH CS3

ADOBE FLEX 3 22

• The ContainerMovieClip.content property is the default property of the ContainerMovieClip class.

Therefore, when using a Flash container in MXML, you can omit the

ContainerMovieClip.content property.

However, if you create an MXML component based on the Flash container, you must specify the

ContainerMovieClip.content property. For more information on defining MXML components and using

the default class property, see “Simple MXML Components” on page 63 in Creating and Extending Flex Compo-

nents.

• If your Flash container modifies the visual characteristics of the Flex components contained in it, such as the

alpha property, you must embed the fonts used by the Flex components.

Creating an advanced Flash container

In this example, you create a container in Flash that lets the user expand and collapse the container in response to a

mouse click. The following image shows this container:

The following symbols define the parts of this container:

Callout Symbol name Description

A ResizeArrow Defines the icon use to collapse the container. The arrow points down when the container is expanded, and to

the right when it is collapsed. Click the arrow to minimize the container, and click it again to restore it to its original

size.

B OuterArea Defines the background color of the container.

C Title Defines the title text.

D TitleBar Defines the area of the container in its collapsed state.

E ContentArea Defines the white background for the area in which you place Flex controls.

F FlexContentArea Defines the area for the Flex components. This area is sized to match the size of the ContentArea.

ADOBE FLEX 3 23

The following image shows this container in Flash CS3:

To add the animation to the container, you use view states. The states layer defines the following two view states:

expanded The container displays in its full, expanded size, and the resize arrow points down.

collapsed The OuterArea, ContentArea, and FlexContentArea collapse to the size of the TitleBar, hiding all of the

Flex components in the FlexContentArea. The resize arrow points to the right.

Note: You should never remove the FlexContentHolder symbol from a frame of your Flash container. To hide the

FlexContentHolder symbol, set its

height and width properties to 0, or set its alpha property to 0.

To handle the state change in response to a click on the arrow, you write the following class file for the ResizablePan-

elContainer class. This class defines an event handler for the ResizeArrow that changes the current view state of the

container in response to a mouse click:

package {

import flash.display.MovieClip;

import flash.display.SimpleButton;

import flash.events.MouseEvent;

import mx.flash.ContainerMovieClip;

public class ResizablePanelContainer extends ContainerMovieClip {

// Constructor

public function ResizablePanelContainer()

ADOBE FLEX 3 24

{

ResizeArrow.addEventListener(MouseEvent.CLICK, arrowHandler);

ResizeArrow.useHandCursor = false;

}

// Event handler to change view state.

private function arrowHandler(event:MouseEvent):void

{

currentState = currentState ==

"expanded" ? "collapsed" : "expanded";

}

}

}

You can animate the change in view state by adding a transition or a tween to the container. For more information

on using view states, transitions, and tweens in a Flash component, see “Adding view states and transitions to Flash

components” on page 13.