CODEWITHSUNDEEP
apache-flexflex4
Gerhard Schlager
Gerhard Schlager

Reputation: 3145

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

How can I accomplish this?

Upvotes: 0

Views: 7315

Answers (4)

Frank Szilinski
Frank Szilinski

Reputation: 550

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

Upvotes: 0

shif
shif

Reputation: 11

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;

Upvotes: 1

Gerhard Schlager
Gerhard Schlager

Reputation: 3145

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

Upvotes: 1

Shakakai
Shakakai

Reputation: 3554

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

Upvotes: 1

Related Questions