How to Create an Easy Login System

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.