Flash and AJAX Integration Example

Kevin Lynch is at the O’Reilly AJAX Summit in
San Francisco today and tomorrow. He gave a presentation to the group earlier today
about integrating Flash and AJAX, and he demoed a cool new proof of concept Mike
Chambers
and I put together for him. We’ve integrated Flash and AJAX before
for the MXNA
reports
, but the new MXNA
Category Feed Report
takes it to a new level by using two-way
data exchange between Flash and JavaScript. First of all, click on the category
names, and notice how the feed names reload below without reloading the page. Pretty
standard "AJAX" stuff, really, but now click on a feed name and notice how both
the Flash chart and the posts below the chart update without the page refreshing.
When you click on a feed name, we’re using JavaScript to pass data into the Flash
movie which then updates itself using the MXNA
web services
. When you click on
a bar in the chart, we pass data from the Flash chart into JavaScript to load the
selected post at the top of the list. Overall, I think it’s a very good experience.

Ajaxian is reporting on the summit, and
wrote a
good summary
of Kevin’s presentation. There will be lot more information available
on how we did this with lots of code and documentation (along with a more generic,
reusable framework), but for now, feel free to view source and steal. You can
even right-click on the Flex chart and view its source, as well.

14 Responses to Flash and AJAX Integration Example

  1. that is uber duper schweet! What an envious job Kevin has.DK

  2. nicolas says:

    very impressive

  3. Very nice. Love the no-refresh approach. It looks like the “synergy” of Flash & (X)HTML will be taken more serious.

  4. PaulC says:

    Can you give some more detail on your JS to Flash communication?

  5. How many browsers have you tested this on? In the past when we’ve looked at even simple JavaScript/Flash communication, we saw lots of bugs and effectively abandoned it as a viable solution. It would be great if this became an option.-MB

  6. Paul: We will be releasing lots of code and documentation soon. For now, view source and grab the code.MB: It’s been tested in FF, IE, and Safari. I’m pretty sure this will work on all modern browsers (not counting IE/Mac).

  7. PaulC says:

    Thanks Christian. I only ask because it’s a pain for e-Learning developers working with the SCORM API. Hopefully this will streamline things quite a bit.

  8. Christian,Very cool. Thanks for lunch at FF. I am very impressed with the app and the execution of the app.

  9. Ayush says:

    I grabbed the code but for making the Javascript to ActionScript communication work, don’t we need JavascriptToFlashProxy.swf which FlashProxy.js uses?Could you share the code in there?

  10. Christian Cantrell says:

    It’s right there in the same directory with everything else. Go ahead and grab it!

  11. Ayush says:

    Ok, this is my second day with Flash/Flex and even ActionScript… so this is a bit embarrassing.I know JavascriptToFlashProxy.swf exists at http://weblogs.macromedia.com/mxna/reports/categoryFeedReport/JavascriptToFlashProxy.swf but how do I ‘download/get’ it? When I hit that url, the browser renders the JavascriptToFlashProxy.swf as a flash component on the page.I was able to grab the other pieces by looking at the page source and from http://weblogs.macromedia.com/mxna/reports/categoryFeedReport/MXNACategoryFeedReport.mxml.htmlThe flex platform (and documentation) seems awesome, the learning curve and time-to-productivity is simply great. I’m trying to build a small flex app which demonstrates two way JavaScript/flash communication and also XMLRPC for calling server side logic.