« On Creating Flex Applications | Main | Using Flash CS3 with Flex 2 »

April 23, 2007

Using ActionScript 3 SWFs with Flex 2

Awhile ago I wrote an article, Using ActionScript 2 SWFs with Flex 2. In that article I showed how you can communicate between a SWF written with ActionScript 2 and a Flex 2 SWF, written in ActionScript 3. The communication is done with LocalConnection as if the two SWFs were in separate Flash Players. That is effectively true since each SWF is put into its own virtual machine within the Flash Player.

With the release of Flash© CS3 you no longer have to use LocalConnection. Flash CS3 can create ActionScript 3 SWFs which are loaded into the same Flash Player virtual machine as a Flex 2 SWF. If you compare the two examples you'll see this new method is clean and very easy to implement.

Download the Example
Get Flash CS3

Let's start with the Flash SWF. I used the same Flash movie as I did in the earlier article, but this time I've updated it for ActionScript 3. If you open the FLA file and examine the ActionScript code, you will not see LocalConnection anywhere. Instead, you'll see this:

function rotateStar( angle:Number ) : void {
  star_mc.rotation = angle;
}

function zoomStar( factor:Number ) : void {
  star_mc.scaleX = factor;
  star_mc.scaleY = factor;
}

function stopPlanet() : void
{
  stop();
}

function resumePlanet() : void
{
  play();
}

function getStar() : MovieClip
{
  return star_mc;
}

The functions, on the root timeline of the Flash Movie, can be directly called from Flex. In Flex, the SWF is loaded into a SWFLoader control:

     id="flashStar"
     source="star_flash.swf"
     complete="starLoaded()" />

To rotate the star by 45 degrees, the Flex application calls the MovieClip's rotateStar root timeline function:

var c:MovieClip = flashStar.content as MovieClip;
c.rotateStar( 45 );

The SWFLoader's content property is the SWF's root timeline. You cast the content property to MovieClip and then just call the functions defined.

Compare the code between the two examples. If you use Flash SWFs in your Flex applications, download Flash CS3 right away and simplfy your code.

Posted by pent at April 23, 2007 04:49 PM

Comments

Hi Peter,

Thanks for the example! This totally works for me... I was hoping the whole localConnection thing was over with AS3!!

Kind regards

Posted by: jankees at May 3, 2007 05:36 AM

Thanks !

Posted by: neo at June 1, 2007 05:16 AM

This is great, but seems to strip all the timeline code from the loaded swf. In my loaded swf I have a timeline animation with a stop() command at the end. Is there anyway to preserve that stop()? Thanks!
-------------------
Peter: I have symbols that have timeline actions which work fine. Try putting your movieclip inside of another movieclip that has only 1 frame, then export that clip as your Flex symbol.

Posted by: fredo at June 6, 2007 01:05 PM

one other thing to be aware of is that instead of loading external swfs, you can also compile specific symbols into your flex swf, like this:

[Embed(source="library.swf", symbol="symbolName")]
[Bindable]
public var mySymbol:Class;


--------------------
Peter: True, and this works for AS 2 or AS 3 symbols. But you cannot treat the symbols are real AS 3 class objects.

Posted by: fredo at June 6, 2007 01:10 PM

Thanks Peter. You are right. The reason I was getting my timeline code stripped was because I was compiling in a symbol as opposed to loading the external swf.

Eventually I'll get the hang of this crazy new workflow. ahhh for the days of attachMovie()... :)

Posted by: fredo at June 6, 2007 02:58 PM

Life saver - ive been pulling my hair out on this all day.

One quick question - my mistake was to assign the movie a class - via the prefs panel - and try to call a method on there - does any one know why this doesn't work..?

im guessing instead of

loader.content.myMethod()

its going to be

loader.content.xxxxx.myMethod() ?? as the main class doesnt seem to correspond with the loaded movies root timeline...

Posted by: Pete Hobson at September 11, 2007 02:10 PM

Hi Peter,

Would the same technique work the other way: load a flex application SWF into a flash CS3 generated SWF?

Are there any nuances that one needs to be aware of
in this case?

Here is what I'm thinking: for a widget that I've developed in Flex and that weighs almost 400kb, I'm want to write a simple Flash CS3 based facade that, upon user click, would load the actual Flex Widget.

I'm I thinking straight?
Thanks.

ATTA

Posted by: atta-ur rehman at June 1, 2008 08:20 AM

This is not a use-case we support. The reason is that the Flex components (including your own custom components) require the Flex framework to be in change of the movie timeline. Certain root-level functions and classes must be present for Flex components to work.

When you use Flash as the application base, there isn't any Flex-ness present and the Flex components won't even load properly, let alone work.

So I'm afraid your scenario won't work at this time. What you could do is write what you want to do in Flash and just load in into a Flex app; you'll have better luck coming at it from that angle.

Posted by: Peter Ent at June 1, 2008 05:45 PM

Thanks a bunch! This is exactly what I was looking for. I have to admit, I was unbelieving as I typed '.content as MovieClip;' but it worked just fine! The easiest solution to a problem I've had in flex for a long time.

Note: I'm using a flash as3 swf and the mx:SWFLoader in flex builder 3.

rock on Peter!

Posted by: Evan Mullins at July 11, 2008 03:26 PM

Post a comment




Remember Me?