First time here? First time here? Newsletter Signup Newsletter
Login | Register | 651326 Members and growing!
Search tutorials
Author: Jeffrey F. Hill | Website: http://www.flash-db.com

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.

"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

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 , 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.

» Level Intermediate

Added: 2002-01-09
Rating: 9 Votes: 149
(10 being the highest)
» Author
Jeffrey Hill is a freelance web developer from Boulder, Colorado. He specializes in creating and developing dynamic database driven Flash content and applications. Specialty's include SQL, PHP, Perl, and XML.
» Download
Download the files used in this tutorial.
» Forums
More help? Search our boards for quick answers!

Comments

  • There are no comments yet. Be the first to comment!

  • You must have javascript enabled in order to post comments.

Leave a Comment
  • Your email address will not be published. All fields are required.
Featured Flash FLA
» Author: Inocreato
» Title: RaiseTheBlocks
» Description: Raise all the blocks to win the game
Featured Sound Loops
Image for equalize

Audio Player

» Author: TomCat Carty
» Title: The Wood
» Description: Just a little game ending or it can maybe be looped. Recorders with music box and percussion to give the feel of well, I don't know, the woods? Free to use, just credit me. thank you
Latest Font
» Author: Fábio FAFERS
» Description: I created this font for free use. Everyone can apply it in personal or business texts. Its free, but I want to be communicated in case of business use. Donations are accepted to keep the project of free fonts alive! Thank you all
Featured Sound Fx
Image for equalize

Audio Player

» Author: Davisigner
» Description: Hmm... what to say about this one? It's reminiscent of the closing notes of the opening music from the Three Stooges done in a church organ style with a closing cymbal crash. I'll give this one away gratis, but feel free to check out my free loops and potential upcoming license-mandated ones over in the respective part of Flashkit.