Search Flex Components Free

Custom Search

June 22, 2009

Importing Flash assets into Flex

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

[Embed(source="../assets/sample.swf")]
[Bindable]
public var sampleSwf:Class;
]]>


Embed library symbols

[Embed(source="../assets/sample.swf", symbol="Normal")]
[Bindable]
public var logoNormal:Class;
]]>


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/

Related Flex Tutorials