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