Javascript, History, Resizing - Part 1

OK here's a good one. I wanted to create a Flash site which acted like a normal HTML website. Why I would want to do this? You can only guess.

Two things I found are a problem when it comes to this. Resizing & History.

(I'll deal with History in Part 2)

Resizing means getting the browser to react to changes in the size of your Flash as it does to different HTML pages within a normal website (i.e. including and resizing scrollbars at the side of the page). Seeing as your swf is going to be the only thing on this page in order to achieve this we have to resize the swf within the HTML.

I'm happy to tell you that all this can be achieved via the wonder which is ExternalInterface. This is the AS3 class which can act as a bridge between Actionscript in your swf and JavaScript in the HTML page. It's also a cinch to use!

context: I use SWFObject.js as a way to embed my swf's into HTML pages. I don't know whether it's peculiar in this respect, but it means in the HTML the <embed> or <object> tags used always have a nice id="something" which identifies the swf within the page. That id="something" is going to be important.

I've embedded my swf in the HTML with the following code:

<script>
var so = new SWFObject("Something.swf", "something", "100%", "700", "8", "#FFFFFF");
so.addParam("scale", "noscale");
so.addParam("salign", "t");
so.write("flashcontent");
</script>

I won't explain how to use SWFObject here. There's lots of help out on the web. But the important bits to note are:

• the width is 100% but the height is 700 - this height will be changing, so set it to something sensible to start with.
• the id is going to be "something" that's the second parameter for SWFObject.
• I've set scale to "noscale" this will keep the actual flash content looking normal.
• I've set salign to "t" which will align the Flash movie top-centre.
  

(If you wanted to align your movie differently then top-left should be "tl" and top-right should be "tr". I'd have thought you'd want to keep it top-something.)

For resizing you'll need the following JavaScript in your HTML.

<script>
function resizePage(height)
{
var d = document.getElementById('something');
d.height = height;
}
</script>

This takes a height value and resizes your Flash movie to fit (using that id 'something' which we passed to SWFObject).

You'll then need the following ActionScript in your Flash.

function resizePage()
{
ExternalInterface.call('resizePage',this.height);
}

This must be placed at the root of your Flash movie, and called from there. I tend to use an Event or something to trigger it from elsewhere. The point here is that ExternalInterface is able to call the JavaScript function resizePage and pass in the value this.height. Because it's at the root of the swf this refers to the entire movie and therefore will expand and contract depending on the stuff you've added to it.

Again I won't go into how and why you might call this function because this post is long enough already but still, I've found the above works pretty well, so I'm happy.