Dynamic resizing full bleed background image
This was a quick mock-up done in Flash CS3 for a pitch for a new site for Harrogate Ladies college. The background images rotate thorugh a slideshow and will dynamically resize as you change the size of your browser window. In order to see this working you will need to view the swf in it’s own window… here’s the link
The code for the resizing the image on resize is pretty straight forward, just don’t forget to add smoothing to your source images.
resizeHandler(null);
stage.scaleMode = StageScaleMode.NO_SCALE;
stage.align = StageAlign.TOP_LEFT;
stage.addEventListener(Event.RESIZE, resizeHandler);
function resizeHandler(e:Event):void {
// get largest dimension scaling
var w = stage.stageWidth / 1022;
var h = stage.stageHeight / 687;
var newWidth, newHeight;
if ( w > h ) {
newWidth = stage.stageWidth;
newHeight = 687 * w;
} else {
newHeight = stage.stageHeight;
newWidth = 1022 * h;
}
backgrounds.width = newWidth;
backgrounds.height = newHeight;
}