Creating a dynamically resizable Flash window.

MYTH: once you embed a SWF movie into an HTML page, you can’t change the size of the Flash window.

While that ol’ fixed-size-Flash whopper can be a handy excuse when dealing with clients who want the multimedia equivalent of a rocketship built on a non-existent budget, that doesn’t mean a dynamically scaling Flash window isn’t possible. It’s actually surprisingly easy and robust, and it opens the door for all kinds of flexible Flash development. For example, Lassie Shepherd (my game editor project) implements a dynamically scaling Flash window so that a developer can manipulate the dimensions of their game display on the fly within the editor tool. The Lassie game player also responds to the specified dimensions and adjusts the game window to the proper size. I most recently used this trick in a simple graphing application where the Flash window needed to adjust itself to its variable-height content. So, this is a pretty handy trick to have in your tool box and its very easy set up! Here it is:

function setWindowSize(w:int, h:int):void
{
    if (ExternalInterface.available)
    {
        var js:String = "function(){";
        js += "var flash=document.getElementById('"+ ExternalInterface.objectID +"');";
        js += "var win=flash.parentNode;";
        js += "flash.style.width='100%';";
        js += "flash.style.height='100%';";
        js += "win.style.width='"+ w +"px';";
        js += "win.style.height='"+ h +"px';";
        js += "}";
        ExternalInterface.call(js);
    }
}

Note that Flash’s ExternalInterface does not work on a local connection, so you’ll need to test implementations at an HTTP location. To have Flash objects respond to the window resize, listen to the stage for Event.RESIZE.

This process works using a few tricks. First, ExternalInterface is being used for JavaScript injection. Rather than having dependancies on external JavaScript, all required JavaScript is being composed within Flash and then called out to the browser where it is both parsed and processed. As far as the actual Flash window resize is concerned, we’re just setting the width and height of the Flash’s DOM container. This specific example fits the Flash object to its frame (width/height=100%), and then sets new dimentions on the parent container. However, you can customize the DOM usage to a specific implementation.

Advertisements

3 comments so far

  1. Kellis on

    You have a link with an example of this?

    • bigmac on

      I haven’t implemented this for any public facing projects. This really isn’t a feature that is intended for general Flash use around the Internet, because there’s a good chance that you’ll have a fixed size container to display content in. However, it works great for editor tools where you have a limited audience and have control over the tool’s external display structure.

      so, I’ve now used this for two key projects: the first was for a client who needed a tool to quickly and easily build styled informational graphics. So, I built a tool that could receive CSV data saved out of Excel, then parse it into a flash display that would automatically resize itself to the dimensions of the content. The second instance was on Lassie Adventure Studio. Since the Shepherd editor allows the user to specify their own game dimensions, this tactic was used to make a dynamically scalable flash display for the user to work within.

  2. carlson on

    Thanks – neat trick. I find that while this works in Internet Explorer, it does not work in Firefox – have you observed the same thing?


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: