Partners
Interested? Send an e-mail
Interested? Send an e-mail
- Videoproduksjon.net
A norwegian web forum for video enthusiasts. They also have an extensive article database.
www.videoproduksjon.net - VividTutorials.com
A tutorial site for PHP, CSS, Photoshop etc...
www.vividtutorials.com - ArticPixel.no
A norwegian tutorial database with a discussion forum (Norwegian).
www.articpixel.no
Newsletter
Sign up for our newsletter!
Sign up for our newsletter!
How to create an easy login system
Posted 01/01/07 by Stian Bakkane Category: Flash | Level: Moderate | Hits: 24503 | Favourites: 0 |
In this tutorial you will learn how to create a simple login system using Macromedia Flash 8.
If you're new to variables or functions in flash, pelase read the tutorials about them in the tutorials archive.
Create a new flash document (CTRL - N).
Rename layer 1 to "actions". This is where we'll apply the script.

Create a new layer and name it "input_text". This is where we'll put the username and password text boxes.

Create another layer. This time name it "static_text". This is where we'll put the login success or failure messages and so on.

In the "static_text" layer, create three static text boxes just like I've done:

Select the "input_text" layer and create an "input text" field. To set the text field to "input text", just do like this:

Make sure that you set the text field border to on. You can find the border button in the bottom right corner of the image above.
Before you continue, you may want to lock the "static_text" layer.
Create a text field as shown below:

Select the text field you just created and set the variable name to "user_input". This is done in the properties tab as shown below:

Repeat the process to cerate a password field. Just make sure you select "Password" as shown below:

Select the newly created text field.

Set the variable name to "pass_input".
Unlock the "static_text" layer and lock the "input_text" layer.
In the "static_text" layer, insert new keyframes at frame 2 and 3. Delete the content in the newly created frames.

Select the "actions" layer and insert keyframes at frame 2 and 3.
Select frame 1 in the "actions" layer and open the "Actions" panel.

In the first line write "stop();".

In line 2 and 3 we set the username and password variables to zero, or empty. Because we want the user to input the username and the password, not the program.

Let's create the login button.
Close the actions panel and select the "static_text" layer.
Select the "Login" text. Right click on it and select "Convert to symbol".

Make it a button and set the name to "login_button".

Select the newly created button.

Set the instance name to "login_button" in the properties panel.

Select frame 1 in the "actions" layer and open the actions panel again.
In line 4 we create the onRelease function. This function will determine what will happen when we push the login button.

As you can see, the first word is the instance name of our login button. So this function will be applied to it.
If you don't know what I'm talking about here, please read the Intro to functions tutorial.

As you can see, I've added a whole bunch of words within the onRelease function. If you're not completely new to Action Scripting, this should look familiar.
But if you're not, I'm going to explain the basics here.
We begin by asking a question. An "If" question. It's basically like this: If the username is User1 and the password is mypassword, then goto and stop at frame 2. If it isn't, then goto and stop at frame 3.
So right here we set the username to "User1" and the password to "mypassword". So that's the values the user has to enter to gain access to frame 2. You may of course change this to whatever you want.
Having done that, let's move on.
Close the actions panel and select frame 2 in the "static_text" layer.
Create a logged in message or something that confirms that the login process was successful.
I created a static text field saying "You're logged in!".

Do the same thing at frame 3, just make it a login failed message.

And that's it! You can test the movie (CTRL-ENTER).
If you type in "User1" as username and "mypassword" as password you will get to frame 2. Anything else will send you to frame 3.
If you have any questions, or just can't get it to work. Ask in the forums!
Create a new flash document (CTRL - N).
Rename layer 1 to "actions". This is where we'll apply the script.

Create a new layer and name it "input_text". This is where we'll put the username and password text boxes.

Create another layer. This time name it "static_text". This is where we'll put the login success or failure messages and so on.

In the "static_text" layer, create three static text boxes just like I've done:

Select the "input_text" layer and create an "input text" field. To set the text field to "input text", just do like this:

