as3 get Width / Height of Children in a Parent MovieClip that has been resized

Question

I need to get the resized Width and Height of children in a resized parent. I have an image that is 1080 x 612. I put that in a MovieClip called "stackoverflowLOGO". That is the child width/height I need and it is inside a class called stackOne.

My Stage is set to 500 # 700 First I resize stackOne and check the width and height and they come out with the correct values. This can be seen in image #1. Here is the code to get these values

stackOne = new stackoverflowClass();

stackOne.width = screenX;
stackOne.scaleY = stackOne.scaleX;
addChild(stackOne);

// Width was 1080 and is now 500    
stackOne.imageWidth.text = "" + stackOne.width + ""; 
// Height was 1920 and is now 283.35
stackOne.imageHeight.text = "" + stackOne.height + "";

However when I check the height of an MovieClip inside of the parent that is scaled. The values do not change. I REALLY need to know how to get the actual size of the children inside of scaled MovieClips.

Here is the code that checks the width/height of the child inside of a scaled Movieclip. This is the part of the code that does not work.

stackTwo = new stackoverflowClass();
stackTwo.width = screenX;
stackTwo.scaleY = stackTwo.scaleX;
addChild(stackTwo);

// Was 1080 and still is 1080 even tho the size has been scaled.
stackTwo.imageWidth.text = "" + stackTwo.stackoverflowLOGO.width + "";
// Was 1920 and still is 1920 even tho the size has been scaled.
stackTwo.imageHeight.text = "" + stackTwo.stackoverflowLOGO.height + "";

Here is a screenshot:

I am also including the full code below. Here is a zip file of the fla and the two classes used.

Here is the full code in the MainStack Class:

    package 
    {

import flash.display.MovieClip;
import flash.display.StageAlign;
import flash.display.StageScaleMode;
import flash.system.Capabilities;

import stackoverflowClass;


public class MainStack extends MovieClip
{

public var screenX:int;
public var screenY:int;

public var stackOne:stackoverflowClass;
public var stackTwo:stackoverflowClass;

public function MainStack()
{
stage.scaleMode = StageScaleMode.NO_SCALE;
stage.align = StageAlign.TOP_LEFT;
screenX = stage.fullScreenWidth;
screenY = stage.fullScreenHeight;

firstStack();
secondStack();

}

public function firstStack()
{



stackOne = new stackoverflowClass();

stackOne.width = screenX;
stackOne.scaleY = stackOne.scaleX;
addChild(stackOne);

stackOne.imageWidth.text = "" + stackOne.width + "";
stackOne.imageHeight.text = "" + stackOne.height + "";
}

public function secondStack()
{


stackTwo = new stackoverflowClass();
stackTwo.width = screenX;
stackTwo.scaleY = stackTwo.scaleX;
addChild(stackTwo);


stackTwo.imageWidth.text = "" + stackTwo.stackoverflowLOGO.width + "";
stackTwo.imageHeight.text = "" + stackTwo.stackoverflowLOGO.height + "";
stackTwo.y = stackOne.height;
}
}

}

Answer 1

If you're using scaleX and scaleY to scale your movieclip, height and width will report the original measurements. I ran into the same problem when developing mobile applications.

I have a big movieclip that basically contains all my game elements, and I rescaled this movieclip with a rescale factor computed based on the device's resolution. To get the actual height of the big movieclip I did something like:

var actualHeight:Number = bigMovieClip.height * RESCALE_FACTOR;

EDIT: RESCALE_FACTOR is something I computed in the resize event for the stage which is going to be fired when opening the application. Here are some snippets of the code I used for a mobile game:

private static const ORIGINAL_WIDTH:Number = 960;
private static const ORIGINAL_HEIGHT:Number = 540;  

[...]

private function resizeAndCenter(evt:Event):void{
  stage.removeEventListener(Event.RESIZE, resizeAndCenter); 

  var guiSize:Rectangle = new Rectangle(0, 0, ORIGINAL_WIDTH, ORIGINAL_HEIGHT); 
  var deviceSize:Rectangle = new Rectangle(0, 0, Math.max(stage.fullScreenWidth, stage.fullScreenHeight), Math.min(stage.fullScreenWidth, stage.fullScreenHeight)); 

  // if device is wider than GUI's aspect ratio, height determines scale                        
  if ((deviceSize.width/deviceSize.height) > (guiSize.width/guiSize.height)) { 
      appScale = deviceSize.height / guiSize.height;                            
  } // if device is taller than GUI's aspect ratio, width determines scale 
  else { 
      appScale = deviceSize.width / guiSize.width;                              
  } 

  RescaleFactors.RESCALE_FACTOR = appScale;

}           

ORIGINAL_WIDTH, ORIGINAL_HEIGHT are the dimensions of the big movieclip with all the game elements. When this movieclip is added to stage is scaled with this RESCALE_FACTOR, something like:

 this.scaleX = RESCALE_FACTOR;
 this.scaleY = RESCALE_FACTOR;

And to get the actual width or height of the children, you just multiply their dimensions with this rescale factor. I hope it's more clear now.

Answer 2

Now everything's clear - you want to know the size of a DisplayObject INSIDE a scaled DisplayObject :)

So it's very simple solution.. scaleX and scaleY of the parent are your scale factor, that you must work with the clips inside. Check this image:

First on the left is my regular setup - movie clip (named main), 100x100, with another movie clip inside (named second).

I've duplicated this, and set scaleX and scaleY to be 2. I've traced the width before and after modification - it's 100, then it's 200.

As you can see, the internal movie clip (second) is twice as big, BUT it's width is again 50. This is normal, because in it's own space, it's still that big.

Then I've simply divided it's width by the scale of the parent (/= is actually scaleX = scaleX / main.scaleX).

Then the second square remains exactly the same size, AND it's width it changed to 25, because it's divided by 2 - the scaleX of the parent.

So you should start working with parent's scaleX and scaleY and divide or multiply everything - positions, size, everything.

If you need to know the actual display width of the child (second), then just use:

trace (main2.second.width * main2.scaleX); // child's width * parent's scaleX

• .width will give you the REGULAR, unchanged width
• .width * scaleX (MULTIPLY) will give you the actual VISIBLE width (on screen)
• .width / scaleX (DIVIDE) will discard the scaling and give you the new value with which you can keep the child with the same visible width

Hope that clears it out.