TechNote (Archived)

Use the SCALE parameters to control how a Flash movie displays in a browser

How do the SCALE parameters in the OBJECT and EMBED tags affect Flash movies?
The SCALE parameters work together with the dimension settings to determine how a Flash Player movie will display in a browser. The SCALE parameter specifically controls how a SWF file will scale, stretch or shrink asthe browser window is resized. This information is stored in the source code of the HTML page that has the embedded SWF file. There are three possible SCALE parameters to choose from, and each provides a different method of rendering the SWF file in the specified area. Each SCALE parameter calculates the given dimensions of the movie and the ratio of the original file in a different way, providing control over the look and visibility of the rendered SWF file.

The SCALE parameters are not always a factor when displaying a SWF file. The chart below lists the three possible scenarios:

	If the dimension settings are set to any percentage value, including one hundred percent, the SCALE parameter setting does affect the display of the movie. For example: If the original FLA movie size is Width="400", Height="300", the dimensions set in the HTML might be Width="100%", Height="100%", the dimensions set in the HTML might be Width="50%", Height="50%" or the dimensions set in the HTML might be Width="75%", Height="50%"
	If the dimension settings are set in pixel values that do not exactly match the ratio of the FLA's original stage size, the SCALE parameter setting does affect the display of the movie. For example: If the original FLA movie size is Width="400", Height="300", the dimensions set in the HTML might be Width="400", Height="200", the dimensions set in the HTML might be Width="300", Height="300" or the dimensions set in the HTML might be Width="250", Height="200"
	If the dimension settings are set in pixel values that exactly match the ratio of the FLA's original stage size, the SCALE parameter setting does not affect the display of the movie. For example: If the original FLA movie size is Width="400", Height="300", the dimensions set in the HTML might be Width="360", Height="270", the dimensions set in the HTML might be Width="120", Height="90" or the dimensions set in the HTML might be Width="40", Height="30"

Embedding a SWF file in an HTML document allows you to use attributes to the OBJECT and EMBED HTML tags, such as SCALE, to control the Flash Player movie. The HTML page may be generated in one of three ways. The first method involves using the Publish feature in Flash. The dimensions of the SWF are taken from the values entered in the HTML publish settings. When entering the size settings, choose between a percentage or a specific pixel value for the height and width of the movie. The Match Movie option will set the dimensions to the size of the movie. If this option is selected, the SCALE parameter will not affect the display of the SWF in the browser.

The second method involves inserting the SWF file into an HTML page using Dreamweaver. The Flash object links the Flash movie to the HTML page by creating a relative path to the asset. Once the Flash movie has been inserted, the dimensions can be added by manually typing the values into the height and width fields of Dreamweaver's Property inspector, while the SWF is selected. If not already visible, the Property inspector can be accessed by selecting Window> Properties.

The third method involves hand coding the HTML page. This can be done in any text editor or in Dreamweaver's Document window. As stated above, the height and width of the SWF can be set to either a percentage or an exact pixel size, but the SCALE parameters are not taken into consideration if the pixel size exactly matches or maintains the proportional ratio of the original FLA file.

The following is a list of the SCALE parameters, with the corresponding display results for each:

	Default (Show All)	This setting renders the entire movie visible, while retaining the original aspect ratio of the movie. Because of this, the movie will not be distorted, because the proportions are constrained. Borders may be present on the two sides of the movie if the browser window's dimensions do not match the stage size's ratio.
	No Border	This setting scales the movie in order to fit within the specified area, to ensure that no borders will appear. The movie maintains it's original aspect ratio. No distortion will occur, but the sides of the movie may be cropped off.
	Exact Fit	This setting ensures that the entire movie will be visible within the specified area. Because the movie is scaled to fit at a ratio that may not reflect the original file, distortion of the movie may occur.

Each SCALE parameter above provides different methods of rendering the SWF file. It may be useful to try all of the options and preview the Flash movie in a browser while resizing the window to determine which will best suit the design. Manipulation of the SCALE parameter setting will cause the SWF to scale, stretch and shrink in response to the browser window contracting or expanding in size.

Occasionally, a project may be created that purposely places objects out of the viewable area. Care should be taken when setting the movie dimensions and SCALE parameters, to achieve the desired playback results. For more information on this process, seeWhy does my Shockwave Flash movie display elements that are animated off stage? (TechNote 13093).