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 (27)
very nice class… and very nice logo
Encore du beau boulot
Merci
Nice one fellow !
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?
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
Well done Thibault, I hope to have time to explore your code soon. Thanks again to publish it open source.
Very interesting idea, but it throws some runtime errors for me and then fails to run. I’m using Firefox in OSX.
Hi Ian,
Are you sure you have Flash Player 10 installed ?
What kind of errors do you get ?
let me know,
Thibault
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)
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
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
Hi Thibault,
Here’s a very similar example i made in FP9 http://www.strangeloopstudios.com/kohive_demo/textchat/
Nice work!
actually this is the finished prototype http://www.strangeloopstudios.com/as3_textchat/demo/
Hi Doug,
Excellent, didn’t know this one
Thanks
Thibault
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.
lol rezmason
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.
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
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
Thanks for the excellent example, do you have any advice on the best way to make it scroll?
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
Hi Thibault Imbert,
Your sample is so excellent. I really love it. Can you please post the source code with scroll text. Thanks
Thanks, it is a excellient example.
Can You please provide the html formatted text support in the code..
I am using a toolbar for smileys. It allows me to create and place Smileys on MSN, AIM, Yahoo, email and Social Networking Sites.
How would you change the regex to support emoticons like (B) (H) (R) ?
solved my own post
private var reg:RegExp = /(:[)|(pD*]|;[)(*])|(\([SsWwAaOoFfHhEeXxUuMmKkGgLlBbRrYyNnDdCcTt]\))/g;
make sure to have regex in parenthesis groupings
hi Thibault,
thnx 4 uploading such nice code.
is it possible to insert such in dynamic textbox.
Trackbacks/Pingbacks (2)
[...] Handling Smileys with SmileyRenderer [ by Thibault… (from ByteArray.org) [...]
[...] You can download the SmileyRenderer from Thibault’s post here: bytearray.org [...]