How to Center Dynamic Text in a Specified Area

In a recent project of mine, users were allowed to choose from a list of phrases. The selected phrase then appeared in a text box. The problem was that if the text was too short it would sit there at the top of the box rather than being centered. Before I get into the code (which is pretty short), here’s a working example:
Download the source here

The first thing that needs to be done is to create a resizable text field. For my example, I created a wrappable text field inside a movie clip. To make it vertically resizable I set the autoSize property to "center".

tb_mc.bText_mc.text_txt.autoSize = "center";

Since I don't want the text to run over the bottom or top of the thought bubble, I created a mask roughly the size of the thought bubble and converted it to a named movie clip (textMask_mc).

I made the mask a movie clip because it remedies issues that can arise where dynamic text will not show through an ungrouped object. I named it because I'm going to use it to center my text.

Now, all I have to do is write some code to do the centering when the text is updated:

btn.onRelease = function() {
	tb_mc.bText_mc.text_txt.text = user_txt.text;
	tb_mc.bText_mc._x = tb_mc.textMask_mc._x + (tb_mc.textMask_mc._width - tb_mc.bText_mc._width) / 2;
	tb_mc.bText_mc._y = tb_mc.textMask_mc._y + (tb_mc.textMask_mc._height - tb_mc.bText_mc._height) / 2;
}

Note that this method of centering on a mask or invisible object can be used for centering images when loaded as well but I would suggest using a listener and putting the center code inside onLoadInit function so the centering code doesn't fire before the image is loaded.

-rG

9 thoughts on “How to Center Dynamic Text in a Specified Area

  1. Be sure to make that an Actionscript mask and not a layer mask on the timeline. Layer masks are bad bad when combined with text, this is especially true when going to Asian languages.

  2. Hi Jeff,

    That’s why I made the mask a movie clip object. It can be used with dynamic text that way. Can’t say I’ve tried it with Asian text yet though I can’t see what the difference would be.

    Good tip though. I’ll keep that in mind if I ever run into a case where the mc mask doesn’t work.

    Thanks!

    -rG

  3. The thing with the text not showing up under a mask has to do with unembeded fonts. Typically with Asian characters it makes much more sense to unembed the fonts for a text field than to embed the huge asian fontsets. They will increase your filesize my megabites.

  4. Hi Adreny,

    It can be done with any language, I just didn’t embed all of the characters sets into my dynamic text field because I wanted to keep the size reasonable and because the cartoony font I used was is not unicode compliant.

    If you want to support a graphical character set my suggestion is to unembed the font for the dynamic text field, meaning use _sans or another font that maps to the system itself.

    The drawback to that approach is that your font options grow pretty slim. As I said before, I didn’t do that here because I wanted a cartoony looking font and, to be honest, I didn’t know I’d have visitors from the Far East šŸ™‚

    Thanks for the comment and the visit.

    Glenn

  5. Someone using the name Brownarola left this as a comment on my About page. Looks like it belongs here:

    Wanted to give you an updated AS3 version of the Dynamic Text Centering tutorial you made. I have not coded in AS3 in a while and I was stumped on centering of Dynamic text for a game Iā€™m building. When I found your script it got me on the right track to my solution so I thought I would thank you with the code I used to change the AS2 tutorial into functioning AS3 code.

    //first line
    stop();
    
    //AS3 script for centering text
    tb_mc.bText_mc.text_txt.autoSize = TextFieldAutoSize.CENTER;
    
    //AS3 scripts you need event listeners
    btn.addEventListener(MouseEvent.CLICK,onReleaseMyButton);
    function onReleaseMyButton(me:MouseEvent)
    {
    //this syntax was ok
    tb_mc.bText_mc.text_txt.text = user_txt.text;
    
    //to avoid the 1010 error you need to use Number
    //this is the x anchor point for the text
    var text_x:Number = tb_mc.textMask_mc.x + (tb_mc.textMask_mc.width ā€“ tb_mc.bText_mc.width)/2;
    
    //this is the y anchor point for the text
    var text_y:Number = tb_mc.textMask_mc.y + (tb_mc.textMask_mc.height ā€“ tb_mc.bText_mc.height)/2;
    
    //Now assign the x & y Coordinates to the Dynamic Text
    tb_mc.bText_mc.x = text_x;
    tb_mc.bText_mc.y = text_y;
    
    }
    

Comments are closed.