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!
February 2nd, 2009 at 1:58 am
GREAT WORK!
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!
February 2nd, 2009 at 11:00 am
@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.
cheers
Doug
March 26th, 2009 at 4:42 pm
Doug,
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
Eric
March 26th, 2009 at 5:04 pm
@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!
March 26th, 2009 at 6:36 pm
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
Eric
March 26th, 2009 at 10:29 pm
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.
March 26th, 2009 at 10:35 pm
@eric – i tried your site again and it all works fine no issues at all with text…
March 27th, 2009 at 2:45 pm
we rewrote the handlers and it fixed it
Thx,
Doug
April 6th, 2009 at 11:50 pm
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…
April 7th, 2009 at 9:16 am
Hi Kyle,
Unfortunately I will not be releasing this version but would be happy to work on something new if that’s any good to you.
January 7th, 2010 at 2:57 am
im interested to how did you do it the textArea conversation, is it a textArea ? or did you used other component ?
January 7th, 2010 at 8:03 am
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.
cheers
Doug
January 7th, 2010 at 5:57 pm
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.
January 8th, 2010 at 12:40 pm
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!
January 8th, 2010 at 12:51 pm
Here’s the files:
http://www.strangeloopstudios.com/example_as/textchat_bubble.txt
http://www.strangeloopstudios.com/example_as/textchat_emoticon_formatter.txt
May 10th, 2010 at 5:31 am
Hi Doug,
Any way i can port this to AS2 ? I need it working on flashlite.
May 10th, 2010 at 6:03 am
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…
February 17th, 2011 at 9:56 am
Hy. The url is no longer walid. Could you please share it again?
March 31st, 2011 at 11:21 am
Unfortunately all of the links to example code/apps are broken.