Solution Found: Displaying Smileys in a Flash8 TextField
Whoever has tried to display smileys in Flash-textfields has recognized the strange and unpredictable way Flash displays inline images. It’s not possible to do this in the expected way by using <img> tags in a html textfield.
As I am currently developing a realtime chat application based on the open-source instant messaging server Jabber I had to find a work-around for this problem. Jolan’s SmileyTextField, an early solution published as Flash MX component, uses a seperate Textfield and a MovieClip displaying the smileys. The big problem of this solution is that its not possible to get the coords of a specific letter in a textfield in an easy way. SmileyTextField calculates image (or, in this case, library assets) positions using autosizing textfields and line counts, which seemed to be rather imprecise on long texts and caused severe performance issues.
Our solution, we call it the EmotionalTextField, also uses a seperate TextField and MovieClip for smiley positioning. But smiley-positions are calculated using the Flash 8 bitmap-manipulation capabilities. Basically, predefined string sets (like :-) or :-( ) are replaced by colored dots, the textfield is loaded into a flash.display.BitmapData, and the colored dots are searched using BitmapData.getColorBoundsRect().
After some refactoring and documentation our EmotionalTextField will be released here. Also included will be a configuration-xml, where you can register the text-snippets and corresponding images you want to use in your project.
—- 05/24/07 —-
finally. it’ done! the component can be downloaded here:
