In my previous post I created a login screen in AS2 however in this version we’ll be creating one in AS3, which seems slightly faster, however a bit more complicated. I’ve also changed the create account script to add the ip address of the user.
Having the ip of users is useful to track down cheaters of your game. You can use an ip ban to stop the cheater playing your game, I’ll cover this in a later tutorial…

This tutorial is pretty much exactly the same as the last one(except for the script changes), So this tutorial assumes you have a way of testing out PHP and mySQL scipts, however if you need to know how to setup PHP refer back to the last login tutorial.

This is what we’ll be making…

It basically the exact same thing as the last one.

Getting started:

Step 1: Creating the flash document

Create a new flash file, select a new flash document AS 3.0.
Save this file and call it something like ‘login.php’

firstly, change the document class to ‘login’.

Now add the ‘Button’ and ‘textInput’ component to your library, these are what we will be using as our buttons and the user’s text inputs.

Now add a new font to your library (this will be the main font you will use), you can do this by clicking on the top right of you library and pressing New Font, choose the font you want and change the linkage or Class to mainFont.

font pic

Step 2: Actionscript file

That’s the flash document set up, now for the class file.

Now create a new actionscript file, save it in the same directory as the flash file.

add this to the that actionscript file, you might need to change lines 30 and 31 to where you have put the PHP files:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231

package {
	import fl.controls.Button;
	import fl.controls.TextInput;
	import flash.display.MovieClip;
	import flash.events.Event;
	import flash.events.IOErrorEvent;
	import flash.events.MouseEvent;
	import flash.net.URLLoader;
	import flash.net.URLRequest;
	import flash.net.URLVariables;
	import flash.net.URLRequestMethod;
    import flash.text.*;
	public class login extends MovieClip {
		public function login() {
			//creating components variables
			var submitButton:Button = new Button();
			var createAccountButton:Button = new Button();
			//font vars
			var font:mainFont = new mainFont();
			var textFormat:TextFormat=new TextFormat();
			//text input component vars
			var userTextInput:TextInput = new TextInput();
			var passTextInput:TextInput = new TextInput();
			//text vars
			var userText:TextField = new TextField();
			var passText:TextField = new TextField();
			var mainTitle:TextField = new TextField();
			var statusText:TextField = new TextField();
			//insert the url for your pages
			var loginURL:URLRequest=new URLRequest("http://localhost/login.php");
			var cUserURL:URLRequest=new URLRequest("http://localhost/newAccount.php");
			//loader and vars
			var pageLoader:URLLoader = new URLLoader();
			var pageVars:URLVariables = new URLVariables();
			//adding to stage
			addChild(submitButton);
			addChild(createAccountButton);
			addChild(userTextInput);
			addChild(passTextInput);
			addChild(userText);
			addChild(passText);
			addChild(mainTitle);
			addChild(statusText);
			//adding event listeners to our loading pages
			pageLoader.addEventListener(Event.COMPLETE, loadPageSuccessful);
			pageLoader.addEventListener(IOErrorEvent.IO_ERROR, loadPageError);
			//submit button properties + event listener
			submitButton.label="Log In";
			submitButton.x=170;
			submitButton.y=170;
			submitButton.addEventListener(MouseEvent.CLICK,buttonListener);
			//Create Account button properties + event listener
			createAccountButton.label="Create Account";
			createAccountButton.x=20;
			createAccountButton.y=170;
			createAccountButton.addEventListener(MouseEvent.CLICK,buttonListener);
			//username input text properties
			userTextInput.setSize(150, 20);
			userTextInput.x=90;
			userTextInput.y=50;
			userTextInput.maxChars=25;
			//gives protection from SQL injections
			userTextInput.restrict="a-zA-Z0-9_";
			//password input text properties
			passTextInput.setSize(150, 20);
			passTextInput.x=90;
			passTextInput.y=90;
			passTextInput.displayAsPassword = true;
			passTextInput.maxChars=25;
			//gives protection from SQL injections
			passTextInput.restrict="a-zA-Z0-9_";
			//creating main font
			textFormat.font=font.fontName;
			textFormat.size=12;
			//setting user text properties
			userText.defaultTextFormat=textFormat;
			userText.selectable=false;
			userText.embedFonts=true;
			userText.text="username:";
			userText.width=70;
			userText.height=12;
			userText.y=50;
			userText.x=10;
			//setting password text properties
			passText.defaultTextFormat=textFormat;
			passText.selectable=false;
			passText.embedFonts=true;
			passText.text="password:";
			passText.width=70;
			passText.height=12;
			passText.y=90;
			passText.x=10;
			//setting mainTitle text properties
			mainTitle.defaultTextFormat=textFormat;
			mainTitle.autoSize=TextFieldAutoSize.CENTER;
			mainTitle.selectable=false;
			mainTitle.embedFonts=true;
			mainTitle.text="Log In";
			mainTitle.width=200;
			mainTitle.height=24;
			mainTitle.y=10;
			mainTitle.x=120;
			//setting the status text properties
			statusText.defaultTextFormat=textFormat;
			statusText.selectable=false;
			statusText.embedFonts=true;
			statusText.text="Please log in";
			statusText.width=260;
			statusText.height=50;
			statusText.y=120;
			statusText.x=20;
			//login function
			function checkLogin(user,pass) {
				if (user!=""&&pass!="") {
					submitButton.label="loading...";
					userTextInput.enabled = false;
					passTextInput.enabled = false;
					pageVars.user=user;
					pageVars.pass=pass;
					//telling the loginURL it wants to use the post method of sending vars
					loginURL.method=URLRequestMethod.POST;
					//attaching vars to to the loginURL
					loginURL.data=pageVars;
					//loading the url
					pageLoader.load(loginURL);
				} else {
					statusText.text="One of the text fields are empty";
				}
			}
			//function that runs when the Create user button is pressed
			function newAccount(user,pass):void {
				//is there is text in both fields send out data
				if (user!=""&&pass!="") {
					submitButton.label="loading...";
					userTextInput.enabled = false;
					passTextInput.enabled = false;
					pageVars.user=user;
					pageVars.pass=pass;
					//telling the loginURL it wants to use the post method of sending vars
					cUserURL.method=URLRequestMethod.POST;
					//attaching vars to to the loginURL
					cUserURL.data=pageVars;
					//loading the url
					pageLoader.load(cUserURL);
				} else {
					statusText.text="One of the text fields are empty";
				}
			}
			//page load success listener function
			function loadPageSuccessful(event:Event):void {
				var newVars:URLVariables=new URLVariables(pageLoader.data);
				userTextInput.enabled = true;
				passTextInput.enabled = true;
				if (mainTitle.text=="Create Account") {
					submitButton.label='Create User';
					switch (newVars.accountStatus) {
						case 'success' :
						statusText.text='Account Created';
						mainTitle.text="Log In";
						submitButton.label="Log In";
						createAccountButton.visible = false;
							break;
						case 'username' :
							statusText.text='Username already exists';
							break;
					}
				}
				if (mainTitle.text=="Log In") {
					submitButton.label='Log In';
					switch (newVars.loginStatus) {
						case 'success' :
						statusText.text='You are now logged in!';
						mainTitle.text="Welcome "+userTextInput.text+".";
						submitButton.label="Back";
						userTextInput.visible = false;
						passTextInput.visible = false;
						userText.text = "";
						passText.text = "";
						createAccountButton.visible = false;
							break;
						case 'username' :
							statusText.text='that username does not exist';
							break;
						case 'password' :
							statusText.text='incorrect password';
							break;
					}
				}
			}
			//page load error listener function
			function loadPageError($evt:IOErrorEvent):void {
				statusText.text="There is an error on our server";
				userTextInput.enabled = true;
			    passTextInput.enabled = true;
			}
			//button click listener function
			function buttonListener(event:MouseEvent):void {
				switch (event.currentTarget.label) {
					case "Log In" :
						checkLogin(userTextInput.text,passTextInput.text);
						break;
					case "Create Account" :
						statusText.text="";
						event.currentTarget.label="back";
						mainTitle.text="Create Account";
						submitButton.label="Create User";
						break;
					case "Create User" :
						newAccount(userTextInput.text,passTextInput.text);
						break;
					case "back" :
						statusText.text="Please log in";
						mainTitle.text="Log In";
						submitButton.label="Log In";
						createAccountButton.label="Create Account";
						break;
					case "Back" :
						statusText.text="Please log in";
						mainTitle.text="Log In";
						submitButton.label="Log In";
						userText.text="username:";
						passText.text="password:";
						createAccountButton.visible = false;
						passTextInput.visible = true;
						userTextInput.visible = true;
						break;
				}
			}
		}
	}
}

