The following example shows how you can use the [Embed] metadata and the Flex SDK to embed assets within your Flash applications (instead of manually importing assets into the Library panel).

Full code after the jump.

For more examples of Flash CS4 and Flex SDK integration, see my coworker Tareq AlJaber’s Flash Authoring blog.


Flash CS4 ships with a version of the Flex 3 SDK file which it will try and link to if it detects you’re using Flex features.

In Flash CS4, select File > New and select “Flash File (ActionScript 3.0)”.
Save the .FLA document to your hard drive and paste a .PNG file named bullet_star.png in the same directory as the .FLA file.
Paste the following code into the Actions panel:

// ActionScript 3.0
/**
 *  Note: This example assumes the bullet_star.png file
 *  is in the same directory as your .FLA file.
 */
 
[Embed("bullet_star.png")]
const BulletStar:Class;
 
var starIcon:DisplayObject = new BulletStar();
starIcon.x = 10;
starIcon.y = 10;
addChild(starIcon);

When you first try and select Control > Test Movie (or hit Ctrl+Enter) on the Flash application, Flash CS4 will prompt you with the following dialog:
screenshot-1
Figure 1. Flex SDK Required dialog box.

Flash gives a default Flex SDK Path of: $(AppConfig)/ActionScript 3.0/libs/flex_sdk_3/
Click the Update library path button to use the Flex SDK that ships with Flash CS4, or you can click the Browse to Flex SDK Path button (the folder icon next to the Flex SDK Path text field) to specify a custom Flex SDK. For now, click the Update library path button. You should see the .PNG file displayed, if not, close the SWF and try running Control > Test Movie again.

Now that the embedded .PNG file is displaying in the Flash application, lets look at where to find the Flex SDK version that ships with Flash CS4.
The default library path displayed earlier was $(AppConfig)/ActionScript 3.0/libs/flex_sdk_3/
The $(AppConfig) variable is a built-in shortcut to the C:\Program Files\Adobe\Adobe Flash CS4\Common\Configuration\ folder, so the Flex SDK directory is located at: C:\Program Files\Adobe\Adobe Flash CS4\Common\Configuration\ActionScript 3.0\libs\flex_sdk_3\. In that folder you should see two files: a /frameworks/ directory and a flex-sdk-description.xml file. Looking at the flex-sdk-description.xml file, we can see that the version of the Flex SDK that ships with Flash CS4 is 3.0.2.2113:

<?xml version="1.0"?>
<flex-sdk-description>
  <name>Flex 3</name>
  <version>3.0.2</version>
  <build>2113</build>
</flex-sdk-description>

It’s important to note that the Flex SDK included in Flash CS4 is not the full Flex SDK. Nor will you be able to use Flex components (such as the Alert control or the ToggleButtonBar control — when using the Flex SDK in Flash CS4, you should try and use ActionScript-only classes or [Embed] metadata, which do not rely heavily on the Flex framework, and therefore the Flex focus manager, system manager, etc).

The /frameworks/ directory contains a single subdirectory, /libs/ which contains a single .SWC file; flex.swc.
A .SWC file is basically just an archive file (similar to a .ZIP file), so if you’re curious what is inside, you can open the .SWC file in WinZIP or some similar program and see that there is a catalog.xml file and library.swf file.

Back in Flash CS4, let’s see where this Flex SDK path gets set.
From the main menu, select File > Publish Settings and select the Flash tab.
screenshot-2
Figure 2. Publish Settings dialog box.

Or, you can also access this tab by clicking the Edit button in the Profile section of the Property Inspector.
screenshot-2b
Figure 2b. Property Inspector dialog box.

Next, click the Settings button next to the Script drop down menu to display the Advanced ActionScript 3.0 Settings dialog box. Click the Library path tab.
You should see two entries in the Library path tab:

  • $(AppConfig)/ActionScript 3.0/libs
  • $(FlexSDK)/frameworks/libs/flex.swc

screenshot-3
Figure 3. Advanced ActionScript 3.0 Settings dialog box.

