Tutorial: Talking between Flex 3 and Flash CS3 SWFs

For a project I’m working on I needed a way to be able to write a Flash CS3 SWF, put some controls into it as well as some methods and be able to call those methods and subscribe to the control’s events in the Flash CS3 SWF from Flex 3. When your working with Flash CS3 and Flex 3 things get much easier than using things like the LocalConnection class (not needed for Flash CS3 AS3 to Flex 3 communications). Here is a quick tutorial on how to do this.

This won’t be anything pretty to look at, keep in mind this is just a tutorial to show you how to hook this stuff up. Obviously you would want to clean things up and make the UIs look pretty, etc.

First, fire up Flash CS3 and create a new “Flash File (ActionScript 3)”. Save the Project as “Test.swf”. I then created a new MovieClip and added two controls to it: A TextInput control called “test_txt” and a Button control called “test_btn”. I also added some code on the first frame of the new MovieClip as seen in the image:

Publish this SWF from the Flash file menu.

Now open up Flex Builder 3 and create a new Flex project and call it “TalkToFlash”. Drag a SWFLoader control onto the design surface and set the following properties
id: mySWF
source: Test.swf
autoload: true
creationComplete: creationComplete();

Take the Test.swf that you just compiled in Flash CS3 and drag that into Flex’s bin-debug folder. Now, in Flex Builder you will need to add some code. Here are the MXML contents:

<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">     <mx:Script>         <![CDATA[             import flash.display.MovieClip;             private function creationComplete():void             {                 var mc:MovieClip = MovieClip(mySWF.content);                 mc.myMovie_mc.TestMovieCall();                 mc.myMovie_mc.test_btn.addEventListener(MouseEvent.CLICK, onClicked, false);             }             private function onClicked(evt:MouseEvent):void             {                 trace("The Flash CS3 Test button was clicked");             }         ]]>     </mx:Script>     <mx:SWFLoader x="469" y="136" source="Test.swf" creationComplete="creationComplete();" autoLoad="true" id="mySWF"/> </mx:Application>

The code should be pretty straight forward. We essentially cast the mySWF.content into a MovieClip (if we didn’t it would have come back as a DisplayObject). At that point we have access to pretty much anything in that Flash CS3 SWF. Run the Flex project in debug mode (so you can see the trace results). Immediately you should see the textbox give you a greeting. Now click the button in the loaded SWF. You should see a trace message down in the Flex Builder console.

So with that small amount of code we could call methods in the SWF and subscribe to events as well. Also, nothing would stop you from defining your own custom events and using those – which is what I have to do now for my project.