SmartFoxServer Tutorial: Moderator Message Tutorial

Hello everyone.

To start off this post, I'm going to tell you this: I plan to start updating this site much more as time passes by. I'd also like to apologize for not posting this tutorial sooner than I had expected.

Anyway, let's just jump right on into the tutorial.

In this tutorial, I'll be showing you how to make a "Mod Message" system. I will be using SmartFoxServer objects again because some people requested that in the "Mod Magic" tutorial I did not to long ago.

So, the first thing I want to tell you is that I'm using the SmartFoxSerer avatarChat file for this tutorial, but you can use any file you want. So, let's go ahead and open up the file.

The next thing you will want to do is to skip straight into the "chat" frame (on the avatarChat.fla example file) or whatever frame your users will interact with each other and open up the coding for that frame.

Now, in this area (at the very bottom of all the other coding), we are going to add this coding into our file:

smartfox.onObjectReceived = function(obj, sender) {
if (_global.myName == obj.toUser) { //Only if my name matches the specified one, do the actions below
_root.modMsgMC._visible = true;
_root.modMsgMC.modMsgText.text = obj.myMsg;
}
}

We are also going to go right under that and make a new function named "sendModMessage." So, in order to do that, we need to add this coding under the smartfox.onObjectReceived handler:

function sendModMessage(toUser, myMsg) {
if (toUser != _global.myName) { //If specified user doesn't have my name then
var obj:Object = {}; //Create a new object
obj.toUser = toUser; //Set the .toUser parameter on the object
obj.myMsg = myMsg; //Set the .myMsg parameter on the object
_root.smartfox.sendObject(obj); //Send the object to all users in room
trace("The mod message has been sent to " + toUser + ".");
}
}

Now, if you tested your movie right now, you would see that nothing has changed. So at this moment, adding all that coding hasn't been really useful yet. It's time to change that and tie all that coding together. To do that, first we need to make a button to call the 'sendModMessage' function. You can give the button (or movieclip) any instance name you want.


Now that something is calling the function, we need some visual evidence that it is really being called. So, the next thing to do is to create a movieclip and give it the instance name of 'modMsgMC'. Inside that movieclip, go ahead and create a dynamic text field which will be used as the actual 'message' part of the 'mod message'. Give this text field an instance name of 'modMsgText'.


After you do that, test your movie and you should see that the moderator message is working completely fine.

Now, currently, as you can see from the file your making, the user is being defined by you and cannot change, as well as the message. So, my next objective is to show you how to alter the coding so you can type in the user's name and the message to send to them.

The first the you have to do is create two text fields on the stage. Give them instance names of 'sendTo' and 'msgToSend'.


Now, once that is done, just open up the button coding which calls the sendModMessage function, and change it to this:

on (release) {
_root.sendModMessage(_root.sendTo.text, _root.msgToSend.text);
}

Test your movie with TWO instances, and you should see your moderator message working fine. I didn't show you how to add a close button to the moderator message, but a simple one could have this coding:

on (release) {
_root.modMsgMC._visible = false;
}

Well, that's all for this tutorial! Be sure to request more, and as usual, if you have any questions about this tutorial, feel free to leave a comment!

NOTE 1: It is required that you test this movie out with two different clients, because if you test it with one and send it to your own username, nothing will happen. When you send an object, the server sends it to everyone in the room except yourself.

Source File: Download

SmartFoxServer Tutorial: How to Stop Walking on Walls (How to Set Walking Parameters)

Hey everyone.

In this tutorial, as you can most likely tell from the title, I'm going to explain one way to stop people from 'walking on walls', or other places the characters shouldn't be able to walk.
The coding is quite simple to understand in my opinion, but might not be for an absolute beginner. Anyway, shall we get started?

The first thing I did was open up the Flash file, in which for me is the SmartFoxServer avatarChat example file that they provide you with when you download the program.
Once it is open, I quickly skimmed over the coding once again to figure out one quick and easy approach to do this. Anyway, someone once told me (when I was new to SmartFox), that one method to do this was to make the walls unclickable.

