Kevin Lynch Archives

contact: contact

May 10, 2005

ActionScript/JavaScript integration


There's increasing interest in connecting ActionScript in Flash with JavaScript on web pages, and we've been working on techniques for accomplishing this well. An example of this working today is the Macromedia weblog aggregator report that was developed by Christian Cantrell and Mike Chambers. Clicking on the feed names loads new HTML content in place on the page as well as updates the chart in Flash. Clicking on bars in the Flash chart also communicates out to the page to load new HTML content in place below, all without refreshing the whole page.

Technically, this works using two techniques:

1. Calling from ActionScript to JavaScript on a web page. This is accomplished by using getURL in ActionScript, for example a function named "displayPost" can be called from ActionScript to JavaScript:

  getURL("javascript:displayPost(" + postId + "," + feedId +")");

2. Calling from JavaScript to ActionScript. This was more challenging to do successfully across browsers, as the only time browsers support passing variables into Flash is when it's first loaded on the page. We've solved this by creating a JavaScript class that dynamically loads a very small Flash object to receive a function call, which immediately passes that information to the target Flash app on the page.

This kind of connection can enable a lot great combinations of Flash and JavaScript on web pages. We're working on a toolkit that contains a better description of these techniques and the code that supports using them.

10 May 05 03:19 PM

Comments

eyezberg says:

Thanks for this, can't wait to see that toolkit. Blogged it is now ;-)
Joe

Posted by: eyezberg on 11 May 05 02:02 PM

Ikezi says:

Hey there...

Not sure I fully agree with #2: For setting variables in flash from Javascript, what about assigning the movie a reference, and calling the SetVariable() method? Like window.document.myFlash.SetVariable("myVar", sendText); I have done this with success in a cross-browser implementation; alternatively, one can even use FSCommands. In conclusion, I dont think the only time you can load vars into flash is when its first loaded.

Please correct me (in detail) if I am wrong.

Thanks!

e k z

Posted by: Ikezi on 11 May 05 03:22 PM

jackie says:

Awesome!

Posted by: jackie on 16 May 05 01:06 AM

Noel says:

I would be careful with the getURL(javascript) call you are making. We needed to do something similar in order to support a metrics system which was javascript based. You can only make one javascript call from Flash within an unpredictable period of time (it's not tied to a number of frames or a specific amount of time, and it may vary between browsers). What this means is, if you make multiple calls to javascript within a short period of time, only the last call is actually going to happen.

You probably want to build a queueing system to space out your javascript calls and allot enough time between them for the call to pass through.

Posted by: Noel on 18 May 05 11:01 AM

Pete Freitag says:

This deserves a new buzz word, AFLAX?

Posted by: Pete Freitag on 23 May 05 02:02 PM

Kevin Lynch says:

Hi-

Thanks for the comments.

Ikezi, on the SetVariable and FSCommand approach -- this doesn't work reliably in current browsers (for example, see post at http://www.markme.com/teammmflash/archives/005316.cfm ), so this is why we needed to come up with a more reliable approach.

Noel, thanks for the point about Javascript call timing, we will look into that for the kit we're developing around this.

Posted by: Kevin Lynch on 23 May 05 11:35 PM

Lisa Giovanni says:

Thanks Kevin. That thing looks awesome!

Lisa G.
http://scifi.pages.at/bloggy/

Posted by: Lisa Giovanni on 30 May 05 11:35 AM

Comments on this entry are now closed

You can of course make comments in your own blog, and Trackback continues to be available to reference your post here.