Accessibility

Dreamweaver Article

 

Integrating Flash content with the HTML environment


Table of Contents

  1. Introduction
  2. Integrating Flash content with HTML using JavaScript
  3. Saving information in cookies and shared objects

Integrating Flash content with HTML using JavaScript

JavaScript is a scripting language that lives within and has control over the HTML environment. JavaScript is interpreted by most browsers and does not require a plug-in as Flash and ActiveX controls do. It's generally used to provide programming logic to the HTML page. Many web applications—such as banner ad systems, e-commerce sites, and e-learning SCORM-compliant courses—use JavaScript as a standard technology. JavaScript is the link between Flash content and the larger APIs of these types of applications.

Using a few easy steps, you can make your Flash content communicate with the JavaScript you use in Dreamweaver and vice versa.

Preparing your HTML page

Dreamweaver is a great tool for writing JavaScript. You can either write the code directly into your HTML page or write the code in a separate JavaScript file, which is referenced in your HTML page. For simple scripts, I usually write the JavaScript code directly on the page. For complex scripts or scripts that I will use repeatedly across web pages, I'll write the JavaScript code in a separate file.

When preparing to work with Flash content you can add two generic JavaScript functions to get started. I usually begin by adding the following code:

<script language="javascript">
function getFlashContent( name ) {
        if (navigator.appName.indexOf("Microsoft") != -1) {
            return window[name];
        } else {
            return document[name];
        }
}
function init(){
    // add code here...
}
</script>

The getFlashContent function is a generic utility that allows you to identify the path to the Flash movie on Internet Explorer or Mozilla browsers. Whenever you need to reference the Flash movie, you call this function and pass in the name given to the Flash movie in the object or embed tag. The init function is a generic hook for integrating functionality that is required to occur when the page loads. I usually call the init function during the onload event for the HTML page, which in turn ensures that the Flash movie is available before attempting to access it. I use the following code in the body tag of the HTML page to create the hook:

<body onload="init();">

Preparing your Flash content

Although Flash content (SWF) can be exported from many authoring tools other than Flash, I recommend building your content in Flash CS3 to achieve the best results. The problem with using tools other than Flash is that you may not be able to add the JavaScript-related ActionScript code and you won't have control over the structure of the content in the file.

Tip: If you don't have an editable source file for the Flash movie, you can create a wrapper movie in Flash that loads the content SWF. This strategy allows you to add your code to the main Timeline. The sample at the end of this section demonstrates how to accomplish this.

Working with the ExternalInterface object in Flash

Flash uses the ExternalInterface object in ActionScript as a simple way to interact with JavaScript. The ExternalInterface object is easy to use and has the ability to send and receive calls. By defining a simple API, you can expose Flash data and functionality to JavaScript and control the browser environment from Flash.

Let's say that you have a JavaScript function named setScore on the web page that contains the Flash movie. The setScore function accepts a single parameter as the score value:

<script language="javascript">
function setScore( i ) {
    score = i;
}
</script>

In Flash, you would calculate the score and write the following line of code in ActionScript:

ExternalInterface.call("setScore",80);

The ExternalInterface call command accepts one or more parameters, (the first parameter is the name of the JavaScript function and the following optional parameters are values being passed to the JavaScript function). If you're not passing any values to the JavaScript function you only need to supply the function name as the first argument. In the sample above, Flash is passing the score value of 80 to the setScore JavaScript function.

Tip: The call command can be used to return data from the JavaScript function as well. This is a handy feature when you need to retrieve information about the user's browser or the JavaScript tracking environment.

Let's say that you have a JavaScript function named finishGame that needs to retrieve score data from the Flash movie. The JavaScript function receives the data by calling an ActionScript function in the Flash movie. Here's how the JavaScript would look if the JavaScript called a Flash function named getScore:

<script language="javascript">
function finishGame() {
    getFlashContent("myGame").getScore();
}
</script>

To make this work, the Flash movie uses ActionScript to register the getScore function as being available to the HTML container. The following ActionScript is added in Flash to complete the setup:

function getScore() {
    return score;
}
ExternalInterface.addCallBack("getScore",getScore);

The ExternalInterface addCallBack command registers the ActionScript function as being available to JavaScript. The first parameter is the name that JavaScript will use and the second parameter is a reference to the related function in ActionScript. I usually use the same name to make things easier, but the two names don't have to be identical.

