Problem:
The scale mode for ActionScript projects is set to allow zooming by default even when the width and height are set to fixed sizes. This can distort your website when the user uses ctrl-mouse scroll wheel or hits ctrl-plus / ctrl-minus.

Solution:
Set the stage scaleMode to “noScale” and configure the containing div to stretch at 100% for the height and with. You may also want to set the stage alignment to “T” which will align your content to the top of the page. This will work in AS2 as well but the ‘S’ is capitalized in Stage.

package {
	import flash.display.Sprite;
	import flash.display.StageAlign;
	import flash.display.StageScaleMode;
	
	import mx.core.BitmapAsset;

	[SWF(width="700", height="265", frameRate="27", backgroundColor="#ffffff")]
	public class ScalingApplication extends Sprite
	{
		[Embed(source="assets/background.jpg")]
		private var Background:Class;
		private var _background:BitmapAsset = new Background();
		
		public function ScalingApplication()
		{
			// Prevents distortion / zooming
			stage.scaleMode = StageScaleMode.NO_SCALE;
			
			// Aligns content to the top center
			stage.align = StageAlign.TOP;

			this.addChild(_background);
		}
	}
}

For full screen pages use the following CSS:

body {
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	background-color: #FFFFFF;
}

You will also want to set your Flash element and div with / height to 100%.

Uses:
Setting the scaleMode to “noScale” allows the ActionScript project to behave more like a Flex application. Benefits to having an ActionScript project will come in a later post. The “noScale” mode gives the developer more control to create a pixel perfect design. The stage height and width variables are still available so the web application can be sized based on its own set of rules rather than having the whole application scale. This method can also be used to produce websites that scale to the full size of the browser, for example: JDesignFactory.

Disadvantages:
The scaling within browsers is intended for people that may need to have a larger font in order to read the text. From a design perspective you need to be aware that you are potentially limiting your audience by preventing the application scaling. This drawback can be overcome by setting up scaling rules within your ActionScript or allowing the user to change font sizes. Another solution would be to have an HTML version of your site that would allow users to scale the content without having to sacrifice your Flash design quality.

Sample Code

Resources:
Stage Livedocs link
StageScaleMode Livedocs link
StageAlign Livedocs link