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 = “”;
function clickHandler( evt:Event ):void
myInfo= evt.target.name ;
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:
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?