Chapter 18. Flash ActionScript and JavaScript

CONTENTS

CONTENTS>>

ActionScript and JavaScript
Firing a JavaScript Function from Flash
Passing Variables from Flash 5 to JavaScript
Summary

One of the most popular applications for creating interactive web sites is Flash. Flash SWF files reside in web pages, and these files can communicate with JavaScript. Flash pages are very easy to use for creating sophisticated animation at very low bandwidth. Both of the major browsers are shipped with Flash plug-ins, so cross-browser compatibility is not the issue that it is with JavaScript.

However, on many occasions, you will find that firing a JavaScript function from an HTML page with a Flash file can give you the design you want that cannot be accomplished by Flash alone. For example, one client wanted to have an external link to pages that showed some awards that her company had received. The pages with the awards were nice to see, but they really did not fit into the Flash design. Creating a JavaScript function that opened the pages in a separate HTML window made the pages accessible without requiring them to be embedded in the HTML page with the SWF file. Likewise, other uses can be discovered for JavaScript in a Flash environment. This chapter examines how the power of Flash and ActionScript (Flash's built-in language) can be enhanced by JavaScript, and vice versa.

ActionScript and JavaScript

To get the most out of this chapter, you will need to know Flash 5 and something about its built-in language, ActionScript. Fortunately, ActionScript is almost identical to JavaScript, especially the newer versions of JavaScript. The main difference between the two is that ActionScript was designed to work with Flash's timeline and movie clip environment, and JavaScript was designed to work in an HTML environment. The dot syntax is very similar, and most lines require a semicolon at the end. ActionScript follows the same semicolon placement rules that JavaScript does, except that the semicolons are mandatory in ActionScript and optional in JavaScript.

If you are wholly unfamiliar with ActionScript but know Flash, take a look at ActionScript f/x and Design (Coriolis, 2000), or dust off the ActionScript manual that accompanies Flash 5. In this chapter, only selected ActionScript elements are explained in any detail; while every attempt is made to provide enough explanation of ActionScript to see how a certain script accomplishes a goal, a little background will help.

Firing a JavaScript Function from Flash

Probably the most valuable and simple technique that you can use with JavaScript and Flash is calling a JavaScript function using this ActionScript format:

getURL("javascript:jsFunction()");

For example, in one project I wanted to call up HTML pages with lots of text. While text is relatively "light" in HTML, it can really bog down a Flash movie. I created three buttons in Flash, and each one contained this script, with a variation on the function swissy1() swissy2() and swissy3().

on (release) {        getURL ("javascript:swissy1()");  }

Figure 18.1 shows the script in the Object Actions window being developed in Flash.

Figure 18.1. Linking JavaScript functions to a Flash movie is simple.

graphics/18fig01.gif

After the HTML page was published from Flash, all of the functions were added to the HTML page that Flash generated. The following shows the revised script:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  <html>  <head>  <title>ScottishSwissy</title>  <script language="JavaScript">  //This section was added  function swissy1(){       open("swissy1.html","s1","scrollbars=1, width=500, height=400,        resizable=yes")        }  function swissy2(){       open("swissy2.html","s2","scrollbars=1, width=500, height=400,        resizable=yes")         }  function swissy3(){ open("swissy3.html","s3","scrollbars=1, width=500, height=400, resizable=yes")  }  </script>  </head>  <body bgcolor="#ffffff">  <a href="javascript:swissy1%28%29"></a>  <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"  codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.  cab#version=5,0,0,0" width="100%" height="100%">  <param name="movie" value="ScottishSwissy.swf">  <param name="quality" value="high">  <param name="bgcolor" value="#FFFFFF">  <embed src="ScottishSwissy.swf" quality="high" bgcolor="#FFFFFF" width="100%"  height="100%" type="application/x-shockwave-flash"  pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version  =ShockwaveFlash">  </object>  </body>  </html>

NOTE

The previous script had some very long comments generated by Flash when it was published. They were not informative to understanding the connection between a JavaScript function and Flash, and they were removed.

Each of the HTML pages that appear contained the following JavaScript fired by a button to get the HTML page off the screen after it was viewed.

function closeIt() {      window.close();       }

Whenever an external HTML page is opened in a separate Window, be sure to include a Close button of some sort along with the appropriate script. Figure 18.2 shows the Flash page and external HTML page when working together.

Figure 18.2. New windows opened from Flash should always have a Close button.

graphics/18fig02.gif

Passing Variables from Flash 5 to JavaScript

When the fscommand() statement was added to the Flash ActionScript lexicon way back in Flash 3, many developers were optimistic about easily passing variables from Flash to an HTML page via JavaScript. However, something happened along the way, and about the only browser around that supports the fscommand() and JavaScript is version 4 of Netscape Navigator. Tested on NN6.1, the fscommand() was not recognized in the browser, and while IE can handle a VBScript version of an fscommand() statement, it doesn't respond to the JavaScript version.

In Flash, the fscommand() has this format:

fscommand(command,args);

The two arguments in the function, command and args, can be two strings, variables, or a function and its arguments, as implied by the terms. However, command and args, the default terms in the normal mode of entering ActionScript, can be replaced by string literals or any variables that you want to include. Whatever you put in the command and args arguments in the fscommand action is passed to a JavaScript program that you create in the HTML page that contains the SWF files with the fscommand action. For example, in a button script, a developer might enter this:

On(release) {       fscommand("Hope","Glory");  }

The two strings "Hope" and "Glory" are passed to two arguments in a JavaScript function. The function name is automatically generated by Flash, and all you have to do is to fill in the statements within the JavaScript function's curly braces. For example, if the previous fscommand action were used in a Flash movie and the movie were saved as hopeful, the JavaScript function generated would look like the following script segment in the Flash-generated HTML:

...  <SCRIPT LANGUAGE=JavaScript>  <!-- var InternetExplorer = navigator.appName.indexOf("Microsoft") != -1;  // Handle all the FSCommand messages in a Flash movie  function hopeful_DoFSCommand(command, args) {      var hopefulObj = InternetExplorer ? hopeful : document.hopeful;     //     // Place your code here      //  } .

The function name, hopeful_DoFSCommand(command,args), is automatically generated by Flash when the movie is published and the HTML publishing setting template is set to Flash with FSCommand in Publishing Preferences. The extension attached to the Flash filename with an underscore, _DoFSCommand, links the function to the Flash fscommand action that sends the variables to JavaScript. (The line beginning var hopefulObj= is a conditional statement to jump to another section of the script that handles VBScript for Internet Explorer.)

The <EMBED> tag must include the name of the Flash movie and must set the swLiveConnect to true, as shown in the following tag segment:

<EMBED ..... swLiveConnect=true NAME=hopeful ...>

If your Publish settings are correct, all of this will be done for you.

Data Entered in Flash and Passed to JavaScript

To see how the process works, this next movie lets the user enter data in the Flash section of the movie and pass it to a form in HTML via JavaScript. The following steps guide you through the process:

Open a new Flash movie and set the stage size to 450 by 300. Select Modify, Movie from the menu bar. This size movie will give you room at the bottom for an HTML form that will show the data passed from Flash.
Add layers for a total of four layers, with the names from top to bottom. Send to JavaScript, Labels, Data Entry, and Background.
Create a color in the Mixer panel with the values R=232, G=49, B=0 (red). Add that color to your Swatches panel. From the menu bar, select Modify, Movie; in the background color well, select the red that you just added to the Swatches panel.
Select the Data Entry layer and add two input text fields in the middle of the stage. (Use Figure 18.4 as a guide.) Select the left text field and, in the Variable text window in the Text Panel, type in alpha; for the text window on the right, use the variable name omega. Use a 12-point dark-color Verdana font. Lock the layer.

Figure 18.4. Data from Flash can be passed through JavaScript and put into an HTML form or variable.
Select the Labels layer and type in String 1 using Static text under the left input window and String 2 under the right one. Above both windows, type in Press to send to JavaScript. Use Figure 18.4 as a guide. Lock the layer.
Select the Send to JavaScript layer. Add two colors to your swatches: R=0, G=91, B=0 (green) and R=141, G=43, B=78 (deep purple). Using the green for the stroke (3-point stroke) and purple for the fill, draw a circle with a 28pixel diameter. Select the circle and press the F8 key to open the Symbol Properties dialog box. Choose Button as the behavior, and name the button Frank or any other name that you want; then click OK. Place the button between the two input text fields.
Select the button and open the Object Actions panel, and insert the following script:
```
on (release) {        FSCOMMAND (ALPHA, OMEGA);  } 
```
Figure 18.3 shows the entry in Flash's Object Actions panel.

Figure 18.3. Entering the fscommand action in Flash.
Save the FLA file as fsCommand.fla. From the menu bar, select File, Publish Settings, HTML, Template, Flash with FSCommand. Click the Publish button on the right side of the HTML tab.

Open the HTML page created by Flash (fcCommand.html) in your text editor of preference (such as Notepad or SimpleText). Edit the page so that it conforms to the following script:

<HTML>  <HEAD>  <TITLE>fsCommand</TITLE>  <SCRIPT LANGUAGE=JavaScript>  function fsCommand_DoFSCommand(alpha,omega) {      document.show.me.value=alpha + " and " + omega;       }  </script>  </HEAD>  <BODY bgcolor="pink">  <center>  <OBJECT classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"  codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#versi  on=5,0,0,0" ID=fsCommand WIDTH=450 HEIGHT=300>  <PARAM NAME=movie VALUE="fsCommand.swf">  <PARAM NAME=quality VALUE=high>  <PARAM NAME=bgcolor VALUE=#E83100>  <EMBED src="fsCommand.swf" quality=high bgcolor=#E83100 WIDTH=450 HEIGHT=300  swLiveConnect=true NAME=fsCommand TYPE="application/x-shockwave-flash"  PLUGINSPAGE="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Versi  on=ShockwaveFlash"></EMBED>  </OBJECT>  <form name="show">  <input type=text name="me">  </form>  </center>  </BODY>  </HTML>

As you can see from the script, the JavaScript function has been moved to the head area of the script, a form has been added, and all of the extraneous material for working with VBScript has been eliminated. Otherwise, not a lot was changed from the original script generated by Flash. (If you so desire, you can leave the VBScript material in.) The argument names are alpha and omega instead of the generated command and args. (They could have been named Bonnie and Clyde, or anything else, for that matter. As long as the argument names match the terms used in the statement in the function, the correct data will be passed from Flash to JavaScript.)

When you load an HTML page into Netscape Navigator 4.x, you will see the page shown in Figure 18.4. By adding text in the Flash text windows labeled String 1 and String 2 and then pressing the button, the two strings will be placed in the HTML form at the bottom of the page with the word and concatenated between them.

The point of this exercise is to see how variables can be passed from Flash to an HTML page using JavaScript. Unfortunately, only Netscape Navigator 4.x supports using JavaScript in this way, and the newer versions of Navigator do not. In future versions of Flash and the major browsers, we hope that the functionality of the fscommand action is the main way that Flash data is passed to HTML. Between calling JavaScript functions from HTML and passing Flash data to HTML with fscommand, a complete cycle of data is possible using JavaScript.

Summary

Working with Flash is an important role for JavaScript. Passing data, variables, functions, and other information between an SWF file on an HTML page and the HTML page itself enables data from multiple sources to be used interchangeably. Having the capability to call JavaScript functions from Flash using the getURL("javascript:jsfunction()") action enables Flash to have most of the power that JavaScript has in working with HTML pages.

Unfortunately, limited exchange between Flash and JavaScript, even with the fscommand action, does not allow the kind of full exchanges between the SWF file and JavaScript as would be desired. Currently, only Netscape Navigator 4.x provides a platform on which JavaScript can receive and use data from Flash. However, in future editions of either Flash or the browsers, we hope for a functionally similar action.

In the meantime, keep in mind that JavaScript functions can be called from Flash. Everything from pop-up alert boxes to external windows can easily be passed from a JavaScript function to a Flash movie simply by a little ActionScript that gets some needed help from JavaScript.