flex4 - 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 and height are larger than certain values
  • use scaling when the width or height are smaller than certain values

How can I accomplish this?

4 Answers

  1. Albert- Reply

    2019-11-13

    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;
        }
      }
    }
    
  2. Andrew- Reply

    2019-11-13

    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;
            }
        }
    }
    
  3. Andy- Reply

    2019-11-13

    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;
    
  4. Anthony- Reply

    2019-11-13

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

Leave a Reply

Your email address will not be published. Required fields are marked *

You can use these HTML tags and attributes <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>