Test the code out by testing the movie, if this works you can continue onto the next section.

Step 3: mySQL database

To use the PHP scripts you’ll need to set up your database.
Create a new database, call it something like ‘users’ or something along those lines.
Use this code to create a new table within that database.

CREATE TABLE `users`.`users` (
`id` INT( 11 ) NOT NULL AUTO_INCREMENT PRIMARY KEY ,
`username` VARCHAR( 25 ) NOT NULL ,
`password` VARCHAR( 32 ) NOT NULL ,
`ip` VARCHAR( 20 ) NOT NULL
) ENGINE = MYISAM

Step 4: PHP files

Now create your PHP files.

Create one called login.php and add this, you’ll have to change the database details to your settings:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

<?php
//enter mySQL details
$connection = mysql_connect('localhost', 'your_username', 'your_password')
or die ("Could not connect to mysql because ".mysql_error());
//database
mysql_select_db('your_db')
or die ("Could not select database because ".mysql_error());
$table = 'your_table';
//collecting the sent vars
$user = $_POST['user'];
$pass = md5($_POST['pass']);
$userQuery = mysql_query("SELECT id FROM $table WHERE username = '$user'");
//checking if username exists
if(mysql_num_rows($userQuery) == 0){
print("loginStatus=username");
exit;
}
//checking if the password is right
$passQuery = mysql_query("SELECT * FROM $table WHERE username = '$user' AND password = '$pass'");
if(mysql_num_rows($passQuery) == 0){
print("loginStatus=password");
exit;
}
//success message
print("loginStatus=success");
?>

and create another file called newAccount.php

add this, again you’ll have to change the database settings:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

<?php
//enter mySQL details
$connection = mysql_connect('localhost', 'your_username', 'your_password')
or die ("Could not connect to mysql because ".mysql_error());
//database
mysql_select_db('your_db')
or die ("Could not select database because ".mysql_error());
$table = 'your_table';
//checking if username exists
$userQuery = mysql_query("SELECT id FROM $table WHERE username = '".$_POST['user']."'");
//if username is used the var accountstatus gets sent back with username
if(mysql_num_rows($userQuery) != 0){
print("accountStatus=username");
exit;
}
//inserting values in to the database and adding md5 encryption to password
mysql_query("INSERT into $table (username,password,ip) VALUES ('".$_POST['user']."','".md5($_POST['pass'])."','".getenv('REMOTE_ADDR')."')");
print("accountStatus=success");
print("&end=end");
?>

and that’s it. Just test that it works and it should be done!

If you have any problems here are the source files

Enjoy :)