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.

Set as favorite

Bookmark

Email This

Comments (5) add comment

Subscribe to this comment's feed

jesse said:

	have you seen anything like this for AS2???? would love it!
	report abuse vote down vote up

March 30, 2010
Votes: +0

nicholas said:

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

April 29, 2010 | url
Votes: +0

Sovo said:

	Hello, i have got a problem with this. Can somebody help me? If i open FLA and test movie i have this compiler error: Description: 1046: Type was not found or was not a compile-time constant: UiEvent. Source: function onResizeUi(e:UiEvent):void{ How can i fix it ?
	report abuse vote down vote up

May 01, 2010
Votes: +1

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

Write comment