Fixing the Flash autoSize delay problem 20th October 2007

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.

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