web design

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…”).


35 Comments

Post a comment
  1. Ghelle
    Posted on September 2, 2012 at 14:21 Permalink

    I noticed a problem too. I guess is’s the same what Stampy wrought.

    When javascript resize is called the div is resized and flash is resized too, but only in heigth not proportionally. After a ~millisecond it gets it’s correct size.

    It happens with Chrome and Firefox. In IE it’s all ok.

    Doe’s anyone know a workaround?

    Reply
    • CHI
      Posted on September 25, 2013 at 19:37 Permalink

      that thing you said it’s happening to me in a flash website I made. it looks verry awfull, vertically streched for a second… I don’t know how to fix it!! It happend to me only in Chrome. In Firefox works well.

      Reply
  2. natural health
    Posted on June 29, 2012 at 11:41 Permalink

    I tend not to leave many remarks, however i did
    some searching and wound up here Resize flash dynamically with javascript and actionscript – malihu | web design.
    And I actually do have a couple of questions for you if
    you tend not to mind. Is it only me or does it look as if like some
    of these comments look like coming from brain dead
    folks? :-P And, if you are posting on other online sites, I would like to keep up with anything fresh you have to post.
    Would you make a list of the complete urls of all your
    public pages like your twitter feed, Facebook page or linkedin profile?

    Reply
  3. Stampy
    Posted on June 18, 2012 at 04:07 Permalink

    One problem I’ve noticed, is that in Firefox, you can’t seem to resize the window properly. It’s strange as it works absolutely fine in Internet Explorer and Chrome. I assume its more of a bug with Firefox rather than anything else. Hopefully it’ll be one that’ll get fixed.

    Reply
  4. Webentwicklung Frank
    Posted on April 2, 2012 at 00:16 Permalink

    works perfect with action script 3.0.
    you just have to call ResizeFlash via ExternalInterface (like every other js function).

    Reply
  5. ravi
    Posted on February 23, 2012 at 12:05 Permalink

    Hello, I am trying to put the flash object on the webpage but the white background is showing up all over the page on top of the other content. Can someone please tell me how to isolate the flash object from the background and place the flash at a specific location of the web page.

    Thanks

    Reply
  6. Jose
    Posted on September 6, 2011 at 08:14 Permalink

    Is it easy to change also the margins of the element on click ?
    It would be great also to be able to adjust the positioning.

    And how about easing the transition? Is it simple to do?

    Thanks a lot man! This is really helpful!

    Reply
  7. Mike Orfanidis
    Posted on August 31, 2011 at 15:43 Permalink

    Auto resize div – no need to set any values ;)

    See the scripts in action:
    http://www.kataskeves.com.gr/

    Manos, thank you for the excellent starting point :-)

    Mike

    /////////////////////////////////////////////

    Flash

    var curHeight:Number = this._height;
    var newHeight:Number = Math.round(curHeight) + 64;

    getURL(“javascript:ResizeContent(” + newHeight + “);”);

    ==============================================

    HTML

    function ResizeContent(newHeight){
    var FLContainer = document.getElementById(‘contentContainer’);
    FLContainer.style.height = newHeight + ‘px’;
    }

    Reply
    • malihu
      Posted on August 31, 2011 at 19:09 Permalink

      Great!
      Thank you for posting your mod :)

      Reply
  8. shangshang
    Posted on July 12, 2011 at 14:42 Permalink

    This is exactly what I’ve been searching for days, thanks a lot!!

    Reply
  9. Free ppt
    Posted on June 3, 2011 at 12:00 Permalink

    very nice sharing. I’m looking for a similar code in the form of a slide and dragging it horizontally, but could change the size of the possible?

    Reply
    • Xan
      Posted on June 26, 2011 at 22:44 Permalink

      Hi, great code but this is manually resized by hitting a button.

      How can I get this to automatically resize a movie to 90% when a page is loaded ?

      Reply
      • malihu
        Posted on June 27, 2011 at 03:03 Permalink

        You can simply call ResizeFlash function on window load like this:
        window.onload=function(){ ResizeFlash('90%'); }

        or on body tag:
        <body onload="ResizeFlash('90%'); ">

        Reply
      • 韓国ドラマ
        Posted on June 12, 2012 at 11:05 Permalink

        I like the your Idea!

        Reply
  10. Joshua Cote
    Posted on May 2, 2011 at 21:22 Permalink

    Hi, I’m having an issue using the getURL function in Flash as2. I notice that I needed to change the flash player to version 7 in order to work. Is there a way of this working with flash player 1o? Or would I need to change the getURL to ExternalInterface (which I’m not too familiar with) in order to work with version 10? Thanks in advance.

    Great work. Thanks for sharing

    Reply
    • Joshua Cote
      Posted on May 2, 2011 at 21:31 Permalink

      Sorry. I noticed when it’s published online it works. Thanks again.

      Reply
  11. Alex Kuttab
    Posted on March 31, 2011 at 14:56 Permalink

    Thank you. That is a great code.

    I noted that I cannot set height to 100%, any idea of how I can make it ?

    Reply
    • malihu
      Posted on March 31, 2011 at 16:22 Permalink

      In order to set an element height to 100% you need to set its parent height also (for xhtml). For example in the demo, the parent of #resized is the body. So in order to set #resized height to 100%, in the css, you’d need to add firstly:
      html,body{height:100%;}

      Reply
  12. Brett Widmann
    Posted on January 22, 2011 at 07:35 Permalink

    This is a really helpful tutorial! Thanks for sharing.

    Reply
  13. macera oyunları
    Posted on January 18, 2011 at 16:00 Permalink

    its works all browsers, thanks.

    Reply
    • sheroo
      Posted on March 2, 2011 at 19:04 Permalink

      i have IE 8 and i wont make 100% height i doesn’t work for me

      Reply
      • sheroo
        Posted on March 2, 2011 at 19:07 Permalink

        I have latest flash player

        Reply
      • malihu
        Posted on March 3, 2011 at 02:47 Permalink

        In order to have an element be 100% height, you need to add on your css: html,body{height:100%}

        Reply
  14. sbobet
    Posted on December 23, 2010 at 14:53 Permalink

    Yea, scratch that/delete that comment. getURL local v.

    Reply
  15. sbobet
    Posted on December 16, 2010 at 17:27 Permalink

    Yes, sometimes IE has issues updating flash to latest version

    Reply
  16. sbobet
    Posted on December 16, 2010 at 17:27 Permalink

    thank. good job.

    Reply
  17. Php Programmer
    Posted on November 15, 2010 at 14:23 Permalink

    Really nice Work let me try it. Thanks for sharing.

    Reply
  18. Jackrabbit
    Posted on November 10, 2010 at 19:21 Permalink

    The actionscript resize buttons don’t seem to be working for me. The javascript resizing works fine but inside flash: nothing.

    Reply
    • Jackrabbit
      Posted on November 10, 2010 at 19:25 Permalink

      Yea, scratch that/delete that comment. getURL local v. live got it…

      Reply
  19. iani
    Posted on October 29, 2010 at 09:17 Permalink

    Wow this is very good. It works in firefox, but IE doesn`t show the flash movie. Or i`m missing something?

    Reply
    • iani
      Posted on October 29, 2010 at 09:42 Permalink

      Never mind works perfect in IE too. The problem was in mine IE :)

      Reply
      • malihu
        Posted on October 29, 2010 at 15:27 Permalink

        Yes, sometimes IE has issues updating flash to latest version

        Reply
  20. Alec
    Posted on October 26, 2010 at 04:31 Permalink

    Cool.

    Now if only you made it so the user can enter their own value in an input box. :)

    Reply
    • malihu
      Posted on October 29, 2010 at 15:28 Permalink

      Good suggestion. I’ll try to find some time to implement it. Thanks!

      Reply


Post a comment

Your e-mail is never published nor shared. Required fields are marked *

You may use these HTML tags and attributes:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>
You can write or copy/paste code directly in your comment using the <code> tag:
<code>code here...</code>

css.php