POPUP WINDOWS WITH JAVA IN FLASH Introduction

This tutorial describes a method of using JavaScript within your Flash movie without using any external JavaScript in the html your movie is embedded in. For the example we are going to be creating pop-up windows. This tutorial starts off with the basic method involved then goes into some more advanced effects. And finally finishes off by describing how to dynamically update the movie located in your pop-up with JavaScript from your parent movie.

Overview
This becomes a powerful method because it enables you to include JavaScript in any Flash movie regardless of where it is located. For example with this tutorial you can open up a new window (with specific dimensions, location, and browser features) from a banner ad or from your Flash footer for various message boards, regardless of what JavaScript is located in the document in which it is embedded. Traditionally you would have to include predefined JavaScript in the html document that the movie is embedded in. After we go over the basic technique we will be going into various effects using JavaScript such as shaking the pop-Up window, moving the pop-up once loaded, opening and closing the pop-up at specific delay times, scrolling to a specific location in your pop-up, etc etc. Then goes on to explain how to control that pop-up from the parent movie timeline - using this you can for example shake a pop-up window you previously opened at a specific time or event in your Flash movie. Some features will not be available to all browsers as well as when you are opening a pop-up window not located on the same server as the parent movie. The example for this tutorial provides you with a JavaScript code generator that you can use to create all the effects we will be covering plus more. Every single JavaScript property, method, and function related to pop-up windows was attempted to be included for use in the Auto-Code Generator - for this reason some will not be available to all browsers (most will though). You can use/review the auto-code generator at this link http://www.flash-db.com/PopUp In the end of this document I provided a brief overview of how to use the Auto-Code Generator, but it should be fairly self explanatory.

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=40 0,height=300,left=0,top=0, toolbar=No,location=No,scrollbars=No,status=No,resizable=No,fullscree n=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=N o'. 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.flashdb.com/index.php','newWin','width=400,height=300,left=0,top=0, toolbar=No,location=No,scrollbars=No,status=No,resizable=No,fullscree n=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.

Adding Custom Functions and Effects to your popup window

Their is really no limit to the amount of effects you can add to the popup window your opening. I'll try to go over a few relevant examples and what makes them work. Then you can create your own or use the Auto-Code Generator. Some effects are not cross browser compatible and some may not work when opening pages outside of the domain where your movie is located.

Move window to new position 1000 milliseconds (1 second) after it loads

on (release) { getURL ("javascript:NewWindow=window.open('ShowPopup.php','newWin','width=40 0,height=300,left=0,top=0, toolbar=No,location=No,scrollbars=No,status=No,resizable=No,fullscree n=No'); NewWindow.focus(); setTimeout('NewWindow.moveTo(200,300)',1000); void(0);"); }

The above script allows you to 'move' the window to a new location at a certain time after it opens. ThesetTimeout part controls the time delay (in milliseconds) to wait until that part of the code is activated. TheNewWindow.moveTo(200, 300) part tells the window where to go, the (200,300) part is the same as the X and Ycoordinates of where you would like your window to move to. It is important to note that we always reference the popup window by the object name we gave it in the first part of the script 'NewWindow'.

Display an Alert before window is opened then scroll to a specific point 3 seconds after it loads

on (release) { getURL ("javascript:NewWindow=window.open('ShowPopup.php','newWin','width=40 0,height=300,left=0,top=0, toolbar=No,location=No,scrollbars=No,status=No,resizable=No,fullscree n=No'); alert('Flash Rules'); NewWindow.focus(); setTimeout('NewWindow.scroll(0,400)',3000); void(0);"); }
The above code will open a new window with the various properties as indicated. Then display an Alert box that contains the text 'Flash Rules' before the window opens. The alert('Flash Rules'); is the code that will activate the alert. Then we add the code setTimeout('NewWindow.scroll(0,400)',3000); to Scroll the window down by 400 px the (0,400) part represents the X and Y coordinates you want to scroll by. The setTimeout part adds a delay to the scroll, in this case the delay time is 3000 milliseconds or 3 seconds, before the scroll happens. It can be important at times to add a delay because you can't scroll a page that has not loaded.

Open window, Resize it after 1 second, then Close it after 6 seconds

