ActionScript: User Name & Password	Home • Food • Mates • Members • Tutorials • Forum • Buy Templates • Contact Us

Flash Tutorial - User Name and Password

Free Flash Tutorial

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();

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");

3. Place a button on Stage with the word: Enter

Cross Ref: To learn how to create buttons see the tutorial: Buttons

4. Place the button with the word Enter onto the stage in: Frame 1
5. Now with the buttons selected add the following code:
   
// 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)