Fluid flash layouts

Question

I'm trying to get my main class to resize to the browser window size. I'm listening on the stage to Event.RESIZE, updating my width/height to match the stageWidth/stageHeight, and drawing a rectangle to show me how big it is.

When I resize, it flashes between a small and big size every other time the event fires. The width and height are correct in both cases, but in the "small" case, everything is in a small box.

Here's my code

package
{
 import flash.display.Sprite;
 import flash.display.StageAlign;
 import flash.display.StageScaleMode;
 import flash.events.Event;
 import flash.text.TextField;

 public class main extends Sprite
 {
  public function main()
  {
   stage.align = StageAlign.TOP_LEFT;
   stage.scaleMode = StageScaleMode.NO_SCALE;

   stage.addEventListener(Event.RESIZE, onResize);

   var text:TextField = new TextField();
    text.text = "Some Text";

   addChild(text);
  }

  private function onResize(event:Event):void
  {
   this.width = stage.stageWidth;
   this.height = stage.stageHeight;

   trace("RESIZE " + width + " " + height);

   this.graphics.clear();
   this.graphics.beginFill(0x000000, 0.5);
   this.graphics.drawRect(0, 0, this.width, this.height);
  }
 }
}

What's the right way to do this? What am I doing wrong? Thanks!

Answer 1

It looks like your Sprite is doing the right thing, but the TextField is the thing that's causing the problems. So, if you update the width and height on that as well it works:

package
{
 import flash.display.Sprite;
 import flash.display.StageAlign;
 import flash.display.StageScaleMode;
 import flash.events.Event;
 import flash.text.TextField;

 public class asProj extends Sprite
 {
  private var text:TextField;

  public function asProj()
  {
   stage.align  = StageAlign.TOP_LEFT;
   stage.scaleMode = StageScaleMode.NO_SCALE;

   stage.addEventListener(Event.RESIZE, onResize);
   text = new TextField();
   text.text = "Some Text";

   addChild(text);
  }

  private function onResize(event:Event):void
  {
   this.width = stage.stageWidth;
   this.height = stage.stageHeight;

   text.width = this.width;
   text.height = this.height;

   trace("RESIZE " + this.width + " " + this.width);

   this.graphics.clear();
   this.graphics.beginFill(0x000000, 0.5);
   this.graphics.drawRect(0, 0, this.width, this.height);
  }
 }
}

Answer 2

the problem is, that default implementation for setters of width and height is just a mere alias to scaleX and scaleY ... when you have a Sprite of width 100, and you set its width to 200, than it is simply horizontally stretched by factor 2 ... at the same time, the default getters simply return the effective width and height on screen, so if you draw to the sprite, it's width and height are updated accordingly ...

this should be perfectly working:

            private function onResize(event:Event):void
            {
                    this.graphics.clear();
                    this.graphics.beginFill(0x000000, 0.5);
                    this.graphics.drawRect(0, 0, stage.stageWidth, stage.stageHeight);
            }