Using Flash Movies with JavaScript and DHTML Flash

The new ActionScripting features in Flash 5 have greatly increased the range of interactive and dynamic possibilities for Flash movies on the Web. In previous releases of Flash, Flash movies could only interact with external HTML or scripts through the FSCommand action. This meant mapping commands and variables to JavaScript, which, in turn, passed information to the document object model of DHTML, Java applets, or CGI (Common Gateway Interface) scripts. Now that Flash movies can directly send and receive data to server-side CGI scripts, just about anything can be done within the Flash movie. However, if you want to directly communicate with the Web browser or the HTML document, you need to use FSCommands or getURL actions with javascript: statements. Because all JavaScript-capable browsers do not support these methods, we’re limiting our discussion to FSCommands and JavaScript-controllable Flash movie properties.

A word of caution to Web developers
This section covers FSCommands, which, when used in Flash movies on Web pages, are only supported by a handful of browsers. Currently, not one version of Internet Explorer for Macintosh (up to version 5.0) can interpret FSCommands (see the -Caution note in “The <EMBED> Tag” section earlier in this). Only Netscape 3.0 (or higher) offers cross-platform support for FSCommands. Internet Explorer 3 and higher for Windows 95/98/NT also support FSCommands. Our coverage of the FSCommand assumes that you have basic knowledge of JavaScript and Flash ActionScript. If you don’t know JavaScript, you can still follow the steps to the tutorials and create a fully functional Flash-JavaScript movie. However, because this isn’t a book on JavaScript, we don’t explain how JavaScript syntax or functions work.

How Flash movies work with JavaScript
As mentioned earlier, Flash has an action called fscommand. FSCommands are used to send a command (and an optional argument string) from a Flash movie to its hosting environment (such as a Web browser or standalone Flash Player). What does this mean for interactivity? The FSCommand offers the capability to have any Flash event (Button instance, onClipEvent, or frame actions) initiate an event in JavaScript. Although this may not sound too exciting, you can use FSCommands to trigger anything that you would have used JavaScript alone to do in the past, such as updating HTML-form text fields, changing the visibility of HTML elements, or switching HTML background colors on the fly. Most Flash-to-JavaScript interactivity works best with dynamic HTML (DHTML) browsers such as Netscape 4 or higher and Internet Explorer 4 or higher.

Flash movie communication with JavaScript is not a one-way street. You can also monitor and control Flash movies with JavaScript. Just as JavaScript treats an HTML document as an object and its elements as properties of that object, JavaScript treats Flash movies as it would any other element on a Web page. Therefore, you can use JavaScript functions and HTML hyperlinks (<A HREF> tags) to control Flash movie playback. At the end of this, we show you how to make an HTML form menu that can jump to various scenes of a Flash movie.

Changing HTML attributes
In this section, we show you how to dynamically change the BGCOLOR attribute of the <BODY> tag with an FSCommand from a Flash movie while it is playing in the browser window. In fact, we change the background color a few times. Then, once that has been accomplished, we show you how to update the text field of a <FORM> tag to display what percent of the Flash movie has been loaded.

Adding FSCommands to a Flash movie
Open a copy of the countdown.fla Flash movie from the Flash 5 Bible CD-ROM, and use Control➪Test Movie to play the Flash .SWF version. You should notice that the filmstrip countdown fades to white, and then to near-black, and then back to its original gray color. This countdown contains to loop until the entire first scene has loaded into the Flash Player. When the first scene has loaded, playback will skip to a Movie Clip of two dogs (in “negative”) and a title sequence. There’s more to the Flash movie, but for now, that’s all we need to deal with.

Our goal for this section of the tutorial is to add FSCommand frame actions to specific keyframes in the countdown.fla Flash demonstration movie. When the Flash Player plays the frame with the FSCommand action, the Player sends a command and argument string to JavaScript. JavaScript then calls a function that changes the background color to the value specified in the argument string of the FSCommand . To be more exact, you add an FSCommand to the frames where the color fades to white, black, and gray. When the Flash movie changes to these colors, so will the HTML background colors.

