Flash MX Register or Login - Complete Tutorial

[parker]

Ok, as promised I am finishing the complete NEWBIE tutorial..  sorry for the delay.

Part 1 - Using PHP, MySQL and FLASH to allow a user to login....

Creating the MySQL  Database:

First, What you need to do is create a database in MySQL to store all the usernames and passwords that we will check later using the flash login page and php...

Assuming that you installed MySQL properly and have the console up and running, type the following commands to begin the creation of the authentication database..

mysql> create database authentication; <enter>

you should see something like the following response:
Query OK, One Row Affected < 0.00 sec>

Now that the database has been created we must create a table to store the usernames and passwords.

ONWARD!!!

First we have to be sure that we are going to create this table in our newly created database called "authentication" so we type the following command;

mysql> use authentication; <enter>

you should see the following response:
database changed

Ok, now that we are sure we are going to be putting this table in the correct database, lets do it!!

mysql> create table userLogin <enter>
(  <enter>
id int not null auto_increment, <enter>
username varchar(25) not null unique, <enter>
password varchar(75), <enter>
primary key (id) <enter>
); <enter>

you should see something like the following response:
Query OK, 0 Rows Affected < 0.05 sec>

Now we are ready to start adding usernames and passwords into our userLogin table!

For now, lets just add one username and password for testing purposes...

So at the MySQL command console we type the following:

mysql>insert into userLogin <enter>
(username, password) <enter>
values ( <enter>
"joeschmoe", <enter>
"whatever" <enter>
); <enter>

you should see something like the following response:
Query OK, 1 Row Affected < 0.03 sec>

Now we have everything we need to test the login page we are going to create.  Come back tomorrow for more!



PART 2 - The Flash Login Movie:

Creating the Flash Login Movie!!!

Open Macromedia Flash MX and create a new Movie...

First Lets save this movie to the directory of your choice with the name "userLogin".


Now lets just create a simple form with two input text fields.


One for the user to type in his/her username and One for the user to type in his/her password..

Ok lets do it!!

This is an example:


Go to Layer one and rename it to "Username"

Select the text tool from our toolbox and then navigate down to the properties panel and select "input text".

Create a new text field on the stage and in the properties panel give it the variable name of "username".

It is a good habit to separate the objects in your movie. If you don't, editing later could drive you insane!

This is an example:



So, Create a new Layer and call it "Password"

Create another text field on the password layer and in the properties panel give it the variable name of "pword".

That's it for creating the input fields, now just add labels to each of the input fields using static text fields, so the user knows where and what to type!

ok, we have created our input text fields and labels.  What else would we need to finish the form?

...... think......

...... think......

Yes - A submit button!!  

Ok so assuming you know how to create a button in flash, create a new layer and call it "submit".

Create the button and place it on the newly created "submit" layer.


Now all we have to do is add some logic to this....

This is an example, try to set the layers and frames up as you see them here:



First what we need to do is create a Function that will be called when the user hits the submit button.  

So create a new Layer and call it "Functions"

So here is what we type in the actions panel while the first frame is selected on the Functions layer. I know some of this below might not make sense at the moment, but it will when we create the php form

function goLogin() {
 chklogin = "";
 status = "Processing ...";
 loadVariablesNum("login.php", 0, "POST");
 gotoAndPlay(2);
}

// We also create a function to reset the form if the authentication fails //

 function clrForm() {
 this.pword = "";
 this.username = "";
 status = "";
}



So now we must create a new layer to hold the variables and basic actions


Create a new layer and rename it to "actions/vars"
Select the first frame and type the following in the actions panel:

// Add a stop action to keep the movie from playing further //
stop();

Now Insert a blank Keyframe on frame (4) and add the following actions:


// Create a loop to keep checking the value of the variable chkLogin //
// Basically, if chklogin is still empty keep checking, if not then go to frame (5) //
if (chklogin != "") {
 gotoAndPlay(5);
}
else {
 gotoAndPlay(2);
}
 

Now insert a Blank Keyframe on frame (5) of the actions/vars layer and type the following in the actions panel:

What this is going to do is double check to make sure that chkLogin is not empty and then check the value of the variable "status".

if (chklogin != "") {
 if (status=="Authentication Accepted") {
  stop();
  // Do whatever //
}
 else if (status=="Authentication Failed") {
  gotoAndStop(6);
 }
}


Now insert a Blank Keyframe on frame (6) of the actions/vars layer and type the following in the actions panel:

// Add a stop action to keep the movie from playing further //
stop();

Ok now we are finally done with that layer!  wheew....

Remember how we have been checking the variables "chkLogin" and "status"?  Well some of you might of said..  where the hell are these variable that we are checking!
Well that is what we are going to do now!

