Javascript - ActionScript and JavaScript

ActionScript and JavaScript

JavaScript can only communicate with ActionScript if either LiveConnect (Netscape 3-4 and Opera 6+) or ActiveX (Explorer on Windows and WebTV) is supported.

This script should theoretically work in Netscape 3, but unfortunately this page may crash the browser. Even if it doesn’t, nothing happens on my computers.

ActionScript can always communicate with JavaScript.

On this page I explain how to call ActionScript functions from JavaScript. Unfortunately this communication isn’t very well supported. Calling JavaScript functions from Flash is a whole lot simpler.

JavaScript to ActionScript

JavaScript cannot directly communicate with ActionScript because the ActionScript is contained by a Flash movie. Natively a browser doesn’t understand .swf files, hence it needs an extra program: the Flash plugin. But Flash only "borrows" a rectangle of space from the browser, where it is allowed to do its own thing. The browser itself still doesn’t understand what happens in it (and doesn’t need to, either).

So for communication between the browser (JavaScript) and the plugin (ActionScript) we need an extra technology that opens a connection between the two. Neither the browser itself nor the Flash plugin takes care of this all by itself.

There are two technologies that allow JavaScript to communicate with ActionScript:

LiveConnect, supported by Netscape 3 and 4 (but not by Netscape 6) and Opera 6. This is a Java program, so Java must also be enabled.
ActiveX, Microsoft’s general-purpose object-oriented programming technology set. ActiveX is only supported by Explorer on Windows (and Microsoft-owned WebTV), so it won’t ever work in Explorer on Mac.

However, reader Richard Kenneth has found a solutions for JavaScript-to-Flash communication in Explorer on Mac by using FlashVars and LocalConnections (though I myself don't know what these are). View his example for more information.

If neither technology is supported JavaScript cannot communicate with ActionScript (or, as far as I know, any plugin).

ActionScript to JavaScript

Fortunately the reverse is quite simple. ActionScript can always communicate with JavaScript by the getURL() command. It is the ActionScript equivalent of location.href: using this method causes a new page to be loaded by the browser. If you specify the javascript: protocol and give the name of a function, the function gets executed, just as if you’d typed it into the location bar.

getURL('javascript:fromFlash()')

ActionScript also knows fscommands which may communicate with JavaScript. However, I’ve heard they’re not as reliable as getURL(). I haven’t yet studied these commands.

Example

Try to play the Flash through a JavaScript command. The movies have been programmed so that playing them loads the other movie. WebTV reacts to the change only after you execute one of the other two tests.
Try to change the src of the embed/object. This is currently not supported by any browser but I included the test anyway.
Click on the CLICK ME button in the movie to call a JavaScript function from Flash. It should show an alert. It should work in all browsers. (The Flash movie disappears in Opera 7 beta, though. This is not supposed to happen)

Adding a Flash movie

A Flash movie is added to a page in the following way:

<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" id="themovie"
 codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=5,0,0,0"
 width=275 height=200>
 <param name=movie value="pix/test.swf"> <param name=quality value=high>
 <param name=bgcolor value=#ffffff>
 <param name="swliveconnect" value="true">

 <embed src="pix/test.swf" quality=high bgcolor=#ffffff  width=275 height=200
 	type="application/x-shockwave-flash" name="themovie"
 	pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?p1_prod_version=shockwaveflash"
 	swliveconnect="true"></embed>
</object>

Please note the following important points:

You need both the object and the embed tag. From what I’ve heard that’s not because of different browsers supporting different tags, but because Flash can be installed in two different ways. Details aren’t yet clear to me.
Give the object and the embed the same name for identification. The object may have an id instead of a name, but the embed may not: Netscape 4 expects a name attribute.
You must include the swliveconnect=true bit in both tags, it opens the Flash movie for LiveConnect (and hence JavaScript) manipulation.
Any URL in a Flash movie is relative to the page, not to the movie.

The function

The JavaScript function to give an ActionScript command is very simple. The basic idea is:

document.themovie.Play();

Go to the object themovie and execute its method Play(). This is a standard ActionScript method that makes the movie play. In the example, the movies are programmed so that playing them loads the other movie.

As usual the code becomes somewhat more complicated because of object detection to prevent error messages.

function tryPlayFlash()
{
	if (document.themovie)
	{
		if (document.themovie.Play)
			document.themovie.Play();
		else
			alert('Cannot communicate with ActionScript')
	}
	else
		alert('Can\'t find the Flash movie')
}