Using JavaScript to Communicate With Flash

JavaScript to Flash

Lately I have been working on this project that requires JavaScript to communicate with the Flash on the page. It is something that I have done in the past, but this time I was running into issues that were giving me problems. Sometimes the issues were in all browsers, but many times the errors were only showing up in Internet Explorer. Here I will go through the steps to properly set up your Flash and JavaScript and explain a couple ways to avoid seemingly erroneous errors so communication between the to can take place.

Interact With the Example

Test it out for yourself below to discover the capabilities of communicating back and forth between Flash and JavaScript, or launch example in a new page. Further explanation is given further below.

Input HTML text in the box below:

Get Adobe Flash player

Text From Flash (this is HTML)

 

Setting Up the Flash

If you are using an external class, the package for ExternalInterface is import flash.external.ExternalInterface; To send a call from Flash to Javascript, use ExternalInterface.call('jsFunction', params). Calling a Flash method from Javascript requires a registration of the method through ExternalInterface.addCallback('jsCallerFunction', flashFunctionName). Registration of the method can take place at any time, but needs to be registered before the user has access to it from within the JavaScript. It is a good idea to check to ensure the ExternalInterface is available before running such functions as well as use catch exceptions to avoid any uncaught errors:

if (ExternalInterface.available) {
	try{
		ExternalInterface.addCallback('setFlashText', setText);
		//ExternalInterface.call("printCard");
	}catch (error:Error) {
		//trace(error)
	}
}

Setting Up the JavaScript

The best way to set up your Flash Object on your page so that all browsers read it the same is through SWFObject. If you code your object directly, the Flash method set up in the Flash through the ExternalInterface may not get registered properly and therefore not available for use in IE. There are other scripts out there that help with this issue, but I have found that SWFObject works the best and is now standard use.

Since IE views the Flash Object differently from other browsers, it is necessary to do a bit of logic when referencing the SWF to call the desired Actionscript method:

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

Once that is ready you can call your ActionScript by using the name of the SWF object used:

<code>
function sendToFlash(val){
	getFlashMovie('jsFlash').setFlashText()
}
</code>
<input name="submit" type="button" value="Send Text To Flash Below" onclick="sendToFlash(this.form.textToFlash.value)"  />

Call JavaScript From Flash

This call is even simpler than the previous as it requires less to reference the script. It is directly accessed by using ExternalInterface.call("jsFunction", params). Where “jsFunction” is the string name of the JavaScript method to be called. As long as the jsFunction method is set up somewhere within your JavaScript, it is easily accessed.

Avoiding Pitfalls

There are a couple things I have found that can cause you major head when trying to communicate with the Flash through JavaScript.

  1. First, IE will not allow the Flash to be nested within any <form> tags. This is a known issue with Adobe and can be a pain to workaround if your SWF needs to be nested within a form. If the form can go outside the SWF Object, then do it, otherwise IE will give you errors when you call the Flash Method from the JavasScript saying it is not available.
  2. There are certain sandbox security issues when dealing with ExternalInterface to stop malicious scripting. This means that in order to test these methods out may (however not always) require posting on an external server to pass values to and from Flash.
  3. One other issue that I have run into occurs when passing parameters/arguments to the Flash; make sure they are valid parameters that are available in the registered Flash’s method. If the parameters are null or invalid, your Flash will throw an error and may be difficult to track down. This may go without saying, however, this has happened to me where I was thinking the Flash wasn’t registering method through the ExternalInterface class, when it was simply a bad parameter that I was passing through and the DOM didn’t know what to do with it.

Conclusion

Communication with Flash through JavaScript is highly useful and can done easily if you understand the capabilities and limitations. If you have any questions about its use, please feel free to leave a comment below.