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, JavaScipt functions open and control browser windows. Browser windows can also be opened and closed from a SWF file. However, 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.

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, allows window control 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 some browsers for expose 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 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, scroll bars, 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 little knowledge of JavaScript, but doesn't function on all browsers. See the Methods table above for browser compatibility details and remember to test on all target browsers. The JavaScript function used is window.open. It can be called directly within a getURL or navigateToURL command by prefixing the url with "javascript." This prefix indicates to the browser that the text provided is a JavaScript command and not just a URL. The browser still expects 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, scroll bars, or toolbars. More information on window.open can be found at the Mozilla Developer Center.

ActionScript 2.0:

// attach this code to your button instance on the Stage (select the button instance on the Stage and then add the code
// to the Actions panel while the button instance is still the most recent selection)

// define the string that contains the JavaScript command you want to send to open a URL in a new window
var jscommand:String = "window.open('http://www.adobe.com','win','height=200,width=300,toolbar=no,scrollbars=yes');"; 

// use the getURL() method, but pass the javascript string instead of a traditional URL
getURL("javascript:" + jscommand + " void(0);");

ActionScript 3.0:

// This code goes in a timeline frame or external AS file...

// define the string that contains the JavaScript command you want to send to open a URL in a new window
var jscommand:String = "window.open('http://www.adobe.com','win','height=200,width=300,toolbar=no,scrollbars=yes');"; 

// create an URLRequest object, containing the javascript string instead of a traditional URL
var url:URLRequest = new URLRequest("javascript:" + jscommand + " void(0);"); 

// use the navigateToURL() method, and pass it your URLRequest object
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 call the JavaScript window.open command. The ExternalInterface allows for seamless JavaScript integration between the browser and a Flash movie but doesn't function on all browsers. See 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, it's 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 doesn't work on all browsers. See the Methods table above for browser compatibility details and remember to test on all target browsers.

Part One: Create SWF file (both ActionScript 2.0 and ActionScript 3)

  1. Call fscommand where necessary 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. Therefore, it's necessary to pass the JavaScript window.open parameters as one string and separated within the JavaScript defined in the HTML.

  2. In the HTML tab of Publish Settings, select the Flash With FS Command template.
  3. Publish both a SWF file and HTML file.

Part Two: Add JavaScript to the HTML page

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



    // Place your code here...
  3. 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 scroll bars can be used, but creating a basic working example using this code first is recommended.
  4. Save the HTML document, and test the page in a browser.



    Note: If the HTML is published again from Flash, these changes are overwritten and it's unnecessary to make them 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 are called with the two arguments used in Flash. The first argument determines what JavaScript action to take. 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 use within the command. Since it comes into JavaScript as one string, the split() command divides 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 extensions 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. Many Extensions are created by third parties; read each Extension's download page thoroughly for details. See the Adobe Exchange for more information on using Extensions.

This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License  Twitter™ and Facebook posts are not covered under the terms of Creative Commons.

Legal Notices   |   Online Privacy Policy