Thaylin… that's me!

the down lo on ExternalInterface and javascript injection via actionscript 3

Yesterday I did a presentation on ExternalInterface and it’s uses along with how to inject javascript on the page and a few other tidbits at FlashCodersNY.
Here’s the zip file with the project we went over. Whether you were there or not you should still be able to easily follow along since there’s tons of comments on everything.

fcny_examples zip file

This is an eclipse/flexbuilder project but you can pull the example classes out and use the FCNY_Examples.as as your document class I believe.

If you have any questions about it feel free to comment and I’ll answer everything I can.

Posted

in

, ,

by

Thaylin

Tags:

, , , ,

Comments

8 responses to “the down lo on ExternalInterface and javascript injection via actionscript 3”

  1. Andrew Hunt Avatar
    Andrew Hunt

    Yo, Thaylin! Sorry I could not make it, I really wanted to check this out.
    Q: I understood, perhaps mistakenly, that you were going to talk about an approach for injecting a whole library from an external source, say http://blahblah.com/jquery.js into the page.
    Did you talk about such an approach? I didn’t see anything like that in the example files.
    thx,
    A.

  2. Thaylin Avatar
    Thaylin

    Actually yeah I spoke about that but did forget to include it in the example files as that part is with the facebook app I’m working on. I did, however, talk about this on a previous blog post I made. In fact, it’s the blog post just before this one. So if you go to the main page you’ll see it. Or just click here.

  3. Helmut Giese Avatar
    Helmut Giese

    Hi Thaylin,
    I am a seasoned programmer but completely new to FlexBuilder. This ‘JS injection’ looks great and I wanted to try it out. I imported your zip file into FlexBuilder – but apparently I need something else which activates it.
    So the complete newbie’s question: How do I use it?
    Thanks for any additional info
    Helmut

  4. Helmut Giese Avatar
    Helmut Giese

    Hi Thaylin,
    never mind – I found ‘Instructions for running ActionScript examples’ in FlexBuilder’s help and it works (don’t know what I did wrong last night).
    Of course there is another little question: 🙂
    If I let all 3 examples run I see the alert by example 1 followed by the alert of example 3. Is example 2 supposed to produce any visual reaction? Can it be made to produce one (given that I have the most basic environment for your example – just the example and nothing else)?

    Thanks for this sample project touching on an interesting subject.
    Helmut

  5. Thaylin Avatar
    Thaylin

    Hi Helmut!

    The purpose of the 2nd example is to help you better understand adding callbacks and the communication between the JS and flash. There are a few different scenarios you can follow to get a visual response, which for some reason I commented out in the code (oopsie).
    The first option is to uncomment line 41:

    “//setTimeout(timedOut, 1000);”

    This sets a timeout in the JS which then calls the timedOut method after 1000 milliseconds. This calls the flash object that was set in line 37:

    FCNY.flashObj = swfobject.getObjectById(‘flash_flash’);

    since there was a callback added in the flash to listen for javascript calling that traceMe method it will then call the heyTrace method which traces out the string passed into it.

    Another way to test this which gives you an immediate response that you can actually interact with is to enter this in your browsers url while debugging the app in the browser:

    javascript:FCNY.flashObj.traceMe(‘TEST THE TRACE ME METHOD’)

    This will show the TEST THE TRACE ME METHOD text in the debuggin console.

    Hope this helps a bit more!

    [Edit]
    It’s important to realize, also, that the code within the CDATA tags is NOT actionscript but javascript. If you’re using the latest Safari browser, you can view this in Develop>Show Web Inspector>Scripts which you can then peruse the scripts on the page. There you’ll see the code you set within the actionscript. With FireFox you can see it with the Firebug extension.

  6. Helmut Giese Avatar
    Helmut Giese

    Hi Thaylin,
    many thanks for the explanation.
    Now I will have to study all of this for a while …
    Best regards
    Helmut

  7. mike connor Avatar
    mike connor

    the 2nd example is not working for me. I’m not getting the trace back.

  8. Thaylin Avatar
    Thaylin

    Check to make sure this is set properly.

    //SECOND WE NEED TO KNOW WHAT THE FLASH OBJECT IS TO ADD OUR METHOD CALLS
    // THIS ID IS SET IN THE SWF OBJECT CODE WITH A PARAMETER THAT’S PASSED AS
    // var attributes = {id: “flash_flash”};
    // WHICH IS THEN PASSED INTO THE SWFOBJECT

    FCNY.flashObj = swfobject.getObjectById(‘flash_flash’);

    Otherwise the javascript won’t know what to push any method calls to.

Leave a Reply