Question

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?

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