Fixing the Flash autoSize delay problem

Sometimes when using the autoSize and wordWrap properties with a dynamic TextField there is a tiny delay in it resizing and wrapping everything. It’s so fast that you won’t see it happen. Now if you have some other items immediately following the resize they will not be able to read the updated height correctly. I had this problem tonight with a dynamic vertical menu I’m putting together. The menu has a fixed width and I have to assume that some menu items will be too long to fit that so I need to wrap the text.

Here’s a mock-up of the problem you can copy and paste into a new .fla file and test to see what I mean:

// Later on we'll try moving this box below the TextField
this.createEmptyMovieClip("box", 0);
this.box.beginFill(0xcc0000, 100);
this.box.moveTo(0, 0);
this.box.lineTo(100, 0);
this.box.lineTo(100, 10);
this.box.lineTo(0, 10);
this.box.lineTo(0, 0);
this.box.endFill();

// The TextField
this.createEmptyMovieClip(“title”, 1);
this.title.createTextField(“txt”, 0, 0, 0, 100, 0);
this.title.txt.setNewTextFormat(new TextFormat(“Arial”, 12, 0xb5bcb6, true, false, false, undefined, undefined, “left”, 0, 0, 0, 0));
this.title.txt.selectable = false;
this.title.txt.text = “Long text that needs to wrap around onto at least one other line”;
this.title.txt.wordWrap = true;
this.title.txt.autoSize = “center”;

// Try positioning our box below the TextField based on it’s _height, it won’t work
this.box._y = this.title._height;

What you will see is that the TextField appears wrapped and vertically it would of grown but the red box will be sitting near the top still, just after where the TextFields height would of stopped when it was a one-liner i.e. at the point in time we try to position the box in the above code the TextFields new height is not being registered. This happens with embedded fonts as well, I just didn’t use them in the example code since it made it easier for you to copy and paste for testing.

Turns out the fix is easy. Just shrink and grow the TextField before you try reading the height of it for the first time. Using the same example code as last time; replace the last line with these three lines:

this.title.txt._height++;
this.title.txt._height--;
this.box._y = this.title._height;

Comments: 3

Leave a reply

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

  • Matthew Prasinov
    Matthew Prasinov

    Hi, I’m encountering this problem working on my

    http://flashden.net/item/super-text-transition-class/11173?ref=matthewjumpsoffbuildings

    ‘Super Text Transition Class’, textfields are not reporting the correct width after autoSizing, but your fix doesnt seem to work? Any other suggestions???

    And why is this so poorly documented???

  • Anonymous
    Anonymous

    Hi, how are you measuring the text width? If you’re using the textWidth property then check this comment on the doc page:

    “If you textField TextFormat.align is set on “center” or “right”, the property textWidth return the width of the text plus the gap between the x position of your textField and the beginnig of the text.”

    Another thing to try, which you’ve probably already done is to jiggle the width instead of the height as I did.

  • Matthew Prasinov
    Matthew Prasinov

    Hey, this only seems to happen if auto-kern is turned on????

They let me pick. Did I ever tell you that? Choose which ever Spartan I wanted. You know me. I did my research, watched as you became the soldier we needed you to be. But you had something they didn’t, something no one saw but me. Can you guess? Luck.

— Cortana, Halo 3