Frame 16: FSCommand of changeBgColor with an argument of #FFFFFF (the hexadecimal code for the color white)

FSCommand of changeBgColor with an argument of #FFFFFF (the hexadecimal code for the color white)

Here’s the process:

  1. On frame 16 of the Introduction scene, add a keyframe on the actions layer. With the keyframe selected, open the Actions Panel. Make sure the Panel is in Normal Mode. Add an FSCommand action from the + pop-up menu (located in the top-left corner of the panel). In the Command field, type changeBgColor. In the Arguments field, type #FFFFFF. The command changeBgColor is mapped to a JavaScript function called changeBgColor later in this tutorial. The argument string #FFFFFF is passed to that function, changing the HTML background color to white.
  2. On frame 20, add another FSCommand action to the corresponding keyframe on the actions layer. Again, insert changeBgColor in the Command text box. In the Arguments text box, type #333333. This argument changes the HTML background color to a dark gray.
  3. On frame 21 of the actions layer, follow the same instructions for Step 2, except use #9E9E9E for the argument string. This changes the HTML background color to the same color as the Flash movie countdown graphic.
  4. On frame 66 of the actions layer, add another changeBgColor FSCommand action to the empty keyframe. This time, use an argument string of #000000, which changes the HTML background color to black.
  5. Now that we’ve added several FSCommands, let’s try them out in the browser. Save the countdown.fla Flash movie to a folder on your hard drive, and open the Publish Settings dialog. In the HTML tab, select the template Flash with FSCommand. Click OK to close the Publish Settings dialog. Select the File➪Publish command to export the Flash .SWF movie and HTML document.

Next, we look at the automated JavaScript code that the HTML template created.While the basic code structure has been set up, we need to make some alterations and additions to the JavaScript in order for our FSCommands to work.

Enabling JavaScript for Flash movies
Although the Flash with FSCommand template does a lot of the JavaScripting for you, it doesn’t automatically map out the commands and arguments (args) to JavaScript-defined functions. In this section, we add the necessary JavaScript to make the FSCommands work in the browser. What follows is the JavaScript code that Flash 5 generates.

