Question

I am not sure if this is possible, so, please, help me out a little bit over here:

I have an image loaded into the stage:

    var miC:Loader = new Loader();
    miC.contentLoaderInfo.addEventListener(Event.COMPLETE, onComplete);
    miC.load(new URLRequest("coverph.jpg"));

    function onComplete(e:Event):void {
        miC.width = stage.stageWidth;
        miC.height = stage.stageHeight;
        miC.x = 0;
        miC.y = 0;
        addChild(miC);
        trace(miC.width, miC.height);
    }

And this way the image auto size itself to perfectly match the screen resolution (I have tried it with: (all in landscape)

960dp x 720dp 640dp x 480dp 470dp x 320dp 426dp x 320dp 1196dp x 720dp and 720dp x 720dp

They all worked fine (it won´t go over 735)

Now, my question is... let´s say that for the 1196 x 720 I have a textField, a textFormat and a legend that appears on the top of the screen (as a title):

    var fmat:TextFormat = new TextFormat();
    fmat.font = "Times New Roman";
    fmat.size = 105;
    fmat.color = "0xFF0000";

    var titulo:TextField = new TextField();
    titulo.x = 145;                   
    titulo.y = 30;
    titulo.width = 1290;
    titulo.height = 122,10;
    titulo.defaultTextFormat = fmat;
    titulo.antiAliasType = AntiAliasType.ADVANCED;
    titulo.text = "THE TITLE OF WHAT IM DOING";

    addChild(titulo);

How do I (if possible) auto size the textField and format to keep the same proportion according to the screen resolution?

Was it helpful?

Solution

Try something like this..

    titulo.autoSize = "left";
    titulo.text = "THE TITLE OF WHAT IM DOING";

    var txt_holder:Sprite = new Sprite();
    txt_holder.addChild(titulo);
    stage.addChild(txt_holder);

    stage.addEventListener(Event.RESIZE, onStageResize);

function onStageResize(e:Event):void {

   txt_holder.width = stage.stageWidth * 0.8; // 80% width relative to stage
   txt_holder.scaleY = txt_holder.scaleX; // To keep aspectratio
   txt_holder.x = stage.stageWidth / 2;
   txt_holder.y = 10;   
}

OTHER TIPS

With a few extra settings in your app you could calculate what the scaling factors should be for the x-axis and y-axis based on what the resolution is and then set the scalex and scaley properties of the TextField.

Reference: http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/flash/text/TextField.html#propertySummary

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top