Resize flash dynamically with javascript and actionscript

A simple and efficient way of dynamically resizing flash embedded objects with javascript and actionscript. Ever wanted to change the dimensions of a flash movie on-the-fly without refreshing the page? If yes, read on!

The idea is to wrap your flash movie within a div and embed it with swfobject making its width and height 100%. Resizing the wrapper div with javascipt is very simple and can be done with a single jquery function in the html code. The same function can also be called from flash using a simple getURL action, resulting an easy way of accomplishing the goal of dynamically resizing flash movies.

The code

Firstly we need to insert our flash movie in the html using swfobject. In our example the flash movie is resized.swf. Inside the head tag insert:

<script src="http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js" type="text/javascript"></script>
<script type="text/javascript">
var flashvars = {
 
};
var params = {
  allowFullScreen: "true",
  menu: "false",
  wmode: "window"
};
var attributes = {
  id: "resized",
  name: "resized",
  wmode: "window"
};
 
swfobject.embedSWF("resized.swf", "resized", "100%", "100%", "10.0.0", "expressInstall.swf", flashvars, params, attributes);
</script>

Note that we’re giving the embedded swf a width and height of 100% and for some caching speed, we load the swfobect from Google.

We also need to load the jQuery that we’ll need for our javascript function later on. We load jQuery also from Google by inserting still inside head tag:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js" type="text/javascript"></script>

We now need some CSS for the wrapper div that’ll hold the flash movie and set its initial dimensions. For simplicity we’ve given it an id of resized.

#resized{width:550px; height:400px; margin:20px 40px;}

We insert the div in our markup and we also create a text link that we’ll use to call the jquery function.

<div id="resized"></div>
<div><a href="#" onclick="ResizeFlash('800','1200'); return false">Set width: 800px - height: 1200px</a></div>

In ResizeFlash function, the first number (800) corresponds to the new width (in pixels) we want our flash to change and the second (1200) to the new height. We can also use percentages (e.g. 90%) instead of pixel values and leaving any of the 2 parameters empty will result in resizing only one dimension. For instance, writing ResizeFlash('','1200'); will set the height of flash to 1200px while leaving its width as it is.

So know we need to insert the actual javascript function that’ll do the trick of resizing the div holder. At the very end of our document, right before the closing body tag insert:

<script>
function ResizeFlash(newWidth,newHeight){
    if(newWidth){
        $("#resized").css("width",newWidth);
    }
    if(newHeight){
        $("#resized").css("height",newHeight);
    }
}
</script>

The function checks if width and height parameters are set and if they are, gets their values and applies a new CSS style to the div.

The Flash (Actionscript 2.0)

Calling the function from within the flash is very easy with the use of the getURL action. So create the movie with flash and give it the name resized. Create a new button and give it an instance name of btn1. Then make an onRelease function in a frame in timeline and insert “javascript:ResizeFlash(”,’1000′);” as the URL inside the getURL action:

btn1.onRelease=function(){
    getURL("javascript:ResizeFlash('','1000');");
}

The button, when clicked will set the flash movie height to 1000 pixels. You can see that we call the javascript function and set its parameters exactly like we do in html text links. Export the movie as resized.swf and you’re done 😉

In order to see the result, you need to upload your files on your server. If you wanna check it locally, you’ll need to change the flash player security settings (right-click swf, select “Global Settings…”).