Make sure that you set the text field border to on. You can find the border button in the bottom right corner of the image above.
Before you continue, you may want to lock the "static_text" layer.
Create a text field as shown below:

Select the text field you just created and set the variable name to "user_input". This is done in the properties tab as shown below:

Repeat the process to cerate a password field. Just make sure you select "Password" as shown below:

Select the newly created text field.

Set the variable name to "pass_input".
Unlock the "static_text" layer and lock the "input_text" layer.
In the "static_text" layer, insert new keyframes at frame 2 and 3. Delete the content in the newly created frames.

Select the "actions" layer and insert keyframes at frame 2 and 3.
Select frame 1 in the "actions" layer and open the "Actions" panel.

In the first line write "stop();".

In line 2 and 3 we set the username and password variables to zero, or empty. Because we want the user to input the username and the password, not the program.

Let's create the login button.
Close the actions panel and select the "static_text" layer.
Select the "Login" text. Right click on it and select "Convert to symbol".

Make it a button and set the name to "login_button".

Select the newly created button.

Set the instance name to "login_button" in the properties panel.

Select frame 1 in the "actions" layer and open the actions panel again.
In line 4 we create the onRelease function. This function will determine what will happen when we push the login button.

As you can see, the first word is the instance name of our login button. So this function will be applied to it.
If you don't know what I'm talking about here, please read the Intro to functions tutorial.

As you can see, I've added a whole bunch of words within the onRelease function. If you're not completely new to Action Scripting, this should look familiar.
But if you're not, I'm going to explain the basics here.
We begin by asking a question. An "If" question. It's basically like this: If the username is User1 and the password is mypassword, then goto and stop at frame 2. If it isn't, then goto and stop at frame 3.
So right here we set the username to "User1" and the password to "mypassword". So that's the values the user has to enter to gain access to frame 2. You may of course change this to whatever you want.
Having done that, let's move on.
Close the actions panel and select frame 2 in the "static_text" layer.
Create a logged in message or something that confirms that the login process was successful.
I created a static text field saying "You're logged in!".

Do the same thing at frame 3, just make it a login failed message.

And that's it! You can test the movie (CTRL-ENTER).
If you type in "User1" as username and "mypassword" as password you will get to frame 2. Anything else will send you to frame 3.
If you have any questions, or just can't get it to work. Ask in the forums!
Comments

dANG (39 years ago)
This tutorial is actually pretty sweet, I actually learned something from reading it, and I usually don't do that when it comes to coding.
Good job.
This tutorial is actually pretty sweet, I actually learned something from reading it, and I usually don't do that when it comes to coding.
Good job.

z3r0 (39 years ago)
Couldn't somebody crack that just about as easily? If they can find the password ActionScript, couldn't they use your AS to find the PHP file and see the passwords in there?
Couldn't somebody crack that just about as easily? If they can find the password ActionScript, couldn't they use your AS to find the PHP file and see the passwords in there?

gaz (39 years ago)
thanks this is a useful cool tutirial and i will use it a lot how can u make it so that there are more than one username?
thanks this is a useful cool tutirial and i will use it a lot how can u make it so that there are more than one username?

raed (39 years ago)
thanks, but even when the username ans password are correct it leads me to frame theree with the failing massege.
thanks, but even when the username ans password are correct it leads me to frame theree with the failing massege.

StianB (39 years ago)
It would be easier for us to help you if you ask at the forums. They are checked more often and you'll probably find a sollution to your problems there.
-StianB
It would be easier for us to help you if you ask at the forums. They are checked more often and you'll probably find a sollution to your problems there.
-StianB

Elliot (39 years ago)
I have the same problem as CAK, i can only get it to work if the username box is set to " "
I have the same problem as CAK, i can only get it to work if the username box is set to " "

me (39 years ago)
Really nice tutorial. Worked well for me, except when I put in a wrong password or username, it stays on frame 1.
Really nice tutorial. Worked well for me, except when I put in a wrong password or username, it stays on frame 1.

