[Update: Add complete Flash Builder project source files. ]
If you have dynamic content within your Flash application or you have several states or „pages“ implemented, which all have different content, it might be helpful to resize your flash aplication container within the html- context. For this it’s not enough to resize the application from within the flash application. You also have to resize the surrounding html container. This is the object tag for Mozilla browsers or the embed tag, if the client uses the Internet Explorer.

In each case you have to use the ExternalInterface. You call it from the flash application with parameters for the new height and width value of the flash container. On the other side you have to define an javascript function which do the resize operation with these values.

Here is an AS3 class which already includes the JavaScript part. Soyou don’t have to define an extra JS function. So you just have to import the AS3 class into your project and your ready to resize you application from Flash.

There are three methods to call:

  • resize:This method takes two parameters height and width to completly set the absolute height and width of the flash application.
  • addHeight: Takes one integer parameter. The value will be added to the current height. So „50“ for 50px more height or „-20“ for 20px less in height.
  • addWidth: Takes one integer parameter. The value will be added to the current width. So „50“ for 50px more width or „-20“ for 20px less in width.
/**
 * resizes the flash container to needed dimensions
 * @param height - new needed height
 * @param width - new needed with
 */
public function resize( height:int, width:int ):void
/**
 * adds a specific value (+/-) to current height
 * @param valueHeight
 */
public function addHeight( valueHeight:int ):void
/**
 * adds a specific value (+/-) to current width
 * @param valueHeight
 */
public function addWidth( valueWidth:int ):void

To resize your application you could add an resize event handler to check specific containers for resize and do the resizing via this class in the event handler method. If you have fixed sizes per state you could of course also do it the static way.

/**
 * @author: Sebastian Martens; sebastian@sebastian-martens.de
 * @copyright: Creative Commons. Free to use "as is"
 *
 * Test Application
 */
package{
 
	import com.nonstatics.swfSelfResize.swfSelfResize;
 
	import flash.display.Sprite;
 
	[SWF(frameRate="31", width="500", height="100", backgroundColor="0x008866")]
	public class swfSelfResizeTest extends Sprite{
 
		private var resize:swfSelfResize;
 
		/**
		 * constructor
		 */
		public function swfSelfResizeTest(){
			super();
 
			this.resize = new swfSelfResize();
 
			// resize to 500px height, 400px width
			this.resize.resize( 500, 400 );
 
			// add 50px height -> 550px height
			this.resize.addHeight( 50 );
 
			// remove 10px width -> 390px
			this.resize.addWidth( -10 );
		}
 
	}
}

Download com.nonstatics.swfSelfResize.as (12kB)
Download bin-debug (20kB)
Full Flash Builder Project (131kB)

