Flash, Flex and ActionScript tutorials – flashadvanced

Now I will show you how to create a simple client login form using AS3 only. You just need two input text fields, one login button and few lines of code. So, let’s get started!

1. Create a new Flash CS 3 document. Size: 400 x 250.

2. Name the first layer “background”, take the rectangle tool, disable the stroke color and for fill color choose radial gradient. Choose the colors you like.

3. 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 can see I made some design for the forms. You can do the same 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:

4. 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”.

5. Create new layer called “actions”. Before we go to the ActionScript we have to complete the last steps. So, select the second frame of the first layer and drag to the last one:

If you made the selection correctly convert the selected frames to keyframes. Now, 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”.
6. Now let’s go to the code. Select the first frame of the “actions” layer and open the actions panel.

Code updated!

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

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

//here we hide the password
password.displayAsPassword = true;
//we want a hand 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 is logged 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);
	}
}

7. Now 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);
}

I think everything here is clear.

Now let’s see the final result

Use “flash” for username and “advanced” for password.