Using Flex Actionscript files with Metadata in Flash CS3

Many of the tutorials you find on Flashmagazine and other sites feature code that was written for Flex. As long as the tutorial files does not make use of the Flex Framework itself, you can use this code with Flash CS3. Read this tutorial to learn how to set up your FLA file to work with Flex Actionscript Projects. PS: If you already upgraded to Flash CS4, you're in luck. CS4 solves the issues mentioned in this tutorial.

When Flex came along, many Flash users thought this would be the end of their beloved timeline and that Flex would kill Flash. Now we know that the two tools serve different purposes, but unfortunately, they also offer two different workflows. The main culprit is that Flash cannot read the Metadata tags that is used in Flex. In this tutorial you'll learn how to work around the SWF and Embed Metatags, so you can use Flex Actionscript Project files in Flash CS3. This tutorial is written as a supplement to our Away3D tutorials, but the steps outlined here will apply to any Flex Actionscript Project (Actionscript class files).

To use a class file in either Flash or Flex, you need to tell what class to use. Follow the instructions in this tutorial.

Step 1: Setting the Stage properties

• In Flash, you set the size of the stage using the Properties panel. It is then stored in the FLA file.
• In Flex, you add a Meta-tag just above your class definition.

To set up the Stage of a Flex Actionscript Project, you add the undocumented SWF metadata tag SWF like this:

 

[SWF(width="500", height="400", frameRate="30", backgroundColor="#ffffff")]

 

Flash CS3 cannot read the SWF tag, so it will simply ignore it. To set up your FLA file, just type the values found in the Actionscript file into your Properties panel.

Step 2: Importing images and assets

• In Flash, you'll import graphics into the Library that are then saved as part of your FLA file.
• In Flex, you add the image using a Meta-tag inside the actionscript file. The graphics are stored in their original format in a folder and the actionscript code only references it.

To embed a bitmap in Flex you'd write something like this inside your class definition:

 

[Embed (source="resources/wheelC.png")]
private var wheelCBitmap:Class;

 

Flash CS3 cannot read this tag, so it will simply ignore it. Due to this, line 2 will not have any meaning so the project file won't run as expected. To get around this issue, comment away the entire Embed code block like this:

 

/* [Embed (source="resources/wheelC.png")]
private var cTex:Class;
[Embed (source="resources/wheelM.png")]
private var mTex:Class;
[Embed (source="resources/wheelW.png")]
private var wTex:Class; */

 

Then import the images from the accompanying folder ("resources" in this case) to your library. Then right click each of the images, select Linkage and set the image to export using the name in the variable ("cTex" in this case).

When you've done that for all the embedded assets, you can then export the file as usual and it should all work. If you have a problem, contact me and I'll update this article if required.

What about Flash CS4?

Flash CS4 solves both these issues. If you use Flash CS4 (FCS4), you'll need to download the Flex SDK and then tell FCS4 where the SDK was unpacked / installed. This will enable FCS4 to both read and use the metadata. You will still need to set the Document class (described here)

Further reading

Flex Metatags and what they do
An alternate approach using Loaders
The other way around - Flash to Flex

 

 

Comments

No comments for this page.

Submit a comment

Only registered members can comment. Click the link at the top of this page to register.