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).
1 |
|
2 |
package classes |
3 |
{
|
4 |
import flash.display.Sprite; |
5 |
import flash.text.TextField; |
6 |
import flash.utils.Timer; |
7 |
import flash.events.TimerEvent; |
8 |
import flash.ui.Keyboard; |
9 |
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.
1 |
|
2 |
public static var pass:String = ""; //This will store the original password for any use |
3 |
public static var target:TextField; //The TextField to mask |
4 |
private static var regExp:RegExp = /./g; //A Regular Expresion, looks for ALL the characters |
5 |
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.
1 |
|
2 |
public static function maskTextField(t:TextField):void //We need a parameter that will specify the target TextField |
3 |
{
|
4 |
target = t; |
5 |
addListeners(); |
6 |
}
|
Step 10: Replace Function
This is the function that will replace the characters in the target field.
1 |
|
2 |
private static function replaceOnTime(e:TimerEvent):void |
3 |
{
|
4 |
target.text = target.text.replace(regExp, "•"); //Replaces all the characters in the textfield with "•" |
5 |
timer.stop(); //Stops the timer when the characters are replaced |
6 |
}
|
Step 11: Start Timer
This function will start the Timer when the target textfield is in focus and a key is pressed.
1 |
|
2 |
private static function startTimer(e:KeyboardEvent):void |
3 |
{
|
4 |
/* If the timer is not running, start it, else, reset timer, replace all characters but last, and run timer again */
|
5 |
|
6 |
!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(); |
7 |
|
8 |
/* Filters valid keys, from a to Z */
|
9 |
|
10 |
for (var i:int = 65; i < 123; i++) |
11 |
{
|
12 |
if (e.charCode == i) |
13 |
{
|
14 |
pass += String.fromCharCode(i); |
15 |
}
|
16 |
}
|
17 |
|
18 |
if (e.keyCode == Keyboard.BACKSPACE) |
19 |
{
|
20 |
pass = pass.substring(0, pass.length - 1); //If delete is pressed, delete last char |
21 |
}
|
22 |
}
|
Step 12: Listeners
Adds the listeners to the Timer and TextField objects.
1 |
|
2 |
private static function addListeners():void |
3 |
{
|
4 |
timer.addEventListener(TimerEvent.TIMER, replaceOnTime); |
5 |
target.addEventListener(KeyboardEvent.KEY_UP, startTimer); |
6 |
}
|
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.
1 |
|
2 |
package classes |
3 |
{
|
4 |
import classes.iPass; |
5 |
import flash.display.Sprite; |
6 |
|
7 |
public class Main extends Sprite |
8 |
{
|
9 |
public function Main():void |
10 |
{
|
11 |
iPass.maskTextField(passField); //Calls the iPass class |
12 |
}
|
13 |
|
14 |
/*private function getPassword():void
|
15 |
{
|
16 |
trace(iPass.pass); //An example of how to get the password
|
17 |
}*/
|
18 |
}
|
19 |
}
|
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!