Posted by Anthony in Flash, Tutorials, Web Design tagged actionscript 3, Flash, html, javascript

I’ve recently been working on a number of Flash sites that require communication back and forth between the Flash SWF file and the parent HTML page. This is relatively easy to do, but includes a few “gotcha’s” that should be addressed. Below is a list of items that you will need to make sure you follow that will make your Flash be able to communicate with the outside world, and vice-versa.

Step 1: Embed your Flash SWF file in your HTML page

When embedding your SWF file, give your object tags the same id and name. Your non-Internet Explorer object tag should have the id, and your IE object tag should have the name. And again, both should be set to the same value. (In this example, these attributes are set to “helloSWF”.) Additionally, you need to set the allowScriptAccess attribute of your Flash object to either “sameDomain” or “always”. Without this attribute set, you won’t be able to have Flash communicate with the HTML file. At a basic level, the object tag will need to look something like this:

Step 2: Write a JavaScript function that targets and calls to Flash

There must be a JavaScript function that acts as the mediator between HTML and your Flash SWF file. In this JS function, you need to access the SWF file. This is done by referencing the id/name (see step 1). In its simplest form, this JS function should look something like this:

function jsSayHello() {
   var mySWF;
   mySWF = document.helloSWF;
   if (!mySWF) {
      window.helloSWF;
   }
   mySWF.sayHello();
}

In this example, you’ll notice a variable that get set to document.helloSWF. If you’re using a browser that doesn’t recognize the ‘document‘ syntax, the conditional statement catches it, and uses ‘window‘ to reference the SWF file. Once the variable is set, you can simply call the function you wish to call in your Flash file by using the syntax “jsVariable.flashFunctionName()“. In our example, this is the line “mySWF.sayHello();“.

Step 3: Set functions and ExternalInterface properties in Flash

In your Flash file, you need to import the ExternalInterface Class, and add a callback that listens for the function being called from outside of the Flash file. When adding the callback, you also need to specify the function to run in your Flash file when it gets instructed to do so from the outside world. The code snippet below provides the basic structure of what you’ll need:

import flash.external.*;
ExternalInterface.addCallback('sayHello', helloWorld);
function helloWorld():void {
   // Insert actions
}

In this example, you’ll notice the addCallback accepts two parameters: (1) a String that is the function called from outside of Flash, and (2) a function inside of Flash to run.

If you want to have Flash call out to JavaScript, you can use the ExternalInterface.call method to call a JavaScript function. For example, if you wanted to call a JS function named “hiFromFlash”, the ActionScript code would look something like this:

ExternalInterface.call('hiFromFlash');

If you need to pass parameters, simply add them after the function call, separated by commas.

So there you have it. With these three items, you will be all set to have your Flash file be able to receive instructions from its parent file. Until next time, happy coding!

Download source files »