Creating and Importing Flash assets into Flex

You can import SWF 9 assets created by Adobe Flash CS3 Professional into Flex applications.
The way you import these assets depends on the type of asset and where you use the asset in your Flex application.

Components authored in Flash for use in Flex must be a subclass of mx.flash.UIMovieClip. The UIMovieClip base class extends MovieClip and implements the core Flex interfaces, allowing the component to be used inside Flex containers and as Flex skins.

The simplest workflow does not require any additional coding in Flash. As long as the base class of the component symbol is set to mx.flash.UIMovieClip, the component will work in Flex. In this case, you do not need to create a subclass for your component. Flash will do this automatically for you.

There are times when you do need to create an explicit subclass of UIMovieClip. Some examples include custom events (the Event metadata needs to be added to the subclass), additional public properties/methods, and modifying any of the default behavior. In this case, you will need to create a new ActionScript file that contains your subclass.

Usage Scenario

Marisa wants to take some existing Flash content she created and make it possible for Adam to use this in a Flex application. To do this, she adds labels to the timeline to define states of the component, and additional labels that define the transition start and end frames. She then runs the “Make Flex Component” JSFL script, publishes the movie, and emails the SWC to Adam.

Adam adds the SWC to his Flex Builder build path and drops the component into MXML. He then has complete access to the component’s important properties and events.

Flex Component Kit for CS3

The Flex Component Kit for Flash CS3 allows you to create interactive, animated content in Flash, and use it in Flex as a Flex component.

Please download and install this component kit before proceeding to the next sections.

URL for download:

Flex Component Kit

You typically import two types of assets

Static assets: Assets used for simple artwork or skins that do not contain any ActionScript 3.0 code.

Dynamic assets: Assets that correspond to Flex components and contain ActionScript 3.0 code. These components are designed to work with Flex features such as view states and transitions, skinning, and tool tips. To use dynamic assets in a Flex application, export the assets to a SWC file, and then link the SWC file to your Flex application.

For importing assets in

Static Assets

Creating static assets in Flash CS3

Few points to be considered while creating assets for using in Flex:

Registration Point
The registration point for the exported symbol must be the upper left corner. If you have Flash content that has a different registration point you can always wrap the content in a new symbol with an upper left registration point.

Frame Rate
In order for the timing to remain consistent, the Flash frame rate must match the Flex frame rate. The default Flex frame rate is 24fps, so it is recommended that the Flash content matches this. If needed, the Flex frame rate can be set to a different value, although this should only be done as a fallback. Setting the Flex frame rate to a value less than 24fps will cause sluggishness in the UI.

Content Bounds
By default, the measured size of the Flash content matches the actual size. Any changes to the content size will automatically be recognized by Flex, and the component will be layed out again in its new size. You can avoid the resizing done by Flex when the flash asset is resized using the Bounding Box, which is explained below.

Symbol Type

Only “Movie Clip” and “Button” symbols can be imported in Flex.

Creating the asset

After creating the shape using the drawing tools in Flash CS3, select the shape and press F8 (shortcut for converting to symbol). In the convert to symbol dialog box, do the following

• In the “Name” text box enter the name which you want use in Flex to refer to this symbol
• Under “Linkage” section, select the “Export to action script” check box. This will make sure the symbol is visible in Flex.
• Press OK to create the symbol.

Importing static assets

Use Flash CS3 to create static assets. You can either embed the entire SWF or selected objects from the library.

Embed entire SWF

<mx:Script>

<![CDATA[

[Embed(source="../assets/sample.swf")]

[Bindable]

public var sampleSwf:Class;

]]>

</mx:Script>

<mx:Image source="{sampleSwf}"/>

Embed library symbols

<mx:Script>

<![CDATA[

[Embed(source="../assets/sample.swf", symbol="Normal")]

[Bindable]

public var logoNormal:Class;

]]>

</mx:Script>

<mx:Button upSkin="{logoNormal}" click="anim.currentState = 'LastOne'" overSkin="{logoMouseOver}" downSkin="{logoClicked}"/>

value to the “symbol” attribute should be the name of the symbol created in using Flash CS3.

Dynamic Assets

For importing dynamic assets into Flex application you need Flex component kit for Flash CS3.

Please refer to http://blogs.adobe.com/flexdoc/pdf/swf9.pdf for more details on how to import dynamic assets in to your Flex application.

References:

Adobe wiki on component kit

http://adobedev.adobe.acrobat.com/p75214263/