Flash Tutorial: User Name and Password - Advanced

Learn: User Name & Passwords

Home • Food • Mates • Members • Tutorials • Forum • Buy Templates • Contact Us

Flash Tutorial - User Name and Password - Advanced Features

Free Flash Tutorial

This tutorial is based on the previous tutorial: User Name and Password It is written with the assumption that you have read the previous tutorial. The Advanced Features discussed here are based on the Flash Movie created in the previous tutorial. These features are:

User Name and Password Pairs
Tab Key
Maximum Characters

Example: Download the Flash file Int 126a

User name and password box.

The User Name is: web and the Password is: wasp (case sensitive) or
The User Name is: web1 and the Password is: wasp1 (case sensitive) or
The User Name is: web2 and the Password is: wasp2 (case sensitive)

Cross Ref: There is a simpler tutorial on how to create a password box which requires the user to type in a password only, but does not require a user name: Password Protect

Advanced Optional Features: User Name and Password Pairs

Unlike in the previous tutorial, mixing the possible passwords and usernames won't work in this case. You can only gain access using the right username with its corresponding password. For more details, read the comments in updating the code in Step 2

Advanced Optional Features: Tab Key

Another advantage of this Movie is that it works like the form on a web page. It utilizes the Tab key function allowing the user to press the Tab key and move between the input boxes.

Advanced Optional Features: Maximum Characters

In this Movie the number of characters a user can input is restricted.

Maximum Characters

Step One: Setting Maximum Characters

It is a good idea to set a maximum character limit. This limits the number of characters (including all symbols and spaces), that the user can enter as their password or username.

To do this select the input box; in the Property inspector look for Maximum Character, then type the number you want to set as the limit. Below the limit is: 33

Characters are set in the Property Inspector.

Note: If the maximum number of characters is set to zero, this does not mean zero at all but unlimited!
The best way to work out what limit you should set for the maximum characters is to test the Flash Movie: Control > Test
Click inside your Input Box so you get the: Blinking cursor

