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/

7 Responses to Creating and Importing Flash assets into Flex

  1. Sv Srikanth says:

    Nice Post …..

  2. Ross says:

    Thanks — this is very useful. I’m doing exactly this and have been using this article as a guide (also very useful) —

    http://www.adobe.com/devnet/flash/articles/flex_component_workflow.html

    The article I’ve been using is great, but didn’t mention anything bout frame labels to define component states and transition begins/ends.

    The component I’ve made loads and displays correctly, but then the display elements immediately becomes non-visible. I’m thinking maybe Flex is looking for a frame label to define state.

    Would you mind posting a follow up with an explanation of what Marisa did to add those frame labels?

    Thanks very much.

  3. Ross says:

    Ah — looks like you did provide that information by pointing to the swf9.pdf document. Sorry about that.

    For anyone as lazy as me who doesn’t want to read through that doc, check out the relevant information in this post —

    http://www.jessewarden.com/2007/04/example-for-flex-component-kit-for-flash-cs3.html

    Thanks again – not much information on this topic, yet.

  4. Steve George says:

    I noticed the same thing when setting the framerate to less than 24 fps how it was sluggish.

  5. Sherm Stevens says:

    I’m working on a Flex project that includes complex artwork created in Illustrator, exported to SWF. I’m trying to figure out how to import the SWF file intact (with all the illustration parts intact) and also have access to the properties of the individual symbols.

    I can load each symbol, put when I add it to the stage, it’s separate, which would require me to re-create fairly complex artwork in position in Flex. Trying to avoid that.

    Is there a method to add the entire SWF to the stage, but still access the attributes of the individual symbol within the SWF? I’ve been running into simplified examples all over the web, but none doing exactly what I’m trying to do.

    I’m not trying to use the SWF for skinning any controls, just need the artwork in my project.

  6. Najeeb Rana says:

    Thanks Sujit for a very useful article

  7. SIVANTHI says:

    thanks a lot this is very very useful to me

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: