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.

Get ADOBE® FLEX® 3: USING THE FLEX COMPONENT KIT FOR FLASH CS3 now with O’Reilly online learning.

O’Reilly members experience live online training, plus books, videos, and digital content from 200+ publishers.