Simple user name and password login

For user type 'flashkit' and for password type 'tutorial'.

Type wrong the username or the password to see what happens.

First things come first. My movie is set at '400' by '230' at '12 fps'. with a Background Color 'red' - '#FF0000'. But you can use your own color and movie dimensions.

On the first frame create a text. Go to Text Tool (T) and create a text box. I used the font style called 'Romantic'. You don't need to write anything, but you must specify the font style because it will be the font that the you will see when you type in your username and password. My text box is '241 width' and '34 height'. Put the text up in the right corner of the movie.

Since the user has to type his username in the box we need to make that possible. Go to Window Properties. Select the text box and change the property from 'Static Text' to 'Input Text'. If you want the box to have a border press the button called 'Show Border Around Text'.

Click on the 'Character...' button and select 'All Characters'. Type 20 where it says 'Maximum Characters'.

Now you can type in the box up to 20 characters, not more.

Now that you've created a text box select it and go to Edit Copy (Ctrl + C) than Edit Paste in Place (Ctrl + Shift + V).

One click on the text box you just copied and by holding down the 'Shift' key move with the arrow keys the text box down so it won't overlap the other one.

Now we need to attribute variables to the text boxes.

Select the first box.

With the Property window open type 'username' where it says Var(variable) and select 'Single Line' from the pop-up menu. Do the same for the other text but instead of 'username' type 'password' and select 'Password' from the pop-up menu. By selecting 'Password' the user will see '*' instead of letters.

Near the username text box write 'username' and near the 'password' box write 'password' so you'll know which is which, or you could write in the boxes 'Username'(in 'username') and 'Password'(in 'password' box).

Step 3: Making a text box for the response

Now we'll need to make another text box with no text inside it. Make the width '395' and the height '34'. In the variable(Var:) field type 'mess'(abbreviation from message). The suited property for this text should be 'Dynamic Text'. This way the user can't modify the response.

Step 4: Adding a button

Draw a rectangle(R)- no stroke. Create a text over the button and write 'Submit' or 'Sign In'. Select the text and the rectangle (hold down 'Shift' and click once on the rectangle and once on the text) and press 'F8' or go to Insert Convert to symbol and click 'Button'. Click 'Ok'.

Step 5: Adding the actionscript

Click on the button you've created. Go to Window Actions(F8). Double click on 'on'(Esc+on). Select besides the 'Release' 'KeyPress' and press 'Enter'. This way the button will execute the action if you press 'Enter' on the keyboard.

Insert an 'evaluate' action(Esc+ev). Type in mess="Sigh in please!".

Insert an 'if' action(Esc+if) and type username=="flashkit" where "flashkit" is the username you'd like to use.

Note: you have to use double '='!!!

Insert an 'evaluate' action(Esc+ev) and type in mess="Invalid password!". When you type the wrong password or you don't type anything you will be alerted that it's an invalid password.

Insert another 'if' action and type in password=="tutorial" - now the password for the username "flashkit" is "tutorial"..

I guess you've noticed that we need to insert another 'evaluate' action. So press 'Esc+ev' and type in mess="You forgot your username!". When you type a wrong username or when you don't type a username you'll be alerted that you forgot your username.

For the end we must insert another 'if' action. Press 'Esc+if' then type in the text field the following: username=="flashkit" & password=="tutorial" then insert an 'evaluate' action and write in mess="Welcome " + username. By doing this the text typed in the variable 'username' is loaded in the variable 'mess'. If you want another final action, maybe a 'getURL'(Esc+gu) action, you must insert a 'getURL'(Esc+gu) action where you type the url and the target(' _self' specifies the current frame in the current window; '_blank' specifies a new window; '_parent' specifies the parent of the current frame; '_top' specifies the top-level frame in the current window.) but also the variable used(POST or GET).

Here is the code:

on (release, keyPress "<Enter>") {
    mess="Sign in please!";
    if (username=="flashkit" ) {
        mess="Invalid password!!";
    }
    if (password=="tutorial") {
        mess="You forgot the username!";
    }
    if (username=="flashkit" & password=="tutorial") {
        mess="Welcome  " +  username;
    }
}

Note: If you want to introduce another user you'll have to modify a little the actionscript. Can you guess what are the changes. I'll show you anyway. Here are the changes:

on (release, keyPress "<Enter>") {
    mess="Sign in please!";
    if (username=="flashkit" or username=="vlad") {
        mess="Invalid password!!";
    }
    if (password=="tutorial" or password=="romania") {
        mess="You forgot the username!";
    }
    if (username=="flashkit" & password=="tutorial" or 
	username=="vlad" & password=="romania") {
        mess="Welcome  " +  username;
    }
}

We used the 'or' action. - condition1 'or'condition2

If you want to put even more users you have to use 'or' like in the last case. - condition1 'or' condition2 'or' condition3 ...