Antler

The Audi A4 banner & calling functions in Flash from JavaScript · Tuesday June 3, 2008 by Rudolf Vavruch

The original brief was to create a banner that would show off the strip of daylight lights under the main headlights. The solution the brainstormers came up with was a banner which would change from day to night as the mouse moved across the page, with the strip of day lights always on, and the headlights flaring on at night.

Go to the South African Audi site (while the banner is still up) to see what I mean. As you move your mouse left and right across the page the banner in the top left should change.

I had used the Flash / JavaScript Integration Kit to communicate between the Flash plugin and the rest of the browser before, but I had found it a mission to setup and get going, the documentation counter-intuitive and I suspected that it was slower than it should be.

Struggling to figure out how to successfully pass parameters from JavaScript to Flash I stumbled across the OSFlash’s page on the subject, from there I was guided to ExternalInterface, the answer to my problems. (where have you been all my life, ExternalInterface? I've been around since Flash 8, toots.)

It is a breeze to setup and use. Just follow these simple steps, firstly in your ActionScript class:

import flash.external.ExternalInterface;

class JSChatter {
	public function JSChatter() {
		// this sets up a function that can be called from JavaScript
		ExternalInterface.addCallback("jsMessage", this, jsMessage);
	}
	
	public function jsMessage (newMsg:String):Void {
		// this function can be called from JavaScript, complete with parameter
	}
}

… in your JavaScript:

flash = (navigator.appName.indexOf ("Microsoft") !=-1)?window["flashId"]:document["flashId"];
flash.jsMessage('what wonder hath ExternalInterface wrought?');

… finally in your HTML, make sure you set the name / id of your Flash embed HTML to the same id you used in the JavaScript (in this instance, it is "flashId").

That’s all it takes to call functions in ActionScript ← JavaScript. I have not experiemented with communication in the opposite direction, ie. from ActionScript → JavaScript, but I suspect it is as simple.