Handling Smileys with SmileyRenderer

The other day, I posted a little experiment using the new Flash Player 10 text engine (FTE). The idea is to handle static and animated (GIF) smileys in a paragraph. So here is the SmileyRenderer class handling that for you. You can use it in a chat for instance or any application where you need to handle that.

It works with a very simple code :

import org.bytearray.tools.SmileyRenderer;

// embed animated GIF assets
[Embed(source="assets/rire.gif", mimeType="application/octet-stream")]
var Laughing:Class;

// text content with smiley codes (note that I am using backslashes here to avoid smiley interpretation by wordpress)
var myContent:String = "Lorem ipsum dolor sit amet, \:* consectetur \:) adipiscing \:D elit. Maecenas \:( fringilla ornare leo.";

// main style for that paragraph
var format:ElementFormat = new ElementFormat();
var fontDescription:FontDescription = new FontDescription("Arial");
format.fontSize = 11;
format.fontDescription = fontDescription;

// dictionary handling class mapping
var mapper:Dictionary = new Dictionary(true);

// classic smiley from the library as BitmapData
mapper[':)'] = Smile;
mapper[':('] = Sad;
// animated smileys (embedded as ByteArray assets)
mapper[';('] = Cry;
mapper[':*'] = Love;
mapper[':|'] = Interrogation;
mapper[';)'] = Sleeping;
mapper[':D'] = Laughing;
mapper[':p'] = Crazy;

var renderer:SmileyRenderer = new SmileyRenderer ( mapper, format, 700 );

renderer.text = myContent;

addChild ( renderer );

The class automatically detects if you are submitting animated smileys as ByteArray assets or static ones through a simple BitmapData instance and shows them nicely in your text.

The code above would produce the following (Flash Player 10 only) :

A Flash animation should have appeared here, but it seems that your browser has an older version of the Flash Player or it is not installed at all. Please, install the last release of the Flash Player now, then reload this page.

This version does not include scrolling or any HTML rendering but this could be added easily.

Download the sources.