The syntax and process for working with the ExternalInterface object is the same in ActionScript 2.0 and ActionScript 3.0. The ExternalInterface object is supported in Flash Player 8 and higher on Windows and Mac OS X.

On Windows, the ExternalInterface object is supported in the following browsers:

  • Internet Explorer 5.0 and later
  • Netscape 8.0 and later
  • Mozilla 1.7.5 and later
  • Firefox 1.0 and later

On Mac OS X, the ExternalInterface object is supported in the following browsers:

  • Netscape 8.0 and later
  • Mozilla 1.7.5 and later
  • Firefox 1.0 and later
  • Safari 1.3 and later

Flash Player for Linux version 9.0.31.0 and later supports the ExternalInterface class in the following browsers:

  • Mozilla 1.7.x and later
  • Firefox 1.5.0.7 and later
  • SeaMonkey 1.0.5 and later

For more information on the ExternalInterface object, refer to the following page of the online Flash documentation: ActionScript 3.0 Language and Components Reference > ExternalInterface.

Note: Older methods of calling JavaScript from Flash include the fscommand and getURL commands in ActionScript. fscommand can send and receive JavaScript information, but it is not supported on Mac. getURL is supported on Mac and Windows, but it can only send calls to JavaScript; it cannot receive them. Both approaches are backward compatible to FlashPlayer 3 and considered to be deprecated in favor of using the ExternalInterface object. The fscommand command exists in both ActionScript 2.0 and ActionScript 3.0 whereas the getURL command only exists in ActionScript 2.0.

Example #1: Dynamic banner loader

Now that you've reviewed all of the elements, take a look at the following sample project.

Sample 1 shows how a dynamic banner loader might work. Like many real world banner systems, the list of banners and navigation control is handled by JavaScript on the HTML page. This version uses an invisible Flash movie as a loading utility that creates a transition animation for each banner, tracks the time the banner has been onscreen, and signals the JavaScript system when the duration of the banner has elapsed. The JavaScript and the Flash movie work together to load a series of GIF banner images.

The banner loader implements a very simple API. The JavaScript is expected to expose a getBanner function that the Flash movie can call. The Flash movie is expected to expose a setBanner and setDelay function that the JavaScript can call. Here's a breakdown of the functions involved and a description of each:

  • getBanner: Called by Flash to signal that a new banner is ready to be loaded.
  • setDelay(i): Called by JavaScript to set the delay time between banners (in milliseconds).
  • setBanner(path): Called by JavaScript to trigger loading the specified path.

Review the following JavaScript code to see the getBanner function:

<script language="javascript">
function getFlashContent(name) {
        if (navigator.appName.indexOf("Microsoft") != -1) {
            return window[name];
        } else {
            return document[name];
           }
}
     
function getBanner() {
    index++;
    if( index == banners.length ){
        index = 0;
    }
    loader.setBanner(banners[index]);
}
     
function init() {
    // Set delay & start!
    loader = getFlashContent("banner_loader");
    loader.setDelay(4000);
    loader.setBanner(banners[index]);
}
var loader;
var index = 0;
var banners =
["Images/banner1.gif","Images/banner2.gif","Images/banner3.gif"];
     
</script>

The JavaScript code is responsible for creating (acquiring) a list of banner images and keeping track of which image is currently loaded. The init function sets a delay time of 4 seconds and loads the first banner when the page loads. The getBanner function is called when the Flash movie reaches its delay limit or decides the timing needs to advance. When the getBanner function is triggered, it loads the next banner in the list or loops back to the beginning.

Now take a look at the following ActionScript 3.0 code: 

//*****************************
// Security (set to open-access)
flash.system.Security.allowDomain("*");
//*****************************
// Loading event handlers...
function delayHandler():void
{
    // Load next banner after the delay
    ExternalInterface.call("getBanner");
}
//*****************************
// JavaScript hooks
function setDelay(n:Number):void
{
    delay = n;
}
function setBanner(bPath:String):void
{
    loader.load(new URLRequest(bPath));
}
// Expose to JavaScript
ExternalInterface.addCallback("setDelay", setDelay);
ExternalInterface.addCallback("setBanner", setBanner);

The Flash code loads the banner and creates the transition animation, handles the timing delay code that notifies the JavaScript when to move forward, and then registers the JavaScript accessible function code with the container.

The ActionScript sample above contains only the JavaScript-related Flash code. Refer to the Sample1.fla source file, included with the sample files that accompany this article, for the complete code sample.

Page 2 of 3
Previous Page
Next Page