Wednesday, December 29, 2010

SmartFoxServer Tutorial: How to Create Emoticons

Hello again!

In this tutorial, I am going to teach you how to create emoticons in the SmartFoxServer avatarChat example. So, let's begin.

First, I am going to start off with the coding. In the chat frame of the avatarChat example file, find the onPublicMessage handler. It should look similar to this:

After you find that handler, it's pretty much simple coding from there. So, with that being said, let's begin coding.

The method I am using for this does the following:

  1. When a message is said, it hides the emotes movieclip by default.
  2. If the message contains :) then show the emotes movieclip and goes to the smile frame of the emotes movieclip.

Now, here is the coding I used in my example file:

mc.bubble.emotes._visible = false;
if (msg == ":)") {
mc.bubble.message.text = "";
mc.bubble.emotes._visible = true;

I also rearraged some of the coding, so rearrange your coding to match mine, as shown below:

The next thing to do is setup the avatar. To do this, open up the library (Window -> Library), and click on the _GUI folder two times to open it (or you can click the gray arrow beside the folder icon) and look at the contents inside it. Once that folder is opened, you should see another folder named _Avatars. Open that folder as well.

Once the _Avatars folder is opened, you should see a movieclip named avatar. Right click on the symbol in the library and click the Edit option.

Now we need to get inside the bubble movieclip. To do this, simply click on the avatar's chat bubble two times. You should now be inside the bubble movieclip.

Here, is where you will create your emotes. For this tutorial, I'm going to make a smiling emoticon. After your done making your emote, convert it to a movieclip symbol and give it an instance name of emotes. Also, be sure to give your emote's smile frame a frame name of smile.

That's all for this tutorial!

If you have any questions, comments, or if you find any problems with my scripts, please leave a comment and I'll reply to it as soon as possible.


  1. Btw i don't know how to name a frame.

  2. CannonTurtle: Click on the frame in the timeline, then open the properties window and it should be self-explanatory from there.

  3. Thanks Cool Boy! You gave me a GREAT idea for another feature! XD

  4. Pengwing4: No problem! That's what this site is for. ;)

  5. I followed everything in the tutorial, and Every time I test it in debug, its a blank bubble? I put in the code, and the emote picture. I did it in new keyframe's as well. Any ideas?

    1. Please read the update to the newest post! Specify SFS2X or SFS1X!

  6. hey idon´t understand help

    1. Please read the update to the newest post! Specify SFS2X or SFS1X!