Comments (30)

  1. maru wrote:

    very nice class… and very nice logo :)

    Friday, January 23, 2009 at 5:54 pm #
  2. Moe wrote:

    Encore du beau boulot :)
    Merci

    Friday, January 23, 2009 at 6:42 pm #
  3. Nice one fellow !

    Friday, January 23, 2009 at 6:55 pm #
  4. Thanks for publishing the source for this. I am very interested in the new Flash Player 10 Text Engine. Do you have any resources for getting started with the new API?

    Friday, January 23, 2009 at 7:10 pm #
  5. Thibault Imbert wrote:

    Hi Peter,

    Unfortunately, resources are missing concerning the FTE. I am thinking about a big tutorial about the new API as soon as my book is finished. Anything special you’d like to see ?

    best,

    Thibault

    Friday, January 23, 2009 at 7:15 pm #
  6. Tek wrote:

    Well done Thibault, I hope to have time to explore your code soon. Thanks again to publish it open source.

    Friday, January 23, 2009 at 7:24 pm #
  7. Ian wrote:

    Very interesting idea, but it throws some runtime errors for me and then fails to run. I’m using Firefox in OSX.

    Friday, January 23, 2009 at 9:25 pm #
  8. Thibault Imbert wrote:

    Hi Ian,

    Are you sure you have Flash Player 10 installed ?

    What kind of errors do you get ?

    let me know,

    Thibault

    Saturday, January 24, 2009 at 3:38 am #
  9. Jloa wrote:

    Hi there, Thibault !
    Nice work. But could u explain a bit how exactly can i add html support (sry, still haven’t read ’bout the new 10fp text comps)

    Saturday, January 24, 2009 at 7:54 pm #
  10. Thibault Imbert wrote:

    Hi Jloa,

    To implement HTML support, it would be necessary to do the XHTML parsing manually and reproduce the TextFlow (from Text Layout framework) behavior.

    Honestly, it would take some time and scrolling is definitely easier than this one :)

    If you want to use something quickly you can check the TextFlow class from the Text Layout framework on the labs :

    http://labs.adobe.com/technologies/textlayout/

    best,

    Thibault

    Tuesday, January 27, 2009 at 1:45 am #
  11. ricko wrote:

    Bravo la classe car l’utilisation des dictionnaire est élégante. J’avoue que le moteur de texte laisse rêveur. En tout cas cette classe est bien pratique, ça manquait cruellement et elle a l’air souple d’utilisation tout ça :)

    Tuesday, January 27, 2009 at 1:52 am #
  12. doug wrote:

    Hi Thibault,

    Here’s a very similar example i made in FP9 http://www.strangeloopstudios.com/kohive_demo/textchat/

    Nice work!

    Sunday, February 1, 2009 at 6:26 pm #
  13. doug wrote:

    actually this is the finished prototype http://www.strangeloopstudios.com/as3_textchat/demo/

    Sunday, February 1, 2009 at 6:28 pm #
  14. Thibault Imbert wrote:

    Hi Doug,

    Excellent, didn’t know this one :)

    Thanks

    Thibault

    Sunday, February 1, 2009 at 6:38 pm #
  15. Rezmason wrote:

    I’m speechless. For the first time, I believe, I have read lorem ipsum the way it was MEANT to be read.

    If only Cicero had been gifted with the Flash 10 text engine.

    Monday, February 2, 2009 at 8:23 pm #
  16. Thibault Imbert wrote:

    lol rezmason :)

    Monday, February 2, 2009 at 9:38 pm #
  17. alex wrote:

    Nice work!
    and I also made a similar component in FP9, here is a demo:
    http://www.riaidea.com/blog/archives/46.html
    you can edit text and mix with smileys freely.

    Wednesday, February 4, 2009 at 7:12 pm #
  18. savage wrote:

    Iteratif en a réalisé un depuis un petit moment donc rien de bien surprenant. A voir ici : http://code.google.com/p/smiletext

    lol

    Wednesday, February 18, 2009 at 11:58 pm #
  19. Thibault Imbert wrote:

    Salut savage,

    Je connais la version d’iteratif qui avait testé cela bien avant comme tu le dis, je voulais simplement développer une version perso compatible avec des GIF animés. Sinon je te l’accorde cela n’avait aucun intérêt ;)

    Thibault

    Thursday, February 19, 2009 at 12:19 am #
  20. Craig wrote:

    Thanks for the excellent example, do you have any advice on the best way to make it scroll?

    Tuesday, March 10, 2009 at 2:45 pm #
  21. kundleyans wrote:

    Thibault,

    Great work.. Do we have embedding of swf file possible here. I have a swf with dynamic data which I need to convert to a pdf. Please let me know.

    Regards,
    Kundleyans

    Saturday, April 18, 2009 at 11:05 am #
  22. tony wrote:

    Hi Thibault Imbert,
    Your sample is so excellent. I really love it. Can you please post the source code with scroll text. Thanks

    Sunday, June 14, 2009 at 10:40 pm #
  23. Amit Biswas wrote:

    Thanks, it is a excellient example.
    Can You please provide the html formatted text support in the code..

    Monday, October 12, 2009 at 7:03 am #
  24. Mike Brown wrote:

    I am using a toolbar for smileys. It allows me to create and place Smileys on MSN, AIM, Yahoo, email and Social Networking Sites.

    Friday, January 15, 2010 at 8:02 pm #
  25. Riley wrote:

    How would you change the regex to support emoticons like (B) (H) (R) ?

    Tuesday, February 23, 2010 at 12:10 am #
  26. Riley wrote:

    solved my own post

    private var reg:RegExp = /(:[)|(pD*]|;[)(*])|(\([SsWwAaOoFfHhEeXxUuMmKkGgLlBbRrYyNnDdCcTt]\))/g;

    make sure to have regex in parenthesis groupings

    Wednesday, February 24, 2010 at 7:20 pm #
  27. Harshit wrote:

    hi Thibault,
    thnx 4 uploading such nice code.
    is it possible to insert such in dynamic textbox.

    Friday, July 2, 2010 at 4:08 pm #
  28. ivanposta@yahoo.it wrote:

    hi
    great!!!!

    I try to use it in Flex width UIComponent , I see the text but no gif are render. how can do it ?

    Friday, November 12, 2010 at 11:29 pm #
  29. DEVENDRAN wrote:

    Hi It is a very good asset for a chat developer, How it will work for HTMLText? is there any workaround for that ?

    Monday, March 28, 2011 at 9:34 pm #
  30. calculate size wrote:

    I don’t know how to calculate actual size of the SmileyRenderer instance.

    I put this instance into ScrollPane,it can not scroll to the last line….thanks

    Sunday, April 3, 2011 at 5:25 am #

Trackbacks/Pingbacks (3)

  1. [...] Handling Smileys with SmileyRenderer [ by Thibault… (from ByteArray.org) [...]

     
  2. Smiley Chat With FMIS « Influxis Labs on Wednesday, May 19, 2010 at 9:54 pm

    [...] You can download the SmileyRenderer from Thibault’s post here:  bytearray.org [...]

     
  3. Flex 4 Textbox mit Icons? - Flashforum on Tuesday, August 3, 2010 at 2:16 pm

    [...] Handling Smileys with SmileyRenderer <font size='1'>[ by Thibault Imbert ]</font> – Byte… __________________ mfg [...]