Your SlideShare is downloading. ×
0
Connecting Flash and Javascript using ExternalInterface
Connecting Flash and Javascript using ExternalInterface
Connecting Flash and Javascript using ExternalInterface
Connecting Flash and Javascript using ExternalInterface
Connecting Flash and Javascript using ExternalInterface
Connecting Flash and Javascript using ExternalInterface
Connecting Flash and Javascript using ExternalInterface
Connecting Flash and Javascript using ExternalInterface
Connecting Flash and Javascript using ExternalInterface
Connecting Flash and Javascript using ExternalInterface
Connecting Flash and Javascript using ExternalInterface
Connecting Flash and Javascript using ExternalInterface
Connecting Flash and Javascript using ExternalInterface
Connecting Flash and Javascript using ExternalInterface
Connecting Flash and Javascript using ExternalInterface
Connecting Flash and Javascript using ExternalInterface
Connecting Flash and Javascript using ExternalInterface
Connecting Flash and Javascript using ExternalInterface
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Connecting Flash and Javascript using ExternalInterface

10,369

Published on

From Philly Flash Camp 2009.

From Philly Flash Camp 2009.

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
10,369
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
54
Comments
0
Likes
1
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide
  • Transcript

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

    ×