Controlling the size and position of your Flash movie.

Part 2. Size and position of the browser window on the user's screen.

Size:

You can control the size of the user's browser window when your Flash movie opens. To make this work, the end user must have Javascript enabled on their browser. To change the size of the browser window, use the Javascript function resizeTo(). This function takes two arguments, the height and the width of the window.

Every browser has a different amount of space available. Each browser has a header space that holds a variety of navigation controls, the location space and any number of additional controls. The browser window may have a footer space and/or a left and right edge. This means that you can't know how to best set your user's browser window so that it fits to your Flash movie. This example shows the browser resized to hold a movie set to 550 X 400 pixels. This example uses a window size of 600 by 550 pixels, which works well in my copy of Firefox, but is too short in my copy of Camino. Opera doesn't allow windows to be resized.

example 6

If you set your Flash movie's dimensions to a percentage, 100% to be exact, then your Flash movie will will the space of this resized window. For best results, you should set the Scale option to No scale. Additionallly you will need to use the margin removing CSS from the previous section to get a flush look for your movie.

example 7

Position:

You can control the location of the browser window on the user's monitor. This control uses Javascript to position the window. The function is moveTo() and takes two arguments, the horozontal and the vertical position on the screen. The upper left corner of the user's screen is the point 0,0. So if you position the window at 0,0, it will be in the upper left corner of the user's screen. A positive value larger than 0 for the horizontal value will move the window to the right on the screen, a positive number for the vertical value will move the window down the screen.

The user's browser knows how large the user's screen is. The screen object in Javascript has a width and a height property, and you can use their values. The screen object also has an availWidth and availHeight property. These are slightly different from the width and height and take on-screen widgets into account when defining the width and height.

To reposition the browser window so that it is centered left to right on the user's screen, you can use a simple Javascript function like this:

<script language="javascript">
function moveWindow() {
newX = (screen.availWidth - window.outerWidth) /2;
self.moveTo(newX,0);
}
</script>
example 8

You can use this function along with the function to size the window together to resize and reposition the browser window.

If you want to fill the user's monitor screen with the browser window and your Flash movie then you can use a combination of all of these controls.

  1. You will need to publish your Flash movie so that it is set to use a percent dimension, use 100% for the width and height. Set the scale option to best suit your movie's content. I usually use No Scale.
  2. Write a CSS declaration to remove the margins around your Flash movie.
  3. Write a Javascript function to resize and move the browser window to take up the whole screen.
example 9