Basic Theory and Technique

To start we are going to go over the most basic JavaScript code that we will be using.  This code can be placed on any button within your Flash movie.  Additional it can be used as a frame action by removing the on (release) { portion and placing the code on a frame. 

on (release) {
getURL ("javascript:NewWindow=window.open('ShowPopup.php','newWin','width=400,height=300,left=0,top=0,
toolbar=No,location=No,scrollbars=No,status=No,resizable=No,fullscreen=No');  NewWindow.focus();
void(0);");
}

The first part (Green) tells the browser that we will be sending it some JavaScript code. Then we define a new window object called 'NewWindow' This name is important because it will allow us to reference the popup window at later times.  This does not have to have the name 'NewWindow' it can be anything as long as you keep it consistent.  Then we use the window.open JavaScript command to open up a new window.  This function contains a couple of options.  The first is the target URL to the Page that you want to open inside the pop-up window. In this case that's 'ShowPopup.php'.  The next option is to give the window a Name, the name of the window in this example will be 'newWin'.  Then we have the option to include any of the following window parameters - shown by this part of the above code 'width=400,height=300,left=0,top=0,toolbar=No,location=No,scrollbars=No,status=No,resizable=No,fullscreen=No'.  By changing around the numeric values and No to Yes you can control most of the features of the window.  You can of course leave any or all of these properties out and they will then be set to their default values.  Here is a description of each:

• width:  A numeric value representing the width of the popup window
• height: A numeric value representing the height of the popup window
• left: A numeric value representing the left (X) position of the popup window
• top: A numeric value representing the top (Y) position of the popup window
• toolbar: A Yes / No value indicating whether to add a toolbar to the popup window
• location: A Yes / No value indicating whether to add the URL Location to the popup window
• scrollbars: A Yes / No / Auto value indicating whether or not to include scrollbars in the window
• status: A Yes / No value indicating whether to add the bottom Status/Loading part to your window
• resizeable: A Yes / No value indicating whether to allow the window to be resized once opened
• fullscreen: A Yes / No value indicating whether or not to open the window fullscreen.  This will open a borderless full screen window in IE but will not work with Netscape.

Then we add the NewWindow.focus(); part, this ensures that the popup will be opened on top of all other windows.  You can change this to NewWindow.blur(); (which is the opposite of focus except it pushes the window behind any other browser windows that are open.  Then we close off the code by adding the void(0); portion. 

As you can see that since we are able to add additional functions such as NewWindow.focus(); we will be able to add quite a few more functions and effects for this pop up window.  The next part describes some of the more useful ones.  Also their is no real need to place this script on a button - you can just as easily place it on a certain frame in your flash movie at a specific point you want your window to open.  An example would be:

getURL ("javascript:NewWindow=window.open('ShowPopup.php','newWin','width=400,height=300,left=0,top=0,
toolbar=No,location=No,scrollbars=No,status=No,resizable=No,fullscreen=No');  NewWindow.focus();
void(0);");

Just don't add the on (release) { portion.  With this technique you can continue to open windows place at specific locations as your movie continues to play. 

Using this same technique in HTML instead of Flash

Theirs always some time that we have to revert to using HTML instead of Flash.  And yes we can use this same technique in an html page with a few modifications.

<a href="javascript:NewWindow=window.open('http://www.flash-db.com/index.php','newWin','width=400,height=300,left=0,top=0,
toolbar=No,location=No,scrollbars=No,status=No,resizable=No,fullscreen=No');
NewWindow.focus(); void(0);">This is the Link</a>

The below link will be generated by the above code.  This is the exact same concept used in the Flash button example - except we add the <a href=, closing tags, and remove the ending ); used in the flash example.

This is the Link

Cross Browser Compatibility

The basic code above should work with all browsers.  The animated and custom effects below (next page) can vary with older browsers and with some Netscape versions.  All functions mentioned and used in this tutorial and created with the  Auto-code generator appear to work with all IE 5+ versions and all Opera 6 browsers - some functions such as the resizeBy and scrollBy will not work with all Netscape versions.  The moveBy animated movements do work with most Netscape versions (which means at least the shake window is completely cross browser).  Also some effects will vary slightly between browsers.