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:

Download EmotionalTextfield 0.1b

14 Responses to “Solution Found: Displaying Smileys in a Flash8 TextField”

  1. joaquin says on March 18th, 2007 at 12:12 am

    hi
    did you guys ever released it?

  2. batlogg says on March 28th, 2007 at 7:39 pm

    hey joaquin, we’re about to release it. please just send a mail to armin@lovelysystems.com - he’s our maintainer - for it.

  3. pin says on May 17th, 2007 at 2:29 pm

    How soon you’ll release it? Is there a particular date of release or something?

  4. wolf says on May 18th, 2007 at 9:25 am

    looks like we’ll release it next week. i’ll add the link here, so stay tuned.

  5. Daan says on May 21st, 2007 at 10:03 pm

    sounds realy nice! i’ll stay tuned!

  6. wolf says on May 24th, 2007 at 10:13 am

    its done. just use this link to download the component: http://lsrp02.lovelysystems.com/armin/etf-0.1beta.zip

  7. Daan says on May 24th, 2007 at 3:22 pm

    i got an “403 Forbidden” :)

    cant wait to test it

  8. wolf says on May 24th, 2007 at 4:47 pm

    arghhhh … gonna have a serious talk with our SA :-D … hopefully it will work tomorrow.

  9. wolf says on May 24th, 2007 at 4:58 pm

    i moved it my private webspace, try this link: http://www.wolfabua.com/emt/etf-0.1beta.zip

  10. Jason W says on June 16th, 2007 at 3:41 pm

    This may be a silly question, but as-is, it appears as though the field simply increases in size as more lines of text are added. I was wondering if it’s possible to maintain the size of the text field and just enable a scrollbar.

    I apologize if this is a stupid question. Thanks for what appears to be a great component!

  11. wolf says on June 16th, 2007 at 9:25 pm

    hey jason, its not possible to scroll the emotionaltextfield in the same way you scroll “normal” textfields, as it uses a textfield (text) overlaid by a movieclip (smilies). if you scroll the textfield the positions of text and smilies dont match any more.

    what you can use (and we actually use in our application) is a combination of mask, etf and a custom scroller, the same way you scroll a regular movieclip.

    anyway, it seems to be a good idea to implement a “scroll”-property similar to TextField.scroll. i’ll put it on my list for the next release :-)

  12. pin says on June 27th, 2007 at 9:31 am

    Will there be an actionscript 3.0 version of this component? It’ll be really great.

  13. pin says on August 2nd, 2007 at 7:24 am

    Why is it taking a month to answer simple question?

  14. wolf says on August 2nd, 2007 at 8:31 am

    if you’re waiting for something urgent just send an email, i don’t have time to answer every post immediately. anyway, an as3 version is not planned right now.

Leave a Reply