The Blinking Cursor (I'm not being rude!!).
Then type (in uppercase) a series of capital "W " until the text box is full: WWW...

W's fill the Input Box.
Count the: W's

You should use " W " because it is the widest letter in the alphabet and it's wider than all symbols that you could enter in Flash. It takes up more room than other letters and therefore it is the best guide for the maximum number of characters.

Make sure the letters don't go beyond the text box length. You will notice when it does this, as the letters move to the left to make room for additional characters like this:

Your notice the very first W at the far left of the picture has slightly disappeared to the left.

To get a clear idea of what I mean see a Demo Movie: here
Now make sure the other Text boxes (of the same width and set to use the same font) have the same character limit.

Tab Key and User Name - Password Pairs

Step Two: Setting Up the Input Boxes

In the Property Inspector select show Borders Around Text:

Note: This gives the two Input boxes (Password and Username) a transparent background. The input text boxes should no longer have a white background.

Select the UserName input box, using the Property Inspector, change both the Var (variable) and Instance Name to: /:UserName

Both the Instance Name and the Var Name has been set to: /:UserName
Now select the Password input box and change both its Var and Instance Name to: /:Password
Lock the Username and Password Layers:
Add a new Layer called: Yellow backgrounds
Draw a yellow rectangle the same size as the user name box.
Move the yellow rectangles so they appear behind the input boxes.
Right click on the yellow rectangle (next to User Name) and select: Convert to Symbol
Name the Symbol: UserNameInputRequired
For Behavior select: Movie Clip
Click: OK
Give the Movie Clip an Instance Name in the Property Inspector: UserNameInputRequired
Double click on the Movie Clip to: Edit
Type an asterisk on the stage on a new layer: *
Make it red* and place it after the: User Name:*

Red Asterisk after the User Name Label. Text Box appears yellow.
In frame 2 of the same Movie Clip add a: Blank Keyframe
Add a stop(); to both keyframes:

stop();
Click on the Scene 1 Tab to return to the Main Stage:
Do exactly the same for the Password input box, but this time give it the Instance Name: PasswordInputRequired

Step Three: Setting up the Tab Key

Now add a new button called: Tab
Move the Button: Off Stage

Note: You can add any standard Button from the Common Library: Window > Other Panels > Common Libraries > Buttons

In my example I have left the Tab button on the stage for demonstration purposes. Normally the Tab button is moved off the stage. It is better that it is invisible.

My Tab button is visible - but there is no need for this.

Now add the following ActionScript to the Tab button:

/* Important Note: This Button should be moved off the stage. I have left it on the stage so that you can see it. Normally it should be off the stage and out of sight. When the user presses the tab button this code is run. */
on (keyPress "<Tab>") {

/* Checks the value of variable 'a', if it's equal to 0 then it will set the focus on the User Name and change the variable value to 1. Remember that in the layer ActionScript on the first frame, we set the variable 'a' as 1 by default. So when the Tab button is first pressed, the Movie knows that the user name input box already has the cursor/focus in it. */
if (_root.a == 0) {
Selection.setFocus("_root.UserName");
Selection.setSelection(length(/:UserName), length(/:UserName));
_root.a = 1;
} else {

/* If the User Name has focus, then the code sets the cursor on the Password input box and sets the variable 'a' to 0. So next time it will be picked up by the first if statement above. */
Selection.setFocus("_root.Password");
Selection.setSelection(length(/:Password), length(/:Password));
_root.a = 0;
}
}

Step Four: The Enter Button

Add the following code to the Enter button replacing the existing code from before:

// When the enter button is pressed and then released do the following:
on (release, releaseOutside, keyPress "<Enter>") {

/* This sets the cursor in the user name input box. It sets the variable a to 1 so that if the Tab button is pressed, the Movie knows which text box currently has the cursor in it. */
Selection.setFocus("_root.UserName");
Selection.setSelection(length(/:UserName), length(/:UserName));
_root.a = 1;

// Calls the first global function when the button is pressed and released, or when the enter key is pressed
InputCheck();
}

Step Five: The ActionScript in Frame 1

On the layer ActionScript use this code instead of the code used in the previous tutorial (skip the gray comments if you like):

/* Create an array to hold all the possible usernames. You can add or remove usernames to the array.
Add myUserNameArray[x] where x is the next number up from the last number in the array i.e. the next number up in the array would be 3 so you would add:
myUserNameArray[3] = "MyUserName"; You can edit the word(s) in the inverted comas below to change them to whatever possible usernames you want.

The user names below match their corresponding password. So the username 'web' matches the password 'wasp'. Here is an example:

var myUserNameArray = new Array();
myUserNameArray[0] = "my first possible username";
myUserNameArray[1] = "my second possible username";
myUserNameArray[2] = "my third possible username";

var myPasswordArray = new Array();
myPasswordArray[0] = "my first possible password";
myPasswordArray[1] = "my second possible password";
myPasswordArray[2] = "my third possible password";

Notice how the usernames don't match the passwords. The username 'my first possible username' would still have to match its corresponding password: 'my first possible password'. Although they are named differently the first array values must match each other so myUserNameArray[0] matches myPasswordArray[0]. It is important that you have the same number of possible password to usernames.

All usernames and passwords are case sensitive. If the username or password has any capital letters in it, then the user must enter the username and password with the same capital letters. The same is true of spaces. */
var myUserNameArray = new Array();
myUserNameArray[0] = "web";
myUserNameArray[1] = "web1";
myUserNameArray[2] = "web2";
var myPasswordArray = new Array();
myPasswordArray[0] = "wasp";
myPasswordArray[1] = "wasp1";
myPasswordArray[2] = "wasp2";

/* This is a global function that checks the input. In this case it checks that the User Name or Password isn't just all spaces. */
String.prototype.isWhiteSpace = function() {
return ((this != undefined && this.length>0) ? (this.split(" ").join("").length == 0 ? b=true : b=false) : (b=false));
};

/* This clears the User Name And Password Input Boxes, if the user returns back to the log in box. */
var UserName = "";
var Password = "";

// Set up all the variables used in the code below.
var t;
var z = 0;
var y;
var q;
var x;
var i = 0;

// This sets the default start message when the Movie first loads
var Guide = "Please Enter Your User Name And Password";

// Declares a global function, which is the first function to be called when the user presses the Enter button.
_global.InputCheck = function() {

/* Resets and clears all the variables. Basically resets all the variables back to their default settings. This is so that when the code below is being re-run, all the variables are set to their default settings and values. */
t = "";
z = 0;
y = "";
q = "";
x = "";
i = 0;

/* This sets the cursor in the User Name input box. It sets the variable 'a' to '1' so that if the Tab button is pressed, the Movie knows which text box currently has focus. */
Selection.setFocus("_root.UserName");
Selection.setSelection(length(/:UserName), length(/:UserName));
_root.a = 1;

/* Checks the User Name to see if anything has been typed and also checks to see if the User Name input box is just full of spaces. */
if (_root.UserName.isWhiteSpace() | _root.UserName.length == 0 | _root.UserName == "" | _root.UserName eq "") {

// Tells the user that the User Name is incorrect.
_root.Guide = "No User Name Entered Please Try Again!";

/* If the User Name is empty or incorrect, then it tells the UserNameRequired Movie Clip to go to the first frame. This essentially tells the user that user name input box is incorrect or empty. */
_root.UserNameInputRequired.gotoAndStop(1);

/* This sets the cursor back to User Name input box and sets the variable 'a' to 1 so that if the Tab button is pressed the Movie knows which text box currently has focus. */
Selection.setFocus("_root.UserName");
Selection.setSelection(length(/:UserName), length(/:UserName));
_root.a = 1;

// Stops the Movie from going to the next frame
stop();

// If the User Name isn't empty (or is full of spaces) run the next function check
} else {
UserNameCheck();
}
};

/* Declares the next global function that will check that the User Name matches one of the possible usernames from the array. */
_global.UserNameCheck = function() {

/* Sets the variable 'x' to the length of the array, and minuses one away from the array length because the array length is always one number higher than it actually is. This is because the array starts at 0 not 1 and computers count 0 as 1   */
x = myUserNameArray.length-1;

/* While the value 'i' is less than the variable 'x' value, run the code below once and then add 1 to the value 'i', then check to see if it is still less than the variable 'x'.  */
for (i=0; i<=x; i++) {

/* Check’s to see if the User Name entered is the same as any of the possible User Names in the array 'myUserNameArray'.  */
if (myUserNameArray[i] == _root.UserName) {

/* Set the variable 'q' to the variable 'i'. This will be used later to check to see if the User Name matches the right password.  */
q = Number(i);

// Stops the loop:
i = x;

/* This sets the cursor in the Password input box and the variable 'a' to 0, so that if the Tab button is pressed the Movie knows which text box currently has focus.  */
Selection.setFocus("_root.Password");
Selection.setSelection(length(/:Password), length(/:Password));
_root.a = 0;

/* If the User Name is correct, this tells the UserNameRequired Movie Clip to go to the second frame. This essentially tells the user that user name input box is now correct. */
_root.UserNameInputRequired.gotoAndStop(2);

// Run the next function check.
PasswordCheck();
} else if (i == x) {

/* If the loop runs and the User Name entered doesn't match any of the possible array usernames then the following alert is displayed. */
_root.Guide = "Sorry That User Name Is Incorrect. Please Try Again!";

/* If the user name is empty or incorrect, then this tells the UserNameInputRequired Movie Clip to go to the first frame. This essentially tells the user that user name input box is incorrect or empty. */
_root.UserNameInputRequired.gotoAndStop(1);

/* This sets the cursor to the User Name input box and sets the variable 'a' to 1 so that if the Tab button is pressed, the Movie knows which text box currently has focus. */
Selection.setFocus("_root.UserName");
Selection.setSelection(length(/:UserName), length(/:UserName));
_root.a = 1;

// Stops the Movie from going to the next frame:
stop();
}
}
};

// Declares a global function which will check the password input:
_global.PasswordCheck = function() {

/* Ensures that when the User Name is correct, the password field has the cursor in it. Again makes sure that the variable 'a' is set to 0, so the Tab button knows where to set the cursor if the user presses the Tab button. */
Selection.setFocus("_root.Password");
Selection.setSelection(length(/:Password), length(/:Password));
_root.a = 0;

// Checks the password to see if anything has been typed or if it is empty:
if (_root.Password.length == 0 | _root.Password.length == "" | _root.Password eq "") {
stop();

// Tell’s the user that the password is incorrect:
_root.Guide = "No Password Entered Please Try Again!";

/* Ensures that when the User Name is correct, the Password field has the cursor in it . Again makes sure that the variable 'a' is set to 0, so that the Tab button knows where to set the cursor if the user presses the Tab button. */
Selection.setFocus("_root.Password");
Selection.setSelection(length(/:Password), length(/:Password));
_root.a = 0;

/* If the Password is empty or incorrect, then this tells the PasswordInputRequired Movie Clip to got the first frame. This tells the user that password input box is incorrect or empty. */
_root.PasswordInputRequired.gotoAndStop(1);

// Stops the Movie from going to the next frame:
stop();

// Checks to see if the password is only full of spaces.
} else if (_root.Password.isWhiteSpace()) {

// Tells the user that the password is incorrect.
_root.Guide = "Sorry Incorrect Password Entered Please Try Again!";

/* Ensures when the User Name is correct, the password field has the cursor in it. Again it also makes sure that the variable 'a' is set to 0, so that the Tab button knows where to set cursor if the user presses the Tab button. */
Selection.setFocus("_root.Password");
Selection.setSelection(length(/:Password), length(/:Password));
_root.a = 0;

/* If the Password is empty or incorrect, this tells the PasswordInputRequired Movie Clip to go to the first frame. This essentially tells the user that password input box is incorrect or empty. */
_root.PasswordInputRequired.gotoAndStop(1);

// Stops the Movie from going to the next frame:
stop();

// If the password is empty or full of spaces run the next function check:
} else {
PasswordValidationCheck();
}
};

/* This function will check to see if the password entered matches any of the possible array passwords. */
_global.PasswordValidationCheck = function() {

/* Sets the variable 'y' to the length of the array and minuses one away from the array length. This is because the array length is always number higher than it actually is. This is because the array starts at 0 not 1 and computers count 0 as 1. */
y = myPasswordArray.length-1;

/* While the value 'z' is less than the variable value, run the code below once and then add 1 to the value 'z' and check to see if it’s still less than the variable 'z' value. */
for (z=0; z<=y; z++) {

/* Checks to see if the password entered is the same as any of the possible passwords in the array 'myPasswordArray'. */
if (myPasswordArray[z] == _root.Password) {

/* Set the variable 't' to the variable 'z' this will be used later on to check to see if the password matches the right User Name. */
t = Number(z);

// Stop the loop.
z = y;

// Run the last global function check.
FinalyCheck();
} else if (z == y) {

/* If the loop runs and the username entered doesn't match any of the possible array usernames, then this alerts the user that their User Name is incorrect. */
_root.Guide = "Sorry Incorrect Password Entered Please Try Again!";

/* If the User Name is empty or incorrect then this tells the UserNameInputRequired Movie Clip to go to the first frame. This essentially tells the user that user name input box is incorrect or empty. */
_root.UserNameInputRequired.gotoAndStop(2);

/* This sets the cursor back to the User Name input box and sets the variable 'a' to 0 so that if the Tab button is pressed the Movie knows which text box currently has focus. */
Selection.setFocus("_root.Password");
Selection.setSelection(length(/:Password), length(/:Password));
_root.a = 0;

// Stops the Movie from going to the next frame.
stop();
}
}
};

/* If the User Name matches the right password allow user to proceed. The User Name has to match the exact corresponding password. So the User Name 'web' must match the corresponding password 'wasp' etc. */
_global.FinalyCheck = function() {
if (q == t) {
nextFrame();

/* If the loop runs and the username entered doesn't match any of the possible array User Names then this alerts the user that their User Name is incorrect. */
} else {
_root.Guide = "Sorry That Username Doesn't Match That Password. Please Try Again!";

/* If the User Name is empty or incorrect then this tells the UserNameInputRequired Movie Clip to go to the first frame. This tells the user that the User Name input box is incorrect or empty. */
_root.UserNameInputRequired.gotoAndStop(1);

/* This sets the cursor back in the User Name input box and sets the variable a to 1, so that if the Tab button is pressed the Movie knows which text box currently has the focus. */
Selection.setFocus("_root.UserName");
Selection.setSelection(length(/:UserName), length(/:UserName));
_root.a = 1;

// Stops the Movie from going to the next frame.
stop();
}
};

// Declares 'a' as a variable. When the user presses the Tab button it checks this value.
var a = 1;

// Set focus on the User Name input box when Movie first loads.
Selection.setFocus("_root.UserName");
Selection.setSelection(length(/:UserName), length(/:UserName));

// Stop Movie at current frame.
stop();

Your Flash Movie should now be ready!! The next section covers some additional info on: Browser Compatibility & Setting the Cursor's Focus.

Step Six: Browser Compatibility and Setting the Cursor's Focus

Note the red asterisk* and yellow input box.

You will notice from the advanced Movie above that the red asterisk* and yellow input box disappear when you enter the right user name and then the right password. This makes the user name and password look and act like required fields on a web page form. The clever part is that if the user gets the username right but their password wrong, then the password will have the cursor placed in it. However if you also change the user name, then the code recognizes that the user name has changed and if it is incorrect, it sets the cursor back in the user name input box.

To see what I mean type in the user name: web (case sensitive) into the user name input box in the Movie above (leave the password input box empty) and press Enter. Your see the red asterisk* and yellow box disappear from the user name input box. However the password yellow box and red asterisk* remain in the password field. The password input box will now have the cursor blinking inside the password input box.

Cross Ref: For more info on using the Tab Key see the tutorial on the Tab Function

Note - Setting Focus: Flash Movies don't automatically get focus when a web page loads so you have to click on the Flash Movie to give it focus. Currently there is no method known to set focus on a Flash Movie when the web page first loads, and no method which works in ALL Browsers. For most Browsers you have to select (click on) the Flash Movie before it has focus. We can only hope that one day soon Macromedia or the Browser publishers decide to make life easier for us all by changing this. Also remember that if you use the Flash Movie on it’s own (say your making a web site entirely out of Flash) that the Movie will not automatically have focus and that the user will still have to click on it to set the focus.

The old method no longer works in Windows XP Service Pack 2. If you wish to use it, it is as follows:

Change the XXX to the values for the width and height that you require for your Movie.

Change the NameOfYourSWFMovie.swf to the name of the swf Movie file. In the open body tag in your html code change it from <BODY> to <BODY onLoad="window.document.myothermovie.focus();">

This method still works with Windows XP Service Pack 1. There are other ways to set focus on a Flash Movie with JavaScript that will work in Internet Explorer on a Windows Service Pack 2 PC, but there is no method that will work in all Browsers like Mozilla, Netscape etc.

Webwasp Community: Webwasp Mates & Dates

Why not try out webwasp's new community. Meet new people, find friends in your area: Webwasp Mates & Dates

Top of Page • Home • Food • Mates • Members • Tutorials • Forum • Buy Templates • Contact Us