Controlling the size and position of your Flash movie.

Part 1. Size and position in the browser window.

Size:

You can control the size of your finished Flash movie. The size is controlled by the Dimensions option in the HTML tab of the Publish Settings window in Flash. There are three options: Match Movie, Pixels, and, Percent. Match Movie holds your Flash movie to its original dimensions. Pixels or Percent allow you to change the size from its original. The Pixels option allows you to set a new size to the movie. Percent allows you to set the size of the movie relative to the size of the browser window in which it sits.

The first example uses the Match Movie option. To second example uses Percent with the values set to 100%. The HTML window background is set to a color other than the Flash movie's background color. In both examples the Scale option is left at the Default setting. Change the size of the browser window to see the effect.

example 1 example 2

Position:

If you just want to center your Flash movie,left to right, in the user's browser window without regard for that window's size, then use a <div> to control the Flash movie's placement in the window. This next example uses the default publish settings of Match Movie and Default(Show All). Change the size of the browser window to see the effect.

example three

If you want to "float" your Flash movie in the browser window so that the movie has an even border left, right, top and bottom, then you have a little more work to do. If you look at any of the previous examples, you'll see a gap between the Flash movie and the browser window's edge. This space is called the margin. The size of the margin is set by the browser itself and is not the same across browsers. To fully float your Flash movie, you will need to control the size of these margins. This can be easily done using CSS in the browser or in a separate .css document.

example four

If you open this example's HTML document in a text editor, you'll see a style declaration in the head section. It looks like this:

<style type="text/css">
#divFloat {
position:absolute;
top:50%;
left:50%;
right:50%;
bottom:50%;
margin-top:-200px;
margin-left:-275px;
}
</code>

The values for the top, left, right and bottom are used to position the div. The margin values are expressed as negative numbers. The actual numbers are half the width and half height of the Flash movie that you are using, so be sure to adjust the values as needed.

This style is applied in the <div... tag in the body section of the document.

If you choose to let the size of your Flash movie expand to fill the user's browser window, then you will, probably, want to remove the margins around your movie. This is also a very simple CSS function. It looks something like this:

<style type="text/css">
body {
margin:0px;
}
</style>
example five