TechNote (Archived)

Using Flash 8 SWFs with Flex 2 Applications

Issue

Flex 2 applications are compiled into SWFs that require the use of Flash Player 9. There is a problem when you want to have a Flex 2 SWF dynamically load or embed a Flash 8 SWF.

The example in this TechNote explains how to include SWFs, which were created for Flash Player 8 (or earlier), into a Flex 2 application.

Reason

Prior to Flash Player 9, you could load one SWF into another SWF, and then simply reach into it and invoke its functions and modify its data. That is not possible with Flash Player 9 if the two SWFs are different versions (for example, SWF9 and SWF8). This means that you cannot directly reference the contents of one SWF from another. Specifically, you cannot write ActionScript code in your Flex 2 application that directly addresses objects and functions of a version 8 (or earlier) SWF.

Solution

The solution is to use LocalConnection as the way for SWFs to communicate with each other. The SWFs can be anywhere as long as they are active at the same time. For example, you can have an HTML page with frames, each frame having a SWF. A button click on one SWF can send a message, via LocalConnection, to another SWF in another frame. Or, the SWFs can be in different browser windows. In this case one SWF is wholly contained within another.

By-directional communication is not possible with LocalConnection. If you want Flex 2 and Flash 8 to communicate back and forth you will need two LocalConnections. The sample application below shows how to have Flex control a Flash 8 SWF and how the SWF sends responses.

A Sample Application

The figure below shows a situation where you have a Flex 2 application with a Flash 8 SWF running within a Flex 2 Panel component. Controls outside of the panel affect the behavior of the Flash 8 SWF.

The Flash Side

This is a very simple Flash 8 FLA file. It contains 2 symbols, a star and a ball. The main timeline includes an animation of the ball circling the star. The SWF is controlled by the Flex application; the ball's orbit can be paused and resumed, the star can be rotated, and the star can be zoomed. The example code below shows how this is done:

This code sits on the first frame of the timeline of the FLA

 // To control this SWF, create a LocalConnection. This can be used to // send or receive messages. In this case, it is receiving messages. 1 var lc:LocalConnection = new LocalConnection(); // Create methods on this LocalConnection. These are the 'messages' // that get invoked from Flex. 2 lc.rotateStar = function( angle:Number ) {      star_mc._rotation = angle;   } 3 lc.zoomStar = function( factor:Number ) {      star_mc._xscale = factor;      star_mc._yscale = factor;   } 4 lc.stopPlanet = function() {      stop();   } 5 lc.resumePlanet = function() {      play();   } // Use allowDomain if the Flex app and the SWF come from different // domains. This allows the Flex SWF to control this SWF. 6 lc.allowDomain("*"); // Pick a unique name to use as the connection name. Only 1 // connection on a computer can have the name; a new connection // with this name will fail. 7 lc.connect("swf8connector"); // Make a click on the star to alert the Flex application to // demonstrate communcation in the reverse direction. 8 star_mc.onRelease = function() {      var sendLC:LocalConnection = new LocalConnection();      sendLC.send( "swf2Flex", "starClick" );   }

Notes

1. A new LocalConnection object is created.

2-5. Methods are added to the LocalConnection object. These are the methods that are called from Flex.

6. Use allowDomain when the Flash 8 SWF is loaded from a domain different from the Flex domain. As written, this statement allows any SWF to invoke the methods on the LocalConnection object.

7. Finally, use the LocalConnection connect function to listen for messages from Flex. The Flex application must use the same name and there can be no other active LocalConnections using the same name.

8. When the mouse is released over the star, a LocalConnection is created to send a message back to the Flex application. Notice that the LocalConnection's name is "swf2Flex".

The Flex Side

The Flash 8 SWF is located within a Panel that has an<mx:SWFLoader> as its only child:

 <mx:Panel x="173" y="122"   layout="absolute" ><mx:SWFLoader source="star_flash.swf" scaleContent="true"   x="10" y="10"/></mx:Panel>

The source property of the <mx:SWFLoader> component names the Flash 8 SWF file. This is loaded at runtime. When Flash Player 9 loads this SWF and sees that it is not a version 9 SWF, the Player creates a new virtual machine instance - a compartment within itself - to run the SWF 8. When the SWF 8's timeline is started it will run the ActionScript code detailed above.

This is the <mx:Script> block from the Flex application.

As you can see, the ActionScript code for the Flex 2 application is very similar to the Flash 8 code.

1. LocalConnection objects are declared.

2. The Application's initialize event invokes this method, which creates an instance objects of LocalConnection.

2a. The lc LocalConnection is used to send messages to the SWF while the fromSWF LocalConnection is used to receive messages from the SWF 8. Unlike Flash 8, where you assign methods directly to the LocalConnection, you indicate what object has the methods to be called by setting the LocalConnection's client property.

3 - 5. Functions are declared, which are called from the various controls. For example, the HSlider that controls the rotation:

 <mx:HSlider x="215" y="511" minimum="-180" maximum="180" value="0"    allowTrackClick="true" snapInterval="1"    liveDragging="true" showDataTip="false"    change="rotateStar(event)" tickInterval="20" />

3a-5b. Whenever the Flex 2 application needs to control the Flash 8 SWF it uses the LocalConnection.send() method, which has the following signature:

send( lcname:String, method:String, arg1:Object=null, ... );

The lcname must match the name given in the Flash 8 SWF LocalConnection.connect() method. The method argument names a function created on the Flash 8 SWF LocalConnection object. The arguments are optional.

6. The starClick() function is called from the SWF when the mouse is released over the star.

Summary

In this example, the majority of the messages were from the Flex application to the SWF, but by clicking on the star within the SWF, a message was sent to the Flex application.

If you want to send messages: