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;
mc.bubble.emotes.gotoAndStop("smile");
}

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.

SmartFoxServer Tutorial: Simple Buddylist Tutorial

Hello everyone.

In this tutorial, we are going to make a very simple buddy list. That's all we will be doing in this tutorial. So, with that being said, let's begin.

To begin with, I'm using SmartFoxServer's avatarChat example file. What I do in this tutorial, you should be able to just copy and paste all the coding to your Flash file, and it should work just fine. Anyway, let's do all the coding first, then go back and setup the Stage.

The first line of coding you need to add is this:

var bListLoaded = false;
Add that line of coding somewhere near to the place I added mine in the picture below, or in the same exact spot if you want.



Next, you have to add something to the onJoinRoom handler, so the buddylist loads when you enter the room. This is where the variable above comes in. Add this coding somewhere in the onJoinRoom handler:

if (!bListLoaded) {
bListLoaded = true;
_root.smartfox.loadBuddyList();
}
I added it to the end of the onJoinRoom handler after the avatar is setup. Here is a picture of where I added the coding:



After you add that coding, you have to create a new handler. By that I mean add more coding. Anyway, what I did here was add some coding under the onJoin Room handler. Here is the coding you need to add:

smartfox.onBuddyList = function(bList:Array) {
theBList.removeAll();
for (var i in bList) {
var buddyName = bList[i].name + " (" + (bList[i].isOnline ? "Online" : "Offline") + ")";
theBList.addItem(buddyName, bList[i]);
}
theBList.sortItemsBy(buddyName, "ASC");
}

I added that coding right under the onJoinRoom handler, as shown in the picture below.



Now, we only have two more handlers to create. The two more handlers are onBuddyListUpdate and onBuddyListError. After that, it is just simple coding. Anyway, here is the coding for the onBuddyListUpdate handler:

smartfox.onBuddyListUpdate = function(b:Object) {
var buddyName = b[i].name + " (" + (b[i].isOnline ? "Online" : "Offline") + ")";
for (var i:Number = 0; i < theBList.getLength(); i++) {
var item = theBList.getItemAt(i);
if (item.data.name == b.name) {
theBList.replaceItemAt(i, buddyName, b);
break;
}
}
}

I added that handler under the onBuddyList handler, as in the picture below.



Now, the last handler you have to add, and the simplest in my own opinion, is the onBuddyListError handler. For this tutorial, I'm not going to get much into this handler because it is a very simple handler. All I do in this handler, at this time, is just setup a trace command, so that if an error occurs in the buddylist, it traces it to the output panel. Here is the coding for the onBuddyListError handler:

smartfox.onBuddyListError = function(theError:String) {
trace("Buddylist Error: " + theError);
}

I added that handler under the onBuddyListUpdate handler, as shown in the picture below.



Those are all the handlers you need to setup, but that's not all the coding. Now, we move onto functions. The functions we are going to add in this tutorial are addBuddy and removeBuddy. First, I'll make the addBuddy function.

Just to make the file look "cleaner" in coding, I add all my functions at the end of the Flash movie. So, I'm skipping all the way down and I'm going to add this coding:

function addBuddy() {
var user = userList_lb.getSelectedItem().label;
if (user != _global.myName) {
if (user != undefined) {
_root.smartfox.addBuddy(user);
}
}
}

Here is a picture of where I added the coding:



(I know the image isn't the correct coding as it has ...getSelectedItem().data.label; - Take out the ".data" part and it should work fine.)

Now, I skipped down two more lines after adding that coding, and I then added the removeBuddy function, which contains this coding:

function removeBuddy() {
var user = theBList.getSelectedItem().data.name;
if (user != _global.myName) {
if (user != undefined) {
_root.smartfox.removeBuddy(user);
}
}
}

Here is a picture of where I added that coding as well:



(I know the image isn't the correct coding as it has ...getSelectedItem().label; - Take out the ".label" part and add ".name" instead, then it should work fine.)

Now, after you do all that above, it is now time to setup the Stage. By the way, all the coding above these words go on the chat frame of the avatarChat.

To setup the Stage, all you have to do is click Window from the menu bar at the top of Flash, then click on the Components option. The components window should then open. Look through the components window until you find the component called "List." Drag it to the Stage and give it an instance name of theBList.

Now make two buttons and put them somewhere on the Stage, give them any instance name you want. For the button that will be used to add the buddy, add this coding to the button:

on (release) {
_root.addBuddy();
}

Now, for the button that will be used to remove the buddy from your buddylist, use this coding:

on (release) {
_root.removeBuddy();
}

That's all for this tutorial!

If you have any problems or errors, or any questions on this tutorial, please leave a comment on this post and I will reply to it soon.

NOTE: Due to the coding I used in this tutorial, you will need to open the SWF file two times to test it, as if you try to test it with yourself by attempting to add yourself onto your own buddylist, it won't work.

Saturday, December 25, 2010

SmartFoxServer Tutorial: setUserVariables()

Hello everyone!

I just received a request from Bobhead202 asking about how to change moderator outfits on a SmartFoxServer avatarChat file. Anyway, the command to do this in-game is server.setUserVariables().

setUserVariables basically sets user variables. There is no other simpler definition than that.

So, I'm going to go ahead and start this tutorial now. This is pretty simple so I'm not going to have any pictures in this tutorial. Plus, the computer I'm currently doesn't have Flash installed.

Anyway, let's begin.

1. Open up your Flash ActionScript 2.0 avatarChat file.

2. Make a button anywhere on the stage and give it any instance name you want.

3. Add the following coding inside the button:

on (release) {
var newCol = frameNumberHere;
_root.smartfox.setUserVariables({col:newCol, init:true});
_root.myAvatar.disc.gotoAndStop(newCol);
}
That's pretty simple coding - only 5 lines of coding. I'm now going to break up each line of ActionScript and explain what each one does.

on (release) { - This handler indicates to perform the action on the release of the button.
var newColor = frameNumberHere; - This line creates a variable. (Replace "frameNumberHere" with the frame number of the new avatar in the myAvatar.disc movieclip.)
_root.smartfox.setUserVariables({col:newCol, init:true}); - This line calls the setUserVariables command and updates the current user's variables. After doing this, it calls the onUserVariablesUpdate event. Anyway, the reason we use the curly brackets inside the normal brackets is because the data inside is an object. "col" is the name of the user variable pre-set in the avatarChat file. "init" - When this is set to true, it updates all clients right then. If it's set to false, then it does the opposite and doesn't update at that time.
_root.myAvatar.disc.gotoAndStop(newCol); - This line of coding updates the client side so that the disc's frame goes to the one defined in the newCol variable.
} - Indicates the end of the coding handler.

That's basically all for this tutorial. If you encounter any problems or errors, or if you don't understand something, make a comment on this post and I will be glad to assist you further.

~Cool Boy 714