BCmoney MobileTV

Image via Wikipedia

Inspired by several tutorials I did back in University, I decided to update a little script to pass data in between Flash and AJAX using only pure JavaScript and ActionScript to talk to one another.

In fact, this was arguably even easier back in ActionScript 2.0, where you could simply reference JavaScript variables directly. Now, there is a slightly more complicated API, but before we get ahead of ourselves, let’s list all possible options…

Flash to AJAX

1. FABridge – Flex to Ajax Bridge (requires code from Adobe)
2. HTTP request to server-side intermediary (not the most efficient)
3. Flash Cookies (hard to handle/delete properly)

AJAX to Flash

1. Flashvars + URL Parameters (good-old fashioned Flashvars never fail)
2. Remote Scripting (not the most secure)
3. Cookies (not too reliable)

As mentioned, just the act of making an HTTP request to load a URL got slightly more complex from AS2 to AS3.

In ActionScript 2.0 we had:

getURL(“http://domain.com/webpage.html”,”_blank”);

In ActionScript 3.0, for better or worse we now have:

my_btn.addEventListener(MouseEvent.CLICK, getURL);

function getURL(event:MouseEvent):void {
var url:URLRequest = new URLRequest("http://www.domain.com/webpage.html");
navigateToURL(url, "_self");
}

Above, I’ve linked to examples from which I drew the inspiration (ahem… borrowed some initial code) for this exercise. There are two classic posts from the Flash developer community that provided my very first use-cases and ways to implement this Flash-to-JS communication though. The first is Flash Interactive with JavaScript by F. Permadi, and the second is Passing Variables Around from HTML to Flash, where Jesse Stratford demonstrated indirect interactivity between JavaScript and ActionScript that I had thought impossible prior to reading it, passing all values via URL rather than relying on internal and constantly changing Flash APIs. Once you could bridge the web into Flash though, it opened up a world of possibilities, and suddenly the Macromedia framework became more than just a cool little tool for hobbyist web animators, game designers and geeks. Totally customizable and interactive SWF movies were possible, for example, Jeroen Wijering’s JW Media Player and countless other amazing Flash components.

In honor of the original works, I’m releasing an update for how to bridge flash to JavaScript using a combination of the methods prescribed above for going from AJAX to Flash and back again. I’ll start with simple URL-based value passing and as time permits will add Flex Ajax Bridge and Cookies, so be sure to check back later:

UPDATE: (2011-12-17) Now, in the latest version of Flash we also have the newer Flex 4.0 approaches such as Flex iFrame, as users seem to be embracing Adobe’s attempts to merge its Flash suite and FlexBuilder IDE with the open source release of FlashBuilder and more HTML5.

Related Articles

• The rise of JavaScript micro-frameworks (greatfinds.icrossing.com)
• Flash Developers Take Notice: Top 10 Superlative Flash Frameworks (pixelcrayons.com)
• JavaScript and Browser Support (news.dice.com)
• JavaScript On the Rise (i-programmer.info)
• Augmented Reality comes to JavaScript (creativejs.com)
• Export to HTML5 from Flash Professional (blogs.adobe.com)