| MACROMEDIA FLASH |
| LAUNCHING A NEW WINDOW |
Technique Three:
Popup Window with Hidden Frame
Version 2.5
Unsupported by: IE3 on Mac
Right-click (or CTRL-Click on Mac) and choose "Save Link As..." to
[Download the sample .zip file]
Description:
Technique Three uses frames to avoid the need to call JavaScript functions directly from a getURL in Flash. We use two frames. The first is the main movie frame (called top) and is set to take up 100% of the height of the browser window. The second is a hidden frame (called bottom) set to *, meaning that it will occupy whatever is left of the browser window, which is nothing (ie. it's hidden from view). In top, we have our embedded movie and our window launching script. In bottom we have a place holder page called empty.html. In the Flash movie, we insert either a button or a keyframe and set a Get URL action with a URL of launchwindow-bottom.html and a target of bottom. When the user clicks on the button, launchwindow-bottom.html is called into the hidden frame. Then, launchwindow-bottom.html uses the ONLOAD attribute of the BODY tag to start the window-launching function in the top frame. The window-launching function pops up the requested window and then attempts to make sure the new window is in front of all other windows (if the window.focus() method is supported in the current browser). Once the window is launched, the function removes the page in the bottom frame (using the history.back() method) so that the browser's back button will function properly. (Note that Netscape4 has problems with history.back() that I explain below).
New in Version 2.5: Issues with using Technique Three: Recommendation: How To The code is below. After ONLOAD="parent.frames[0].launchwin(, change: content.html to the URL of the page you want to load into the new window. And change height=150,width=300 etc. to your desired values in order to customize the look of your new window (for a list of what the features do, see Netscape's description of the window object or the more readable WebReference Window Feature List). I usually leave a comment in the page that reminds me of all the possible window features. Copy'n'paste the code into your text or HTML editor and save the page as launchwindow-bottom.html. If you are using Flash 3, under the "Modify" menu, choose "Instance" or "Frame" for buttons or frames, respective (must be a keyframe if you are using a frame action). Then click the "+" button and add a Get URL action. Under "URL" enter "launchwindow-bottom.html". Under "Window" enter "bottom" (that's the name of your bottom frame). If you are using Flash 2: for a button, first disable buttons (unselect "Enable Buttons" under the "Control" menu), then select your button. Under the "Modify" menu, select "Element". For a frame, click the little I-beam: Your movie should now contain a link that calls launchwindow-bottom.html into the bottom frame of your frameset. When that page is loaded, it will call the launchwin() function in moviepage.html which will launch your new window. What fun :) Export your movie and give it a try.
1) Using frames is considered a problem on larger sites due to increased production time, increased file maintenance, lower accessibility, and problems with bookmarks and site maps.
2) In Version 4 of Netscape on Windows and Macintosh, the workaround to fix the browser's back button isn't perfect. Read on if you want to know why...otherwise, skip down. Still reading? Ok, here's what's wrong with the back button in Netscape 4: normally we attempt to remove the page that calls the script in the hidden frame with history.back(). We do this so that the back button actually takes the user to the last page they visited, not to the empty page that was in the bottom frame before the window launching page was called into it by the flash getURL. The problem is that in Netscape 4, the history.back() method executes, but the actual history of the browser is not updated (ie. suppose that a user is on page "c", and we issue the history.back() command. The browser displays page "b" but does not remove the the entry for "c" from its history, meaning that clicking on the BACK button will return the user to page "b" rather than the desired page "a"). In our script, this behaviour would cause our function-launching page to reload in the bottom frame, meaning the browser's BACK button would always launch a new window instead of returning the user to their previous page. The only viable workaround is to sniff out Netscape4 and use the location.replace() method to remove the window-launching page from the bottom frame and replace it with empty.html. Unfortunately, that workaround still causes Netscape to buffer visits to empty.html, so Netscape4 users will have to press BACK on their browser once for each time they use the window launching button. Summary: the back button experience will be clunky in Netscape4 (especially where multiple windows are launched), but at least it will not trap users in an endless window-launching loop.
3) IE 4.5 on mac has an annoying behaviour: it mercilessly caches the launchwindow-bottom.html page that calls the window-popping function. when you call that page into the bottom frame the first time, the window pops up normally. but when you call it again, IE doesn't reload it because it just gets it from its cache. so the onload event never occurs. (even javascript statements placed directly into the head of the document aren't re-executed when the page is called after the first load). even cache preventing meta tags don't help. in flash 4 we can solve this problem using a dummy variable on to the end of the window-launching get url, as in:
Get URL ("launchwindow-bottom.html?cacheKiller=" & Random (9999999))
thanks to bas kamer for suggesting this workaround.
If you're willing to use frames, and you *must* support IE3, then Technique Three is the method of choice for opening a new window from Flash. In fact, there is something to be said for using a hidden frame to employ most JavaScript with Flash due to the avoidance of the ActiveX/LiveConnect requirement of FSCommand. Just be aware that Netscape4 users will have minor problems with their BACK button, so you may want to offer alternative navigation if you want to provide a way out of your movie page.
Here's how to use Technique Three to launch windows from your own movies.
First, build the frameset that will hold both your movie and your window launching page. I hide the bottom frame by using ROWS="100%,*" and setting FRAMESPACING, FRAMEBORDER, and BORDER to "0" (this covers both Netscape and IE). Name the top frame top and the bottom frame bottom. Cut'n'paste this sample code into a text editor, and save it as launchwindow-main.html:
<HTML>
<HEAD><TITLE>Your Title Goes Here</TITLE>
<!--
Hidden Frame Window Popup, Version 2.5
Last Updated: May 21, 1999
Code maintained at: http://www.moock.org/webdesign/flash/
Copy permission granted for non-commercial uses. Written by Colin Moock.-->
</HEAD>
<FRAMESET ROWS="100%,*" FRAMEBORDER="0" BORDER="0" FRAMESPACING="0">
<FRAME NAME="top" SRC="moviepage.html" FRAMEBORDER="0" BORDER="0" >
<FRAME NAME="bottom" SRC="empty.html" FRAMEBORDER="0" BORDER="0" >
</FRAMESET>
</HTML>
Notes:
1) As an attribute of <FRAMESET>, FRAMEBORDER is either true or false, but as an attribute of
<FRAME>, FRAMEBORDER is a pixel value for setting the width of the space between the browser edge
and the page content.
2) On <FRAMESET>, BORDER refers to the amount of pixels between frames,
while on <FRAME>, BORDER is simply a now-obsolete version of FRAMEBORDER.
Embed your movie in a page called moviepage.html (or change this name to whatever you used in the frameset code above).
Insert the JavaScript code below into the <HEAD> element of moviepage.html. I won't go into detail here about the JavaScript approach in launchwin(). If you want to see a full explanation of related code, visit JavaScript Utopia.
Copy'n'paste this code into the <HEAD> element of your moviepage.html:
-----START COPYING BELOW THIS LINE-----
<!-- BEGIN POPUP WINDOW SCRIPT -->
<!--
Version 2.5
Last Updated: May 21, 1999
Code maintained at: http://www.moock.org/webdesign/flash/
Copy permission granted for non-commercial uses. Written by Colin Moock.-->
<SCRIPT LANGUAGE="JavaScript"> var javascript_version = 1.0;</SCRIPT>
<SCRIPT LANGUAGE="JavaScript1.1"> javascript_version = 1.1;</SCRIPT>
<SCRIPT LANGUAGE="JavaScript">
var newwin;
function launchwin(winurl,winname,winfeatures)
{
//This launches a new window and then
//focuses it if window.focus() is supported.
newwin = window.open(winurl,winname,winfeatures);
if(javascript_version > 1.0)
{
//delay a bit here because IE4 encounters errors
//when trying to focus a recently opened window
setTimeout('newwin.focus();',250);
}
//Finally, because we loaded a new page into the bottom frame (to call the window launching
//script), we'll now unload that page by returning to the previous document, using history.back().
//We do this so the user's back button still works. In Netscape4 we use location.replace() because
//that browser's history.back() and history.go(-1) methods have problems that are documented at:
//www.moock.org/webdesign/flash/launchwindow-main.html
var bversion = parseInt(navigator.appVersion); //Get Integer of Browser Version Number (eg. "3")
var bname = navigator.appName; //Get Browser Name, (eg. "Netscape")
if(bname == "Netscape" && bversion == "4")
{
parent.frames[1].location.replace("empty.html");
}
else
{
parent.frames[1].history.back();
}
}
</SCRIPT>
<!--END POPUP WINDOW SCRIPT-->
-----END COPYING ABOVE THIS LINE-----
Create a new page called empty.html which has no content. This page is your placeholder, and will live in the bottom frame of your frameset whenever the window launching function is not active. Here's the code for your empty.html page (Remember to set the BGCOLOR to the same as the BGCOLOR of moviepage.html. This makes the seam between them invisible):
<HTML>
<HEAD><TITLE></TITLE></HEAD>
<BODY BGCOLOR="#yourbackgroundcolor">
</BODY>
</HTML>
Next, build the page with the ONLOAD event handler that will launch the new window. Your movie will call this page (called launchwindow-bottom.html) into the bottom frame of your frameset, and it in turn will call the window launching function from moviepage.html in the top frame. When launchwindow-bottom.html calls the function, it tells it which URL to load in the new window, and it sets the name and characteristics of the new window. If you want different buttons or frames in your movie to open different windows, create a unique copy of launchwindow-bottom.html for each window you want to launch, and set the URL, name, and features appropriately in each copy. Then in your Flash movie, call the version of launchwindow-bottom.html that launches your desired window. Note that this will not allow for simultaneous multiple windows--if a user opens a new window and then tries to open a second one, the second page will be loaded into the existing spawned window.
<HTML>
<HEAD><TITLE></TITLE></HEAD>
<!-- BE SURE THERE ARE NO LINE BREAKS IN THE LINE THAT BEGINS: 'height=150' -->
<BODY BGCOLOR="#FF7F00"
ONLOAD="parent.frames[0].launchwin('content.html',
'newwindow',
'height=150,width=300,dependent=1,directories=0,location=0,menubar=0,resizable=0,scrollbars=0,toolbar=0')">
<!--
Here is a list of the possible window features:
height=150,
width=300,
channelmode=0,
dependent=1,
directories=0,
fullscreen=0,
location=0,
menubar=0,
resizable=0,
scrollbars=0,
status=0,
toolbar=0,
screenX=0,
screeny=0,
left=0,
top=0
Only use the following attributes with a signed script:
---------------------------------
hotkeys=1,
alwaysLowered=0,
alwaysRaised=0,
titlebar=0,
z-lock=0,
---------------------------------
See: http://www.webreference.com/js/column7/attributes.html for explanations.
-->
</BODY>
</HTML>
Now that you've finished producing the window launching pages, you need to set an action in your flash movie to call launchwindow-bottom.html into your frameset. You can set the action on either a movie frame or a button.
on the keyframe at which you want your new window to launch. In either case, a dialog box appears in which you set your action. Choose Get URL as the action, then enter "bottom" in the "Target Window" field, and "launchwindow-bottom.html" in the "Network URL" field.