Connecting Flash and Javascript using ExternalInterface

That’s a
really small
rhinoceros.

+

Connecting Javascript and Flash
A Look into the ExternalInterface API

Our Cast of Characters

I’m so under-
dressed in that
photo...

Javascript the Rhino Flash the Snake

Pshaw.

Q: Why should we work together?

A: Because it lets you solve design problems
that you couldn’t otherwise solve!

✤ “I want these embedded links in the ✤ “I want to be able to select data from
text I’m reading to take me to different this Flex chart and then load an HTML
chapters in this Flash movie.” data table onto the page for a deep dive
into the numbers.”
✤ “I want this text transcript to scroll
while my Flash video is playing, and to ✤ “I want to do usage reporting on user
highlight the current line.” interactions with my .swf ﬁle. How can
I send these events to Google
✤ “I want to be able to ﬁlter this data table Analytics?”
using visual controls that aren’t part of
standard HTML.”

Two Categories of Solutions
1. Outbound Control: Flash sends messages that affect other parts of
the page, outside of the swf

Yeah, I’m
the man!
I mean snake.

Two Categories of Solutions
2. Inbound Control: Events that happen outside of the swf ﬁle control
what it displays
Hey, don’t tread
on me.

lol

Forget these jokers.
Let’s get into some code.

Two functions
ActionScript:

function showMessage(msg:String):void{
msgHolder.text = msg;
}

Javascript:
function makeAlert(msg){
var label = document.getElementById('fromFlash');
label.textContent = msg;
}

The steps

1. Make sure ExternalInterface is available

2. Set up your ActionScript callbacks

3. Have Flash call out to Javascript

4. Find your Flash object in the DOM

5a. Javascript calls ActionScript functions

5b. ActionScript calls Javascript functions

Step 1: Make sure it’s available

if (ExternalInterface.available)
{
// do stuff
}

Step 2: Set up callbacks in ActionScript

ExternalInterface.addCallback("flashIsBetter", showMessage);

Name that will be used Internal ActionScript
by Javascript to call the function name.
function.

(These two names can be the same or different.
ExternalInterface will take care of mapping between the two.)

Step 3: Let Javascript know that you’re ready
You should always start by having the Flash ﬁle call out to the
Javascript. Otherwise, Javascript may try to call your ActionScript
functions before they are loaded and ready.

ActionScript:
ExternalInterface.call(“readyToGo”);

Javascript:
var flashReady = false;

function readyToGo(){
alert('Flash is ready!');
flashReady = true;
}

Step 4: Get your Flash object in Javascript
HTML:
<object id="demo"...> This is the Flash object on the page.
... Note that the id and name has been
<embed name="demo".../> set, so that you can get to the object
</object> easily with javascript.

Javascript:

function sendValueToFlash(){
var flashObj;
if (navigator.appName.indexOf("Microsoft") != -1) {

flashObj = window["demo"]; The IE way.
} else {

flashObj = document["demo"]; The regular way.
}
...
}

Step 5: Javascript calls ActionScript

Here we will use the callback that we set up in Step 2:
ActionScript:
ExternalInterface.addCallback("flashIsBetter", showMessage);

Javascript:
var text = document.getElementById('valueForFlash').value;
flashObj.flashIsBetter(text);

We are using the external function name
that was registered with addCallback.

Step 6: ActionScript calls Javascript
We’ve already seen this once, with our call to readyToGo.

ActionScript:

ExternalInterface.call(“makeAlert”, messageText.text);

Side-By-Side
Calling Javascript from ActionScript:
1. Create the Javascript function.

2. (No registration step required.)

3. ExternalInterface.call(“jsFunction”, ‘variable1’);

Calling ActionScript from Javascript:

1. Create the ActionScript function.

2. ExternalInterface.addCallback(“externalName”, “internalName”);

3. flashObject.externalName(‘variable1’, variable2);

A Few Gotchas
1. Flash objects in form tags break ExternalInterface in IE

2. Javascript operators in the name of the swf object break

ExternalInterface in IE

3. Ampersands get messed up when passed from Javascript

to ActionScript

Snake and Rhino celebrate their new-found friendship.

I guess
that wasn’t so bad.
High ﬁve!

.... I don’t
have arms.

Connecting Flash and Javascript using ExternalInterface

Recommended

More Related Content

What's hot (18)

Similar to Connecting Flash and Javascript using ExternalInterface (20)

Recently uploaded (20)

Connecting Flash and Javascript using ExternalInterface