ActionScript and JavaScript

I l @ ve RuBoard

If you are already familiar with JavaScript, you may be excited by the fact that ActionScript and JavaScript can communicate. However, this technology has one flaw: It doesn't work on all browsers.

The JavaScript communication is made possible by one of two technologies. The first is LiveConnect, a technology built into Netscape Navigator versions before version 6. The second technology is ActiveX, the interface between Internet Explorer and Flash.

However, Netscape Navigator 6.0 does not include LiveConnect. The technology has been abandoned . In addition, Internet Explorer on the Mac does not use ActiveX.

You are left with two bug exceptions to ActionScript/JavaScript communication: Internet Explorer on Mac and all Netscape 6 browsers. That's enough to make most Web development companies stay away from ActionScript to JavaScript communication altogether.

However, if you are operating in a situation where all your users are on Internet Explorer for Windows, you could potentially use this technology. Either way, it is probably worth taking the time to learn.

Sending Messages to JavaScript

Sending a message from ActionScript to JavaScript involves one line of ActionScript, but many changes to your HTML page.

If you choose the Flash with FSCommand option in the Publish settings, you will get an HTML page already modified to accept these messages. You just need to find the portion marked You Code Here and insert your own JavaScript code.

To better understand how this works, let's look at a slightly cleaned-up version of the HTML that Flash exports.

First, look at the OBJECT/EMBED tag. This has several new parts to it to support communication. There is an ID parameter in the OBJECT tag and a matching NAME parameter in the EMBED tag. These both name the Flash movie within the document so that JavaScript can address it. There is also an swLiveConnect parameter in the EMBED tag for older versions of Netscape that use LiveConnect to facilitate this kind of communication.

 <OBJECT classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/ [ic:cc]flash/swflash.cab#version=5,0,0,0"  ID=flashmovie WIDTH=120 HEIGHT=120> <PARAM NAME=movie VALUE="17astojs.swf"> <PARAM NAME=quality VALUE=high> <PARAM  NAME=bgcolor VALUE=#FFFFFF>     <EMBED src="17astojs.swf" quality=high bgcolor=#FFFFFF  WIDTH=120 HEIGHT=120 swLiveConnect=true NAME=flashmovie TYPE="application/x-shockwave-flash" PLUGINSPAGE="http:  //www.macromedia.com/shockwave/download/ index.cgi?P1_Prod_Version=ShockwaveFlash"></  EMBED> </OBJECT> 

Before the OBJECT/EMBED tag is a script. The first part is a JavaScript function named the same as your movie ID but with a _DoFSCommand appended to it. So if the movie is given the ID flashmovie, then it will be called flashmovie_DoFSCommand .

It is somewhat likely that you will want to send a message back to the Flash movie as a result of the function. Unfortunately, Internet Explorer and Netscape see the movie differently. Internet Explorer sees it as just flashmovie , assuming that is its ID, whereas Netscape sees it as document.flashmovie . A reference to the appropriate one is put in the variable flashMovieObj .

Finally, the function concludes by showing the contents of the two parameters passed to JavaScript.

 <SCRIPT LANGUAGE=JavaScript> function flashmovie_DoFSCommand(command, args) {     if (navigator.appName.indexOf("Microsoft") != -1) {         var flashmovieObj = flashmovie;     }  else {         var flashmovieObj = document.flashmovie;     }     alert(command);     alert(args); } 

But wait, there's more. It turns out that Internet Explorer doesn't facilitate communication between Flash and JavaScript at all. Instead, Flash can only communicate with VBScript, Microsoft's little-used JavaScript-like language. However, VBScript can communicate with JavaScript. So this next piece of code creates a VBScript function that just passes along the information to JavaScript.

 if (navigator.appName && navigator.appName.indexOf("Microsoft") != -1 &&     navigator.userAgent.indexOf("Windows") != -1 &&     navigator.userAgent.indexOf("Windows 3.1") == -1) {         document.write('<SCRIPT LANGUAGE=VBScript\> \n');         document.write('on error resume next \n');         document.write('Sub flashmovie_FSCommand(ByVal command, ByVal args)\n');         document.write('call flashmovie_DoFSCommand(command, args)\n');         document.write('end sub\n');         document.write('</SCRIPT\> \n'); } </SCRIPT> 

So what about the ActionScript side of things? If the HTML is that complex, surely the ActionScript should be complex as well.

All you actually need is one line of code. The fscommand function passes two pieces of information along to the above JavaScript code. Here is an example:

 fscommand ("alert", "This is alert 1."); 

That's it. You can test this code with the HTML page 17astojs.html. The Flash movie example used is 17astojs.fla. Remember that this will not work in Internet Explorer for Mac, Netscape 6, or most older or lesser-known browsers.

You can do a lot by passing strings along to JavaScript. As a matter of fact, although the example is a little basic, it demonstrates one of the primary uses for ActionScript to JavaScript communication: the alert box. Flash can't generate a simple alert box on its own, but with help from JavaScript, you can pop up little messages to the user .

Getting Messages from JavaScript

Sending messages from the HTML page to your Flash movie is easier than the other way around. First, you need to make sure that you set an ID parameter for the OBJECT tag and a NAME parameter for the EMBED tag. Make them the same value. You will also need to set swLiveConnect to true in the EMBED tag.

Now you have a host of commands that you can send to the Flash movie. For instance, you can use GotoFrame to tell the movie to go to a specific frame number. Here is a button that tells the movie flashmovie to go to frame 2.

 <FORM NAME="flashControlForm"> <INPUT NAME="gotoFrame1" TYPE=Button VALUE="Frame 1" onClick="window.document.flashmovie.GotoFrame(1);"> </FORM> 

If this code is supposed to make the movie go to frame 2, why is there a 1 in the GotoFrame command? This is another case where the numbering is zero-based . So frame 1 is 0, frame 2 is 1, and so on.

There are 24 more commands that you can use on a Flash movie. However, I don't want to spend too much time on this because, as I mentioned at the start of this section, JavaScript communication doesn't work on all browsers, so it is not considered by most developers to be of any use.

You can use GetVariable and SetVariable to look at and control variables on the main timeline. The Zoom command allows you to control the scale of the movie. The isPlaying and percentLoaded functions allow you to detect what the movie is doing at the time. The simple Play command moves the movie forward from its stopped state.

There is also a set of command that start with a capital T. These are called targeted commands because they target a movie clip. The first parameter in these commands is the target. This parameter uses an out-of-date format from Flash 3 and 4 to name movie clips. In this format, "/" is equivalent to _root and /myMovieClip is equivalent to _root.myMovieClip .

An example of a targeted command is TgotoFrame , which tells a movie clip to go to a frame number. It would look like this:

 window.document.flashmovie.TGotoFrame("/myMovieClip", 1); 

You can also use TgotoLabel to use a frame name rather than a number. The TGetProperty and TSetProperty commands seem simple enough, except that they can't refer to a property by its real name. Instead, they have to use a number to refer to each property. So _x is 0, _y is 1, _visible is 7, and so on.

To find out more about JavaScript communication, you'll have to go to the Macromedia Web site. The documentation has only a small amount of information and does not list the commands or the property numbers . Perhaps this is because of the doesn't-work-on-every-browser issue.

To get to the special section about this topic, go to http://www.macromedia.com/support/flash/ and search on Flash Methods. You'll eventually find the document that contains a lot of information about this subject.

I l @ ve RuBoard