Using javascript to make two flash files speak to each other

After browsing around on the web quite a bit I was struggling to find one source of information that covered all the details. I used this code specifically to shut the sound off one SWF when the other was turned on.

There are 3 steps to this process.

  1. Flash FILE ONE Communicates to Javascript
  2. Javascript function performs and calls flash FILE TWO function
  3. Flash FILE TWO receives call from javascript and performs function

IMPORTANT: This will not work just running locally on your machine, unless you are running a local server (like Mamp/Lamp/Wamp)

Example for Reference

Download the Source Files [Zip File]

Step 1: Flash FILE ONE Communicates to Javascript

We need to import the external library and use the ExternalInterface.call function to call the javascript on the html page. Note: ExternalInterface.call can be used without parameters. Example: ExternalInterface.call("jsFunction")

1
2
3
4
5
6
7
import flash.external.*;
testButton.addEventListener(MouseEvent.CLICK, callJS); //User clicks button - Send to File Two
function callJS(e:MouseEvent){
    ExternalInterface.call("helloFileTwo", sendText.text);
    //HelloFileTwo is a JS function on the html page
   //sendText.text is the input box. The value is being sent to javascript
}

Step 2: Javascript function performs and calls flash FILE TWO function

  • helloFileTwo has been called from the SWF (previous shown).
  • The parameter "str" is the value sent from flash (from the input box).
  • getFlashMovieObject is a cross browser function to properly get the swf movie
  • fileOneClick is a function in FILE TWO that is called
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
function getFlashMovieObject(movieName) 
{
    if (window.document[movieName]) {
       return window.document[movieName];
    }
    if (navigator.appName.indexOf("Microsoft Internet")==-1) {
       if (document.embeds && document.embeds[movieName])
          return document.embeds[movieName];
    }else // if (navigator.appName.indexOf("Microsoft Internet")!=-1) {
       return document.getElementById(movieName);
    }
}
function helloFileTwo(str){
    var flashMovie=getFlashMovieObject("fileTwo"); //ID of the flash object
    flashMovie.fileOneClick(str);
}

HTML embedding the SWF Files:
IMPORTANT:The Id on the object tag and the name attribute on the embed tag must be identical. This is how we get the flash object in the javascript.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="https://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=10,0,0,0" width="330" height="350"  align="middle" id="fileOne">
        <param name="allowScriptAccess" value="sameDomain" />
        <param name="allowFullScreen" value="false" />
        <param name="movie" value="fileOne.swf" /><param name="quality" value="high" /><param name="bgcolor" value="#ffffff" />
        <param name="wmode" value="transparent">	
        <embed src="fileOne.swf"  name="fileOne" width="330" height="350" align="middle" quality="high" bgcolor="#ffffff"  allowScriptAccess="sameDomain" allowFullScreen="false" type="application/x-shockwave-flash" pluginspage="https://www.adobe.com/go/getflashplayer" wmode="transparent" />
</object>
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="https://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=10,0,0,0" width="330" height="350"  align="middle" id="fileTwo">
        <param name="allowScriptAccess" value="sameDomain" />
        <param name="allowFullScreen" value="false" />
        <param name="movie" value="fileTwo.swf" /><param name="quality" value="high" /><param name="bgcolor" value="#ffffff" />
        <param name="wmode" value="transparent">	
        <embed src="fileTwo.swf"  name="fileTwo" width="330" height="350" align="middle" quality="high" bgcolor="#ffffff"  allowScriptAccess="sameDomain" allowFullScreen="false" type="application/x-shockwave-flash" pluginspage="https://www.adobe.com/go/getflashplayer" wmode="transparent" />
</object>

Step 3: Flash FILE TWO receives call from javascript and performs function

  • Create a connection variable that listens for the call from javascript (line 2)
  • The first parameter (fileOneClick) is the name of the function javascript called.
  • The second parameter (fileOneClicked) is the function within the flash file that should be called
  • The "str" is the value that was sent from the javascript function (actually it is the value the flash FILE ONE sent to javascript which sent to flash FILE TWO)
1
2
3
4
5
6
7
8
import flash.external.*;
var connection = ExternalInterface.addCallback("fileOneClick", fileOneClicked);
//fileOneClick is function Javascript Called
//fileOneClicked is function within AS that is called
 
function fileOneClicked(str){
	readText.text=str;
}

Download the Source Files [Zip File]

Share

Reply

Comment moderation is enabled. Your comment may take some time to appear.