Our Flash tutorials provide you with step-by-step instructions on how to create beautiful Flash animations and integrate them into your website.  Home Flash & Swish Flash Tutorials Pop Up Windows
Your Ad Here

Pop Up Windows


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 you complete control 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 on (rollOver) will no longer works if a PC has the newer version of Windows. You must use: on (release)

Click the buttons to see the Pop Ups.

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

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 0 if they are to be switched off.

    location = 0;
    If you want the (URL) Address bar to be visible type 1 or 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 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 0 if it is to switched off.

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

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

    resizable = 0;
    If you want the Window to be resizable type 1 or 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)

Window Position

What you may have noticed 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 exactly in the centre of the screen 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 centre's the Window in the other direction: 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.

Middle Button Script

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 names of the Function, Window and Variable the Pop Ups will not work correctly. You 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.

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="/img_articles/5984/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 oif the pop up window you want to pop up lol

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.



Author's URL: Phil
Thank you for voting.
Rate this Materials:
Bad 
1 2 3 4 5 Excellent
print this page subscribe to newsletter subscribe to rss

Internet & computing Flash is a vector-based moving graphics format created by Macromedia for the publication of animations on the World Wide Web. More Flash & Swish: Most Popular Materials | Fresh Materials | More Flash Tutorials at FlashPerfection.com

Add comments to "Pop Up Windows"

Only registered users can write comment

Reader's comments
comments misael September 20, 2006 says:
Pop Up Windows
Hi, I don't know which version of Flash was used by Phil. At first the code didn't work in Flash MX, I changed the player settings and if you use flash player 5 and actionscript 1 (it wont let you use actionscript 2 anyways) the code provided in this tutorial works perfectly :D

I made this changes to make it work in flash player 7 actionscript 2 (this code is the replacement of the 2nd example Phil gives, the button in the middle):

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

I changed the "prototype" part for the "_global" syntax, as the protoype syntax has been abandoned.

I also changed MOST of the "status"'s and "location"'s for "status1"'s and "location1"'s, as it seems they're reserved words now.

Hope this turns out useful for someone, have fun!
comments tangent November 15, 2005 says:
Pop Up Windows
I used the very helpful tutorial

http://www.webdesign.org/web/flash/tutorials/pop-up-windows.5984.html

to incorporate pop up windows into my sites, of which i have near completed about 4 listed below

http://www.digitalcargo.co.ukhttp://www.mackalactickmusick.com
http://www.alltalkrecoveryradio.com
http://www.janetedwards.biz

Whilst i tested the sites with various browsers and anti block software they all appeared to work BUT now many of my clients are getting to me saying the pop ups dont work on all of their friends computer set ups either at work or home....

what am i doing wrong ? what can i do to resolove this ? www.digitalcargo.co.uk is a new company and its essential i iron out bugs like this as we are expanding very quickly.

feedback appreciated, will be happy to do some flash animation for anyone that can solve this problem 100% !!

thanks

robert mcgee
creative director
www.digitalcargo.co.uk