Be aware of the security model of the flash player! This won’t work on local filesystem (file://xyz). So please use it on your server (http://www.yourdomain.com) or with your locally installed testserver (http://localhost/whatever).

Hope this helps you.

cheers,
Sebastian

31 thoughts on “ Dynamic Resize Flash Application Container / Flash Stage ( without external JavaScript ) ”

  1. hi Sebastian grate work.
    but I dont know how to use this class inside flash. How can I pass variables inside this clas so that it resizes flash. I am using caurina tweener and pass veriables to it, is this works in the same way?

    Antworten

  2. hi anar,

    to resize your flash application you first have to create in instance of it. Than you just call the resize method with two parameters. The first one is the new height, the second one the new width of your flash.

    var resizeInstance:swfSelfResize;
resizeInstance = new swfSelfResize();
resizeInstance.resize( 100, 200 );

    Does this help you ?

    cheers,
    Sebastian

    Antworten

  3. Thanks for quick reply.
    Flash player security settings prevents it from working by setting them or by running it on local server like XAMP problem can be solved.

    Antworten

  5. Hello,

    I was wondering if you can help me. I am creating a website and wanted to resize the height of one section because of its content. I think you are mentioning a way of doing that here, but I am no expert in action script. Can you please help me with the code? Do I insert the code in the button of the section that I want to increase the height?

    Thank you for your help!

    Antworten

  7. Hellow sabastian I am importing all objects dynamically from XMl in flash action script and its working fine but my problem is that how i can change Height and width of Flash file from XML
    currentlly i have given size like
    [SWF(frameRate = „31“,width = „1000“,height = „1000“)]
    and given noScale mode so that i can achieve my flash file in HTMl with the given Height and width of object but now i want to change the given Height and width in [SWF] via XML can you please suggest me the way
    Thanks
    Dhimen Vora

    Antworten

  8. Hi Dihmen,

    first you have to get the values from XML. Thats done best via e4x (ECMA for XML – for example http://www.actionscript.org/resources/articles/222/1/Intro-to-E4X/Page1.html ).

    Than you could use the stage object of your application – Application.stage / this.stage – which holds height and width values ( 1000 in your example ).

    After this you have to resize the application html container ( done best with my solution above ;)

    cheers,
    Sebastian

    Antworten

  9. Hello Sebastian.
    I use your code and it’s working perfect in IE (8.0) and FF(3.5.10) but in chrome(5.0.375) it isn’t.
    Do you know why, and how can I fix it?
    Thanks Malka.

    Antworten

  10. Hi Malka,

    with my latest version i don’t have any problems. I don’t tested the earlier versions with Chrome 5.x ( wasn’t available that time ).

    I put my latest version online. Also my bin-debug folder with example. So please test this.

    Best regards,
    Sebastian

    Antworten

  11. Hello Sebastian, I think I’m quite goofy, because I do not succeed in making your class work.

    My stage measures 560×10 px

    I typed at the top of my code:
    [code]import com.nonstatics.swfSelfResize.swfSelfResize;[/code]

    („swfSelfResize.as“ is located in the appropriate directory written above)

    Then I call it with:
    [code]
    var resizeInstance:swfSelfResize;
    resizeInstance = new swfSelfResize();
    resizeInstance.resize( 80,60 );
    [/code]

    I tested it online, but nothing happens…
    Could you help me or upload .fla as example please

    Antworten

  12. Hi Juan,

    looks fine for me. I already posted the my bin-debug folder today, please look above. Here is my demo main application:

    package{
 
	import com.nonstatics.swfSelfResize.swfSelfResize;
 
	import flash.display.Sprite;
 
	[SWF(frameRate="31", width="200", height="100", backgroundColor="0x008866")]
	public class swfSelfResizeTest extends Sprite{
 
		private var resize:swfSelfResize;
 
		/**
		 * constructor
		 */
		public function swfSelfResizeTest(){
			super();
 
			this.resize = new swfSelfResize();
			// resize to 100px height, 120px width
			this.resize.resize( 100, 120 );
 
			// add 50px / 30px height -> 180px height
			this.resize.addHeight( 50 );
			this.resize.addHeight( 30 );
 
			// remove 40px width -> 80px
			this.resize.addWidth( -40 );
 
		}
 
	}
}

    cheers,
    Sebastian

    Antworten

  13. Hi again,
    Thanks a lot for replying.
    Actually I must be very bad at working with classes and packages.
    I created a new flash cs4 document then pasted your code and I get this compilation error: „1037: packages cannot be nested“

    Sorry for being annoying, but your script may save my life :)

    Antworten

  14. Hi Juan – again ;)

    sorry but i have no idea of the classic Flash IDE. For me it sounds like you also copied the sourrounding „package{ … }“ which isn’t allowed at that point.

    In general you in deed need to import the the resize class, create an instance where you like and use the resize method.

    cheers,
    Sebastian

    Antworten

  15. :( It still does not work;
    if I remove “package{ … }” „public“ elements are not supposed to be then, according to the flash ide…

    Actually my goal is to use your script for a xml thumbnail gallery which is fueled and updated by a php script, that’s why I new the stage to be resized dynamically..

    I go to bed, hoping for succeeding in making your class work.
    Thanks again :) Please drop a comment if you have some new to help me :)

    Antworten

  16. Hi,
    your class is very interesting, but i’m don’t find the way to let it work.
    Can you make a full working package with example ?
    bin-degub don’t work too.

    thank you very much

    Antworten

  17. Hi, I have a site I am creating and have text coming in from xml files. I am trying to have it resize the text field and the div to fit whatever content is on that „page“ but i’m having a really hard time. I downloaded your file and tried to import the class and its not working..i’m not sure what I’m doing wrong. I am really new to Flash, JS any help you could give or an example with source files would be GREAT! I’m trying to do the same thing as http://www.mustardlab.com/developer/flash/objectresize/ but it was written in AS1 and I can’t figure out how to do the same thing in AS3. I think what you’re doing is similar but I can’t figure out how to implement it! HELP PLEASE!!

    Antworten

  18. hi sebi,

    very nice!
    for me I extended the code so i can handle the browsers window.onresize-event in the flash-app (even if the container is smaller than the window!)
    I added:
    -to JS_CODE
    function updateFlashSize(){
    var node=swfSelfResizeGetNode();node.stageResized()}

    ExternalInterface.addCallback(„stageResized“,this.stageResized);

    private function stageResized():void{
    dispatchEvent(new Event(Event.RESIZE));
    }

    Now i can handle browsers window.onresize – event
    swfSelfResizeInstance.addEventListener(Event.RESIZE, doResizeFunction);

    Antworten

  20. hey sebastian,
    I was trying your script and it works quite well. What i can´t solve is the following problem: At start I want to have the swf div at e.g. position left: 200px and then resize to a bigger sized container div at position left: 0px. Is that possible? In my tests i alway had to descide to have it left aligned or centered. If possible, could you give an html example please?

    Antworten

    1. Hi Fabse,

      of course this is possible. But this also requires an additional JavaScript call. Somthing like that:

         this.resize = new swfSelfResize();
   // resize to 100px height, 120px width
   this.resize.resize( 100, 120 );
 
   if( ExternalInterface.available ){
      ExternalInterface.call( "moveSWF" );
   }
 
   // 	do sth. more

      Now you have to define a JavaScript method moveSWF which does the repositioning of the DIV-Container:

      function moveSWF(){
   var node = document.getElementById( 'idOfFlashDivContainer' );
   node.style.top = '0px';
   node.style.left = '0px';
}

      The Flash container must be „position:absolute“. ( This is written from mind and not testen and not complete – if there are any small errors in it ).

      cheers,
      Sebastian

      Antworten

  21. Hi Sebastian, and congratulation for your work.

    It may sound as a stupid, but I’m a flash newbye and I’m a bit confused. The website I’m creating has different section heights and I would like to resize the web page depending on them. Every section is a movieclip.

    I guess that I have to:
    – set the flash document height to the sections maximum height
    – at the beginning of every section (movieclip) add an actionscript frame with

    import com.nonstatics.swfSelfResize.swfSelfResize;
    import flash.display.Sprite;
    var resizeInstance:swfSelfResize;
    resizeInstance = new swfSelfResize();
    resizeInstance.resize([mc_height],[mc_width]);

    – copy the swfSelfResize.swf file in my folder
    – in my HTML embedding page set swfobject.embedSWF height to homepage height

    Is everything all right? Am I missing anything? Sorry again for the simplicity of the question. Thanks in advance.

    Antworten

    1. Hi Giorgio,

      i overlooked some older comments. I’m sooo sorry for that.
      If i’m understand your plans right this wouldn’t work because my script is only for a single swf file, not for one swf of multiple single movie clips. It just resizes the master swf file within the html page. So you have to trigger the resizing in the surrounding main swf, depeding on the different movie clips.

      cheers.
      Sebastian

      Antworten

  22. Hi.
    Great code. But I am having a problem with it.

    I am adding buttons dynamicly to make a accordion menu. The size should be 180, 600.
    But the height is not going to the right size.
    I am even using this to test:
    resizeInstance.resize(180, 600);
    But it is resizing to something like: 180 x 200

    Antworten

    1. Hi Alex,

      sorry for the late reply. I overlooked some older comments and found them during email archiving.
      Please try if the script is working anyhow, e.g. is the width changing ? Maybe there are also some css problems. The resize script has to resize the html container also. If there might be another sourrounding container which has a fixed width and doesn’t allow the flash container to resize, this might cause the problem.

      cheers.
      Sebastian

      Antworten

  23. I’m trying to fix an Ubuntu Fullscreen Flash issue on dual monitors: It is somehow not possible to control on which Monitor the fullscreen flash appears on.

    I have found a way to move the fullscreen flash to a different monitor and resize the container window that is spawned by the browser. However the flash video will usually not adapt the new container window size. I was wondering if it would be possible to resize the flash video without having access to the html/flash source, say for example by a GreaseMonkey script.

    Also I was wondering if I would have to account for the different aspect ratio when resizing the flash, or if the video will keep its aspect by itself.

    I am a newbie to flash but I, and I believe many Linux users, would really appreciate your help in this.

    cheers
    stealz

    Antworten

    1. Hi stealz,

      i haven’t tried about this issue so far. But i’m pretty sure that the video adoption, without having access to the source might not work. At least there are the traditional way of embedding video and the so called stage video mechanism, which is rendered by the GPU.

      cheers.
      Sebastian

      Antworten

  24. Hi there Sebastian!
    Really like your solution.
    I used the javascript solution „swffit“ before.
    I have problems with IE9 with that solution so I found your solution. But I have problems with IE9 using this as well. When resizeInstance.resize is called the flash get distorted. It’s like someone has taken one of the upper corners & dragged it to the left & the opposite bottom corner the opposite way. I´ve set the the width to 100% by changing the „node.style.width=width+’px'“ in your as class to „node.style.width=width+’%'“. Initially I thought that this might be the problem but it wasn’t… :(
    Is this something that you’ve heard of before?

    Niklas

    Antworten

  25. Hi,

    This is nice tutorial,
    What i want, i have one flash swf file.
    the width is 200; height 200;
    and i dynamically added the movieclip to 10,
    then the total height of the movieclip is 400;

    What i will do…pls help me for this.

    thanks
    Dude

    Antworten

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert