Difference between stage.height/width & stage.stageHeight/stageWidth

11 11 2010

The Stage class represents the main drawing area. For SWF content running in the browser, the Stage represents the entire area where Flash content is shown. This area will contain all display objects on the display list since all display objects are contained within the same Stage object.

stage.width / stage.height (you can call it as Stage Size)
The stage.width and stage.height properties give you the dimensions of the current rectangular bounds of the Stage. These dimensions only take into account, the area occupied by display objects and are therefore not necessarily computed from the origin (0,0). If there is nothing on the display list, or if all the display objects on the display list are empty (or of size zero), both stage.width and stage.height return zero (0). So, if you query these properties at the very beginning of your application before you have anything on the display list, you can expect the value of both properties to be zero.

stage.stageWidth / stage.stageHeight (you can call it as Screen Size)
The stage.stageWidth and stage.stageHeight properties give you the current dimensions of the viewable screen area of the Flash Player. A change in the value of these properties is typically end-user invoked when the end-user resizes the Flash Player/browser. I know after reading this you may be confused as to what is the difference between the two. We can look at a simple example.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
	applicationComplete="{onCC()}" height="300" width="500">

			import mx.controls.Alert;

			private function onCC():void
				Alert.show('stage.height = '+stage.height+'\n'+'stage.stageHeight = '+stage.stageHeight+'\n\n'+
				'stage.width = '+stage.width+'\n'+'stage.stageWidth = '+stage.stageWidth);


	<!--<mx:Canvas x="390" y="190" width="200" height="200" backgroundColor="#000000" click="{onCC()}"/>-->


If you run the above example, you will get an alert stating:

stage.height = 300
stage.stageHeight = 300

stage.width = 500
stage.stageWidth = 500

Oh, no. Both the stage.height & stage.stageHeight as well as stage.width & stage.stageWidth are returing the same values! What went wrong??
Now, let us see what happens when you uncomment the <mx:Canvas/> component. After uncommenting, run the application again and an alert comes up stating:

stage.height = 390
stage.stageHeight = 300

stage.width = 590
stage.stageWidth = 500

WoW! There is a difference indeed! And on the screen you can see the same stage area with scroll bars and a black canvas container. Move the scrollbars to the end and click on the canvas again. You will get a different result, but the stage.stageHeight & stage.stageWidth will be having the same values as above (unless, ofcourse, you have not changed the width and height of the ‘Application’ tag) 🙂

Knowing the current size of the Flash Player is useful if you wish to create fluid layout that responds to changes in the viewable screen area. These values are also required when checking if a certain display object is within or outside the bounds of the viewable area.

So in a nutshell, there is generally no relation between the size of the stage and the size of the viewable area.

  • If you want to know the current viewable area, use stage.stageWidth and stage.stageHeight.
  • If you want to know the composite, total area occupied by display objects, you can use the stage.width and stage.height properties (or the getBounds() or getRect() methods).





2 responses

11 11 2010

Good article. I had lost hours of sleep with the stage.height problem without recognizing this solution. It worked like a magic.
Your post is also in simple terms…

1 12 2010

Thank you!!!! This is exactly what I was looking for.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

%d bloggers like this: