This tutorial will demonstrate how to create simple but professional Flash login system using three different programming languages; AS3, PHP and MYSQL. Advanced sections like application logic, PHP and MYSQL integration with Flash will be our main talking points. Let's get stuck in!
Final Result Preview
Let's take a look at the final result, simply click the demo button at the top of this tutorial.
Try logging in with the username admin and password password, or username test1 and password password1. You'll see a simple piece of text corresponding to that user.
In this Part we'll get the actual login working, then in Part 2 we'll let users register through a SWF.
Step 1: Get MAMP or Another Local Server
If you do not have web server that supports mysql databases and php, then download MAMP (for Mac), WAMP (for Windows), or another local server.
MAMP is an open source local server that allows you to run php and create and store data in mysql databases from your local hard drive. MAMP automatically creates a server when you download it therefore I recommend using it over other local servers.
You can alternatively use your web server if it supports mysql and php.
Install phpMyAdmin on the server, we will use it later.
Step 2: Imports
Here are the things you will need in order to create the end product.
- A text or html editor (for example notepad or Dreamweaver).
- Flash CS3+
Now we have everything we need it is time to set up our document class.
Step 3: AS3 Document Class Setup
Create a brand spanking new .as file and an AS3 .fla file. Save the .as file as main.as in a new folder called actions.
Save the fla file in the root folder of our application. Now in our .fla file enter the main class name (and classpath) in the properties panel, as stated below:
Step 4: Creating the Base Class Code
Open your main.as file and add the following code:
1 |
|
2 |
package actions { |
3 |
|
4 |
/*
|
5 |
always extend a class using movieclip instead of sprite when using flash.
|
6 |
*/
|
7 |
|
8 |
import flash.display.MovieClip; |
9 |
|
10 |
/*
|
11 |
create our class
|
12 |
*/
|
13 |
|
14 |
public class main extends MovieClip { |
15 |
|
16 |
public function main ():void { |
17 |
|
18 |
trace("success"); |
19 |
|
20 |
}
|
21 |
|
22 |
}
|
23 |
|
24 |
}
|
This will be your document class. Press ctrl+enter to run the SWF.
If you get a message in the output you have successfully connected both documents and can move on.
Step 5: Creating our Database Connection - Part 1
To create a connection to our database we need to use php. First you need to create a database on your server. Call it admin. You can create a database using phpMyAdmin on your server. The image below is first page you see when opening phpMyAdmin. This is the only time we will be using phpMyAdmin; we will be creating the table using php.
Step 6: Creating our Database Connection - Part 2
We need one file that will connect to our database. Create a new folder called php. Create a new document with the php extension and call it connect.php
Follow the code comments to see what's going on.
1 |
|
2 |
|
3 |
/* |
4 |
All code inside these tags will be recognized as php code. |
5 |
*/ |
6 |
|
7 |
<?php
|
8 |
|
9 |
/*
|
10 |
Database vars that we use to connect to our mysql database. Change the values to your database settings.
|
11 |
*/
|
12 |
|
13 |
$db_name = "admin"; |
14 |
|
15 |
$db_username = "root"; |
16 |
|
17 |
$db_password = "root"; |
18 |
|
19 |
$db_host = "localhost"; |
20 |
|
21 |
/*
|
22 |
mysql_connect is a built in function that allows us to make an easy connection.
|
23 |
*/
|
24 |
|
25 |
mysql_connect($db_host, $db_username, $db_password, $db_name); |
26 |
|
27 |
/*
|
28 |
mysql_select_db is a built in function that allows us to select the database. This is an essential function.
|
29 |
|
30 |
We use the 'die' function to check for errors.
|
31 |
|
32 |
*/
|
33 |
|
34 |
mysql_select_db($db_name) or die (mysql_error()); |
35 |
|
36 |
echo 'success'; |
37 |
|
38 |
?>
|
Then you need to upload your files to the testing server. If you are using MAMP copy your folder to the htdocs folder in the mamp application folder.
If there is a successful connection there will be a success message as below and you'll have connected to your database.
Note: It is important to delete echo 'success'; from your PHP afterwards.
Note: The directory will not be the same as in the image. Ignore the "source" path. For example http://localhost:8888/loginsystem/php/connect.php
Step 7: Creating the Interface in Flash
First Create Two Text Boxes - Input Text - to allow the user to enter their name and password.
Then position them vertically. Give the top textbox the instance name of "username" and the bottom one "password". Label the two any way you want.
Then draw a square and insert another text box writing in it "submit". Convert these to a movie clip with an instance name of "submit_button".
Distribute all different objects to layers (Modify > Timeline > Distribute to Layers).
Your interface should look something like this:
Step 8: Button Submission
Next we will create our submit button event handler, checkLogin(), to be run when the user clicks "submit".
First we need to import flash.events.*; in our code. This way we can use Flash events. Follow the code comments.
1 |
|
2 |
|
3 |
package actions { |
4 |
|
5 |
/*
|
6 |
always extend a class using movieclip instead of sprite when using flash.
|
7 |
*/
|
8 |
|
9 |
import flash.display.MovieClip; |
10 |
import flash.events.*; |
11 |
|
12 |
/*
|
13 |
create our class
|
14 |
*/
|
15 |
|
16 |
public class main extends MovieClip { |
17 |
|
18 |
public function main ():void { |
19 |
|
20 |
/*
|
21 |
buttonMode gives the submit button a rollover
|
22 |
*/
|
23 |
|
24 |
|
25 |
submit_button.buttonMode = true; |
26 |
|
27 |
/*
|
28 |
what this says is that when our button is pressed, the checkLogin function will run
|
29 |
*/
|
30 |
|
31 |
submit_button.addEventListener(MouseEvent.MOUSE_DOWN, checkLogin); |
32 |
|
33 |
/*
|
34 |
set the initial textfield values
|
35 |
*/
|
36 |
|
37 |
username.text = ""; |
38 |
password.text = ""; |
39 |
|
40 |
}
|
41 |
|
42 |
/*
|
43 |
the function to checkLogin
|
44 |
*/
|
45 |
|
46 |
public function checkLogin (e:MouseEvent):void { |
47 |
|
48 |
trace("submission success"); |
49 |
|
50 |
}
|
51 |
|
52 |
}
|
53 |
|
54 |
}
|
If the output displays "submission success" when you click the button, our button event has been created successfully.
Step 9: Field Validation
Now we are going to check whether our fields have data. Replace the current checkLogin function with the code below. It's thoroghly commented for your convenience.
1 |
|
2 |
|
3 |
/*
|
4 |
the function to check login
|
5 |
*/
|
6 |
|
7 |
public function checkLogin (e:MouseEvent):void { |
8 |
|
9 |
/*
|
10 |
check fields before sending request to php
|
11 |
*/
|
12 |
|
13 |
if (username.text == "" || password.text == "") { |
14 |
|
15 |
/*
|
16 |
if username or password fields are empty set error messages
|
17 |
*/
|
18 |
|
19 |
if (username.text == "") { |
20 |
|
21 |
username.text = "Enter your username"; |
22 |
|
23 |
}
|
24 |
|
25 |
if (password.text == "") { |
26 |
|
27 |
password.text = "Enter your password"; |
28 |
|
29 |
}
|
30 |
|
31 |
} else { |
32 |
|
33 |
/*
|
34 |
init function to process login
|
35 |
*/
|
36 |
|
37 |
processLogin(); |
38 |
|
39 |
}
|
40 |
|
41 |
}
|
Step 10: Creating the Database Table
Data is stored in tables in databases. Therefore we will need to create a table and we'll use php to do so. Create a new php document in the php folder and call it whatever you want (it won't matter, this is just temporary to create the table, we won't need to keep running it). Then fill it with the code below.
1 |
|
2 |
|
3 |
<?php
|
4 |
|
5 |
/*
|
6 |
connect to our database
|
7 |
*/
|
8 |
|
9 |
require_once "connect.php"; |
10 |
|
11 |
/*
|
12 |
create the mysql query
|
13 |
*/
|
14 |
|
15 |
$sql = "CREATE TABLE users ( |
16 |
|
17 |
id int(11) NOT NULL auto_increment,
|
18 |
username varchar(255) NOT NULL,
|
19 |
password varchar(255) NOT NULL,
|
20 |
user_bio longtext NOT NULL,
|
21 |
PRIMARY KEY (id)
|
22 |
|
23 |
)"; |
24 |
|
25 |
$query = mysql_query($sql); |
26 |
|
27 |
if ($query === TRUE) { |
28 |
|
29 |
echo 'You have successfully created your table'; |
30 |
|
31 |
}
|
32 |
|
33 |
mysql_close(); |
34 |
|
35 |
?>
|
After this, upload all your files to your server. Then enter the file path into the browser, if the table was created it will display a success message. If not, then please check your configuration. Note: Make sure you delete this file from the server after the success message is displayed.
Then go to phpMyAdmin or an alternative to check whether your table has been added. If it has been added this is what you will see below...
Step 11: Adding the First User
Now we have our table created let's go ahead and add a user.
Create a new php document and call it whatever you like, then place it in the php folder.
1 |
|
2 |
|
3 |
<?php
|
4 |
|
5 |
/*
|
6 |
connect to the database
|
7 |
*/
|
8 |
|
9 |
require_once "connect.php"; |
10 |
|
11 |
/*
|
12 |
create the mysql query
|
13 |
|
14 |
What this query means is php calls mysql to insert values into the table users. It then asks for the fields you want to add data too then the values for that certain field in ascending order.
|
15 |
|
16 |
*/
|
17 |
|
18 |
$sql = "INSERT INTO users (username, password, user_bio) VALUES ('admin', 'password', 'This is the user bio')"; |
19 |
|
20 |
$query = mysql_query($sql); |
21 |
|
22 |
mysql_close(); |
23 |
|
24 |
?>
|
We have now added a user so therefore our table will look like this:
We should be all set to start creating our application logic, which will power the backend of our SWF.
Step 12: Sending a Request to PHP
There a few variables we need to process in order to get our database data.
Here is the completed processLogin() function, to go in our main.as file (it will be called when the user clicks the button). We need to import Flash's net classes here. So, add this at the top: import flash.net.*;
1 |
|
2 |
|
3 |
/*
|
4 |
function to process our login
|
5 |
*/
|
6 |
|
7 |
public function processLogin ():void { |
8 |
|
9 |
/*
|
10 |
variables that we send to the php file
|
11 |
*/
|
12 |
|
13 |
var phpVars:URLVariables = new URLVariables(); |
14 |
|
15 |
/*
|
16 |
we create a URLRequest variable. This gets the php file path.
|
17 |
*/
|
18 |
|
19 |
var phpFileRequest:URLRequest = new URLRequest("php/controlpanel.php"); |
20 |
|
21 |
/*
|
22 |
this allows us to use the post function in php
|
23 |
*/
|
24 |
|
25 |
phpFileRequest.method = URLRequestMethod.POST; |
26 |
|
27 |
/*
|
28 |
attach the php variables to the URLRequest
|
29 |
*/
|
30 |
|
31 |
phpFileRequest.data = phpVars; |
32 |
|
33 |
/*
|
34 |
create a new loader to load and send our urlrequest
|
35 |
*/
|
36 |
|
37 |
var phpLoader:URLLoader = new URLLoader(); |
38 |
phpLoader.dataFormat = URLLoaderDataFormat.VARIABLES; |
39 |
phpLoader.addEventListener(Event.COMPLETE, showResult); |
40 |
|
41 |
/*
|
42 |
now lets create the variables to send to the php file
|
43 |
*/
|
44 |
|
45 |
phpVars.systemCall = "checkLogin"; |
46 |
phpVars.username = username.text; |
47 |
phpVars.password = password.text; |
48 |
|
49 |
/*
|
50 |
this will start the communication between flash and php
|
51 |
*/
|
52 |
|
53 |
phpLoader.load(phpFileRequest); |
54 |
|
55 |
}
|
Step 13: PHP Vars Explained
The first line:
1 |
|
2 |
|
3 |
phpVars.systemCall = "checkLogin"; |
will be explained later when we create the main php control file.
The next two lines:
1 |
|
2 |
|
3 |
phpVars.username = username.text; |
4 |
phpVars.password = password.text; |
retrieve what the user inputted into the two text fields and convert them into php variables.
Step 14: Result Textfield
Create a dynamic text box and give it an instance name of "result_text".
Place it under the login form and submit button. This will display information retrieved from the server.
Step 15: Main PHP Control File
This is the file that will communicate with php and return a value to flash. Create a new php file called "controlpanel.php" and place it in the \php\ folder.
1 |
|
2 |
|
3 |
<?php
|
4 |
|
5 |
/*
|
6 |
connect to our database
|
7 |
*/
|
8 |
|
9 |
include_once "connect.php"; |
10 |
|
11 |
/*
|
12 |
we post the variables we recieve from flash
|
13 |
*/
|
14 |
|
15 |
$username = $_POST['username']; |
16 |
$password = $_POST['password']; |
17 |
|
18 |
/*
|
19 |
if flash called the login system the code below runs
|
20 |
*/
|
21 |
|
22 |
if ($_POST['systemCall'] == "checkLogin") { |
23 |
|
24 |
/*
|
25 |
The * means the query initally selects all the records in the database.
|
26 |
Then the query filters out any records that are not the same as what the user entered.
|
27 |
*/
|
28 |
|
29 |
|
30 |
$sql = "SELECT * FROM users WHERE username='$username' AND password='$password'"; |
31 |
|
32 |
$query = mysql_query($sql); |
33 |
|
34 |
/*
|
35 |
This counts how many records match our query
|
36 |
*/
|
37 |
|
38 |
$login_counter = mysql_num_rows($query); |
39 |
|
40 |
/*
|
41 |
if $login_counter is greater we send a message back to flash and get the data from the database
|
42 |
*/
|
43 |
|
44 |
if ($login_counter > 0) { |
45 |
|
46 |
/*
|
47 |
we use a while loop to get the user's bio. mysql_fetch_array gets all the field's data for the particular record.
|
48 |
*/
|
49 |
|
50 |
while ($data = mysql_fetch_array($query)) { |
51 |
|
52 |
/*
|
53 |
gets the user_bio value from the selected record
|
54 |
*/
|
55 |
|
56 |
$userbio = $data["user_bio"]; |
57 |
|
58 |
/*
|
59 |
use the print function to send values back to flash
|
60 |
*/
|
61 |
|
62 |
print "systemResult=$userbio"; |
63 |
|
64 |
}
|
65 |
|
66 |
} else { |
67 |
|
68 |
print "systemResult=The login details dont match our records."; |
69 |
|
70 |
}
|
71 |
|
72 |
}
|
73 |
|
74 |
?>
|
Step 16: Show The Result - Part 1
Let's go back to our process login function and add this:
1 |
|
2 |
|
3 |
phpLoader.addEventListener(Event.COMPLETE, showResult); |
When the form has finished this listener calls the showResult() function. We will look at that now.
Step 17: Show The Result - Part 2
Here is the function. It displays the value we printed in the "controlpanel.php" file.
1 |
|
2 |
|
3 |
/*
|
4 |
function to show the result of the login
|
5 |
*/
|
6 |
|
7 |
public function showResult (event:Event):void { |
8 |
|
9 |
/*
|
10 |
|
11 |
this autosizes the text field
|
12 |
|
13 |
***** You will need to import flash's text classes. You can do this by adding:
|
14 |
|
15 |
import flash.text.*;
|
16 |
|
17 |
...to your list of import statements
|
18 |
|
19 |
*/
|
20 |
|
21 |
result_text.autoSize = TextFieldAutoSize.LEFT; |
22 |
|
23 |
/*
|
24 |
this gets the output and displays it in the result text field
|
25 |
*/
|
26 |
|
27 |
result_text.text = "" + event.target.data.systemResult; |
28 |
|
29 |
}
|
The SWF is getting the text that we print in the php and displaying it in the result_text textfield.
Step 18: A Successful Login Example
If you have created a successful login, this is what you will see:
Now we are going to add an additional user to test whether our system works for multiple users.
Step 19: Adding our Additional User
Open the "adduser.php" file in our php folder that we created earlier.
Simply change the VALUES in the mysql query.
$sql = "INSERT INTO users (username, password, user_bio) VALUES ('test1', 'password1', 'This is the additional users bio')";
Then run the script on the server by simply entering the file path in a web browser.
Step 20: Test Our Additional User
Success! We have a successful flash login system that supports multiple users. Here is the result when we login the additional user.
Step 21: The Whole ActionScript Code with Comments
1 |
|
2 |
|
3 |
package actions { |
4 |
|
5 |
/*
|
6 |
always extend a class using movieclip instead of sprite when using flash.
|
7 |
*/
|
8 |
|
9 |
import flash.display.MovieClip; |
10 |
import flash.events.*; |
11 |
import flash.net.*; |
12 |
import flash.text.*; |
13 |
|
14 |
/*
|
15 |
create our class
|
16 |
*/
|
17 |
|
18 |
public class main extends MovieClip { |
19 |
|
20 |
public function main ():void { |
21 |
|
22 |
/*
|
23 |
buttonMode gives the submit button a rollover
|
24 |
*/
|
25 |
|
26 |
submit_button.buttonMode = true; |
27 |
|
28 |
/*
|
29 |
what this says is that when our button is pressed, the checkLogin function will run
|
30 |
*/
|
31 |
|
32 |
submit_button.addEventListener(MouseEvent.MOUSE_DOWN, checkLogin); |
33 |
|
34 |
/*
|
35 |
set the initial textfield values
|
36 |
*/
|
37 |
|
38 |
username.text = ""; |
39 |
password.text = ""; |
40 |
|
41 |
}
|
42 |
|
43 |
/*
|
44 |
the function to check login
|
45 |
*/
|
46 |
|
47 |
public function checkLogin (e:MouseEvent):void { |
48 |
|
49 |
/*
|
50 |
check fields before sending request to php
|
51 |
*/
|
52 |
|
53 |
if (username.text == "" || password.text == "") { |
54 |
|
55 |
/*
|
56 |
if username or password fields are empty set error messages
|
57 |
*/
|
58 |
|
59 |
if (username.text == "") { |
60 |
|
61 |
username.text = "Enter your username"; |
62 |
|
63 |
}
|
64 |
|
65 |
if (password.text == "") { |
66 |
|
67 |
password.text = "Enter your password"; |
68 |
|
69 |
}
|
70 |
|
71 |
} else { |
72 |
|
73 |
/*
|
74 |
init function to process login
|
75 |
*/
|
76 |
|
77 |
processLogin(); |
78 |
|
79 |
}
|
80 |
|
81 |
}
|
82 |
|
83 |
/*
|
84 |
function to process our login
|
85 |
*/
|
86 |
|
87 |
public function processLogin ():void { |
88 |
|
89 |
/*
|
90 |
variables that we send to the php file
|
91 |
*/
|
92 |
|
93 |
var phpVars:URLVariables = new URLVariables(); |
94 |
|
95 |
/*
|
96 |
we create a URLRequest variable. This gets the php file path.
|
97 |
*/
|
98 |
|
99 |
var phpFileRequest:URLRequest = new URLRequest("php/controlpanel.php"); |
100 |
|
101 |
/*
|
102 |
this allows us to use the post function in php
|
103 |
*/
|
104 |
|
105 |
phpFileRequest.method = URLRequestMethod.POST; |
106 |
|
107 |
/*
|
108 |
attach the php variables to the URLRequest
|
109 |
*/
|
110 |
|
111 |
phpFileRequest.data = phpVars; |
112 |
|
113 |
/*
|
114 |
create a new loader to load and send our urlrequest
|
115 |
*/
|
116 |
|
117 |
var phpLoader:URLLoader = new URLLoader(); |
118 |
phpLoader.dataFormat = URLLoaderDataFormat.VARIABLES; |
119 |
phpLoader.addEventListener(Event.COMPLETE, showResult); |
120 |
|
121 |
/*
|
122 |
now lets create the variables to send to the php file
|
123 |
*/
|
124 |
|
125 |
phpVars.systemCall = "checkLogin"; |
126 |
phpVars.username = username.text; |
127 |
phpVars.password = password.text; |
128 |
|
129 |
/*
|
130 |
this will start the communication between flash and php
|
131 |
*/
|
132 |
|
133 |
phpLoader.load(phpFileRequest); |
134 |
|
135 |
}
|
136 |
|
137 |
/*
|
138 |
function to show the result of the login
|
139 |
*/
|
140 |
|
141 |
public function showResult (event:Event):void { |
142 |
|
143 |
/*
|
144 |
|
145 |
this autosizes the text field
|
146 |
|
147 |
***** You will need to import flash's text classes. You can do this by:
|
148 |
|
149 |
import flash.text.*;
|
150 |
|
151 |
*/
|
152 |
|
153 |
result_text.autoSize = TextFieldAutoSize.LEFT; |
154 |
|
155 |
/*
|
156 |
this gets the output and displays it in the result text field
|
157 |
*/
|
158 |
|
159 |
result_text.text = "" + event.target.data.systemResult; |
160 |
|
161 |
}
|
162 |
|
163 |
}
|
164 |
|
165 |
}
|
Conclusion
Well that concludes Part 1 of our Flash login system tutorial. In Part 2 we will be creating a registry form that will add users without the user entering it in the backend. Thanks for reading this tutorial. Enjoy it :)
