From Philly Flash Camp 2009.

1. That’s a
really small
rhinoceros.
+
Connecting Javascript and Flash
A Look into the ExternalInterface API

2. Our Cast of Characters
I’m so under-
dressed in that
photo...
Javascript the Rhino Flash the Snake

3. Pshaw.
Q: Why should we work together?

4. 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 file. How can
I send these events to Google
✤ “I want to be able to filter this data table Analytics?”
using visual controls that aren’t part of
standard HTML.”

5. 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.

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

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

8. Two functions
ActionScript:
function showMessage(msg:String):void{
msgHolder.text = msg;
}
Javascript:
function makeAlert(msg){
var label = document.getElementById('fromFlash');
label.textContent = msg;
}

9. 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

10. Step 1: Make sure it’s available
if (ExternalInterface.available)
{
// do stuff
}

11. 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.)

12. Step 3: Let Javascript know that you’re ready
You should always start by having the Flash file 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;
}

13. 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.
}
...
}

14. 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.

15. Step 6: ActionScript calls Javascript
We’ve already seen this once, with our call to readyToGo.
ActionScript:
ExternalInterface.call(“makeAlert”, messageText.text);

16. 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);

17. 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

18. Snake and Rhino celebrate their new-found friendship.
I guess
that wasn’t so bad.
High five!
.... I don’t
have arms.