We’ve already seen that the $(AppConfig) variable is shorthand for the C:\Program Files\Adobe\Adobe Flash CS4\Common\Configuration\ folder, but now we also see a $(FlexSDK) variable, which is shorthand for the C:\Program Files\Adobe\Adobe Flash CS4\Common\Configuration\ActionScript 3.0\libs\flex_sdk_3\ folder (or $(AppConfig)/ActionScript 3.0/libs/flex_sdk_3/, if you prefer).

The Library path tab has six main buttons (from left to right):

  • Add New Path
  • Remove Selected Path
  • Browse to SWC file
  • Browse to Path
  • Move Path Up
  • Move Path Down
  • If you want to point to a different version of the Flex SDK, you can do the following:

    1. Delete the reference to $(FlexSDK)/frameworks/libs/flex.swc, if it exists.
    2. Click the Add New Path button.
    3. Click the Browse to SWC file, browse to a .SWC file, and press the Open button to dismiss the Browse to SWC file dialog box. Your new path may look something like the following C:\dev\FlexSDKs\3.2.0.3794\frameworks\libs\flex.swc (assuming you broke into my house and used my computer).
    4. Click the OK button to dismiss the Advanced ActionScript 3.0 Settings dialog box and then click the OK button again to dismiss the Publish Settings dialog box.
    5. Select Control > Test Movie from the main menu to test your Flash document using the newer Flex SDK.

    Alternately, if you wanted to specify an entire directory of .SWC files instead of each .SWC file separately, you could click the Browse to Path button (instead of the Browse to SWC file buton) and select the C:\dev\FlexSDKs\3.2.0.3794\frameworks\libs\ folder. If you have a full version of the opensource Flex SDK downloaded, you may have noticed that your /frameworks/libs/ folder has four .SWC files instead of the one .SWC file that Flash CS4 ships with (flex.swc):

    • flex.swc
    • framework.swc
    • rpc.swc
    • utilities.swc

    I don’t know exactly which classes are in which .SWC file, so if you’re having problems getting a specific Flex SDK class to work (such as mx.utils.ObjectUtil), you may want to point to the entire /frameworks/libs/ directory instead of or or two .SWC files individually.

    Finally, if you’re looking to download the latest versions of the Flex 3.x SDK or Flex Gumbo beta SDK, check out the following URLs:

 

7 Responses to Using the Flex SDK with Flash CS4

  1. ryan says:

    nice post… i honestly have not had a second of time to play with flash cs4 yet but this was is a dead cool feature…

  2. Jloa says:

    I did as u told (set the lib path to: D:\Soft\Develop\Flex3SDK\frameworks\libs) but a get this exception:
    Error: No class registered for interface ‘mx.managers::ICursorManager’.
    at mx.core::Singleton$/getInstance()
    at mx.managers::CursorManager$/get impl()
    at mx.managers::CursorManager$/setBusyCursor()
    at cursor_fla::MainTimeline/frame1()

    when i try to Build this code:

    import mx.managers.CursorManagerPriority;
    import mx.managers.CursorManager;

    CursorManager.setCursor(MyMouse, CursorManagerPriority.HIGH);

    Any ideas?
    Thx.
    ps: i would be greatful if u answer me via email.

  3. ian pretorius says:

    you cant update the sdk reference shipped with flash it seems :

    http://forums.adobe.com/thread/36399

    Several have tried including me and the error reported reveals that somehow cs4 is not using the updated compiler even if you import the new flex gumbo swc files

    Does anyone know how to fix this ? or when the cs4 patch will be released.

  4. Srinivas says:

    I am also getting the same error as Jloa
    Can you tell me how to get it done..
    Many thanks-
    Srinivas

  5. Peter Schum says:

    Hi Peter,
    I just read your post on
    http://www.boostworthy.com/blog/?p=157

    I’m trying to get Flash IDE into reading the Frame metadata with no success (I’m trying to get a simple preloader as on http://www.bit-101.com/blog/?p=946)

    any ideas?

  6. Peter deHaan says:

    @Peter Schum,

    Sorry, that wasn’t my post. I’m not sure about Frame metadata in the Flash IDE. I think I’ve only tested the [Embed()] metadata.

    Regards,
    Peter

  7. hana says:

    Hey ,
    I am new to flex !
    Could please give me the installation of open source flex 4 sdk on mac with Flash cs4 .

    Thanks in advance
    Hana

Leave a Reply

Your email address will not be published.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Spam Protection by WP-SpamFree