on (release) { getURL ("javascript:NewWindow=window.open('ShowPopup.php','newWin','width=40 0,height=300,left=0,top=0, toolbar=No,location=No,scrollbars=No,status=No,resizable=No,fullscree n=No'); NewWindow.focus(); setTimeout('NewWindow.resizeTo(500,500)',1000); setTimeout('NewWindow.close()',6000); void(0);"); }
The above code opens a popup window, the resizes it after 1 second to the new dimensions of (500,500) instead of 400 x 300. This is done by the code: setTimeout('NewWindow.resizeTo(500,500)',1000);. Then it is closed after 6 seconds by the code setTimeout('NewWindow.close()',6000);. The most important thing to notice about the delay close code is the NewWindow.close() This is the basic code that will close a popup window. As you can see by now their is really no limit to the amount of effects that you can add. The main limitation is not with the JavaScript or Flash but with Browser compatibility. The resizeTo and scroll functions will not work with all browsers. You can get fairly creative by mixing and matching functions and portions of the code. The next section deals with manipulating and adding more effects to the Popup window you recently opened from the parent Flash movie.

Manipulating, Moving, Resizing, Scrolling, and Animated effects for the window Once opened

The following reference provides ways to control you popup window once opened. You can either place the code on buttons that control the popup or on frame actions that will manipulate the popup window at certain time's when the movie is playing. We'll start off with some simple functions then move onto some more complex ones. You can also combine these with the previous section and have the various affects occur when the popup is loaded.

Move previously opened Window

on (release, rollOver) { getURL ("javascript:NewWindow.moveBy(30,0); NewWindow.focus(); void(0);"); }

The above code will move a window you previously opened 30 pixels to the right (horizontal). The main code that controls this is NewWindow.moveBy(30,0); The (30,0) represents the X and Y coordinates you want to move the window to, respectively. The NewWindow.focus(); is also used to bring the window to the front of the browser each time you move it. If this part was left out the window would still move, but it would be behind the parent window so you would not see it move. Both on (release, rollOver) where used in this example - meaning that if a person rolls over the button that this code is located on the popup button will move 30 pixels to the right. You can use the same basic method to Scroll or Resize a popup window as well. The only thing that would change would be the moveBy(30,0) part. To scroll this would be scrollBy(30,0) and to resize it would beresizeBy(30,0). The scrollBy one is probably one of the most interesting and useful because you can scroll to different parts of the page you opened with the popup window - all controlled by the parent movie. Also the (30,0) are just arbitrary numbers - you can use any numbers their that you want - for example moveBy(300,230)would cause the movie to move 300 px to the right and down 230 px. One of the most important parts of the above code is that you use the same window object to reference the popup that you originally created the popup window with. In this case that would be 'NewWindow'. It should be noted that you can use any name for the window object as you want - as long as you keep it consistant.

Close previously Opened window

on (release) { getURL ("javascript:NewWindow.close(); void(0);"); }

This just closes the window that you originally opened from a button in the parent Flash movie. Again it's important to keep the window object variable names the same. To close a window from itself (meaning the button is located in the same window you are closing) you can just leave out the 'NewWindow' variable name and use getURL ("javascript:close(); void(0);");

Shake the previously opened Movie

