Using Input Text boxes - 2

A simple login system

In this tutorial you will create a simple login system that requires a user to enter a password to gain access to another section of the application.

  1. Open Flash and create a new movie.

  2. Select the Text Tool and draw a text box on the stage. Open the Properties Inspector and change the Text Type to ‘Input Text’, and the Instance Name to ‘passwordText’. You should also select the option to 'Show border around text' so that the text box shows up against the background.

  3. Next, create a button and place it on the stage.

  4. Attach the following Actionscript to the button instance:
    on (release){
    	if (passwordText.text=="pluto"){
    		trace("WELCOME - Password correct");
    	} else {
    		trace("ERROR - Password incorrect");
    	}
    }
    

  5. Your application should look something like that shown in the diagram above. Test your application, type the password 'pluto' into the Input Text box, then click the login button. The program should respond with a message telling you if the password was correct or incorrect.

    Next we need to add some more frames and code to the application so that it actually does something when the user successfully logs in or fails to log in.

  6. First place a 'stop' command in the first frame of the movie. This will stop the movie from playing continuously.

  7. Next add blank keyframes at Frames 2 and 3.

  8. Place some text on Frame 2 saying 'Welcome - login successful'. Place some text on Frame 3 saying 'Error - password incorrect'.

  9. Replace the button code with the following:
    on (release){
    	if (passwordText.text=="pluto"){
    		gotoAndStop(2);
    	} else {
    		gotoAndStop(3);
    	}
    }
    
  10. Test your movie and ensure it works as expected.

    Try it below:-

Additional things to try

  1. Set the Line Type to 'password' so that the password appears as asterisks on the screen.

  2. Add a second button that allows the user to try logging in again if unsuccessful the first time.

  3. Add a counter that keeps track of unsuccessful logins and displays a special message if more than 3 attempts at logging in are unsuccessful.