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.

http://www.alidw.com	561
http://www.bri-lance.net	226
http://www.andredickson.net	25
http://www.slideshare.net	24
http://blog.andredickson.net	5
http://172.16.194.201	4
http://cache.baidu.com	1
http://xianguo.com	1

Connecting Flash and Javascript using ExternalInterface

by Bri Lance on Nov 08, 2009

Accessibility

Categories

Tags

Upload Details

Usage Rights

8 Embeds 847

Statistics

Connecting Flash and Javascript using ExternalInterface — Presentation Transcript