Passing Data from Flash to Flex and back

Our recent adventures in Flex/Flash land have required us to have our Flash and Flex components to talk to each other. Here are some ways in which you can get Flash and Flex to pass data from one to the other.

In Flex, we can embed other Flex files or Flash files ( pretty much everything SWF ) with the swfloader component. This component has complete and unload hooks to ActionScript functions that enable us to execute functions. This post will talk about ways in which data can be passed back and forth between the two types of components.

This post cover 3 different ways in which Flex/Flash files can interact with one another. Enjoy!

Flex->Flash action [ Or Flash->Flash, or Flex->Flex ] : LocalConnection

Think of the localConnection as a socket that opens up its methods to be called by other SWF files.

To enable this, add some ActionScript either in the Flash Actions screen or add a new method in Flex.

The short version of this:

private var lc:LocalConnection = new LocalConnection();
lc.client = this;
lc.allowDomains( “*” );
lc.connect( connectionString );

You have just opened a broadcast channel that will enable one client to connect to it. Let’s say I have a method in this file called thisIsMyMethod. To call the methods remotely ( i.e. from the Flex ), call this

private var lc : LocalConnection = new LocalConnection();
private var connectionString = mySWFLoader.content[“connectionString”];
lc.send( connectionString, “thisIsMyMethod”, “theseAreMyParameters” );

Note: Think about generating unique connection names. Otherwise, if you have two versions of your app open, the second window will throw a “connection in use” exception, and all your events will go to the first window. The easiest way I can think of is to add

var connectionString : String = “_suffix” + new Date().toString();

to the client. Passing this value to Flex from Flash is simple, since the SWFLoader object has access to a readonly DisplayObject with all the parameters, you can access the flash connectionString by calling something like mySWFLoader.content[connectionString]. We can also chain these channels for two way communication.

Let’s say that my Flex has some data that depends on my Flash, and then wants data passed back, you can define a localconnection in Flash,

  • Flash defines connectionString
  • Flex connects via LocalConnection, reading flashConnectString from SWFLoader.content[conn]
  • Flex opens it’s own LocalConnection.connect
  • Flex passes flexConnectionString to Flash ( using the flashConnect method )
  • Flex can now pass data to Flash
  • Flash can now pass data to Flex

Flash->Flex ( Eventing shortcut )

Of course, the pure actionScript parameter passing is nice, but it fails to capture the Event-driven way in which these features interact with one another. Using flash events, we can have a more dynamic event-based interaction.

In your Flash, simply add event listeners to your symbols and fire an event when the item is clicked

var myInfo : String = “”;
myButton.addEventListener(MouseEvent.CLICK, clickHandler);
function clickHandler( evt:Event ):void
{
myInfo= evt.target.name ;
dispatchEvent(new Event(“featureSelected”,true));
}

In your Flex code, you would add a function on your SWFLoaders’ complete action that looks like this

mySWFLoader.content.addEventListener( “featureSelected” , handleEvent );
function handleEvent( evt:Event ):void
{
var selectedInfo : String = mySWFLoader.content[‘myInfo’];
}

We found that by creatively naming our symbols, we could get a lot of functionality out of this model. Think of this approach as a using the embedded SWF file as a MXML component with eventing support.

One of the drawbacks of this approach might be the way in which the internal state of the Flash component has to be defined previously, whereas the Localconnection approach provides a seemingly unlimited source of parameters. You could define more complex Events that carry a data payload, but then it just gets unjustifiably complicated when it doesn’t need to be.

The most powerful usage is perhaps to combine events with the localconnection. Use the eventing framework to simply highlight the selected node or event thrower, and use the LocalConnection type communication for the heavy lifting and parameter passing.

Flex->Flash ( Movie Frame shortcut )

This is perhaps one of the more restrictive ways to use Flash within Flex, but it might do the job when all you need is a little Flash movieclip control. Flex has access to the DisplayObject of the embedded Flash file.

Think of this approach as using Flex as a movie player for SWF files.

Within this, you have access to:

  • mySWFLoader.content.play()
  • mySWFLoader.content.stop()
  • mySWFLoader.content.goToFrameAndStop(2)
  • mySWFLoader.content.goToFrameAndPlay(3)

If you don’t have control on the swf file you are embedding, you could use this method to control the behaviour of the included SWF file.

If you think about this possibility with the rest of the things that are possible thanks to Flex and Grails, this means that you can combine the rich media and animation available with Flash, the flexibility and forms from Flex, and the Data model from Grails. Who said the web was ever boring?

13 thoughts on “Passing Data from Flash to Flex and back

  1. Pingback: Flash中的数据传递给Flex并且返回给Flash的教程 - 全文检索博客

  2. Pingback: Tutorial About How to Transfer Flash Data to Flex And Return To Flash | FlexMan

  3. stacey reiman

    Hello – this is very helpful! Do you know how I could adjust this code to place button code in my FLA so that the swf can load something into a separate SWFLoader in the Flex app? (I have 2 SWFLoaders, 1 with content, and 1 with virtual tutors – and I’d like to have buttons throughout the swf pages that call different tutor videos).

    Reply
  4. Ryan

    I’m using the LocalConnection method described in this article. It works great except I am unable to pass a dynamic connection string from Flash to Flex using the swfloader.content mechanism described here. When I try to read the connectionString variable from mySWFLoader.content[“connectionString”] it says “Error #1069: Property connectionString not found on main__embed_mxml____Background_swf_832512272 and there is no default value”. In my .fla I have “var connectionString:String = “_connectionString_” + date.hours + “_” + date.minutes + “_” + date.seconds + “_” + date.milliseconds;” How can I make this work?

    Reply
  5. Pingback: Communication between application with difference browser « Flex ActionScript Guide Blog

  6. Reny

    Hi i want to acces the functions of the flash swf in flex..means i want to integrate it… can you attach any example with full source code?

    thanks in advance
    reny

    Reply

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