Communication between JavaScript and Flash

Most web developers are familiar with JavaScript…the scripting language of the web. And while ActionScript is not as popular as it used to be, there’s one instance where you should most definitely learn it…media. To date HTML5’s video and audio tag are mired in chaos. A lack of a cohesive format for all browsers forces people to display media in a combination of Flash for some devices and HTML5 for others.

Including Flash with JavaScript

Including Flash in your projects, can be a daunting task with a lot of code, so I’ve written a function that you can use to place Flash in your document, plus add an ID to it.

<script>
function writeFlash(movieLocation,mywidth,myheight,myname) {
if (myname) { myid=myname; } else { myid="flashanimation"; }
document.write('<object type="application/x-shockwave-flash"id="'+myid+'"width="'+mywidth+'"height="'+myheight+'"data="'+movieLocation+'"> <param name="allowScriptAccess" value="sameDomain" /><param name="movie" value="'+movieLocation+'" /><param name="quality" value="high" /><param name="scale"value="noscale" /><param name="wmode" value="transparent"/></object>');
}
</script>

You should put that in the head section of your page (or before the closing body tag). When you want to place an .swf on your page, you can simply put this code wherever you want it to appear it like this:

<script>
writeFlash('moviename.swf',width,height,'movieID');
</script>

Pass is the name of the swf file as a string, the width and height of the documents, plus some movie’s ID. So if you want to place a movie that is 85pixels wide by 85 pixels tall called flashbutton.swf with an ID of flashbutton, you could write:

<script>
writeFlash('flashbutton.swf',85,85,'flashbutton');
</script>

Here’s what our HTML page might look like:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>JavaScript to Flash</title>
    <script>
            function writeFlash(movieLocation,mywidth,myheight,myname) {
            if (myname) { myid=myname; } else { myid="flashanimation"; }
                document.write('<object type="application/x-shockwave-flash"id="'+myid+'"width="'+mywidth+'"height="'+myheight+'"data="'+movieLocation+'"> <param name="allowScriptAccess" value="sameDomain" /><param name="movie" value="'+movieLocation+'" /><param name="quality" value="high" /><param name="scale"value="noscale" /><param name="wmode" value="transparent"/></object>');
            }
        </script>
    </script>
</head>
<body>
<script>
    writeFlash('flashbutton.swf',85,85,'myMovie');
</script>   
</body>
</html>

So now that we have that out of the way, there’s several ways Flash and JavaScript can be friends. Let’s take a look at how it’s done.

##Flash to JavaScript

This is probably the easiest of the two. You can use a method called ExternalInterface.call() within Flash to execute a JavaScript function. So, let’s say you open up flash and create a button instance with an myButton_btn. To make that pull up an alert window in flash you would use this code on the timeline.

myButton_btn.addEventListener(MouseEvent.CLICK, doClick);

function doClick(e:Event) {
    ExternalInterface.call("alert", "This alert comes from Flash");
}

Triggering a JavaScript function from Flash

###Try it!

Click on the button from flash above to get an alert.

Download the example

See the example on a page by itself

This pulls up an alert on your HTML document Piece of cake…right? Going the other way (from JavaScript to Flash) is a bit harder.

##From JavaScript to Flash
Doing this from JavaScript to Flash involves a couple of steps. First, you have to make sure that your swf has an ID attribute. That should be in the object tag you use to insert the movie onto your page.

If you use my writeFlash function from above, that’s fairly easy, just add an ID to the call as the last parameter. Let’s say that your new flash file was called frame jump.swf and it was also 85 pixels by 85 pixels. You would do something like this:

<script>
writeFlash('framejump.swf',85,85,'myFlashID');
</script>

Now your swf object has an ID of “myFlashID”, you can tell flash to run a function by using the ID to call the function within flash. Say, for example, you want to create a link in HTML that runs a function called goToFrame(). You could to that like this:

<a href="#" onclick="window.myFlashID.frameJump(5)">Jump To Frame</a>

And that’s it for the HTML part. Now you need to let Flash know to expect a call from JavaScript to a function called frameJump(). You do that in ActionScript with a call like this.

ExternalInterface.addCallback("frameJump", frameJump);

The first “frameJump” is the name of how you want to call the function in JavaScript…the second is what you want to call it in Flash. They don’t have to be the same, although it probably makes sense to do so. The only thing left is to create the function frameJump in Flash.

function frameJump(whichFrame:String):void {
gotoAndStop(whichFrame);
}

###Try it!

Click on this link to tell the flash movie to go to frame 5

Download the example

See the example on a page by itself

Now that you know how to do this, you can easily use this to communicate between the two for your media projects.

Leave a Reply

Your email address will not be published. Required fields are marked *