TextChat With Emoticons (AS3 + FMS3)

Here’s an example of what i’ve been developing for my current employer:

TextChat With Emoticons View in Firefox (as IE seems to break with the JS i’m using).

It’s not yet completely finished but is progressing nicely… so i have discussed with the relevant parties and we’ve decided to make it public to see if anyone wants to either try to break it or offer some suggestions to make it better.

If you can please spare 5 mins to have a play and of course tell me what you think. Cheers!


19 responses to “TextChat With Emoticons (AS3 + FMS3)

  • rand

    i’m developing a similar chat in Flex but i have some problems with gif files alignment in htmlText.
    For example, replacing three strings typed in a line with proper gif emoticons, the images are displayed out of line… in the bottom of text, one under the other.
    What textfield class or component are you using?
    I’m using TextArea and it seems there are several bugs in it…
    Using swf files instead of gif will solve some alignment problems?
    Thankyou Doug!

  • Doug

    @rand – Have a look at my EmoticonFormatter class which is found here:

    EmoticonFormatter source

    It might give you some ideas. I can’t share all the code so it may be hard to fully understand how my app works with only this snippet but there’s plenty to here to think about.


  • Eric


    We are having some issues with a Video Chat we are writing for one of our sites. We are finding when we go in (debug version flash) it works great but when we have people without debug versions they cant type in the chat box. Im pretty sure its an AS3 thing. Do you have any examples of the chatbox and submit box with AS3?

    our app is here http://purcommunity/flash/
    user/user if you dont have a cam it will error (took out cam test code trying to find our problem)

    Thx for any pointers


  • Doug

    @eric I went to the site using a normal (non debug) flash player version 10.

    I can activate the login text field but it takes 2-3 clicks to do this. It should normally be a 1 or 2 click process but it seems to need more… weird!

    In a normal swf you usually have to click once to activate it within your browser and then again to get at the text field.

    You should think about using SWFObject http://code.google.com/p/swfobject/ as this will activate you’re swf file on html load (giving it focus within your browser) and should then only require a single click to give the text field focus.

    You can also assign focus to the text field within your actionscript code… so with swfobject and actionscript to set the correct focus it could be possible to fix your current problem so a user can simply type their credentials without clicking anything.

    If you want some help i’m happy to look at the code if you want otherwise just ask.

    Hope this helps!

  • Eric

    Yeah login is not an issue and we will have it up in with swfobject. I just moved it here for some testing.

    Our main problem is once they login we are getting told all NonDebug versions cant access the text chat boxes. Their Cams work fine. Either they cant type in it or when they type in the box the dont see text just the cursor moves.

    I would hate to have to do alot of this in AS2.

    I dont have the source code on this Desktop (Linux) but I will send it for you to look at

    Thx for your time


  • Doug

    By Debug version do you mean your version (the swf on the development machine)? It sounds to me like it could be an issue with embedded fonts (or not embedded fonts) maybe on the development pc you have a certain font that’s non standard that’s being used but isn’t embedded. If a user doesn’t have the same font installed on their pc and it’s not embedded in the swf that could explain why a user can’t see or interact normally with text fields.

  • Doug

    @eric – i tried your site again and it all works fine no issues at all with text…

  • Eric

    we rewrote the handlers and it fixed it 🙂


  • kyle jeske

    Were you planning on still releasing your emoticon text field source.
    i saw that you had said that in the previous post about this same topic…

  • cesar

    im interested to how did you do it the textArea conversation, is it a textArea ? or did you used other component ?

  • Doug

    Hi Cesar,

    It’s a standard Flash TextField which i customized (not Flex).
    Check out the formatter http://www.strangeloopstudios.com/as3_textchat/demo/TextChat_Emoticon_Formatter.txt for a better idea of what i did.


  • cesar

    more important than the code is the logic you used for your text conversation can you explaint how did you do it, i’m read about the flash chat but just do it references around conversations without emiticons, and use htmlText, but i thing you use other way. please tell us.

  • Doug

    Ok its conceptually easy… 🙂

    First user submits msg – it goes to server etc when it comes back i examine the msg and reformat the string. The reformatting looks for specific chars and puts them into an array of possible candidates to be emoticons.

    Next i apply some rules to handles sequences containing spaces and other scenarios such as not parsing http:/ links which contain a valid emoticon. There’s some other logic (var difference) which was the most fiddly bit; handling multiple emoticons in a sequence within certain constraints like around links (i’d need to experiment with this as its been a while – also i don’t think it’s perfect, but that’s as far as i got on this job!).

    Once that completes i have another array of char indexes in my msg string i now chop the text at and around each index and replace the emoticon chars with some new html. There’s also more logic to re parse urls and handle when at the end of a string.

    I have to store the actual offsets for each char (especially the ones that have been chooped to 2 chars) to be able to place subsequent ones at the correct index, remember the text length could have changed since adding the current emoticon… to be honest this is crap but it works.

    Then with everything done i return the new text the offset indexes and the original indexes.

    Then when i draw the emotion i use it’s index to calculate the x, y, width and height of the 2 ‘XX’ chars in my html text via pTextField.getCharBoundaries(index) and pTextField.getCharBoundaries(index+1).

    Now a shape is created and drawn at the correct position (this could be used to mask the text – but in my example it’s green, for debugging). With the shape drawn and added i now the dimensions and position so create, scale and position the emoticon.

    and that’s about it…

    I’m absolutely sure there is a much better way of doing this, just never had enough time to have another attempt.

    I’ll post the two most important files below.

    Hope this helps give you something to think about!

  • Sachi

    Hi Doug,

    Any way i can port this to AS2 ? I need it working on flashlite.

  • Doug

    main problem is getting the x and y coordinates for each text char in your Textfield and then using them as global container coordinates. If you can come up with something accurate the rest is really quite simple, sorry i cant be more help but i’ll have a think about it…

  • Suszi

    Hy. The url is no longer walid. Could you please share it again?

  • Thijs

    Unfortunately all of the links to example code/apps are broken.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

%d bloggers like this: