Bi-directional Actionscript/Javascript communication is something that has been out for a while, but some Flash designers/developers still are saying, "I didn't know you could do that."

Well you can! And with just a little bit of code.

In the bad old days of AS2, Actionscript-to-Javascript was handled using fscomand(). In my experience with fscommand(), there were a lot of browser issues and its functionality was much more limited. Now, in AS3, we have a fully functional API that uses the ExternalInterface class.

EXAMPLE

ACTIONSCRIPT
We are going to do some tweening here, so we need to import a few Tween classes:

import fl.transitions.Tween;
import fl.transitions.TweenEvent;
import fl.transitions.easing.*;

Next, we set up our calls using the ExternalInterface class.

//call to javascript
ExternalInterface.call("sendToJavaScript");

//call from javascript
ExternalInterface.addCallback("sendToActionscript", callFromJavaScript);

Once you have set up ExternalInterface, you have established 2-way communication, which means code can now begin to flow freely back-and-forth between Actionscript and Javascript functions.

So now the next thing is to create the call to Javascript:

function callFromJavaScript(dir):void 
{
  if(dir == 'right')
  {
    var tweenR = new Tween(box, 'x', None.easeNone, box.x, 145, 1, true);
  }
  if(dir == 'left')
  {
    var tweenL = new Tween(box, 'x', None.easeNone, box.x, 23, 1, true);
  }
}

JAVASCRIPT
First you need to write a function that will detect your operating system. This is important because Microsoft uses "Document" when referring to the page and Mac uses "Window."

function getFlashMovie(movieName) {
  var isIE = navigator.appName.indexOf("Microsoft") != -1;
  return (isIE) ? window[movieName] : document[movieName];
}

Once we have established which OS we are working with, we need to write a function that will make the call to Actionscript.

function callToActionscript(str) 
{
     getFlashMovie("nameOfFlashMovie").sendToActionscript(str);
}

HTML

On a simple button, you only need to call the function

callToActionscript('right')

depending on which direction you are asking the box to slide.

At this point, we have only sent a call to our Actionscript but nothing has come back from it . To illustrate the call back to Javascript, we can do the following.

For the call back to Javascript, we add this into our Actionscript:

this.addEventListener(Event.ENTER_FRAME, callJs);
function callJs(e:Event):void
{
	ExternalInterface.call("sendToJavaScript", box.x);
}

We already added this function to our Actionscript; however, two things have changed. First, the ExternalInterface is placed inside a function, which is being called by an Enter Frame eventlistener. Second, we have added the argument "box.x," which will be passed to the Javascript function.

And finally, we add the following function to the Javascript:

function sendToJavaScript(val)
{
	document.getElementById('boxX').value = val;
}

And that's it! If you would like to see the source files, you can download them all here.

When testing files using the ExternalInterface API, make sure your files are either on a live site or are running off a local server on your machine.

As a final note, I want to add that I really like this functionality. In fact, any technology that opens up Flash to other elements on an HTML page is wonderful and welcomed in my book. There has always been a disconnect between Flash and "the rest" of the web, and I have become frustrated by the notion of Flash being inaccessible and self-contained. Flash can be both, but it doesn't have to be! Bi-directional communication is a simple and easy way to start breaking down these barriers.