TechNote

How to create pop-up browser windows in Flash

What's covered

Introduction
Example file download
Methods
getURL/navigateToURL
getURL/navigateToURL with JavaScript
ExternalInterface
fscommand
Extensions

This document outlines methods of opening a pop-up window from Adobe Flash, with downloadable examples for each method.

Introduction

In a standard HTML page, browser windows are opened and controlled by JavaScript functions in the HTML page. Browser windows can also be opened and closed from a Flash movie, but because windows are a component of the browser, Flash must communicate with the browser and direct it to open new windows.

Note: This TechNote discusses some JavaScript functions as space allows, however, a complete description of JavaScript is beyond the scope of this TechNote.

Example file download

The files below contain examples for all three methods outlined in this TechNote.

Download source file: popup_windows.zip (149K)

Note: Flash 8 or later is required to open the source files.

Methods

The below methods vary in levels of difficulty and control. Not all methods are compatible with all browsers.

Method	Difficulty	Browser compatibility
getURL/navigateToURL	Easiest, but offers no window control	Works with all browsers.
getURL/navigateToURL with JavaScript	Simple and consistent	Does not work on Internet Explorer 3.0 or earlier on Windows, or on Internet Explorer 4.5 or earlier on Macintosh.
ExternalInterface	Flexible, but requires more modern browsers	Internet Explorer 5.0 and later (Windows only), Netscape 8.0 and later, Mozilla 1.7.5 and later, Firefox 1.0 and later, and Safari 1.3 and later. (ExternalInterface requires the user's web browser to support either ActiveX or the NPRuntime API that is exposed by some browsers for plug-in scripting)
fscommand	More difficult	Works with ActiveX and LiveConnect enabled browsers (currently, on both Windows and Mac: Internet Explorer 4.0 and later and Navigator 3.x and 4.x).

getURL/navigateToURL

This method uses the getURL (ActionScript 2.0) or navigateToURL (ActionScript 3.0) command to create a new browser window by targeting a new, blank window. This method is simple, works on all browsers, and requires no JavaScript. This method, however, it does not provide control over window location, size, scrollbars, or toolbars.

ActionScript 2.0:

 getURL("www.adobe.com", "_blank");

ActionScript 3 .0:

 var url:URLRequest = new URLRequest("http://www.adobe.com"); navigateToURL(url, "_blank");

getURL/navigateToURL with JavaScript

This method uses the getURL (ActionScript 2.0) or navigateToURL (ActionScript 3.0) command to call an inline JavaScript function that generates a new HTML window through JavaScript. It is simple and requires very little knowledge of JavaScript, but will not function on all browsers. Refer to the Methods table above for browser compatibility details and remember to test on all target browsers. The JavaScript function used is window.open and can be called directly within a getURL or navigateToURL command by prefixing the url with "javascript:" indicating to the browser that the text provided is a JavaScript command and not just a URL. This does not mean the browser still won't expect to navigate the current page to a new URL as a result of the getURL or navigateToURL command. To prevent that, the JavaScript void(0) command is used.

Using the JavaScript window.open command, you can control additional properties of the window being opened such as window location, size, scrollbars, or toolbars. More information on window.open can be found at the Mozilla Developer Center.

ActionScript 2 .0:

 var jscommand:String = "window.open('http://www.adobe.com','win','height=200,width=300,toolbar=no,scrollbars=yes');"; getURL("javascript:" + jscommand + " void(0);");

ActionScript 3 .0:

 var jscommand:String = "window.open('http://www.adobe.com','win','height=200,width=300,toolbar=no,scrollbars=yes');"; var url:URLRequest = new URLRequest("javascript:" + jscommand + " void(0);"); navigateToURL(url, "_self");

Note: You can also create JavaScript functions within the HTML and call them through ActionScript using "javascript:functionName();" in getURL or navigateToURL.

Note: navigateToURL defaults to using a _blank window. _self is used to assure that the JavaScript command is sent to the active window.

ExternalInterface

This method uses the ExternalInterface class introduced in Flash Player 8 to invoke the JavaScript window.open command. The ExternalInterface allows for seamless JavaScript integration between the browser and a Flash movie but will not function on all browsers. Refer to the Methods table above for browser compatibility details and remember to test on all target browsers.

As with the getURL/navigateToURL with JavaScript examples, ExternalInterface is used to call the JavaScript window.open command directly within Flash. It, however, is not using a JavaScript link to do so, instead calling the command directly.

Since ExternalInterface is not supported for all browsers, its recommended that you first check to see if it is supported. If not, you might want to consider an alternate approach.

Both ActionScript 2.0 and ActionScript 3.0:

 if (ExternalInterface.available) { ExternalInterface.call("window.open", "http://www.adobe.com", "win", "height=200,width=300,toolbar=no,scrollbars=yes"); }

fscommand

This method uses the fscommand action in Flash Player versions 4 and later to trigger a JavaScript function defined in the HTML page containing the Flash movie. The JavaScript function (calling window.open) is added to the page after publishing, and contains the URL and parameters for the new window. This method will not work on all browsers. Refer to the Methods table above for browser compatibility details and remember to test on all target browsers.

Part One: Create Flash movie (both ActionScript 2.0 and ActionScript 3.0)

Call fscommand where needed to open the window when desired.
```
 fscommand("openWindow", "http://www.adobe.com|win|height=200,width=300,toolbar=no,scrollbars=yes"); 
```
Note: Unlike ExternalInterface, fscommand can only pass one argument to the JavaScript function so the JavaScript window.open parameters will need to be passed as one string and separated within the JavaScript defined in the HTML.
In the HTML tab of Publish Settings, select the Flash With FS Command template.
Publish both a Flash movie and HTML file.

Part Two: Add JavaScript to the HTML page

Open the published HTML from Part One for editing using Notepad, Simple Text, or an HTML editor such as Adobe Dreamweaver.
In the HTML locate the following line defined in JavaScript:

// Place your code here...
At that location in the code, either directly after, or replacing that comment, add the following JavaScript code:
```
 if (command == "openWindow") { var windowArgs = args.split("|"); var domain = windowArgs[0]; var name = windowArgs[1]; var params = windowArgs[2]; window.open(domain, name, params); } 
```
Custom values for the URL, dimensions, toolbars, and scrollbars can be used, but creating a basic working example using this code first is recommended.
Save the HTML document, and test the page in a browser.

Note: If the HTML is published again from Flash, these changes will be overwritten and will need to be made again. To prevent a new HTML file from overwriting these changes, you can deselect the HTML export from within your Publish Settings.

When fscommand is called from Flash, the function defined as [MovieName]_DoFSCommand will be called with the two arguments used in Flash. The first argument determines what JavaScript action is to be taken. An if statement within the DoFSCommand function checks to see if the command is "openWindow" and runs related JavaScript to open the new browser window. The second argument is then used to determine the values to be used within the command. Since it comes into JavaScript as one string, the split() command is used to divide the string into the three different arguments for window.open using a pipe ("|") delimiter.

Extensions

In addition to design methods outlined in this TechNote, some easy-to-use Extensions are also available from the Adobe Exchange for creating pop-up windows from Flash. These include the JavaScript Integration Kit for Dreamweaver and other Extensions created by Flash developers.

Search the Adobe Exchange to find currently available extensions for use with Flash or Dreamweaver. Note that many Extensions are created by third parties; read each Extension's download page thoroughly for details. Refer to the Adobe Exchange for more information on using Extensions.