So, in a way, we will do just that. So for this method, we are first going to take a look at SmartFoxServer's original coding and alter it just a little.

Take a look at the myMouse.onMouseDown function. Let's go ahead and delete the if (px.......) statement (as well as it's closing bracket), BUT DO NOT DELETE THE CODING INSIDE THE IF STATEMENT, and now test your movie.

You should move somewhere everywhere that you click your mouse. That's not the best thing to do, considering that most games have buttons in them. You may not want your character to walk when the button is pressed. Some people (like me) thinks that is a little annoying. Keep the if statement out of the coding anyway though.

Anyway, now it's time to add in our own coding. What we need to do is to add a function. Add this coding to the very bottom of your frame coding:

function isWalkable(canWalk:Boolean) {
if (canWalk) {
_global.isBusy = false;
useHandCursor = false; //This line is optional!
} else {
_global.isBusy = true;
}
}

Once the coding is added, if you test your movie, you should see nothing has happened since the first time you tested your movie. So, now that we have a function, we need to add some coding somewhere to actually make the call to the function.

So, what you should do now, is create movieclips as either the ground or the wall and make the calls to the function when the movieclip is either hovered, or when you move your mouse out of the selected symbol.

What I did was use a movieclip as the ground and add this coding to it:

on (rollOver) {
_root.isWalkable(true);
}
on (rollOut) {
_root.isWalkable(false);
}

Well, now that you have done all that, you can now test your movie. You should be able to click on your movieclip and see your avatar move to the desired place you have clicked.

NOTE 1: This is not the 'best' method to do this as I'm almost sure it will have a couple of glitches in it somewhere along the line. After reading this, if not before, I'm sure you can come up with a way better method for this, as this is mainly for the beginners.

NOTE 2: In my source file, I used the big gray space on the left for my 'ground'.

If you have any questions or comments, feel free to leave them on this post and I will reply to them as soon as I get a chance to!

Source File: Download

SmartFoxServer Tutorial: Dynamic Room Creation

Hey everyone!

As you can tell from the title of this post, this tutorial is going to be on dynamic room creation. So, with dynamic room creation, you are able to create new rooms straight from the client, without even restarting the server, unlike adding rooms from the config.xml file.

One disadvantage of creating rooms from the client is that the room is not persistant. To make the room persistant, you would have to use an extension, which isn't all on the client, more on the server than the client. Anyway, let's begin with this short and fast tutorial.

The first thing your going to want to do in this particular tutorial is to go ahead and create the function for our coding. To do this, open up the chat frame coding (I'm using the avatarChat example file) and add this coding to the very bottom of the frame:

function createDynRoom(rName, rPass, rMax) {
var rObj:Object = {};
rObj.name = rName;
rObj.password = rPass;
rObj.maxUsers = rMax;
_root.smartfox.createRoom(rObj);
}

Now, that's all for the frame coding. So now we have to figure out a way to call the function. So, as you can see from our function, we need three parameters. So what I did was create three input text boxes and give them an instance name of newRName, newRPass, and newRMax.

Now that we have our text fields setup, we can create a button to actually call the function and execute it. So, make a button (or movieclip as these symbols can both contain button events), and add this coding to the button:

on (release) {
_root.createDynRoom(_root.newRName.text, _root.newRPass.text, _root.newRMax.text);
}

Also, just in case you got confused on what all to add to the stage, here is a picture of what I added to my avatarChat example file:


So, that's basically all you needed to add. Once you test your movie, you should see that it works!

NOTE 1: If the new room is empty, it might delete itself (I'm not sure if this is the correct way to say it), but I do know that if no one is in the room and you logout and login again to the avatarChat example file, the room is deleted by itself.

NOTE 2: When the smartfox.createRoom() command is called, I believe it fires the smartfox.onRoomAdded handler.

Source File: Download