Scaling dynamic text in AS3
Recently I’ve had the need to scale a dynamic text field which was fed by XML. Readability after scaling was not important, but it did have to look good (it’s for a full Flash site). However, scaling the MovieClip that the text field was in would cause some pretty chaotic behavior with the text — the text would try to scale with its parent but in doing so would shift around spastically until the parent MC settled into a new scale. This was unacceptable.
A quick google didn’t yield anything relevant, so I was left to my own devices. I remembered being able to draw pixels to a BitmapData object while writing my game in order to improve performance, so I figured I’d see if I could just copy the pixels from the text field and “bake” it into a bitmap.
Turns out you can. In fact, Adobe had already done this in the help files and it’s actually extremely easy. Check it out:
var tf:TextField = new TextField();
tf.text = "bitmap text";
var myBitmapData:BitmapData = new BitmapData(80, 20);
myBitmapData.draw(tf);
var bmp:Bitmap = new Bitmap(myBitmapData);
this.addChild(bmp);
No sweat right? Anyway, since I didn’t find any help on this anywhere else (granted, I didn’t look very hard) I thought I’d share this little adventure of mine. Hope it’s helpful.
Tags: ActionScript 3, Flash, source
July 3rd, 2008 at 1:54 am
I don’t normally type in alll caps but THANK YOU. I needed this.
July 9th, 2008 at 7:27 am
Cool stuff
July 16th, 2008 at 11:56 am
This is a LIFE saver. We couldn’t find this anywhere (I guess it is all about what words you use to search for it). Thanks for the help!
September 19th, 2008 at 2:02 am
Epic. I JUST ran into this problem tonight. Thank you for sharing, you’ve saved me countless hours of frustration!
September 19th, 2008 at 2:24 am
Out of curiosity, were you able to apply any styling to the BitmapData before applying it to the Bitmap? I’m not successful doing so just yet, and having plain ol’ bitmap fonts isn’t desirable, aesthetically.
September 19th, 2008 at 1:34 pm
John: Aye. I’ve slapped a TextFormat and even some HTML onto the text object before it was rendered into a bitmap. If it helps, I’ll share my BitmapText class — feed it (width, height[, multiline:Boolean, format:TextFormat, avgPointSize:int, padding:int]), use addText(string) then render() will return a Bitmap object with everything. Looks complicated in retrospect, but it saved me some time anyway :shrug:
There’s more detailed instructions in the class itself, and don’t forget to put it under com.coldconstructs.graphics
November 7th, 2008 at 1:46 pm
This is EXACTLY what I was looking for! Thanks so much!