CAK (39 years ago)
just like dvaughn it always gets denied... When I set the user name/pass both blank, and press login with blank fields, it works. If I set the user name/pass both to something simple like "a" and type that into the input field, it doesn't work.
just like dvaughn it always gets denied... When I set the user name/pass both blank, and press login with blank fields, it works. If I set the user name/pass both to something simple like "a" and type that into the input field, it doesn't work.


BobbyJoneSmith (39 years ago)
thanks, even though its useless as an actual password protection system, it taught me a bit about functions and all that
again, ty
ps: keep on writin 'em
thanks, even though its useless as an actual password protection system, it taught me a bit about functions and all that
again, ty
ps: keep on writin 'em

Fredrik (39 years ago)
nooo!
it works.. but i missed out whit the layer changing!
how did you do? how did u delete the stuff?
any were to find tuts for noobs?
email me! gomp91@gmail.com
nooo!
it works.. but i missed out whit the layer changing!
how did you do? how did u delete the stuff?
any were to find tuts for noobs?
email me! gomp91@gmail.com

imran (39 years ago)
i need some tutorials from flash and photoshop. so i can develope my basic skills
i need some tutorials from flash and photoshop. so i can develope my basic skills


StianB (39 years ago)
You know a lot more than me abot php and action scripting.
But this is a very very simple password/code script that you can use in a flash game to jump to the third level or something. It's not meant to work as a full password login system for a corporate site or anything like that.
Just a note ;)
And by the way... I do know a lot about loadVars. Even PHP ;) After all, I did manage to code this comments script :P
You know a lot more than me abot php and action scripting.
But this is a very very simple password/code script that you can use in a flash game to jump to the third level or something. It's not meant to work as a full password login system for a corporate site or anything like that.
Just a note ;)
And by the way... I do know a lot about loadVars. Even PHP ;) After all, I did manage to code this comments script :P

Thorleif Jacobsen (39 years ago)
I suggest you start reading about "LoadVars" and PHP when making a php script.
This code is crackable in a matter of 10 secounds and the area would be revealed for everyone.
Doing this with php you allow a easy way of multiusers and more. Lets say the usr and pw is stored in: user_input and pass_input. Now add this:
// the ActionScript
var users:LoadVars = new LoadVars();
users.username = user_input;
users.password = pass_input
users.sendAndLoad("users.php", _blank, "POST");
users.onLoad = function() {
if(users.login == "ok") { gotoAndStop("Frame for 'OK'"); }
else { gotoAndStop("Frame for 'WRONG PW OR USER'"); }
}
// The PHP script
$users = array("user1"=>"pass1", "user2"=>"pass2", "userN"=>"passN");
if(isset($_POST['username'])) {
$pass = $_POST['password'];
$user = $_POST['username'];
if($users[$user] == $pass) { echo "login=ok"; }
else { echo "login=notok"; }
}
I suggest you start reading about "LoadVars" and PHP when making a php script.
This code is crackable in a matter of 10 secounds and the area would be revealed for everyone.
Doing this with php you allow a easy way of multiusers and more. Lets say the usr and pw is stored in: user_input and pass_input. Now add this:
// the ActionScript
var users:LoadVars = new LoadVars();
users.username = user_input;
users.password = pass_input
users.sendAndLoad("users.php", _blank, "POST");
users.onLoad = function() {
if(users.login == "ok") { gotoAndStop("Frame for 'OK'"); }
else { gotoAndStop("Frame for 'WRONG PW OR USER'"); }
}
// The PHP script
$users = array("user1"=>"pass1", "user2"=>"pass2", "userN"=>"passN");
if(isset($_POST['username'])) {
$pass = $_POST['password'];
$user = $_POST['username'];
if($users[$user] == $pass) { echo "login=ok"; }
else { echo "login=notok"; }
}
Error
You have to be logged in to add comments!
Sign up today!
Sign up today!



Zer0: No they cant locate the content of the PHPfiles. If I give you a direct URL to my loginscript (actionlogin.php which contains the username and password) (PHP) you wont be able to extract any good information from it, other than the one that you have in echo "--" :)