20 Clicks Game Tutorial

{Coding and coding explanations are currently being added. Adding a little bit each day, until this tutorial is finally completed. - Will be updated again on the afternoon of July 21st, 2012.}
{Last Updated: July 20, 2012}

Hey everyone!

It's been a while since I last updated this blog, but anyway I'm going to go ahead and start this tutorial because it might be a little long. I'm going to try to explain it as much as possible. Let's begin.

In this tutorial, we will only be using ActionScript 2.0 coding on the client side. No extensions will be used in this tutorial (which is why the coding isn't the best). The main goal of this tutorial will be to create a two-player game in which the players will compete to click a button faster than the opponent. As a simple name for the game, I named it "20 Clicks." The name should be self-explanatory really.

So, to begin this game, create a new Flash ActionScript 2.0 document.

The next thing you need to do is create a user interface that contain all of the following:

• Username field (input text box) - Instance name: nick
• Two regular button symbols that will serve as option buttons - Instance names: hostBtn and joinBtn
• MovieClip to tell the user which option button is selected - Instance name: chosenMC
• Continue/Login button - Instance name: loginBtn
• Any other little details you would like to add.

Here is what my finished user interface looks like:

Please excuse the bad quality, I resized a few things and it turned out to not look it's best and I didn't want to recreate it since this is just a quick example for you to look at, and possibly make it better.
Anyway, after you create the user interface, we will start coding the first frame in our movie. So, click on the first frame and open up your actions panel by pressing F9, or by going to Window -> Actions on the toolbar. Once you open the actions panel for the first frame, type this coding into your actions:

import it.gotoandplay.smartfoxserver.*;

stop();

_global.gameType = "Host";

_root.chosenMC._x = _root.hostBtn._x;
_root.chosenMC._y = _root.hostBtn._y;

var sfs:SmartFoxClient = new SmartFoxClient();
sfs.debug = true;
sfs.connect("127.0.0.1", 9339);
sfs.onConnection = function(success:Boolean) {
 if (success) {
  _global.serverConnected = true;
 } else {
  _global.serverConnected = false;
  _root.gotoAndStop("ConnectionFail");
 }
}
sfs.onConnectionLost = function() {
 _global.serverConnected = false;
 _root.gotoAndStop("ConnectionFail");
}

sfs.onLogin = function(resObj:Object) {
 if (resObj.success) {
  _global.myName = resObj.name;
 } else {
  _root.gotoAndStop("LoginError");
 }
}

sfs.onRoomListUpdate = function(roomObj:Object) {
 this.autoJoin();
 _root.gotoAndStop(_global.gameType);
}

Now, I would like to point out a few things in the coding.

• On line 12, you will have to substitute the ip address 127.0.0.1 with your own server's ip address, unless you are testing the game locally.
• The application does not tell the user if the server is connected, it just tells the user if the server cannot connect. - I am pointing this out because if you test this with your server off, it will be about 5 - 15 seconds before you really know whether or not the server has connected. You can implement this into the game yourself if you want.

Now that we have the first frame coded, I will explain the coding, line by line. Each line of explanation corresponds to each line of the coding above.

• Line 1 - Imports the SmartFoxServer API.
• Line 3 - Makes sure the movie stops on frame 1 and doesn't continue to play through all the frames.
• Line 5 - Sets the gameType variable to the default, "Host".
• Line 7 and 8 - Sets the chosenMC x and y positions on the stage in the same place the hostBtn resides.
• Line 10 - Creates a new SmartFoxServer instance.
• Line 11 - Turns the SmartFoxServer debugging on.
• Line 12 - Connects to server 127.0.0.1 on port 9339. Change 127.0.0.1 to your server, unless you are playing the game locally.
• Lines 13 through 20 - The sfs.onConnection handler is called when SmartFoxServer connects or fails to connect to a server. This function in our game basically sets the serverConnected variable to true if we connect successfully, and if we cannot connect to the server, it sets the variable to false and gotoAndStops at the frame, "ConnectionFail".
• Lines 20 through 24 - The sfs.onConnectionLost event is called when a connected server gets disconnected for any reason, besides logging out. All we do here is set the serverConnected variable to false and gotoAndStop on the "ConnectionFail" frame.
• Lines 26 through 32 - The sfs.onLogin event is called when we send a login request. If the login is a success, we set myName to our username. On the other hand, if we aren't able to login for some reason, we gotoAndStop on the "LoginFail" frame. (Eh, not the best way to handle this event. Probably just me being too lazy at that event. Lol.)
• Lines 34 through 37 - The sfs.onRoomListUpdate event is called when we request the room list from the server. Since we are not using a custom login extension, the room list is requested automatically. When the room list is updated (populated) here, we join the room in the config.xml file with the attribute of autoJoin. autoJoin will be equal to true, obviously. Once we send the this.autoJoin request, we go ahead and go to the frame that the user has selected (aka, what the gameType variable contains).

The hostBtn button actions should contain this:

on (release) {
 _global.gameType = "Host";
 _root.chosenMC._x = _root.hostBtn._x;
 _root.chosenMC._y = _root.hostBtn._y;
}

The joinBtn button actions should contain this:

on (release) {
 _global.gameType = "Join";
 _root.chosenMC._x = _root.joinBtn._x;
 _root.chosenMC._y = _root.joinBtn._y;
}

That coding should be self explanatory. :P

Another thing we have to code is the Continue/Login button, so let's do that now. Here is the coding I used in my example:

on (release) {
 if (_global.serverConnected) {
  _global.myName = _root.nick.text;
  _root.sfs.login("20CLICKS", _global.myName, null);
 }
}

Here is the button coding explanation:

• Line 1 - Sets up the coding to be called when the button is released.
• Line 2 - Basically saying "if the server is connected"...
• Line 3 - Sets myName variable to equal the username entered into the text box.
• Line 4 - Sends the SmartFoxServer login command so the user will login to the zone "20CLICKS", with the username entered into the text box, with no password.
• Line 4 - Closes the if statement.
• Line 5 - Closes the on (release) handler.

Now, go ahead and create another frame in our file. This frame will be used to create a game so that someone else can play it with you. In order to make this work correctly, you have to make a few new symbols and a text box on this frame. Here is a list of things you need to put on this frame:

• A start game button - Instance name: startGameBtn
• A "game name" input text box - Instance name: gamename
• Give this frame a name of "Host" without the quotations

Those are the only two symbols you will need in this frame. Here is a picture of what my second frame looks like:

So, now that the second frame is setup and both of the symbols have been added, it's time to start coding this part of the game. The first part we will code is the frame. Here is the coding you will need to put on the second frame:

import it.gotoandplay.smartfoxserver.*;

sfs.onRoomAdded = function(roomObj:Object) {
 if (roomObj.name == _root.gamename.text) {
  _root.sfs.joinRoom(roomObj.name);
  _root.gotoAndStop("GameV1");
 }
}

sfs.onJoinRoom = function(roomObj:Object) {
 var roomVars:Array = new Array();
 roomVars.push({name: "player1", val: _global.myName});
 roomVars.push({name: "player2", val: "..."});
 _root.sfs.setRoomVariables(roomVars);
 _root.sfs.sendPublicMessage("I have entered the room.");
}

Here is the coding explanation:
<CODING EXPLANATION>

Now we have to code the start game button. The start button will create a new room on the server so that when someone else wants to join your game, they will type your game name, and they will join into your game. So, here is the coding you will need to place on the start button:
<CODING>

And here is the coding explanation:
<CODING EXPLANATION>

After you put the coding above into your start game button, you are done coding the second frame and it is time to move onto the third frame! So, here are the new symbols you will need for this frame:

• A game name (to join) input text box - Instance name: gamename (just like the second frame)
• A join game/start game button - Instance name: startGameBtn (again, just like the second frame)
• Give this frame a name of "Join" without the quotations

Those are the only two symbols you need to put in the third frame for this game. Also, I am having you put the same symbols as the second frame onto the third frame because the coding is different but if you want, you can just copy and paste the second frame symbols onto the third frame and just change the coding. Here is what my third frame looks like:

So, with that being said, let's code the third frame:
<CODING>

And here is the coding explanation:
<CODING EXPLANATION>

Now you are ready for one of the easiest parts in this tutorial - creating the error messages. The first thing you will need to do is create another frame (this should be frame number four). The only special thing you will have to do to this frame is give it a name. Make this frame's name be "ConnectionFail" without the quotation marks, of course. Once you name the frame, all you have to do is use the text tool and create a static text box with an error message saying that the application could not connect to the server or the connection was lost. Here is what my error message said on this frame:

• Could not connect to the server, or the connection was lost!
• Give this frame a name of "ConnectionFail" without the quotations

Here is a picture of what my fourth frame looks like:

Now you are done with this frame. No coding is required is this frame. I bet you think the easy part is over now, right? Wrong. You now have to make another frame very similar to this, but with a different frame name and error message. So go ahead and create another frame (this should now be frame number 5) and give it a frame name of "LoginError" (and again, without the quotes). The only thing you should have to write in this frame (static text box using the text tool) is a simple login error message. I kept mine very simple with writing the following error message.

• Login error!
• Give this frame a name of "LoginFail" without the quotations

Here is a picture of my fifth frame:

Finally, now that we have most of the frames setup, it's time to create the actual frame that our users will be playing the game in. So, go ahead and make a new frame. This frame isn't required to have a name.
Okay, now that the frame has been made, let's go ahead and create the symbols. The symbols I used in my game are listed as follows:

• A dynamic text box that will be used to show how many times you have clicked the object. - Instance name: myScore (Somewhere around this box, you can put a static text box letting the user know this is their score.)
• A dynamic text box that will show how many times your opponent has clicked the object. - Instance name: theirScore
• A dynamic text box that will show your opponent's name. - Instance name: theirName (Put this somewhere around the theirScore dynamic text box so that you know who your opponent is.)
• A button, serving as the object being clicked to increase your score. - Instance name: clickBtn

Just a reminder: This is frame number six!

Here is what frame number six looks like on my game:

In the picture above, I started a game on 2 different clients, just to show how the system will work.

But, before the system works, we need to get to coding it! So, to code this part of the game, we first need to open up this frame's actions panel by going to Window -> Actions, or by simply pressing F9 on your keyboard.

Once the actions panel has been opened, enter in the following coding:

<CODING>

And, here is the coding explanation:

<CODING EXPLANATION>

• Make 2 more frames after all that. Give them the names of "winner" and "loser". In the frames, Put some text on them saying whether or not the user won the game.

Now that the coding has been posted and explained, we only have two things left to do before it's time to launch the game! Those two things are make two more frames. Once you make the two frames, name one of them "winner" and the other one "loser", both without the quotes. Once you do that, just put a little static text box on each one of them and fill them with some text saying "Winner!" or "Loser!" on them, and you're done...on the client side. The very last thing we have to do is add the zone into the config.xml file, which is located in the {SFS-Installation}/Server/ folder. Open the config file in any text editor (preferably Notepad++ or regular Notepad. I don't suggest using WordPad because it alters the encoding of the file sometimes.). Once the config file is opened up, add this coding somewhere in the <Zones> tag, but DON'T add it anywhere inside a <Zone> tag, as that means you are trying to add a zone inside another zone, which obviously will cause an error:

<CODING>

What that coding does is create a new zone, "20CLICKS", with a room named "Main", which is what room you automatically join when you press the continue button after you type a username on the first screen. That's all the coding does.

Finally, now that I'm done with this long tutorial, it's time for you all to test out the application in action! To test my game, <LINK HERE>.

Also, now this tutorial has been published, I can get to other specific user-requested tutorials. I have cleared all of the comments except for one. The one comment I have not cleared is about a string/raw protocol extension. Basically, just another simple extension example. I really want to do this tutorial next because I haven't done much in the past with string extensions, and this might be a little fun to write a tutorial on it. Plus, it's way faster than the regular XML protocol, and that's really useful if you plan on running a big game with many users online at the same time.

Source File: Download

Config File: Download

Updates

Well, as you can see, since I have started the new series of tutorials, I have not had much time to update them. When I started this series, I found out it actually took longer to make these tutorials, which makes the site way less productive than it was before.
Because of this, I'm going to stop the series of tutorials, and just continue with regular tutorials for now.
So, on that note, start commenting a few tutorial requests! :)

SmartFoxServer Tutorial: How to Make a Virtual World / MMO - Part 2 (1): Logging Into the Game From a Database

The SQL coding is in the video description on YouTube (as well as the source code), so in case you don't want to go to YouTube to get the SQL code, here it is:

CREATE TABLE MMOUSERS(ID INT AUTO_INCREMENT PRIMARY KEY, USERNAME VARCHAR(20) NOT NULL UNIQUE, PASSWORD VARCHAR(255) NOT NULL, EMAIL VARCHAR(60) NOT NULL DEFAULT '', COINS VARCHAR(9000) NOT NULL DEFAULT '5000', INVENTORYLIST VARCHAR(9000) NOT NULL DEFAULT '', SAVEDITEMS VARCHAR(9000) NOT NULL DEFAULT '', ITEMSON VARCHAR(9000) NOT NULL DEFAULT '', ISBANNED VARCHAR(3) NOT NULL DEFAULT 'No', WARNINGS VARCHAR(4) NOT NULL DEFAULT '0', ISMODERATOR VARCHAR(3) NOT NULL DEFAULT 'No');

Webkinz Introduction

Hey everyone!

I usually don't make any other posts than posts about SmartFoxServer, but I just wanted to tell you all about one amazingly well programmed virtual world for kids called Webkinz.

For all of those people who do not know what Webkinz is, it is a game where you buy a collectible stuffed animal in a store located all over the world and on the stuffed animal is a secret code, which allows you to virtually adopt your pet and unlock the world of Webkinz online. Once you have adopted your pet online, you are able to play multiplayer games with other online users, visit your friend's house, earn KinzCash, go gem mining, and much more. Another thing I would like to include about Webkinz is that I can tell that the creators of Webkinz planned out the game extremely well.

The reasons I think Webkinz is an amazing game is really because of all the features it has and because of how well programmed the game is. Webkinz has so many different things to do, such as multiplayer games, single player games, daily activities (such as gem mining and spinning the Wheel of Wow), decorate your house, and much more.

Now, one other thing I have to include about this game, is that it uses isometrics and pathfinding while inside a house in Webkinz. Isometrics is basically a 'tiled' way to design something. The best way to know when something contains isometrics is to look at the game's environment. In Webkinz, when I look at the ground while inside someones house, I can tell that the ground is divided into separate tiles because when I hover my mouse over a place, the tile that is selected highlights itself, as shown in the picture I found off of Google below.


Pathfinding is a way of moving an object when using an isometric environment. What pathfinding does is find a path to the specified tile which uses the least amount of tiles to get to a specific tile. An example a game with pathfinding would be Habbo Hotel.

Anyway, my point is Webkinz is a well programmed game that you should check out.

Also, be sure to check out the Webkinz Facebook page and 'like' it by clicking here!

Here are a few links about Webkinz that you should be sure to check out:

http://webkinz.com/
http://twitter.com/Webkinz
http://facebook.com/webkinz

SmartFoxServer Tutorial: How to Make a Virtual World / MMO - Part 1: Connecting to the Server

For part two, hopefully it will be a voice tutorial if I can get my microphone to work correctly. Anyway, enjoy this video!

Future Updates - Voting Now Closed!

Hey everyone,

Due to the fact that I haven't had enough time recently to work on new tutorials, I'm posting two polls below so you can request a series of tutorials, which will let me stay on one specific topic and create more tutorials in a faster time.







So, be sure to vote on the polls above and I'll check out the results soon and start working on the series of tutorials that the majority of the voters select.

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

SmartFoxServer Tutorial: "Mod Magic" Tutorial (Sending Objects)

Hello everyone!

I'm finally back to posting as you can see. I've been really busy with a game I'm working on and other things so I haven't had time to check the blog. Anyway, let's get started on the "Mod Magic" tutorial, or as I like to call "Mod Magic", SmartFoxServer objects.

This technique is very simple to learn, and I'm going to try to explain what each line does carefully enough so that a beginner can understand it, much like the SmartFoxserver Docs already does. Anyway, let's begin now.

First off, I'm using the provided SmartFoxServer avatarChat example file for this tutorial, just like all my other tutorials. So, open your Flash file up and go to the frame you want to add your Mod Magic and open the actions for that frame.

On the SmartFoxServer avatarChat file, I went to the chat frame and added this coding at the very bottom of all the other actions in the movie:

_root.showM1._visible = false;//Hides magic at start
function doMagic(magicName:String) {
var sfsObj = {}; //Makes new object
sfsObj.magicName = magicName;//Adds to object
_root.smartfox.sendObject(sfsObj);//Sends object
if (magicName == "magic1") {//Shows on sender's side
_root.showM1._visible = true;//Shows on sender's side
}//Shows on sender's side
}
smartfox.onObjectReceived = function(o:Object) {
if (o.magicName == "magic1") {//If magicName == magic1
_root.showM1._visible = true;//Show the mod magic to other people, not you
}
}

Now, the first line should tell you that we need to create a symbol in our Flash file. So, what I did was create a very simple rectangle shape and wrote some words on it and made it a movieclip by selecting it and converting it to a symbol by right clicking and choosing the "Convert to Symbol..." option. I gave it the instance name of "showM1", which, for me, stands for "showMagic1."


Now, the next thing to do is to create the doMagic() function, which basically perfoms the magic on the sender's side, then send the magic to all the other clients. So, now we need to create a button or movieclip to call the function. I chose a button. On the button I added this coding:

on (release) {
_root.doMagic("magic1"); //Calls function
}

The next and final thing to do is to setup the smartfox.onObjectReceived handler, which is in the coding above. So now you are able to test your movie. You should be able to see that when a user clicks the button, it shows your "Mod Magic."

NOTE: When the smartfox.sendObject() command is called, since your user is the sender of the object, the object will not be broadcasted to you, so you have to make a code so it shows the mod magic on the sender's side as well, which is exactly what we did.

If you have any questions or comments, please leave them on this post and I'll get back to you as soon as I can!

Source File: Download

SmartFoxServer Tutorial: Extensions Introduction

Hey everyone!

I first would like to say I'm sorry for not updating the site as much as I have been. I'm going to try to get back to updating it more often, now that I am introducing you to extensions.

Anyway, extensions are VERY useful in SmartFoxServer. They can be used for various things, such as a kick user extension and a ban user extension. Those are the two most common extensions I see asked for in the SmartFoxServer Forums, so eventually, I'll post tutorials on these two extension. But for now, I'm going to introduce you to extensions.

First of all, we are going to write a 'Hello world!' extension. The first step in doing this is to setup the extension's ActionScript file. So, open up Flash, and click the Create New -> ActionScript file option.


After the ActionScript file is opened, we have to create the SmartFoxServer extension layout, as I call it. SmartFoxServer ActionScript extensions always contain a minimum of four required functions, which are: init, destroy, handleRequest, and handleInternalEvent.

To setup these functions I am going to add this coding to my ActionScript file:

function init() {

}

function destroy() {

}

function handleRequest(cmd, params, user, fromRoom) {

}

function handleInternalEvent(e) {

}

Now that the default functions have been created, we can start writing our extension.

Since this is going to be a very simple 'Hello world!' extension, we aren't going to be writing much more coding than what has already been written above. So, here is what the rest of the extension will look like:

function init() {
//This is called when the extension loads (when the server first starts).
trace("Simple extension is starting.");
}

function destroy() {
//This is called when the extension is destroyed.
trace("Simple extension is ending.");
}

function handleRequest(cmd, params, user, fromRoom) {
if (params.simpleParam == "paramOne") { //If statement opener one.
if (cmd == "simpleCmd") { //If statement opener two.
trace("Hello world!"); //Traces 'Hello world!' on the server.
} //If statement two closer.
} //If statement one closer.
}

function handleInternalEvent(e) {
//This is called when any internal event is executed.
trace("Internal event: " + e.name + " was called."); //Traces the internal event that was executed.
}

As I said, not much more coding than what has already been written. Basically, it is just a couple of trace statements and two if() statements. The comments I added in the script can be taken out, but they are in there just so you know what each line of coding does.

Now all we need to do is save the file and add the extension in the config.xml file. So, save the file to the directory {sfs-installation}/Server/sfsExtensions. Make sure the file name is "simpleExtTut" and make sure the file type is a '.as' file type.

To add the extension into the config.xml file, first we need to open the config.xml file up. Open up your favorite text or XML editor (maybe Notepad or WordPad), and open your config file, which should be located in in the directory {sfs-installation}/Server/config.xml.

Now that your config file is opened up, since I'm using the avatarChat example file, the zone I need to add this extension to is the simpleChat zone. So, after I scroll down and find the simpleChat zone, I will come across the tags somewhere in the simpleChat zone. After I find that, I have to add this in between those tags:

Now save your config.xml file.

The next thing to do, is to work on the client side (the Flash file). In my Flash file, I'll be using the SmartFoxServer avatarChat example file, as usual. After you open your Flash file, create a button or a movieclip which will call the extension.


After the button or movieclip has been created, add this coding to it's actions:

on (release) {
var dataObj:Object = {};
dataObj.simpleParam = "paramOne";
_root.smartfox.sendXtMessage("simpleExtTut", "simpleCmd", dataObj);
}

All that coding does is tell Flash to send SmartFoxServer an extension request to the extension name "simpleExtTut" and make the command (cmd) equal "simpleCmd" and to send the data from the object dataObj along with the extension request.

Now you can test your movie. This is what your final product should look like:


Well, that's all for this tutorial.

If you have any questions are comments, feel free to leave them in a comment on this post and I'll reply to them as soon as I get a chance!

avatarChat.fla Source File: Download
simpleExtTut.as Source File: Download

SmartFoxServer Tutorial: Chat Log

Hello everyone!

It's been a while since I posted on this site. I'm sorry about that, I've just been a little busy on a new project I'm working on. Anyway, as you can tell from the post title, this tutorial is on how to create a chat log. The chat log we create in this tutorial will have an auto-scrolling feature. Anyway, let's get started!

First things first, I'm using an avatarChat example file from SmartFoxserver. So, let's go ahead and open that file up.

After the file is opened, go to the 'chat' frame and put a dynamic text box on the stage and give it an instance name of chatLog and make sure you tick the box shown below so that it has HTML abilities.

After you do that, you need to open up the 'chat' frame's coding. After the coding is up, scroll down until you find a SmartFoxServer handler called "smartfox.onPublicMessage." Add this coding inside that handler:

//New Chat Log Coding:

//--Basic Add Message Coding:

chatLog.htmlText += user.getName() + ": " + msg + newline; //Add text to textbox

//--Basic Auto-Scroll Coding:

var logVar = 1; //Creates a variable, you might want to increase this

chatLog.scroll = logVar; //Scrolls textbox to variable amount

logVar++; //Increases variable value

Pretty basic coding, as you can see. Here is an image of where I added that coding in my Flash file:

(Coding in the image isn't correct, use the coding as shown above!)

Well, after you do that, test the movie and it should be working fine.

If you encounter any problems with this be sure to leave a comment and I'll get back to you as soon as I can.

Source File: Download

SmartFoxServer Tutorial: Playercards

Hey everyone!

In today's tutorial, I'm going to show you how to make a playercard, which when an avatar is clicked, a playercard will appear and show the user's username. Anyway, let's get started, shall we?

To begin with, I'm going to let you know that I'm using the avatarChat example file for this tutorial. Anyway, the first thing your going to want to do is open up the actions panel for the chat frame and add this coding to it:

function showPlayerCard() {
loadMovieNum("playercardSWF.swf", 1);
}

Basically all that coding does is tell the Flash file to load an external file, which I'll be using to display the playercard.

The next thing you'll want to do is open up the avatar movieclip from the Flash library. In this movieclip, you will be able to clearly see all the instances in your avatar.


Anyway, on with the tutorial. Click on the disc movieclip (don't double click) and add this coding:

on (release) {
_global.lastP2 = _parent;
_global.lastP2Name = _parent.name.text;
_root.showPlayerCard();
}

That coding basically tells the Flash file what the username of the player is and to load the playercard.

The next, and last, thing to do is to make the playercard. I quickly made a playercard SWF file, saved it, and published it with the name playercardSWF. I also saved it in the same location as the avatarChat example file that I'm using for this tutorial.

Now, the architecture I used when making my playercard SWF file was making a text file to display the user's username and adding a background to it as well. I also added a few extra things to my file for interactivity, which aren't required.

Anyway, after adding a dynamic text field with an instance name of playerName, I put the background of the playercard and the dynamic text field both in a movieclip named thePlayerCard.

The last thing I did, was add some coding on the first, and only frame of the playercardSWF file. The coding I added to the playercardSWF file on the root frame was this:

function loadPlayer(mc, uname) {
thePlayerCard.playerName.text = uname;
}
loadPlayer(_global.lastP2,_global.lastP2Name);

After you do all the above, test your movie and you should clearly see that it works just fine.

If you have any questions, comments, or if you run into any errors when following this tutorial, be sure to leave a comment and I'll reply to it as soon as I can.

Download playercardsTut Source File: Download
Download playercardSWF Source File: Download

SmartFoxServer Tutorial: How to Add Rooms

Hello everyone.

In this tutorial, I'm going to show you how to add rooms into the SmartFoxServer config.xml file. This tutorial is in a video that I posted on YouTube. Here is the video:

If you have any questions or comments, feel free to leave them in a comment and I'll reply to them as soon as I get a chance.

SmartFoxServer Tutorial: Multi-Colored Chat Bubbles

Hello again everyone.

In this tutorial, I'm going to teach you how to make multi-colored chat bubbles. One example of what I mean by this is below.

Let's say the creator of a virtual world wants to be known in his virtual world for being the creator of the game. Everytime he says something publicly, we can indicate his chat bubble to be blue, instead of white, like the SmartFoxServer example file's default color.

So, with that being said, let's get started.

The first thing I'm going to do is open the Flash library and edit the avatar movieclip inside the _GUI and _Avatars folders. I'm now going to double click on the bubble movieclip to edit the avatar's chat bubble.

At this point, I'm going to add a new keyframe on each layer. In the new keyframe, I made the chat bubble blue and put some static text on top of the bubble which says "Creator."


I'm also going to name the one of the second frames "creator" as an easier way to go to that frame.

Now after that's done, it's time to code it into the avatarChat file. The coding for this will go inside the chat frame inside the onPublicMessage handler. This is what I added in my Flash file:

if (user.getName() == "nameHere") {
mc.bubble.gotoAndStop("creator");
}

Here is a picture of where I added the coding to in my file:


Also, you are going to have to edit the part of coding that says 'nameHere' to a username you want. After you do that, the user's chat bubble should be at the creator frame whenever the user says something publicly.

So, that's really all for this tutorial.

As usual, if you have any questions or comments, don't hesitate to make a comment on this post!

Source File: None

SmartFoxServer Tutorial: Arrow Key Rotation

Hello everyone.

In this tutorial, we are going to make a simple avatar rotation, as some would call it. This tutorial can be very easily compared to my first tutorial on this site, which was a setUserVariables tutorial. In this tutorial, we are going to learn how to change avatar directions by using the arrow keys. So, let's get started with this very simple tutorial.

Before i started typing up this post, I created an example file, which the download link can be found at the bottom of this post, and it is very easily done. So, the first thing you are going to want to do is open up your Flash library (Window -> Library or Ctrl+L).

After you open up the library, find the _GUI folder and open the folder to reveal the contents. Now open the _Avatars folder to reveal it's contents as well. Right click on the disc movieclip and press the Edit option.

Now that you are able to edit the movieclip, I added two more layers to my file. One named Labels and the other one named Arrows. I made each frame a blank keyframe by selecting the new frames and right clicking, then clicking "Convert to blank keyframes."

After you do that, you need to name four frames in that movieclip to four directions, which are left, up, right, and down. Do this by clicking on a frame and opening the Flash properties menu (Windows -> Properties or Ctrl+F3).


I then made directional arrows on the correct frame. Example: Left arrow on the "left" frame.

Now that the hardest part is done, it's time for the simplest part in this whole tutorial: the coding. All the coding in this tutorial goes on the chat frame of the avatarChat example file.

Here is the coding I used:

_root.onEnterFrame = function() {
if (Key.isDown(Key.LEFT)) {
_root.smartfox.setUserVariables({col:"left", init:true});
_root.myAvatar.disc.gotoAndStop("left");
}
if (Key.isDown(Key.UP)) {
_root.smartfox.setUserVariables({col:"up", init:true});
_root.myAvatar.disc.gotoAndStop("up");
}
if (Key.isDown(Key.RIGHT)) {
_root.smartfox.setUserVariables({col:"right", init:true});
_root.myAvatar.disc.gotoAndStop("right");
}
if (Key.isDown(Key.DOWN)) {
_root.smartfox.setUserVariables({col:"down", init:true});
_root.myAvatar.disc.gotoAndStop("down");
}
}

I put the coding at the very bottom of the chat frame. Well, basically all the coding does is constantly check to see if an arrow key is down or not. If an arrow key is down, it updates the user variables (which is handled by the event onUserVariablesUpdate) and then makes the action to the server, then the client as well.

Well, that's all for this tutorial!

If you have any questions or comments, feel free to ask by making a comment! :)

Source File: Download

SmartFoxServer Tutorial: Private Messaging

Hello again.

In this tutorial, as you can probably tell from the title of this post, is about private messaging. Anyway, let's get started with this tutorial. By the way, for this tutorial I'm using the SmartFoxServer avatarChat example file.

First of all, you have to make a button which will open the send message window.


Now, I just labeled mine with the text "Open." You can label yours with something else, such as send if you want. You can also give the button an instance name if you want. This isn't required, but I do that with all my symbols.

The next thing we will do, is make the private message window. In the window, this is where you will see the messages received and it will also be used to send messages. Here is the window I made:


I have multiple items in my private message window, so now I'm going to explain each one to you. Also, my window's instance name is pmWindow.

1 - Dynamic text box, which I gave an instance name of whoToSend.
2 - Input text box, which I gave an instance name of msgToSend.
3 - Button symbol, which will be used to send the private message to the desired user.
4 - Dynamic text box, which I gave an instance name of msgText.
5 - This is optional, but I made the top part of my window draggable.
6 - Button symbol, which will be used to close the window.

Now all that we need to do is code the updates to the avatarChat file. For the main coding, I'm going to just use functions for simplicity.

I'm just going to paste on the coding that I added to the chat frame of the Flash file at this point.

_root.pmWindow._visible = false;

function openPm() {
var uPm = _root.userList_lb.getSelectedItem().data;
var targetUser = _root.userList_lb.getSelectedItem().label;
if (uPm != _root.smartfox.myUserId()) {
_global.tUser = targetUser;
_global.uPm = uPm;
_root.pmWindow._visible = true;
_root.pmWindow.whoToSend.text = "Do you want to send a private message to " + _global.tUser + "?";
} else {
trace("You can't send a private message to yourself.");
}
}

function sendPm() {
var pMsg = _root.pmWindow.msgToSend.text;
if (pMsg != "") {
_root.smartfox.sendPrivateMessage(pMsg, _global.uPm);
_root.pmWindow.msgToSend.text = "";
}
}

function closePm() {
_root.pmWindow._visible = false;
}

smartfox.onPrivateMessage = function(msg:String, sender:User) {
_root.pmWindow._visible = true;
_root.pmWindow.msgText.text += newline + sender.getName() + ": " + msg;
trace(msg);
trace(user.getName());
}

I wrote that coding all that coding at the very end of the chat frame coding. That's all the frame coding, so we're almost done. All we have left to do is add the button coding. On the send private message button, add the following coding.

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

Now, on the close window button, add this coding:

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

Also, on the open window button, be sure to add this coding:

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

Now, to use the private message feature, you have to click a username on the userlist and click the open button. You can't click on yourself because this was just a quick little tutorial I rushed through.

Anyway, that's all for this tutorial.

If you have any questions or comments, then be sure to comment on this post and I'll reply as soon as I get a chance!

Source File: Download