Friday, 11 July 2014

Scaling in AS3

This time, its about a technical problem which has to be thought from a developers perspective! Let's face it first.

Now, that we have our circle created, try to resize the browser. You have given the attributes of the circle as 100, however you would notice that the size of the circle varies each time the browser is resized. Noticed?

Yeah! that is a property of AS3, which has a pre-defined screen size and if the screen size is more/less than the default, it automatically resizes/renders its boundaries with respect to the actual size of the browser, unless handled explicitly.

This can be handled explicitly by stopping the scaling mode of the stage (the parent class (or) just imagine a state in real ;-) ) to scale automatically with respect to browser resizing.

Now, try this one, run it and resize the browser.


package
{
 import flash.display.Sprite;
 import flash.display.StageAlign;
 import flash.display.StageScaleMode;
 
 public class Initialize_Test extends Sprite
 {
  public function Initialize_Test()
  {
   graphics.beginFill(0xff0000);
   graphics.drawEllipse(100, 100, 100, 100);
   graphics.endFill();
   
   //code to stop auto rendering
   stage.align = StageAlign.TOP_LEFT;
   stage.scaleMode = StageScaleMode.NO_SCALE;
  }
 }
}

See the difference? Well, thatz how we handle resizing in AS3. More coming up!