on (release, rollOver) { getURL ("javascript:NewWindow.focus(); for (i=10; i>0; i--) { for (j=6; j>0; j--) { NewWindow.moveBy(0,i); NewWindow.moveBy(i,0); NewWindow.moveBy(0,-i); NewWindow.moveBy(-i,0); }} void(0);"); }
Probably the best effect. This effect shakes the popup window for specific intervals and shakeness (couldn't think of better word). The first thing that we do is bring the popup window to the front of the browser, like always withNewWindow.focus(); Then we use two 'for' loops to move the window back and forth and up and down really fast. You can change the settings by changing the values for i and j.

Animated Move, Resize, and Scroll

on (release, rollOver) { getURL ("javascript:NewWindow.focus(); for (j=150; j>0; j--) { NewWindow.moveBy(2,1.33333333333333); } void(0);"); }

The above function shows how to create an animated Moving window. This will move your popup window across your screen. Like always we use the focus(); command to move the window to the front before we move it. Then we use a 'for' loop to move the window across the screen in small increments. In this case the variable jindicates how many times it will incrementally move. By increasing j to say j=300 will increase the smoothness of the move creating smaller increments. Watch out though if you make j to large you'll freeze up your computer and get stuck in an infinite loop. This is basically the same code used for the Animated Resize and Animated Scroll. To change this over to Animated Scroll or Animated Resize you would for example change the NewWindow.moveBy( portion toNewWindow.scrollBy(.

Adding custom text, message's, and Links to your Popup window with JavaScript + PHP
This is where we get a little bit more technical and use a little bit of PHP - The php used in this example is so simple though that you should be able to convert it over to ASP or CFM with little or no experience in either. Please note that PHP or any other server side scripting language is not needed before this section. And can be avoided all together with the document.write function in JavaScript. Here's the basic code used when we open the popup window:

on (release) { getURL ("javascript:NewWindow=window.open('ShowPopup.php?customName=Jeff&cus tomLink=http://www.flashkit.com& customMessage=This is my Custom Message','newWin','width=400,height=300,left=0,top=0,toolbar=No,locat ion=No,scrollbars=No, status=No,resizable=No,fullscreen=No'); NewWindow.focus(); void(0);"); }
The part in red is the only part where changing from the original 'basic' code. What where doing here is attaching variables onto the end of the URL string. Then we embed the Flash movie in a php page (which is the same as html, with the exception that we can add scripting to it). The PHP file would contain the following code in any part before we embed the movie:

<? if ($customName || $customLink || $customMessage) { $Attach = "?customName=$customName&customLink=$customLink&customMessage=$custom Message"; } else { $Attach = ""; } ?>
What this does is to grab the variables indicated with a preceding $ sign from the URL - then put them into a format we can attach onto the end of the SWF embed tags. The $Attach variable is used to store all of them. The embed code for the Flash movie would then look like this:

<OBJECT classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swf lash.cab#version=5,0,0,0" WIDTH=820 HEIGHT=640> <PARAM NAME=movie VALUE="display.swf<? print"$Attach";?>"> <PARAM NAME=quality VALUE=high>

<PARAM NAME=bgcolor VALUE=#0066CC> <EMBED src="display.swf<? print"$Attach";?>" quality=high bgcolor=#0066CC WIDTH=820 HEIGHT=640 TYPE="application/x-shockwave-flash" PLUGINSPAGE="http://www.macromedia.com/shockwave/download/index.cgi?P 1_Prod_Version=ShockwaveFlash"> </EMBED> </OBJECT>
The most important part of the above embed code is indicated in Red. This will just print out the variables that we earlier defined with the $Attach variable onto the end of the flash movie. These variables will automatically be declared in the movie. Theirfor all you have to do to the Flash movie in order to see your custom text is to create a dynamic text field named for example 'customName' or 'customMessage'. For the link to work all you need to do after this is to create a button and add the following code:

on (release) { getURL (customLink, "_blank"); }

The red part indicates the variable you attached to the Flash movie in the embed code. And that's about it. You can actually create some fairly advanced applications with all these mentioned procedures and functions.

Using the Auto-Code Generator

The auto-code generator will automatically create any of the previously mentioned popup window effects, plus a lot more. To Use: 1) First try just using the 'Generate Popup' button to create a new window. 2) Add any effects by selecting various functions such as 'Add Scroll' or 'Add Resize'. You can then add any combination of these to create various effects. A delay parameter is added to most of them to indicate the amount of time to pass between applying the effect. Remember that it's all in milliseconds - so 1000 ms would be 1 second. 3) The auto and animate functions will only work if you have already opened a popup window. 4) Some effects functions will not work if you change the target URL to a link outside of the domain where the example is located. For example if you change the target URL to www.google.com then try to use an Animate or Auto function on that window it will not work correct. This should not be that much of a problem though because most of the time we are opening pages located on the same server. 5) Play around with the different settings. Some of these may not be that well defined but they all change the effect slightly. For example with the Animated Resize function the i parameter indicates smoothness (increments), the x and y indicate the amount you want to resize the window by. 6) Find an effect you can use then copy and paste the Auto Generated code in the screen below and place it on any Flash button or Frame action. To copy and paste it's usually easier to 'right click' and select 'copy' with the mouse then to use Ctrl+C. Sometimes copy and paste can be a little bit tricky when it's from one Flash movie to another.

Conclusion
That's about it. Hope you found this interesting. Have fun playing around with Pop-ups. -Jeffrey F. Hill