Dynamic Resize Flash Application Container / Flash Stage ( without external JavaScript )

Posted on | Juni 1, 2010 | 19 Comments

[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

Category: ActionScript, Allgemein, JavaScript, flash
Tags: > > > >

Comments

19 Responses to “Dynamic Resize Flash Application Container / Flash Stage ( without external JavaScript )”

  1. anar musayev
    Juni 5th, 2010 @ 15:33

    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?

  2. Sebastian Martens
    Juni 5th, 2010 @ 15:49

    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

  3. anar musayev
    Juni 8th, 2010 @ 09:00

    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.

  4. Sebastian Martens
    Juni 8th, 2010 @ 11:15

    Of course. Sorry i forgot to mention this.

  5. Catalina
    Juni 28th, 2010 @ 17:47

    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!

  6. Sebastian.Martens
    Juni 29th, 2010 @ 23:49

    @Catalina: You got an e-mail.

  7. Dhimen Vora
    Juli 2nd, 2010 @ 08:07

    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

  8. Sebastian Martens
    Juli 3rd, 2010 @ 17:16

    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

  9. malka
    Juli 4th, 2010 @ 09:49

    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.

  10. Sebastian.Martens
    Juli 4th, 2010 @ 11:51

    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

  11. Juan
    Juli 4th, 2010 @ 19:27

    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

  12. Sebastian.Martens
    Juli 4th, 2010 @ 21:10

    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

  13. Juan
    Juli 4th, 2010 @ 21:51

    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 :)

  14. Sebastian.Martens
    Juli 4th, 2010 @ 22:38

    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

  15. Juan
    Juli 5th, 2010 @ 02:00

    :( 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 :)

  16. colir
    August 6th, 2010 @ 13:49

    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

  17. Kathy
    August 7th, 2010 @ 21:01

    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!!

  18. Sebastian.Martens
    August 9th, 2010 @ 22:47

    @Kathy:

    i hope the source files will help you. Otherwise please feel free to ask or send a code snipped, this would help to find the error.

    cheers,
    Sebastian

  19. Sebastian.Martens
    August 9th, 2010 @ 22:47

    @colir:

    thank you very much. Cause i’m currently find no time to do the planned updates i attached the complete Flash Builder project source files @see above.

    cheers,
    Sebastian

Leave a Reply