Flash Tutorial: Pop Ups	Home • Tutorials • Forum • Webwasp Members • Templates • Mates • Food • Contact

Flash - Pop Up Windows

Free Flash Pop Up Tutorial

There are a number of ways of creating Pop Up windows, but this is by far the best that I have come across. The code here gives you complete control of your Pop Up window including the position on the screen. What's more you don't have to fluff around with adding JavaScript to the HTML of the web page. All the code is embedded in the button in the Flash file.

Note: Windows XP Service Pack 2 has a Pop Up blocker. This tutorial has been updated with this in mind. You should be aware that the ActionScript on (rollOver) will no longer work if a PC has the newer version of Windows. You must use: on (release)

Cross Ref: There is now another tutorial on this site which is about communication between Flash Movies. This technique is also a very good way of creating Pop Up windows and subsequently controlling them from the original base Movie: Communication between Flash Movies

Example: Download the Flash file Int 112a

Click the buttons to see the Pop Ups.

Note: As you click the mouse on the buttons, the 'Active' Window comes to the front.

Step One: Left Button Script

The following script is attached to the button on the left:

on (release) {
    MovieClip.prototype.openWin1 = function(url, winName, w, h, toolbar, location, directories, status, menubar, scrollbars, resizable){     
    getURL("javascript:var myWin1;if (!myWin1 || myWin1.closed){myWin1=window.open('"+url+"', '"+winName+"', '"+"width="+w+", height="+h+", toolbar="+toolbar+", location="+location+", directories="+directories+", status="+status+", menubar="+menubar+", scrollbars="+scrollbars+", resizable="+resizable+", top='+0+', left='+150+'"+"')} else{myWin1.focus();};void(0);"); };

    address = "pop1.htm";
    winName = "window1";
    width = 400;
    height = 300;
    toolbar = 0;
    location = 0;
    directories = 0;
    status = 0;
    menubar = 0;
    scrollbars = 0;
    resizable = 0;
    openWin1(address,winName,width,height,toolbar,location,directories,status,menubar,scrollbars,resizable); }

Note: In the ActionScript above to type the line: | use: Shift + Back Slash \

Line by Line:

on (release) {
When the mouse clicks the button do the following...

MovieClip.prototype.openWin1 = function(url, winName, w, h, toolbar, location, directories, status, menubar, scrollbars, resizable) {
This must be one line in the Action panel.
The line declares a function that has various parameters (URL, Window Name etc.) This line does not do anything until the function is declared further down in the script.

getURL("javascript:var myWin1; if(!myWin1 || myWin1.closed){myWin1 = window.open('"+url+"', '"+winName+"', '"+"width="+w+", height="+h+", toolbar="+toolbar+", location="+location+", directories="+directories+", status="+status+", menubar="+menubar+", scrollbars="+scrollbars+", resizable="+resizable+", top='+0+', left='+150+'"+"')} else{myWin1.focus();};void(0);");
This must be one line in the Action panel.
When the function is called, this line does the actual work. It sends all the info to the Browser to open a new Window. It tells the browser what size, position and various other specifications (which I will come back to). You will notice that this is not ActionScript but JavaScript (getURL("javascript:). This is because the Browser cannot understand ActionScript.

};
This closes the function.

Important Note: Because the function above sends info to the Browser (to open a new Window) the code will not work in Flash test mode. To test your work you must first Publish the Flash movie and test it in a Browser.

address = "pop1.htm";
The name of the file you wish to Pop up.
Normally Pop Ups are web pages but I guess it could be a Jpeg, Gif, Flash movie (swf's) or any other file that a browser can open, although I have not tried this.

winName = "window1";
The name of the window. This is similar to target frames in HTML. Each Pop Up Window needs to have a unique name like: "window1" "window2" "window3" etc.

width = 400;
The width of the Pop Up Window in pixels.

height = 300;
The height of the Pop Up Window in pixels

toolbar = 0;
If you want the toolbar buttons to be visible type 1, or type 0 if they are to be switched off.

location = 0;
If you want the (URL) Address bar to be visible type 1, or type 0 if it is to be switched off.

directories = 0;
If you want the toolbars like Links or Google etc. to be visible type 1, or type 0 if they are to be switched off.

status = 0;
If you want the Status bar at the bottom of the Window to be visible type 1, or type 0 if it is to switched off.

menubar = 0;
If you want the Menu buttons to be visible type 1, or type 0 if they are to be switched off.

scrollbars = 0;
If you want the Scroll bars to be visible type 1, or type 0 if they are to be switched off.

resizable = 0;
If you want the Window to be resizable type 1, or type 0 if it is fixed size.

openWin1(address,winName,width,height,toolbar,location,directories,status,menubar,scrollbars,resizable); Sends all the above info to the function on line 2 called: openWin1

}
Closes the handler: on (release)

Step Two: Window Position

What you may have noticed is that in this list of variables above (address, winName, width etc.), there is no info on the position of the window. If what you wanted to do is place the Window so many pixels from the left of the screen and so many from the top you could have a variable here sending those numbers to the function. But I have not done this because JavaScript give the extra option of positioning the Window relative to the centre of the screen. Therefore I have left this setting in the JavaScript Function. If you look at line three: getURL... You will see towards the end of the line:

Left Button

top='+0+',
Zero pixels from the top of the screen.

left='+150+'
150 pixels from the left of the screen.

This is quite straight forward. But the next button is different:

Middle Button

top='+((screen.height/2)-("+h/2+"))+',
Here the JavaScript positions the Window in the centre of the screen: From top to bottom:

Pop Up Window is centred from top to bottom.

Screen height divided by 2, minus half the height of the window.

Note: h is the height of the Window. See earlier in the line (height="+h+"). The reason for this h is so that the Screen height and Widow height do not get confused.

left='+((screen.width/2)-("+w/2+"))
This is the code that places the Window in the centre of the screen: From left to right.

Right Button

top='+((screen.height/2)-("+h/2+"))+',
Same as above.

left='+((screen.width/2)+100)
Positions the Window 100 pixels to the right of centre.

Step Three: Middle Button Script

Example: Download the Flash file Int 112a

Click the buttons to see the Pop Ups.

The code in this button is nearly the same as in the previous button but there are some important differences:

• Size and position: Marked in Green.
• Names: Marked in Red.

on (release) {
    MovieClip.prototype.openWin2 = function(url, winName, w, h, toolbar, location, directories, status, menubar, scrollbars, resizable) {
        getURL("javascript:var myWin2; if(!myWin2 || myWin2.closed){myWin2 = window.open('"+url+"', '"+winName+"', '"+"width="+w+", height="+h+", toolbar="+toolbar+", location="+location+", directories="+directories+", status="+status+", menubar="+menubar+", scrollbars="+scrollbars+", resizable="+resizable+", top='+((screen.height/2)-("+h/2+"))+', left='+((screen.width/2)-("+w/2+"))+'"+"')} else{myWin2.focus();};void(0);");
    };
    address = "pop2.htm";
    winName = "window2";
    width = 200;
    height = 200;
    toolbar = 0;
    location = 0;
    directories = 0;
    status = 0;
    menubar = 0;
    scrollbars = 0;
    resizable = 0;
    openWin2(address, winName, width, height, toolbar, location, directories,     status, menubar, scrollbars, resizable);
}

Note: If you do not change the Function, Window, and Variable names, the Pop Ups will not work correctly. You do not need to change the web page but normally you would. I have made the following changes:

• openWin2 // New function name
• window2  // New window name
• myWin2   // New variable name
• pop2.htm // New web page

The last button has similar changes. The beauty of this script is that you can have as many Pop Ups as you want, locate them where you want on the screen and all the script is contained in one place. No need to go scurrying around in the HTML to add bits of JavaScript. This makes it so much easier to update or move the Flash Movie to a new web page.

Step Four: Advance Options: By Rabid Lemming

A recent security flaw in windows service pack 2 now allows you to run a pop up code that will work against most popular pop up blockers. First add this to the head section of you web page with you flash movie on it:

<script type="text/javascript" language="javascript" src="blockbuster.js"></script>

Then create a new web page and replace all the html code with the following:

var win = null;
var g_fIssp2 = false;
g_fIssp2 = (window.navigator.userAgent.indexOf("SV1") != -1);
function shellscript1() {
win = window.open('http://www.YourWebSite.com/TheWebPage.html', 'mini', 'width=400,height=500,screenY=0,toolbar=0,menubar=0,scrollbars=1,resizable=1,location=0');
win.focus();
if (win && win.open) {
return true;
} else {
alert("\n_________________________________ \n\n"+" Your browser blocked the pop up window! \n\n"+" Please allow pop-ups on this site \n\n"+"_________________________________ \n\n");
return false;
}
}
function blockbuster1() {
if (g_fIssp2) {
x.DOM.Script.execScript(shellscript1.toString());
x.DOM.Script.execScript("shellscript1()");
} else {
win = window.open('http://www.YourWebSite.com/TheWebPage.html', 'mini', 'width=400,height=500,screenY=0,toolbar=0,menubar=0,scrollbars=1,resizable=1,location=0');
win.focus();
location.reload();
if (win && win.open) {
return true;
} else {
alert("\n_________________________________ \n\n"+" Your browser blocked the pop up window! \n\n"+" Please allow pop-ups on this site \n\n"+"_________________________________ \n\n");
return false;
}
}
}
defaultStatus = "http://www.YourWebSite.com";

Customize the script as required. The http://www.YourWebSite.com/TheWebPage.html is web url of the pop up window you want to pop up.

Save the page as: blockbuster.js

Then in flash use this code on your flash button:

on (release) {
getURL("javascript:blockbuster1()");
}

It probably wont be long before pop up blockers and Microsoft become wise to this but until they do enjoy the script.

Webwasp is Phil Schulz's baby. You are welcome to contact me or become my Facebook friend: Click here