.
.
 
Full-Screen Flash

Here we clear up all confusion about setting the browser window to full-screen in Internet Explorer using JavaScript. Flash all the way to the edge of the screen, without borders and regardless of screen resolution. Click Here for a demo!

Dissymmetry Intermediate Flash Tutorial (5,214 bytes)

Basically, we will use JavaScript to open a new window containing the Flash Movie. There will be two html pages and a Flash movie as the final result of this tutorial. One page is used as the "pointer" to the other which contains the Flash movie.

1) The following JavaScript should be entered into the <head> of the page you want to launch the Full-Screen Flash movie from:

<script language="JavaScript">
function launchwin()
{
      newwin = window.open("fullscreen.html","WindowName","fullscreen=1, scrollbars=1")
      newwin.resizeBy(15,0)

}
</script>

This script is key to fixing a small oversight by IE. When in fullscreen mode, the right hand scrollbar is present no matter what. The window.open parameter "...scrollbars=0..." only tells IE to color the scroll bar with the page background color to mask it, but it truly is not "full-screen". We are not removing the scrollbar, but stretching the window just enough to push it off of the screen with the resizeBy() function. The function calls in JavaScript are case-sensitive, the "resizeBy" function must be called exactly that way or it will not work. It may be necessary to adjust the value of 15 to produce the desired results. Note that the bold portion of the code "WindowName" is what you will use to reference the window from now on. newwin is a local variable that will not extend past the scope of the launchwin() function.

2) Next, generate the html document that will be the contents for the new window we are creating. I suggest using Flash to generate these html documents to be sure that the object class id, codebase and tags are configured correctly. Be sure to publish with the settings set to 100% height and width or the Flash movie will not resize to fit the window.

3) Edit the html document and change the <body> tag to look like this:

<BODY bgcolor="#FFFFFF" topmargin="0" leftmargin="0">

The topmargin and leftmargin parameters rid the browser of the default margins of about 15 to 20 pixels. Without these parameters, your Flash movie will never reach the edge of the screen.

4) There are many ways of calling the JavaScript function "launchwin()". It can be called when the page loads by adding the following to the <body> tag:

<BODY bgcolor="#FFFFFF" topmargin="0" leftmargin="0" onLoad="launchwin()">

or you can place the call in a hyperlink as we did on this page:

<a href="javascript:launchwin()">Launch</a>

4) Closing the window is simple, simply add the following actionscript into the Flash movie:

getURL("javascript:WindowName.close()")

This should be added both to the end of the movie to allow the Flash movie to close the Full-Screen window itself when it is finished and in a "skip" button to allow the visitor to opt out of viewing the Flash movie.

 

Next Tutorial: Full-Screen Flash, Part II (Frames Method)

 

.
Right-Bottom 006699.gif (866 bytes)

"The Internet is the foundation for a new industrial order. ... If you don't believe deeply, wholly...that the Net is going to change your business, you're going to lose."  - Fortune Magazine

All graphics on this site are copyrighted by their respective distributors and may not be duplicated, modified in any fashion or used in any way without consent.

Last Updated: 12/5/07

Home |  Tutorials |  Basic |  Intermediate |  Advanced |  Contact Us