How to center a Flash movie

1. I want to show a large Flash movie in a small window
2. The movie should not be scaled larger than 100%

Solution: use a liquid layout and constrain the scale from small to 100%, not larger.

Problem 2: Flash publish settings are not much help to you. Sure, you can set width and height to 100%, and set Scale to "No scale". But that will move the movie past the top left corner when you drag the window small.

The actual solution is to manage scaling in ActionScript. It took me a while to work it out properly, so I want to share it with you - it may save you considerable time.

View the demo movie - resize the window to view the effect

Of course you can make the scaling rules more sophisticated - see for example Almodovar's Volver movie site.

The code:

// set movie size constants
var MOVIE_MAX_WIDTH:Number = 550;
var MOVIE_MAX_HEIGHT:Number = 400;
// in this example we use an offset on all sides
var MOVIE_PADDING_V:Number = 2;
var MOVIE_PADDING_H:Number = 2;


// invoke "onResize"
Stage.scaleMode = "noScale";

var stageResizeListener:Object = new Object();
stageResizeListener.onResize = resizeStage;
Stage.addListener(stageResizeListener);
// invoke to init sizes
resizeStage();


function resizeStage() : Void {
	var maxWidth:Number = MOVIE_MAX_WIDTH - MOVIE_PADDING_H * 2;
	var maxHeight:Number = MOVIE_MAX_HEIGHT - MOVIE_PADDING_V * 2;

	var settingsAspectRatio:Number = maxWidth / maxHeight;
	var height:Number = Stage.height - MOVIE_PADDING_V * 2;
	var width:Number = Stage.width - MOVIE_PADDING_H * 2;

	var stageAspectRatio:Number = width / height;

	var resizeFactor:Number = 1;
	var scaleFactor:Number = 1;
	if (stageAspectRatio <= settingsAspectRatio) {
		// higher than wide
		// calculate the new height given settingsAspectRatio
		var h:Number = width / settingsAspectRatio;
		// as percentage:
		resizeFactor = 1.0 / maxHeight * h;
		scaleFactor = 1.0 / Stage.height * height;
	} else if (stageAspectRatio > settingsAspectRatio) {
		// wider than high
		// calculate the new width given settingsAspectRatio
		var w:Number = height * settingsAspectRatio;
		// as percentage:
		resizeFactor = 1.0 / maxWidth * w;
		scaleFactor = 1.0 / Stage.width * width;
	}
	if (scaleFactor > 1 ) scaleFactor = 1;
	if (resizeFactor > 1 ) resizeFactor = 1;
	_level0._xscale = _level0._yscale = 100 * scaleFactor * resizeFactor;

	var x:Number = (maxWidth - width) / 2;
	if (width > (resizeFactor * maxWidth)) {
		x += (width - resizeFactor * maxWidth) / 2;
	}
	x += MOVIE_PADDING_H;
	_level0._x = x;
	
	var y:Number = (maxHeight - height) / 2;
	if (height > (resizeFactor * maxHeight)) {
		y += (height - resizeFactor * maxHeight) / 2;
	}
	y += MOVIE_PADDING_V;
	_level0._y = y;
}

And these publish settings go with it:

Download the demo plus source code