Resize an SWF when loading it with SWFObject

Question

I'm loading an SWF movie into an HTML page using SWFObject. I want to resize this SWF dynamically. How can SWFObject help? I'm sure I don't have to write my own solution.

Nupercaine

I think you need to clarify what you mean by "resize" the flash swf. The way it will act "internally" when it's embedded size changes depends on how you've made the swf in the first place. – Respectability

I need to resize the SWF container... BTW I know about scaling (Stage.scaleMode) and align (Stage.align) options set within the flash SWF that affect how the contents get affected as the container resizes. – Nupercaine

Answer 1

The easiest solution is to embed the SWF within a container div, then use JavaScript and CSS to dynamically resize the container DIV. If the SWF is set to 100% width/height, it will stretch to fit the wrapper whenever the wrapper is resized.

In the body:

<div id="wrapper">
<div id="flash">This div will be replaced by an object via SWFObject</div>
</div>

In the head:

<script>
var flashvars = {};
var params = { scale: "exactFit" };
var attributes = {};

swfobject.embedSWF("myContent.swf", "flash", "100%", "100%", "9.0.0","expressInstall.swf", flashvars, params, attributes);
</script>

<style type="text/css">
#flash {
   display: block;
   width: 100%;
   height: 100%;
}
</style>

Now whenever you resize #wrapper, the SWF will scale to fill it.

Libbie

Answer 2

Check out swffit, it should fit the bill perfectly.

Respectability

It does not resize the flash SWF, it only does something to the Div that holds it. I want to actually scale the flash SWF up and down much like resizing the Solitaire window. – Nupercaine

Answer 3

This did not work for me but did some small changes as indicated in http://code.google.com/p/swfobject/wiki/faq section "How can I create a SWF that will encompass 100% of the browser window?"

as this

<style type="text/css" media="screen">
  html, body, #containerA, #containerB { height:100%; }
  body { margin:0; padding:0; overflow:hidden; }
</style>

and perfect!

Gromwell

Answer 4

I believe the code above should read:

#wrapper {
   display: block;
   width: 100%;
   height: 100%;
}

Cassatt

This comment is wrong: Why would you set the wrapper to 100% when its purpose is to be resized? Take only into account @Libbie answer. – Regatta