Resize Flash

*note, since originally writing this article in June 2003, I've been introduced to a method of resizing divs with far superior browser support. The original script here worked by directly changing the size of the Flash <object> values, whereas this new script works by changing the size of a containing div and setting the swf to 100% size. Thanks to Pete at editkid.com for bringing this to my attention*

There are several reasons you may need to control a Flash stage at runtime. With Flash being used more and more as a rich internet app with dynamic content it is sometimes impossible to know how large to make the stage. Dynamic menus, articles, and photo galleries are no place for Flash scrollpanes. Luckily with javascript you can start turning that small flash movie to any size you want and then back again when you're done.

Example 1:
Example 2:

We implemented this technique in the Flash Evolution website with a smoother transition between sections by "tweening" the effect. The effect was accomplished with the tried and true currentscale += (endscale - currentscale)/2 formula.

Usage:

Here's a quick look at the html for example 1.

<html>
<head>
<title>Flash Resize</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript" src="flash_resize.js"></script>
</head>

<body>
<div align="center">
  <div id="flashid" style="width:400px; height:300px;">
    <script type="text/javascript">
      e = canResizeFlash();
      document.write('<object data="resize.swf" width="100%" height="100%" type="application/x-shockwave-flash">');
      document.write('  <param name="movie" value="resize.swf" />');
      document.write('  <param name="FlashVars" value="allowResize='+e+'" />');
      document.write('  Flash Movie With Resizing Content');
      document.write('</object>');
    </script>
    <noscript>Javascript must be enabled to view Flash movie</noscript>
  </div>
</div>
</body>
</html>

In the example on this page, javascript first checks whether the users browser supports the getElementById function. The value is passed into flash by using the document.write function to dynamically add the value into the FlashVars parameter. If getElementById is supported, flash is initialized to resize anytime content on the stage changes, if not, flash adds a scrollbar to the stage to handle new content.

Supposing getElementById is supported, whenever you click on a new page, flash retrieves the height of the block of text and sends that height to javascript via the getURL function.

getURL("javascript:setFlashHeight('flashid', 1000)");

This triggers the javascript function setFlashHeight() on the page and sets the height of the containing div to the appropriate size.


The javascript include file "resize_flash.js" contains three functions you can use for resizing flash:

setFlashWidth(divid, newW) - sets only the width of the flash movie

setFlashHeight(divid, newH) - sets only the height of the flash movie

setFlashSize(divid, newW, newH) - sets both the width and height of the flash movie

Additional Notes:

Use window.scroll(0,0) inside the flash getURL function call to set the html page back to the top.

These methods works in all 5th generation browsers and above.

Download

Example Files: MLAB_flash_resize.zip

Size: 51 kb

Last Updated: 2003-09-14