There are many different ways this can be done.  Since this is a "Newbie" tutorial I am going to do what I think is the best way for a newbie to grasp it...

Create a new layer and call it "chkLogin" and insert a keyframe on frame (2)

While on frame (2) of this layer all we have to do is place a blank dynamic text field somewhere out of the way...

Select the text tool from our toolbox and then navigate down to the properties panel and select "dynamic".

Now just create the text field anywhere on the stage, but make it so the text will appear the same color as the background of the movie..  This way no one will ever even know it is there!

Give this new dynamic text field the variable name "chkLogin"  <-- there it is!!!!



Now create a new layer and name it "Status"

While on frame one of the layer Status...
Select the text tool from our toolbox and then navigate down to the properties panel and select "dynamic".

Now just create another text field in the center of the stage, this one you want to see so just set the font / color how you wish.

Give this dynamic text field the variable name "status" <-- theres the other one!!


Again, try to set the layers and frames up as you see them here:



You see above how the dynamic text field "status" is missing on frame (2)?  This will give you a sexy blinking effect while the loop is going.


NOW add one more layer and call this "Failed"... and then insert a keyframe on frame (6).

Create a button here that will allow a user to go back and try again if the authentication failed.  Something like "click here to try again"

once you place this button on the stage on frame (6) Select it and add the following code:

on (press) {
//  we are calling the Clear Form function we created earlier //
 ClrForm()
 gotoAndPlay(1);
}


ok now there is only one this left to do here!  

Select the submit button on the stage and add the following code to it in the actions panel:

on (release, keyPress "<Enter>") {
// we are calling the login function we created earlier //
 goLogin()
}

THATS IT!!!  


PART 3 - The PHP Server Side Script:

Those of you that are not familiar with php, I suggest picking up a book.  There are many of them out there, but I recommend for the newbies "PHP, fast&easy web development" by Julie C. Meloni.  

Now ONWARD!!!!!

Save this script as "login.php".

The Script:

<?

//Database Connectivity Variables//

$DBhost = "Insert Your Host";
$DBuser = "Insert Your Username";
$DBpass = "Insert Your Password";

$db_name = "authentication";
$login_table = "userLogin";


//Create a connection to the MySQL Database//

$connection = @mysql_connect($DBhost,$DBuser,$DBpass) or die("Couldn't Connect.");
$db = @mysql_select_db($db_name, $connection) or die("Sorry, I could not select the requested Database ");

//SQL Querys
$sql = "SELECT * FROM $login_table WHERE username = \"$username\" and password = \"$pword\"
";

$result = @mysql_query($sql, $connection) or die("Couldn't execute query.");



/*Now checking for the results of the query. if the results are not equal to zero then everything ok, anything else then the authentication failed*/

$num = mysql_num_rows($result);

if ($num != 0) {
 
   
// Send Results Back To Flash //  

echo "&status=Authentication Accepted";
echo "&chklogin=good";
exit;  
}
else {
// Send Errors Back To Flash //
 echo "chklogin=bad";
 echo "&status=Athentication Failed";  
}

?>


Ok people, I hope this little tutorial can help some of you better yourselves and will inspire you to keep learning.  Remember, knowledge is something that no one can ever take from you...



Parker

www.aniglyphics.com

[mmubashar]

cant see the images

[John Bailey]

What might have I done wrong if when i click submit it keeps flashing "processing..."

I double-checked everything

[parker]

Hey All,

I am aware that the images that I use as reference in this tutorial cannot be seen, but it has been a long time since I had originally posted this tutorial, almost 4 years to be exact, and they were unintentionally removed from the webserver.  I will attempt to locate the images that I had created for this and get them back online for you.


In response to John's inquiry regarding "What might have I done wrong if when i click submit it keeps flashing "processing..." 
There are several reasons why this may be occurring, but the best advice I can give you is to ensure that all of your dynamic text fields are named properly (case included), as well as their references in the PHP script. Also, the loop in the flash movie will continue to play which flashes the "processing" message on and off until either 1 of the 2 responses are received exactly how they are being checked, "Authentication Failed" or "Authentication Accepted". These are literal and you have to make sure that you are sending the response back to flash exactly how the loop is checking either of the two values, "Authentication Failed" or "Authentication Accepted".

If you have triple checked all of the above and you are still having the same result, you may have an error in your SQL syntax and the PHP script never sends a response back to flash.  The easiest way to debug this is to create a standard HTML form with the same information that is on the Flash Login page and have it post to the same login script.  If you see one of the two defined responses echo to the screen than your PHP script is functioning properly.


I hope that has helped...

[Jorge Solis]

Hi parker:

If you locate the images, I can upload to Flash-db server, so they will be not lost.

Thanks
Jorge