Put an image (or whatever) next to any character in a TextField that wraps and is multiline.

Somebody on the Adobe AZFPUG (Arizona Flex Programmer's User Group) asked today, "I have a TextField that is multiline, and has numerous wrapped lines. I want to be able to put an image RIGHT NEXT to the last character. How?"

Most of the responses were along the lines of "get the x loc of the textfield, and get the width, then get the y loc, and the height, then put the image".

That'll always put it to the lower left of the TextField. It won't put it next to the last (or any) character within the TextField.

I've dealt with this before, and was surprised to see that this person was really having a hard time finding a solution. So I gave her one: Here it is.

If you're not familiar with getCharBoundary ( indexOfChar ), look it up. It can save your life. It returns a rectangle that bounds any character you specify in a text field. A rectangle has an x, y, width, height. So you get the rectangle, do the math as below, and voila...place your display object.

private function doIt ( ) : void
{
 // can be anything, movieclip, combobox, image, whatever
 var img : Image = new Image ( );
 img.source = "timprofile.jpg";
 
 addChild ( img );
   
 _txt = new TextField ( );
 _txt.x = 100;
 _txt.y = 100;
 _txt.multiline = true;
 _txt.wordWrap = true;
 _txt.width = 200;
 _txt.height = 200;
 _txt.text = "Hello how are you I am fine ok that's very nice thank you ok let's wrap some text I hope this wraps let's wrap it up nice ok";
 
 rawChildren.addChild ( _txt );
 
 var r : Rectangle = _txt.getCharBoundaries ( _txt.text.length - 1 );
 
 img.x = _txt.x + r.x + r.width;
 img.y = _txt.y + r.y;
 
}

As always, thanks for visiting.