LEON  KESSLER / BLOG 

A recent site I did for Playgroup in collaboration with id & ego design, who made some fantastic artwork, that really needed to be shown off full screen.

There are several ways to display a swf in full screen. You firstly have the entire full screen, like you get with a youtube video. This is done by using StageDisplayState.FULL_SCREEN.
However, this isn’t the full screen I am talking about, I want to merely use the available space inside a browser window, so that the site appears to have been designed for the screen size of the user.

So to do this, firstly the swf has to be set as 100% width and height. This can either be done in Flash under Publish Settings->Html, or in my case I was using swfObject, so I was able to set the width and height as 100% in the embed tag, like this

swfobject.embedSWF('website.swf', 'content', '100%', '100%');

So the SWF will now stretch to fit the available space inside the browser (be it the whole page, or within a div container). How the SWF is resized depends on the scaleMode property. All properties except NO_SCALE allow the SWF and it’s contents to increase in size, some keeping the aspect ratio while others taking all of the available space (the Adobe docs explains quite well what each property does).
However, as everything inside the SWF is resized, text will get rather big or small on certain screens, and you generally have limited control as how things will appear.

One tool that helps this problem is swffit, which allows you to set minimum and maximum sizes for your swf.

However, this was still not enough in my case, so all that was left was to use the NO_SCALE scale mode and create functions in ActionScript and JavaScript to resize the contents.

Both functions will fire when the swf is first loaded, and on every resize of the browser. The ActionScript function is responsible for resizing and repositioning the contents of the SWF.  The JavaScript function keeps the aspect ratio of the SWF by resizing the div container on the HTML page.

ActionScript

stage.scaleMode="noScale";
stageResized(null); //To call the function when the SWF is first loaded
stage.addEventListener(Event.RESIZE, stageResized);
 
function stageResized(e:Event):void
	{
		background_mc.width = stage.stageWidth;
		background_mc.height = stage.stageHeight;
 
		centered_content_mc.x = (stage.stageWidth - centered_content_mc.width) / 2;
	}

This example will increase the background size, and reposition centred content so that it stays centred, but without resizing it.

JavaScript

            function resizeContents(){
                var width;
                var height;
                if (document.innerWidth) {
                    width = document.innerWidth;
                }
                else
                    if (document.documentElement.clientWidth) {
                        width = document.documentElement.clientWidth;
                    }
                    else
                        if (document.body) {
                            width = document.body.clientWidth;
                        }
 
                if (document.innerHeight) {
                    height = document.innerHeight;
                }
                else
                    if (document.documentElement.clientHeight) {
                        height = document.documentElement.clientHeight;
                    }
                    else
                        if (document.body) {
                            height = document.body.clientHeight;
                        }
                var container = document.getElementById('container');
		var swfWidth = 935;
		var swfHeight = 630;
 
		var scale = Math.min(width / swfWidth, height / swfHeight);
 
		container.style.height = Math.round(swfHeight * scale) + 'px';
                container.style.width = Math.round(swfWidth * scale) + 'px';
            }

This function gets the height and width of the browser (using several different ways to access the document object, insuring compatibility across browsers).
Then, I found the scale of the browser size compared to the original size of the Swf, and use the minimum of the two to work out the correct width and height. Using the minimum scale insures that the Swf will fit the page correctly keeping it’s original aspect ratio.

Next all I had to do was call the JavaScript function and make sure there was a div with an id of container, to be used by the JavaScript function to control the size, and a second nested div (I’ve called content) which swfObject will use to replace with the Swf.

    <body onLoad="resizeContents();" onresize="resizeContents();">
        <div id='container'>
            <div id='content'>
             </div>
        </div>