Flash and JavaScript cross communication p. 1

The content of this tutorial is out of date. Flash (and the underlying ActionScript language) has moved on. I have, regrettably, not moved on with it.

Flash is currently a great deal more capable, but also much more complex, than it was when I wrote this tutorial.

I have kept this content online because I still get mail from readers who have found it useful. While I am very pleased by this, I want to make it clear that this material can no longer be considered “best practice,” and I can no longer offer support.

If you can use it, you are welcome to it. The code has been tested and refined thanks to input of many generous readers. I offer it as is.

1 — Introduction

Flash movies don’t have to be self-contained, sealed objects on a web page. In certain circumstances it can be extremely useful to be able to control an embedded Flash movie from the HTML document that contains the movie.

Flash has had the capacity to send to and receive from JavaScript scripts for some time (fscommand in earlier versions), but Flash 8 introduced the ExternalInterface class which has made cross communication between ActionScript and JavaScript much more capable and far easier to work with. This brief tutorial will discuss a real world example of the capabilities this newly enhanced behavior can give a developer.

2 — Why?

Previous tutorials of mine have gone into considerable length building elaborate MP3 Players in Flash, but in some cases it might be impossible or inappropriate to integrate a full blown Flash movie into an existing page. A more appropriate solution in that case might be a page that simply presents a list of titles which might play in response to a user clicking a text link.

This tutorial discusses how to leverage the unique and powerful cross platform media handling advantages of Flash in a very unobtrusive manner. The Flash movie itself has no actual visual presence on the page - it simply handles playing the MP3 asset.

3 — For Example:

Click the “listen” and “stop” links next to each title in the table below to see how a Flash movie can respond to commands generated by JavaScript:

This web page requires at least version 8 of Macromedia/Adobe's Flash Player. This software plugin is available for free from the Adobe Download page.

(I’d like to extend my sincere appreciation and gratitude to the artists listed above for graciously offering permission to use their work in this tutorial.)

I know that all examples used in tutorials seem sort of abstract, simplified and distant from “real life”. To see the real live web site that was the genesis for this tutorial please visit the music page of the web site that Albert Kiefer made for the wonderful guitarist Frank Peeters.

4 — Requirements

As the ExternalInterface class was introduced in Flash 8, I hope it’s obvious that you will need a copy of Flash 8 to complete this tutorial. Demo versions are available from the Adobe web site if you don’t own a copy. A text editor and space on a web host are the only other things you need. Well - I guess a source of MP3 files (that you have permission to use) is assumed too!