How to scale Flex application when screen resolution is too small?

I'm developing a Flex application that is designed for screen resolutions of 1280x1024 and more. In the rare case that a projector is used (which usually has a maximum of 1024x768 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 an开发者_如何转开发d height are larger than certain values
• use scaling when the width or height are smaller than certain values

How can I accomplish this?

---

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;
    }
  }
}

---

I finally figured out a way to scale down the application. Actually, the applications children need to scale. Otherwise the width and height of the application shrinks.

Since I'm using states I had to add an event handler for the currentStateChanging event too.

private static const MIN_WIDTH:Number = 1250;
private static const MIN_HEIGHT:Number = 800;

protected function application_currentStateChangingHandler():void
{
    callLater(scaleElements);
}

protected function application_resizeHandler():void
{
    scaleElements();
}

protected function scaleElements():void
{
    var newScaleX:Number = 1;
    var newScaleY:Number = 1;

    if (width < MIN_WIDTH)
        newScaleX = width / MIN_WIDTH;

    if (height < MIN_HEIGHT)
        newScaleY = height / MIN_HEIGHT;

    var newScale:Number = Math.min(newScaleX, newScaleY);

    for (var i:int = 0; i < numElements; i++)
    {
        var element:DisplayObject = getElementAt(i) as DisplayObject;

        if (element)
        {
            element.scaleX = newScale;
            element.scaleY = newScale;
        }
    }
}

---

To scale the application as a whole, and not all the elements separately, I removed the loop and added instead:

this.scaleX = newScale;
this.scaleY = newScale;

---

A nice solution was presented back in 2009 by Alex Harui. See ScaleMode to scale application automatically. See example here how it works.