User Name & Password

Home • Members Tutorials Forum iSnapChat Contact Us 

 


Flash Tutorials

   

Flash Tutorial - User Name and Password

 

Free Flash Tutorial

 

 

 

In this tutorial, you will learn how to create a Flash Movie that allows people to access it only if they have both a User Name and a Password. This password control system can allow access to the Flash Movie (or part of a Flash Movie) or access to separate web page.

 

The User Input Boxes described in this tutorial know if the Text Fields are empty or full of blank spaces. This type of Input Box can be used in many different situations or types of forms. Using this method, the Movie will detect if the Input Boxes are empty or just full of spaces, and stop the Flash Movie from allowing the user to move on.

Important Note: Never use Flash Password protection for highly sensitive material. It is ok for low security material only. Flash files can be hacked into (for people who are into that sort of thing). Bear in mind that the vast majority of people on the net will have no idea of how to hack into a Flash file (or interest), and so information stored behind the password is quite safe from most peoples eyes.

 

Don't write in and ask me how to hack into a Flash file as I will not tell you, and if I see any such postings on the forum I will delete them.


Example: Download the Flash file Int 125a


Note: Both the User Name is: web and the Password is: wasp (case sensitive)

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

This code used in the Movie above is very clever and knows if the user name or password is empty or only full of blank spaces. Normally methods like _root.MyInputBox.length == 0; _root.MyInputBox.length == ""; _root.MyInputBox eq ""; don’t work. Also the following does NOT work:

on (press) { //do not use this code - it does not work !!
    if (_root.MyInputBox.length == 0 | _root.MyInputBox.length == "" | _root.MyInputBox eq "") {
        stop();
    } else {
        nextFrame();
    }
}

You will learn how to set the ActionScript get over this problem of blank or empty spaces...


Step One: Setting up the Document

  1. Go to Modify > Document
  2. Set the document size to: 550 x 150 pixels
  3. Select a: Background colour
  4. Click: OK
  5. Use the Text tool to type: Password:
  6. Then type: User Name:
  7. Then type: Guide:
  8. You should end up with three separate lines of Static Text: Password, User Name, and Guide:


    Your Flash Movie should look similar to this.


Step Two: Create the Input Box

  1. Select the Text tool and drag a text box on stage next to the static User Name text you put on the stage before.
    If you have dragged the text tool you should get a paragraph text box which has a square in the top right hand corner:
  2. If the Property Inspector is closed, open it: Window > Properties (Ctrl F3)
  3. With the text box still highlighted from the drop down menu select: Input Text


  4. Select the: Font, Style, Size and Colour


  5. Select: Left Justify
  6. If your Property panel is in collapsed view, click on the down arrow in the bottom right corner of the Property panel to expand the panel. If you have an up arrow your panel is already expanded.

  7. For line type select: Single Line


  8. Select: Show Borders Around Text

    1. For Variable Name (Var) type: UserName

      Note:
      variable names are case sensitive and do not use spaces. The Instance name should be left blank.


      Your Property Inspector should look like this.

  9. Now do the same again for the Password input box with two differences:


    Your Property Inspector should look like this.

    Note: When making your UserName and Password Input boxes it’s a good idea to make them the same width and height and use the same font type, colour, size and etc.

  10. Now create the last Text Box next to the label: Guide with the following differences:


