Photoshop Tutorials, Flash Tutorials, 3Ds Studio Max Tutorials, Web Design Tutorials


Software Tutorials

Featured Free Templates
View All Templates!
Preview  |  Download
Name: metamorph_flame
Downloads:
Preview  |  Download
Name: metamorph_skyandclouds
Downloads:
View All Templates!
Recommended Hosting:
Host Unlimited Domains on 1 Account
1500GB storage and 15000GB bandwidth for $6.95/mo!
Recommended Hosting:
Host Unlimited Domains on 1 Account
1500GB storage and 15000GB bandwidth for $6.95/mo!
:: Free Website Templates
Preview  |  Download Preview  |  Download Preview  |  Download
Name: metamorph_sunset Name: metamorph_flower Name: metamorph_waterfall
Downloads: Downloads: Downloads:

Do You Like Our Website? Share With Others!
GoogleGoogle slashdotYahooMyWebDiggTechnoratiDelicious
Page: 12345678910111213141516171819202122232425

Welcome To WebDesignTutorials.net Flash Tutorials Area - 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="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: Phil

Advertisements
Graphic Software, Flash Templates, Free Stock Photos, Web Templates, Web Design, Corporate Web Design, Royalty Free stock Photo, Affordable Website Design, Submit site, Add Url, Stock Photos, Survey Software, Anti Virus Software, E mail software, Computer Software

Premium Partners
  Free Website Templates - Flash templates, Affordable Website Design, Website Templates, Website Redesign, Custom Website Design, Web Design Tutorials, Flash Tutorials, Promotion Tutorials - that is what we do. Metamorphosis Design Studio offers quality, free and low cost web site templates for your business and personal life, we also offer affordable web design and site re-design.
  Vertex Website Tempales - It saves tones of time and money to use pre-made web designs to build your web site. You need a web site but you don't want to pay thousands dollars to professional web design companies? Our web templates is just for you! They are designed to be easilly edited by your favorite html editor, like MS FrontPage
  Photoshop Tutorials - Learn how to build stunning web pages using Adobe Photoshop, Macromedia Flash MX and 3D Studio Max software. The step-by-step approach makes it so easy, that even beginners can produce great web pages. Get started with these tutorials covering everything from page layout to content tips.
Free website templates and paid web templates are great tools to make your websites look perfect! You will save time and money with our flash templates and free website templates Our visitors are satisfied with the quality of our free and paid website templates! Please visit our free website templates and paid website templates sections. We offer free web templates, free web layouts, free web page templates and other stuff for free download. All templates come with the html and external css file so you may easily edit HTML with your favorite HTML editor. Feel free to download our free web templates for your personal websites.

Terms of use depend upon the website template vendor.
Home  |  Submit Tutorial  |  Top Sites  |  Free Templates  |  Website Templates  |  Privacy Policy  |  Contact Us
All Right Reserved by WebDesignTutorials.net