« Google Accelerates the Web | Main | I'm Looking for AJAX Applications »

May 09, 2005

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.

Posted by cantrell at May 9, 2005 07:21 PM | References

Related Entries

Comments

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

DK

Posted by: Douglas Knudsen at May 9, 2005 08:23 PM

very impressive

Posted by: nicolas at May 9, 2005 08:38 PM

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

Posted by: Chris Charlton at May 10, 2005 11:53 AM

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

Posted by: PaulC at May 10, 2005 01:51 PM

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

Posted by: Mark Belanger at May 10, 2005 03:57 PM

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

Posted by: Christian Cantrell at May 10, 2005 04:47 PM

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.

Posted by: PaulC at May 10, 2005 07:51 PM

www

Posted by: lbf at May 11, 2005 03:49 AM

www

Posted by: lbf at May 11, 2005 03:50 AM

Christian,

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

Posted by: Curtis J. Morley at May 11, 2005 06:19 PM

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?

Posted by: Ayush at May 18, 2005 03:25 PM

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

Posted by: Christian Cantrell at May 18, 2005 03:56 PM

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

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

Posted by: Ayush at May 18, 2005 05:19 PM

Wow. This does work :)

IE disables it but Firefox's Save As worked well for getting http://weblogs.macromedia.com/mxna/reports/categoryFeedReport/JavascriptToFlashProxy.swf

Needed one more item: http://weblogs.macromedia.com/mxna/reports/categoryFeedReport/JavaScriptProxy.as

Posted by: Ayush at May 19, 2005 02:20 PM