jump to navigation

Basic log-in for your Flash file September 21, 2010

Posted by Tournas Dimitrios in Flash.

This log-in is only for learning purposes . On production environments a more secured approach must be implemented (any server-side web application like PHP ) .

login_btn.buttonMode = true;  //show hand cursor

//adding event listener
login_btn.addEventListener(MouseEvent.CLICK , loginUser);

	function loginUser(evt:MouseEvent):void {
//if username & password are correct allow entry
	if(userTxt.text == "admin" && passTxt.text =="yourPassword"){
}else {
//otherwise show an error message
	alert.color = oxff0000 ; //red font
	messageTxt.text = "Incorrect username or password ";

Now for the log-out

logout_btn.buttonMode = true ; //show hand cursor

//adding event listener
logout_btn.addEventListener(MouseEvent.CLICK , logoutUser);

	function logoutUser(evt:MouseEvent):void{



Need some step by step explanation how to build it ?

Step 1

  • Create a new flash AS 3 document
  • Go to Properties tab and press Edit button and set the width of your document to 510 pixels and the height to260  pixels.
  • Select black color as background .
  • Change the layer name to background( double click on it ).
  • Take the RectAngle toll (R) and create a recentangle covering the stage , for this use no stroke and any color.
  • Convert it to a movie clip and call it background.
  • Place this background movieclip onto the center of the stage leaving a boarder

Step 2

  • Create another layer and name it header
  • Take the Text Toll (T) and create a header using any font you want.
  • Create another layer and name it text imput.
  • Take the RectAngle toll (R) and create 2 text input areas (height 200px and weight 30px, triangle options of 7.8)
  • Now place both text boxes and on top of each other, and  place a dynamic text field on top of each of them
  • Change the Instance name to userTxt (for username), and passTxt(for password)
  • Create another layer and name it text.
  • On the right for each text input in the text layer, place the text USERNAME(top text input), and PASSWORD for the lower text input.
  • Above the text input you will place a dynamic text field (message layer), (any message you want ) and change the Instance name to messageTxt.
  • Create another layer above the text layer and name it button.
  • Take the RectAngle toll (R) and create a square(80X 25) and place the text login in the center , convert it to movieclip simbol with the name login_btn.

Step 3

  • Create keyframes for the second frame of the movie.
  • We will only have the header, below the header will be a text field with a message, and below this another text box(telling people to remember to logout when they are done) to the right of the text box is another movieclip of a button, but this one has the text logout instead of login, and has an instance name of logout_btn.
  • I also made the text white just to be a little differrent.

Step 4

Create the last layer and name it actionscript. And paste the actionscript code !



1. free movies online - October 7, 2010

Top website, I had not come across tournasdimitrios1.wordpress.com earlier during my searches!
Continue the excellent work!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s