The following is a line-by-line explanation of the code:

  1. This HTML tag initializes the JavaScript code.
  2. This string of characters is standard HTML comment code. By adding this after the opening <SCRIPT> tag, non-JavaScript browsers ignore the code. If this string wasn’t included, text-based browsers such as Lynx might display JavaScript code as HTML text.
  3. This variable simply condenses the JavaScript code that detects Internet Explorer into a single term, InternetExplorer.
  4. We added this line of code to declare a variable called stringFlash. Its value is set to nothing by putting two straight quote characters together. This variable is necessary for FSCommand arguments to pass cleanly into JavaScript functions on both Netscape and Internet Explorer.
  5. This is comment code added by the Macromedia team to let us know that the following JavaScript code is designed to catch the FSCommands from a Flash movie.
  6. This is the initial JavaScript function that works exclusively with Flash FSCommands. The function’s name is the value of the NAME attribute of the <EMBED> tag (or the value of the ID attribute of the <OBJECT> tag) followed by a underscore and DoFSCommand(command,args){. In this sample, the Flash movie NAME is countdown. Notice that the command and arguments that were specified in Flash are passed to this function as (command,args), respectively.
  7. This is a handy optional variable that the Flash with FSCommand template created. Strangely, it is not necessary unless you need to refer to the differing document object models between Internet Explorer and Netscape. Instead of testing for either browser, you can insert the countdownObj variable in your own JavaScript code. For this example, though, it is not needed.
  8. This code makes the stringFlash variable called in line 4 equal to the argument string (args) from the Flash FSCommand. Because stringFlash was equal to nothing (“”), stringFlash is now the same as the original argument string. This isn’t necessary for Internet Explorer, but Netscape doesn’t recognize arguments straight from Flash without it.
  9. This compares the passed command string from the Flash FSCommand to the string changeBgColor. If they’re the same, then JavaScript executes the code contained within the if statement. Because we only made one unique command in Flash for this sample, we only have to map the Flash FSCommand changeBgColor to the JavaScript function changeBgColor().
  10. This is where the function changeBgColor() is defined. Remember that line 9 maps the Flash FSCommand changeBgColor to this JavaScript function.
  11. This line of code passes the variable stringFlash to the document.bgColor property, which controls the HTML background color. When the Flash FSCommand sends the command changeBgColor, the JavaScript change Bgcolor() function is invoked, which passes the argument string from the Flash FSCommand to document.bgColor.
  12. This resets the variable stringFlash back to nothing (“”), so that future invocations of the FSCommand don’t use the same argument from the previous execution.
  13. This section of code detects the presence of Internet Explorer for Windows and maps the JavaScript functions to VBScript (which is used exclusively by Windows-only versions of Internet Explorer).
  14. The closing </SCRIPT> tag ends this portion of JavaScript code.

That’s it! Once you’ve manually added the custom lines of JavaScript code, you can load the HTML document into either Internet Explorer or Netscape (see the caveats mentioned at the beginning of this section). When the Flash Player comes to the frames with FSCommands, the HTML background should change along with the Flash movie. Next, we add a <FORM> element that displays the percentage of the Flash movie that has loaded into the browser window.

Using the PercentLoaded() method
JavaScript can control several Flash movie properties. It’s beyond the scope of this book to describe each JavaScript method for Flash movies. If you want to see a complete list of Flash JavaScript methods.

In this section, we use the PercentLoaded() method to display the Flash movie’s loading progress update as a text field of a <FORM> element. First, we add the necessary FSCommand to the Flash movie. HTML <FORM> elements, and then we add the appropriate JavaScript.

  1. Open the countdown.fla movie that you used in the previous section. There should already be an empty keyframe present on frame 1 of the percentLoaded actions layer. Add an FSCommand action to this keyframe. Insert PercentLoaded in the Command field. This command has no arguments. Add the same FSCommand to the keyframes on frames 10, 20, 30, 40, 50, 60, and 67 of the percentLoaded actions layer. Export a Flash .SWF movie called countdown. swf with the File➪Export Movie command. Make sure you place the new .SWF file in the same folder as the HTML document.
  2. In a text editor such as Notepad or SimpleText, open the HTML document showing the countdown.swf Flash movie.
  3. Add the following HTML after the <OBJECT> and <EMBED> tags:
  4. The code in Step 3 uses two NAME attributes so that JavaScript can recognize them. Also, the DHTML STYLE attribute assigns a display:show value to the both the <FORM> and <INPUT> tags.

  5. Now we need to map the PercentLoaded FSCommand to a JavaScript function.
  6. Add the following JavaScript to the if statement(s) in the function countdown_DoFSCommand of the HTML document:
  7. Add the following JavaScript after the function changeBgColor() section. This function tells the browser to update the <FORM> text field with the percent of the Flash movie currently loaded. When the value is greater than or equal to 99, then the text field reads 100 percent and disappears after 2 seconds.
  8. As mentioned earlier, Netscape is unable to change the style of the <FORM> elements on the fly. (The ¬ indicates a continuation in the URL. Do not type this character into the browser location field.)

  9. Save the HTML document and load it into a browser. If you run into errors, check your JavaScript syntax carefully. A misplaced ; or } can set off the entire script. If you continue to run into errors, compare your document to the countdown_complete.html document on the Flash 5 Bible CD-ROM.
  10. Okay, that wasn’t the easiest task in the world, and, admittedly, the effects might not have been as spectacular as you may have thought. However, now that you know the basics of Flash and JavaScript interactivity, you can take your Flash movie interactivity one step further.

Face Book Twitter Google Plus Instagram Youtube Linkedin Myspace Pinterest Soundcloud Wikipedia

All rights reserved © 2018 Wisdom IT Services India Pvt. Ltd Protection Status

Flash Topics