Code for a Resizable Window in AS3

Last Updated on Sunday, 31 January 2010 23:37 Written by Nicholas Dunbar

Flex handles window resizing really well so there is little need anymore to program your own custom window code. But for those of you who want a manually resizable window without loading some massive amount of flex code just to get resizable window code, I have provided a link to the FLA and Source Code. Scroll down to see the code in action and try resizing the dummy window I created. It has a minimum size set that you can change.

Download Resizable Window Source Code Here

Important: you will have to change the class path of the FLA so that it can find the classes.

import com.actionscriptflashguru.ResizeWindow;
 import com.actionscriptflashguru.UiEvent;
 
 function onResizeUi(e:UiEvent):void{
     
     var obj:Object = e.params;
             
     //the new X and Y locations of the window
     //obj.x;
     //obj.y;
     //the new width and height of the window
     //obj.width;
     //obj.height;
             
     if (obj.isResizeAll != null){
         //the window has not yet been initialized
         thingToResize_mc.width = obj.width;
         thingToResize_mc.height = obj.height;
         thingToResize_mc.x = obj.x;
         thingToResize_mc.y = obj.y;
         trace("obj.isResizeAll != null");
     } else {
         thingToResize_mc.x = obj.x;
         thingToResize_mc.y = obj.y;
         thingToResize_mc.width = obj.width;
         thingToResize_mc.height = obj.height;
     }
     
 }
 
 var minWidth:Number = 300;
 var minHeight:Number = 200;
 var originalStageWidth:Number = this.stage.stageWidth;
 var originalStageHeight:Number = this.stage.stageHeight;
 var sizeObj:Object = {x:20, y:20, width:310, height:210};
 resizer_mc.x = sizeObj.x;
 resizer_mc.y = sizeObj.y;
 thingToResize_mc.x = sizeObj.x+20;
 thingToResize_mc.y = sizeObj.y+20;
 thingToResize_mc.width = sizeObj.width;
 thingToResize_mc.height = sizeObj.height;
 var resizer:ResizeWindow = new ResizeWindow(resizer_mc, minWidth, minHeight, originalStageWidth, originalStageHeight);
 
 //set the starting window size
 resizer.setSize(sizeObj.x, sizeObj.y, sizeObj.width, sizeObj.height);
 resizer.addEventListener(UiEvent.RESIZE_WINDOW, onResizeUi);

This example will get you up and running with a resizable window that you can drag and drop and resize. As you resize it, a custom resize event will be sent out it is in this function that you will add code that will resize the contents of the window accordingly. You will find the skinable assets inside of the FLA. I kept the ActionScript redundant so that the code would have as few function calls per resize iteration inorder to keep it efficient. The way it works is you mouse over the sides of the resize area and arrows will appear which indicates that you can drag them. It allows for dragging of all four corners and all four sides in addition to a place for the top bar on the window. So it functions like a resizable window on your desktop because you can drag the top bar around and the whole window changes position without resizing. I hope that you find this useful. If you are using flex you would be better off using their framework for a dragable window but like I said you have to bite off a lot if you want to do that. If you want to use flashes library for flashes standard UI components code by importing the  "fl." package see (more about the fl package), you can do that but there are a lot of draw backs. One you import one class and you end up importing a whole bunch of stuff you may or may not use. This is a problem if you want to keep things super small. But the big thing that messes with me is the fact that you can't unload fl components if they have been loaded externally into a loader shell. This is because it does not have a listener clean up routine it simply relies on you building in a way that the user is going to leave the web page when he wants to dump the component. Finally, I have to share my annoyance with some of the pay components out there for resizable windows. They all have licenses that say you can only use their resizable window code per one website and they don't have a price for using it in software that is sold and redistributed, so this post is my protest to them.

Please leave a comment if you like it, I could use some feed back to keep me in good spirits on moving forward with this blog.

Known problem's are listed at the bottom of the source code which may or may not apply to you depending on what you are developing.

TrackBack URI for this entry

Comments (11)

Subscribe to this comment's feed

nicholas said:

	Check out components. I would look for a panel component.
	report abuse vote down vote up

April 29, 2010 | url
Votes: +0

Nicholas said:

	Set the class path of the FLA to the classes folder provided with the .ZIP file. Cheers!
	report abuse vote down vote up

May 16, 2010 | url
Votes: +0

Robbie said:

	Thank you very much I was looking for this! Works great! My class is a litlebit different. I'll post it here when its ready.
	report abuse vote down vote up

May 18, 2010
Votes: +0

FlashDeveloper said:

	Hi, Great example code about the resizable window in pure Flash... exactly what I was looking for. You mentioned you were posting this code to protest some of the for-pay components that don't specify how you can use their components on webpages or in software. So, as for your code, are there any restrictions on using it in webpages or in software? Thanks again for making your example available.
	report abuse vote down vote up

February 01, 2011
Votes: +0

Nicholas said:

	You may use it without restriction. If you want to be nice, cite my work and link to my site if you are integrating it into your own examples.
	report abuse vote down vote up

February 03, 2011 | url
Votes: +1

FlashDeveloper said:

Great, thanks for the clarification. One suggestion: it might be good to support programmatic resizing of the window (not just by manually dragging the mouse). I added a new (one-line) public method "generateResizeEvent" to your ResizeWindow.as, which dispatches the UiEvent.RESIZE_WINDOW event with the proper sizes/ I invoke this manually after I programatically set the window size in AS3 code, so the window updates itself properly. Another thing I noticed, which is Flash's fault, is that the 9-slice scaling doesn't work with child movie clips. I wanted to place some MovieClip buttons on the resizable window, but there seems to be no way to get this to work automatically with 9-slice scaling (child MovieClips are always scaled as a normal child, ignoring the 9-slice scaling). So I had to programatically calculate the button positions based on the window size. Any idea if there is a better way to do this? Thanks again for making your code available.

report abuse vote down vote up

February 03, 2011
Votes: +0

mnu7 said:

	Its good to use it.. is it a way to also include close button in the same code? How to make it? Please Suggest
	report abuse vote down vote up

April 16, 2011
Votes: +0

nicholas said:

	This is a bare bones approach to the scaling window so that any developer can add a multitude of different things. If you want a full set of window features out of the box I suggest you use the Flex Framework.
	report abuse vote down vote up

April 18, 2011 | url
Votes: +0

Rick said:

	Why when I pull in upper right corner all the window begins to jump to the top? This can somehow fix it?
	report abuse vote down vote up

June 26, 2011
Votes: +0

nicholas said:

	You're right if you pull the up right up and then down it glitches. This isn't a deal breaker but it is slightly annoying. I have no time right now to trouble shoot the code. Any help on debunking this problem would be appreciated. PS. Rick I will not spam you. Have no hear about entering your email into my site. I can't help you with your problems without a way to contact you.
	report abuse vote down vote up

June 29, 2011 | url
Votes: +0

eric said:

	just what i was looking for, simple and sweet. thanks!
	report abuse vote down vote up

December 05, 2011
Votes: +0

Name

Email

Title

Comment

smaller | bigger

Subscribe via email (Registered users only)

I have read and agree to the Terms of Usage.

Write the displayed characters

Add Comment