Altering JavascriptFlashGateway

Posted on 10 September 2006 (03:34 PM)

In my current project, some communication between Javascript and Actionscript is needed. While a couple of years ago, this was hard to achieve and relied on unstable techniques that were not very cross-browser compatible, Macromedia made a developer's life a little easier by introducing the JavascriptFlashGateway.

JavascriptFlashGateway makes it easy to call Actionscript functions from a Javascript file. All you need is a Javascript-file and a SWF-file and you're good to go. More documentation on the installation process can be found here and here.

Enhancing it a little

Filled with child-like enthusiasm I installed the files on my server and started experimenting. The syntax is very easy to use, so I was up and running in no-time.

Yet when I started adding HTML to the page, I noticed the JavascriptFlashGateway erasing all original markup and replacing it with its FlashTag code. How rude!

Naturally, I tried the following... (full syntax description can be found in the link above)

  1. window.onload = function ()
  2. {
  3. var uid = new Date().getTime();
  4.  
  5. var flashProxy = new FlashProxy(uid, 'JavaScriptFlashGateway.swf');
  6.  
  7. var tag = new FlashTag ('test.swf',550,400);
  8. tag.setFlashvars ('lcId='+uid);
  9. tag.write(document.getElementById ('content_div'));
  10.  
  11. flashProxy.call('foo','arg');
  12. }
  13. Download this code: /code/altering_javascript_flash_gateway1.txt

Notice how I replaced document with document.getElementById('content_div'), in comparison with the installation tutorial.

Nothing happened! A quick look at the Error Console made clear that doc.write is not a function.

I fired up JavascriptFlashGateway.js and searched for the write method of the FlashTag class. The code I found was:

  1. FlashTag.prototype.write = function(doc)
  2. {
  3. doc.write (this.toString());
  4. }
  5. Download this code: /code/altering_javascript_flash_gateway2.txt

Obviously, this won't work on HTML-objects (like one returned by document.getElementById ()), because there is no write method available as a member of those objects.

Luckily, it takes just a tiny alteration to extend this method. Change the above function to the following:

  1. FlashTag.prototype.write = function(doc)
  2. {
  3. (doc == document) ? doc.write (this.toString()) : doc.innerHTML = (this.toString());
  4. }
  5. Download this code: /code/altering_javascript_flash_gateway3.txt

Now the write method checks to see if the passed argument is document, or something else. If so, it uses write(), if not, it changes the innerHTML property of an HTML-object. If you're feeling lazy you can download the altered file here as a RAR-archive.

Enhancing it even a little more

This should work in most cases, but I might be wrong. I would love to receive some feedback on this alteration, in order to make it perform even better. So feel free to leave a comment if you can improve my code.

Native support

I wanted to email the creators of this fine product, Christian Cantrell and Mike Chambers, but I couldn't find a contactpage on either of the two weblogs. Hopefully they will read this article and include this alteration in future releases of JavaScriptFlashGateway.

Back to top

Filed under Javascript, Actionscript and Flash

Comments:

  1. 31 July 2008 (03:16 AM) by Rexx Rules

    Hi, I hate spam too. I was wondering if you have considered incorporating CAPTCHA into this form to keep robots and spammers OUT!

    Thanks,

    Rexx

Leave a comment

RE: Altering JavascriptFlashGateway

Note to spammers: rel="nofollow" will be added to links. If I consider your comment spam, your IP-address might get blocked.

HTML not allowed. URLS will be auto-linked. Maximum length is 1250 characters.

I understand this is inconvenient, but the spam I'm receiving on this website is driving me nuts. Please forgive me and cope with it until I find a better solution.

Mandatory fields are marked by an asterisk (*).

Increase textarea-size Decrease textarea-size

Back to top

Preferences

These settings will be saved for your convenience.