I’ve been evaluating using javascript to dynamically resize a flash movie on demand. This technique can be very useful in instances where you would have a large amount of vertical content you want to layout in flash, such as blogs and e-commerce product lists.

There are downloadable examples of javascript resizing available on the web, such as those provided by Mustard Lab and Eduardo Ramos. You can see javascript resizing on Fantasy Interactive, they use this technique extensively on their site to do long HTML style page layouts.

This technique should not be confused with “full bleed flash”, where the flash movie takes up the entire frame of the browser. With full bleed flash, the flash movie changes size with the size of the browser, but this size is not dictated by the flash itself. This style of resizing can be accomplished by viewing the flash movie directly in the browser or, more commonly, simply setting the width and height of the flash movie and it’s containers to 100%. At the time of this writing, this technique is in use on sites such as Jumpman23 and Puma.

The javascript resizing code is relatively simple. There is usually javascript function which will be called from Flash which handles the resizing. You can make this call using the old fashioned getURL method or through the more modern flash.external.ExternalInterface class.

At first glance the resize code seems extremely easy to use, and it worked on my test page in Firefox on my first attempt. However, I had great difficulty getting it to work properly in Internet Explorer on the PC. This was very confusing as there is not very much code involved and my implementation seemed to model the examples closely, and the examples worked just peachy. My outer DIV structure would resize properly, but the Flash movie would not flood out to fill in the area. After much noodling around and stripping down content, I was able to pinpoint the problem to an issue I used to run into back when I did HTML/CSS sites for a living.

I will now relate what I can remember from back in 2001, although some of the details may be off. Back then (and to a lesser extent still) Internet Explorer was an incredibly non-standards compliant browser. However, Microsoft decided it was time to jump on the standards bandwagon and update their browser. In order to do so, the developers at Microsoft faced a dilemma. If they updated the browser to start rendering in a standards compliant way, they risked breaking all of the websites built to work specifically with Internet Explorer’s then-current implementation. Rather than drawing the ire of the large groups of developers who had built to Microsoft’s standards, Microsoft adopted a clever solution (or not-so clever, depending on your point of view). It’s this solution which was causing my resize code to fail where the examples would work.

Before rendering a page, Internet Explorer will examine the DOCTYPE of the page. If the document is declared as HTML 4, Internet Explorer will render the page in the same way it always had. If the document is declared with something more modern (such as XHTML), Internet Explorer will use a different, more standards-compliant rendering engine. Unfortunately, the javascript resize code appears to only work in IE in pages declared as HTML 4.

I currently have the resize code working on my flash sandbox page. The navigation for that page is dynamically laid out based on an XML file which dictates the title screen text, colors, and which SWF to load for each item. The navigation menu grows below the height of the flash movie and the movie simply expands to fit the navigation menu. This means as I add new items, I wont have to keep republishing the SWF.

Javascript resizing is a very useful technique and as long as you have a decent understanding of it’s pitfalls, you should have no problem using it on your site.

Edit 24 June 2008: See also post “BrowserCanvas. The World’s Easiest Way to Dynamically Resize Flash”