Flash login tutorial

Step 1

• Start by creating a new Flash CS 3 document. Size: 400 x 250.
• Change the name of the first layer to “background”,
• Take the rectangle tool and disable the stroke color and for fill color choose radial gradient.
• Choose the colors you like.

Step 2

• Create a new layer named “inputs”.
• Create two input text fields with same size.
• Give the first text field instance name “username” and the second “password”.
• You need to  make some design for the forms, or  just download the example and use mine.
• Now we have to make our status text field.
• Create a new dynamic text field with instance name “statusTxt”.
  • Don’t forget to embed the font for all of the text fields, see Fig 1.

Fig 1

Step 3

• Create new layer called “button”.
• Take the rectangle tool and draw a rectangle.
• Create a static text field and write “login”.
• Select both the rectangle and the text field and convert them to movie clip.
• Give it an instance name “loginBtn”.

Step 4

• Create new layer called “actions”.
• Select the second frame of the first layer and drag to the last one,see Fig 2.

Fig 2

• Convert the selected frames to keyframes.
• We have to change some of the second frames. Delete everything from the “inputs” layer and create a static text telling the user that he is logged in successfully.
• Select the “button” layer, delete the login button and create the same button for logging out and give it an instance name “logoutBtn”.

Step 5

• Select the first frame of the “actions” layer and open the actions panel.

//We don't want to go to the second frame immediately
stop();

//To secure the login form we must hide the context menu
var cMenu:ContextMenu = new ContextMenu();
cMenu.hideBuiltInItems();
contextMenu = cMenu;

//hide the password
password.displayAsPassword = true;
//The cursor for our button movie clip
loginBtn.buttonMode = true;
//adding event listener to the login button
loginBtn.addEventListener(MouseEvent.CLICK, loginFunction);

function loginFunction(e:MouseEvent):void{
	//if both username and password are correct the user will log in
	if(username.text == "flash" && password.text == "advanced"){
		gotoAndStop(2);
	}else{
		//else an error message shows up
		var fmt:TextFormat = new TextFormat();
		//we need a text format to change the color to red
		fmt.color = 0xff0000;
		statusTxt.text = "Incorrect username or password";
		statusTxt.setTextFormat(fmt);
	}
}

Step 6

• You need to go to the second frame of the actions layer and enter this block of code:

stop();

logoutBtn.buttonMode = true;
logoutBtn.addEventListener(MouseEvent.CLICK, gotoPrevious);

function gotoPrevious(e:MouseEvent):void{
	gotoAndPlay(1);
}

User :flash
Password: advanced

Download the source: flash login form.zip