Question

I would like to create an totally re-sizable application using Flex 4.5. I experimented already but my approach seems to be hard to maintain so it does not look good to me. Here is my approach:

1. Concerning the HTML I actually have a first page which detects the user’s monitor resolution and then redirects to the flash container HTML(a JSP) which reads the width and height parameters and renders the flash to the size passed
2. In my application I used the 1280×720 as the reference size so I have created a utility class:

package utils
{
import mx.collections.ArrayCollection;
import mx.core.FlexGlobals;
import mx.resources.ResourceManager;
import mx.utils.ObjectProxy;

/**
 *
 * @author user
 *
 */
public final class LayoutUtils
{
    /**
     *
     *
     */
    public function LayoutUtils()
    {
        throw new Error("Boooohhhhhhhhhh");
    }

    public static function relativeToHeight(percentageValue:Number):Number
    {
        return percentageValue * FlexGlobals.topLevelApplication.height / 100; 
    }

    public static function relativeToWidth(percentageValue:Number):Number
    {
        return percentageValue * FlexGlobals.topLevelApplication.width / 100; 
    }
}

}

I pass the percentage value relative to height or width and I get back just that. So I actually bind the height/width of components to e.g {LayoutUtils.relativeToWidth(50)} which would return 640 if my applications width would be 1280. But this means setting width and/or height to almost every component and this includes also padding and anchor positions which makes it a mess.

Do you have any other suggestions? I want everything to be re sized correctly(including fonts). All the available sizes I am going to have available will keep the same aspect ratio which is going to be 16:9 for example because I can’t see any other way of doing it.

Any suggestions?

Answer 1

If you want to scale anything, use scaleX and scaleY on your application container (sprite) and set

stage.scaleMode = StageScaleMode.SHOW_ALL;