Step Three: The ActionScript

  1. Create a New layer and call it: Action Script
  2. Now add this code to the first frame of your new Action Script layer:

    Note: If you wish you can miss out the comments (//text in gray). It makes no difference to the code if you include it or not, it's just there to explain how the code works. Comments used here start with // and are all typed on a single line.
    You also do not need the blank lines, they are there to make the script easier to read.

// This is a global function that checks the input boxes are not 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 input boxes so that if the user logs in a second time the old information is deleted.
var UserName = "";
var Password = "";

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

// Declares a global function which can be called any time from any where in the flash movie
_global.nextcheck = function() {

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

        // Alerts the user that their password is incorrect
        _root.Guide = "No Password Entered Please Try Again";

        // 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()){

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

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

        // Checks to see if the password is right or not
    } else if (_root.Password == "wasp") {

        // If the password is correct movie on to the next frame of the movie
        nextFrame();

    }
else {

        // If the password is wrong then alert the user that it's wrong
        _root.Guide = "Sorry Incorrect Password Entered Please Try Again";

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

Tip: In the ActionScript above to type the line: | use: Shift + Back Slash \

Note:
If you wanted the Movie to direct the user to a new web page, replace the line nextFrame(); with the web address for example:

getURL("http://www.webwasp.co.uk");

  1. Place a button on Stage with the word: Enter
  2. Cross Ref: To learn how to create buttons see the tutorial: Buttons

  3. Place the button with the word Enter onto the stage in: Frame 1
  4. Now with the buttons selected add the following code:
  5. // When the enter button is pressed and then released do the following:
    on (release, releaseOutside) {

        // Checks the User Name to see if anything has been typed in or if it is empty.
        //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 "") {

        // Alerts the user that their user name is incorrect
        _root.Guide = "No User Name Entered Please Try Again";

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

        // Check to see if the User Name is right
    } else if (_root.UserName == "web") {

        // Calls the global function to check the password if the User Name is right
        nextcheck();

    // If User Name is wrong then alert the user
    } else {

        // Alerts the user that their user name is incorrect
        _root.Guide = "Sorry Incorrect User Name Entered Please Try Again";

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

  6. Right click (Mac: Ctrl click) on frame 2 and select: Insert Blank Keyframe

    The user will have to type in the user name and password (web / wasp - case sensitive) to get to the second frame of the movie. It is here that you want to place the content of the Movie.

    Note: To make it easier to test the Movie, you may want to add a temporary Back Button. Drag a Button on Stage (you can use the same one you used in frame 1) and place the following ActionScript:

    on (press) {
        prevFrame();
    }

  7. Test your Movie. You should find that the User Name and Password Input boxes work correctly. Try also putting incorrect information into the Input boxes. The Guide should give you appropriate information depending on what is incorrect: Windows > Test Movie (Ctrl + Enter)


Step Four: Option: Setting Multiple User Names and Passwords

Most people will want to have more than one user! The above ActionScript is only good for a single user. If you have a small number of users you can add the ActionScript below. It is easy to add the script but there is one snag. The User Name is not linked to any particular Password. In other words I could use my User Name and any of the listed passwords not just my own. But both the User Name and the Password have to be typed exactly as listed in the ActionScript. Now if you only have a few users that is probably not a problem and there is no way that the Users would ever know that there is a security vulnerability. In the next tutorial I will show you how to match individual User Names with their own unique Password. I have not done so here because it is complicated and for many people the solution below is secure enough.

  1. To add more possible passwords:

    Look for the this line of ActionScript (as detailed in Step three, point 2  above) where it says:

    } else if (_root.Password == "wasp") {


    Edit the above line to look like this:

    } else if (_root.Password == "wasp" | _root.Password == "MyOtherPassword" | _root.Password == "MyFinalPassword" ) {

    You can change the word between the "quotes" as required and to add more possible passwords just keep adding a, line between the open and close brackets like this:

    | _root.Password == "WhatEver"
  2. Note: The vertical line: | used in script above stands for or. Knowing this makes it easier to read: This password or this password or this password etc.

  3. To add more User Names:

    Look for the this line of ActionScript (as detailed in Step three, point 5 above) where t says:

    } else if (_root.UserName == "web") {


    Edit the above line to look like this:

    } else if (_root.UserName == "web" | _root.UserName == "bob" | _root.UserName == "cat") {

    As before, change the word in the "quotes" and add as many User Names as you need.


Important Warning!

It is possible for people to hack Flash files and get access to the passwords and usernames. Never rely on a Flash Movie to protect really important or valuable information, as its not secure enough. The best protection against hacking is in the Publish Settings. To make your Movie much more secure, go to the Publish Settings and select:

To access the Publish setting open your Flash file and go to: File > Publish Settings > Select Flash > Flash Tab


Cross Ref: If you would like to add some additional features to your User Name/Password controls see the next Tutorial: User Name and Password - Advanced

 

Please indicate what you thought of this tutorial 
10 is the best: 
10 9 8 7 6 5 4 3 2 1


Phil Schulz's Facebook Profile
Webwasp is Phil Schulz's baby. You are welcome to contact me or become my Facebook friend: Click here

 Top of Page HomeMembers Tutorials Forum iSnapChat Contact Us 
 All material on this site is protected under international copyright © law. DO NOT reproduce any material from this site without written permission. Please ask as permission is often granted.