Resize html embed area when Flash stage size changes

I’ve been building an app where the size of the flash area is going to change beyond the bounds of the browser window at certain points – but I do not want to use flash scrollbars, as you’re already in a browser and as a user I much prefer the browsers scrollbar over dinky wee extra ones which don’t nessessarily act in the same fashion as i am accustomed – much nicer to use the same one you’ve already got!

So! What you do is call a javascript function which resides on the page that holds your movie with ExternalInterface.

So, step by step:

1. Add your external interface call into your flash movie, when you want to resize the stage.

ExternalInterface.call("setFlashHeight", variableToChangeHeightTo);

2. Add stage scale code to stop the stage rescaling willy-nilly with the size of its embedded area (unless you want it to!) This code keeps the 100% scale and keeps it at the top of the stage area:

stage.scaleMode = StageScaleMode.NO_SCALE;
            stage.align = StageAlign.TOP_LEFT;

3. Go into your flashfile.html or whatever you’ve called it, the holder of the swf, and plug this javascript function in the header:

<script language="javascript">
// this script is to resize the emb object code when the content of the swf extends beyond the bottom of the page. 
// borrowed and edited from http://www.davidortinau.com/blog/2009/07/
function setFlashHeight(newHeight)
{
var viewportwidth;
var viewportheight;
 
// the more standards compliant browsers (mozilla/netscape/opera/IE7) use window.innerWidth and window.innerHeight
 
if (typeof window.innerWidth != 'undefined')
{
viewportwidth = window.innerWidth,
viewportheight = window.innerHeight
}
 
// IE6 in standards compliant mode (i.e. with a valid doctype as the first line in the document) 
else if (typeof document.documentElement != 'undefined'
&& typeof document.documentElement.clientWidth !=
'undefined' && document.documentElement.clientWidth != 0)
{
viewportwidth = document.documentElement.clientWidth,
viewportheight = document.documentElement.clientHeight
}
 
// older versions of IE 
else
{
viewportwidth = document.getElementsByTagName('body')[0].clientWidth,
viewportheight = document.getElementsByTagName('body')[0].clientHeight
}
 
document.getElementById('flashContainer').style.height = (viewportheight > newHeight) ? viewportheight + 'px' : newHeight + 'px'; 
}


</script>

Note the ‘flashContainer’ reference there – that is the name of the div that the javascript resizes (it doesn’t resize the flash).

4. In your flash embed code, both in the javascript and the no-script code, change the height references from a fixed number (if they are) to 100%.

<embed src="index.swf" quality="high" bgcolor="#171717" width="1018" height="100%" name="index"

5. Wrap the entire flash code area within the flashContainer div.

<div align="center" id="flashContainer">[FLASH CODE GOES IN HERE]</div>

Should be sorted.

Massive borrowing from here:
http://www.davidortinau.com/blog/2009/07/

Oh and also, don’t forget you have to import these classes into your document class / fla (maybe fla):

import flash.external.ExternalInterface;
import flash.display.StageAlign;
import flash.display.StageScaleMode;