如何将动画片段悬停在文本区域上，使其看起来像是文本的一部分？

Question

Take a look at this demo , how do they accomplish the Inline Changes feature? To me it looks like they are floating a movieclip over the textarea.

What I can't figure out is how they anchored the movieclip to stay in the correct position. If you type something before the movieclip it moves position along with the text, the movieclips even move to the next line when the text word wraps. Does anyone have an idea?

Answer 1

What I think they're doing is keeping track of the index the sprite is representing. Then they have a nice function that moves the sprite to the correct position given the size of the textbox and font. All you need to do after that is bind the positioning function to changes made to the textbox and you've got that effect. Doesn't seem too complicated, as there are already font size/position functions available.

EDIT: Notice how you cannot type code in between the overlapping regions.