Create a Password Masking Class in ActionScript 3.0

Password fields allow you to create a field, similar to a text field, which users can type into. A password field however, causes everything show up as asterisks (*) so onlookers cannot see what is being typed.

In this tutorial, we'll create a Static Class that will convert an Input TextField to an iPhone-like password field.

Step 1: Brief Overview

We'll make use of the static attribute in ActionScript 3.0 to declare a Class that won't need to be instantiated to be used, this way we can call its methods without creating an object using the new operator.

Our Class will create a Timer that will replace the characters of the target TextField to any given character in the specified time.

Step 2: Starting

Open Flash and create a new Flash File (ActionScript 3).

Set the stage size to 600x300 and add a gray linear background (#EEEEEE, #DDDDDD).

Step 3: Interface

Let's add some graphic details to our application.

Select the Rectangle Tool (R), create a 600x50px rectangle and fill it with #222222.

Create a Static TextField to add a title. I used Helvetica Bold 21pt as TextFormat.

Use the Rectangle Primitive Tool to create a 200x30px rectangle (#AAAAAA) and change the radius to 6.00. Duplicate this shape (Cmd + D), resize it to 198x28px, change its color to #EEEEEE and center it in the previous shape.

Add some text to label the field.

This will complete the graphic part.

Step 4: Password Field

We will create an Input TextField that we'll use to get the user's input, and to specify a target in our password masking class.

Select the Text Tool (T) and place an Input TextField in the background we created before. Set its instance name to passField.

Step 5: ActionScript!

Create a new ActionScript Document and save it as iPass.as. This will be our static class.

Step 6: Required Classes

The classes we'll need. For specific information please refer to the Flash help (F1).


package classes
{
	import flash.display.Sprite;
	import flash.text.TextField;
	import flash.utils.Timer;
	import flash.events.TimerEvent;
	import flash.ui.Keyboard;
	import flash.events.KeyboardEvent;

Step 7: Extending the Class

We're going to use Sprite specific methods and properties so we extend using the Sprite Class.

1
2	public class iPass extends Sprite
3	{

Step 8: Variables

These are the variables we will use, explained in the comments. Notice that the variables are declared as static to have access without an instance.


public static var pass:String = ""; //This will store the original password for any use
public static var target:TextField; //The TextField to mask
private static var regExp:RegExp = /./g; //A Regular Expresion, looks for ALL the characters
public static var timer:Timer = new Timer(1000); //Timer object, will execute every second, when called

Step 9: Main Function

This is the method we will call to use the class.


public static function maskTextField(t:TextField):void //We need a parameter that will specify the target TextField
{
	target = t;
	addListeners();
}

Step 10: Replace Function

This is the function that will replace the characters in the target field.


private static function replaceOnTime(e:TimerEvent):void
{
	target.text = target.text.replace(regExp, "•"); //Replaces all the characters in the textfield with "•"
	timer.stop(); //Stops the timer when the characters are replaced
}

Step 11: Start Timer

This function will start the Timer when the target textfield is in focus and a key is pressed.


private static function startTimer(e:KeyboardEvent):void
{
	/* If the timer is not running, start it, else, reset timer, replace all characters but last, and run timer again */

	!timer.running ? timer.start() : timer.reset(); var msk:String = target.text.substring(0, target.length - 1); target.text = msk.replace(regExp, "•") + String.fromCharCode(e.charCode);timer.start();

	/* Filters valid keys, from a to Z */

	for (var i:int = 65; i < 123; i++)
	{
		if (e.charCode == i)
		{
			pass += String.fromCharCode(i);
		}
	}

	if (e.keyCode == Keyboard.BACKSPACE)
	{
		pass = pass.substring(0, pass.length - 1); //If delete is pressed, delete last char
	}
}

Step 12: Listeners

Adds the listeners to the Timer and TextField objects.


private static function addListeners():void
{
	timer.addEventListener(TimerEvent.TIMER, replaceOnTime);
	target.addEventListener(KeyboardEvent.KEY_UP, startTimer);
}

Step 13: Main Class

This class will call the iPass static class and pass the TextField in stage as a parameter.

Create a new ActionScript Document and save it as Main.as.


package classes
{
	import classes.iPass;
	import flash.display.Sprite;
	
	public class Main extends Sprite
	{
		public function Main():void
		{
			iPass.maskTextField(passField); //Calls the iPass class
		}
		
		/*private function getPassword():void
		{
			trace(iPass.pass); //An example of how to get the password
		}*/
	}
}

Step 14: Document Class

Go back to the .Fla file and in the Properties Panel add classes.Main in the Class field to make it the Document Class.

Conclusion

You have now created a password masker class and learned how to create and use a Static Class - experiment with its advantages!

Thanks for reading!