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!
November 24th, 2008 at 4:58 pm
I believe embedding the fonts fixed this for me, when I had this issue before. Have to go look through some code to be sure.
February 3rd, 2009 at 3:57 pm
Hello,
This is not about textfields. It is about the cool little Flash navigation you have. How to did you get it to respond without having to be clicked on first? Anytime I embed a Flash file in a web page, you have to click on it before you can use it.
thanks,
lee
February 3rd, 2009 at 10:25 pm
russdogg: I tried embedding the font but that didn’t seem to solve anything. Let me know if you get it working though, I’d like to know how you did it.
Lee: I use SWFobject to embed all of my Flash thingies, and that’s what overcomes that little click-to-activate “feature” some browsers use.
February 17th, 2009 at 7:10 am
Thanks! I’ve asked our friend Google about this for 5 hours. So thanks a lot!
September 10th, 2009 at 4:53 am
Thanks a lot!! Works great…
November 18th, 2009 at 6:24 pm
Instead of turning your text into a bitmap (which will still look terrible when scaled to a larger size) you could have just turned the anti-alias from readability to animation. This solves this problem in most cases.