Connecting Flash and Javascript using ExternalInterface


Published on

From Philly Flash Camp 2009.

Published in: Technology
1 Like
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide
  • Connecting Flash and Javascript using ExternalInterface

    1. 1. That’s a really small rhinoceros. + Connecting Javascript and Flash A Look into the ExternalInterface API
    2. 2. Our Cast of Characters I’m so under- dressed in that photo... Javascript the Rhino Flash the Snake
    3. 3. Pshaw. Q: Why should we work together?
    4. 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. 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. 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. 7. Forget these jokers. Let’s get into some code.
    8. 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. 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. 10. Step 1: Make sure it’s available if (ExternalInterface.available) { // do stuff }
    11. 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. 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:“readyToGo”); Javascript: var flashReady = false; function readyToGo(){ alert('Flash is ready!'); flashReady = true; }
    13. 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. 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. 15. Step 6: ActionScript calls Javascript We’ve already seen this once, with our call to readyToGo. ActionScript:“makeAlert”, messageText.text);
    16. 16. Side-By-Side Calling Javascript from ActionScript: 1. Create the Javascript function. 2. (No registration step required.) 3.“jsFunction”, ‘variable1’); Calling ActionScript from Javascript: 1. Create the ActionScript function. 2. ExternalInterface.addCallback(“externalName”, “internalName”); 3. flashObject.externalName(‘variable1’, variable2);
    17. 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. 18. Snake and Rhino celebrate their new-found friendship. I guess that wasn’t so bad. High five! .... I don’t have arms.