Monday 3 January 2011

SFS1X: Simple Login

Hello readers! In this tutorial I'll explain how to make a simple Flash application that connects and then logs in the server. I'll explain how to make a Database Login in the next tutorial.


You can download the source code of this tutorial here.


So, let's begin!


First open your Flash and create a new Input TextField (using the Text Tool, shortcut key: T) and give it the Instance Name "userName" without the quotes and set its Behavior property to Single line (Like the following image).




You can also select the Show border around text button () in the TextField. This way it will show a black border around it.


Then you need to create a button. For that you first draw your button, then you convert it to a Button Symbol (Right-click in the button, select "Convert to Symbol...") and give it the Instance Name "login_btn" without the quotes (Like the following image).







If you want, you can add the status Dynamic TextField to show the connection status.
Finally add a new KeyFrame and give it the label "lobby" and add give to the first frame the label "login", so it looks like this:




In the Lobby I only put a Dynamic TextField with the Instance Name "display" without the quotes.
After this, you only need to add this code in the first frame:

import it.gotoandplay.smartfoxserver.*
stop();

var ip:String = "127.0.0.1";
var port:Number = 9339;
var zone:String = "simpleChat";

status.text = "Connecting..."

userName._visible = false;
login_btn._visible = false;

var smartfox:SmartFoxClient = new SmartFoxClient()
smartfox.debug = true
smartfox.connect(ip, port)

smartfox.onConnection = function (success)
{
 if (success)
 {
  status.text = "Successfully connected!"
  userName._visible = true;
  login_btn._visible = true;
  login_btn.onRelease = sendLogin;
  Selection.setFocus(userName);
 }
 else
 {
  status.text = "Can't connect!"
 }
}

smartfox.onLogin = function(resObj:Object)
{
 if (resObj.success)
 {
  gotoAndStop("lobby");
  display.text = "Logged in as "+resObj.name;
 }
 else
 {
  status.text = "Error";
  trace("Error Message: "+resObj.error);
 }
}

function sendLogin(){
 if(userName.text != ""){
  status.text = "Logging in..."
  smartfox.login(zone, userName.text)
 }
}

As part of the code is from the Simple Connect Tutorial, I'll only explain the new code.
So here's the explanation:

userName._visible = false;
login_btn._visible = false;

This simple lines of code just hide the userName TextField and the login button to prevent the user from trying to login before being connected. That's why you find this code:

userName._visible = true;
login_btn._visible = true;

When it successfully connects, to show the userName TextField and the login button again to let the user login.

login_btn.onRelease = sendLogin;

This line of code is the same as putting this code in the button:

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

It calls/executes the function when the login button is clicked.

Selection.setFocus(userName);

What this line of code does is selecting the userName TextField, to facilitate the login to the user. This way the user only needs to write his/her username. For unknown reasons this code only works if you open the swf file or if you open it on the browser.

function sendLogin(){
 if(userName.text != ""){
  status.text = "Logging in..."
  smartfox.login(zone, userName.text)
 }
}

This function first verifies if the userName TextField is empty, and if it isn't, it sends the login request to the server. For further details about the login you can check the docs (http://www.smartfoxserver.com/docs/docPages/tutorials_basic/02_simpleChat_p1/index.htm) and the AS2.0 API (http://www.smartfoxserver.com/docs/docPages/as2/html/it_gotoandplay_smartfoxserver_SmartFoxClient.html#login).

smartfox.onLogin = function(resObj:Object)
{
 if (resObj.success)
 {
  gotoAndStop("lobby");
  display.text = "Logged in as "+resObj.name;
 }
 else
 {
  status.text = "Error";
  trace("Error Message: "+resObj.error);
 }
}

This function handles the onLogin event, that is fired when the login successes or fails. The resObj is an object that returns when that function is called. 
This object has the following variables/properties:
- success Boolean that returns true when the login successes and returns false when the login fails.
- name String that is the public name that everyone sees.
- error String that returns an error message if the login failed.


For more information about the resObj and the login process you can check the AS2.0 API docs (http://www.smartfoxserver.com/docs/docPages/as2/html/it_gotoandplay_smartfoxserver_SmartFoxClient.html#onLogin)


Tip: Don't forget to set the Local playback security to Access network only. For more information about this, you can check this tip.



You can download the source code of this tutorial here.

And that's all. I hope you enjoyed this tutorial. If you have any questions, fell free to ask me (by commenting or by dropping me a pm in the sfs forums).

Stay tuned for the next tutorial (Database Login) ;-)

3 comments:

  1. When I test it, it flashes back and forth bewtween the two frames...help?

    ReplyDelete
  2. hi. Are you sure it doesn.t give any error in the output? And did you try downloading the source?

    ReplyDelete
  3. check this link (http://paidcritique.blogspot.com/2011/08/log-in-basic.html) for some basic login form. i think this is much better than that one.

    it says that it came from some seller of black scrubs, brown scrubs and gray scrubs from PulseUniform.

    ReplyDelete