How to scale Flex application when screen resolution is too small

apache-flexflex4

I'm developing a Flex application that is designed for screen resolutions of 1280×1024 and more. In the rare case that a projector is used (which usually has a maximum of 1024×768 pixels) I'd like to scale down the application (currently I get lots of scrollbars and clipping).

I've already experimented with the application's properties scaleX and scaleY as well as stage.scaleMode. However, I couldn't quite figure out a way to

  • render the application without scaling when the application's width and height are larger than certain values
  • use scaling when the width or height are smaller than certain values

How can I accomplish this?

Best Answer

I'd tackle this by adding an event listener to the "resize" event on the top level application. Here's an example method handler for the resize event (assumes the handler is in the main Application class, so "this" refers to the top level Application):

function onResize(e:Event):void {
  if(this.scaleX > 1){
    //check if we need to readjust to a normal scale of 1
    var effectiveWith:int = this.width*this.scaleX;
    var effectiveHeight:int = this.height*this.scaleY;
    if(effectiveWidth > 1280 || effectiveHeight > 1024){
        this.scaleX = 1;
        this.scaleY = 1;
    }
   }else{
    //the scale is still 1, lets see if we should scale it up
    if(this.width < 1280 || this.height < 1024){
        this.scaleX = (1280-this.width)/1280 + 1;
        this.scaleY = (1024-this.height)/1024 + 1;
    }
  }
}
Related Topic