Advertisement
  1. Code
  2. ActionScript
Code

Create a Password Masking Class in ActionScript 3.0

by
Difficulty:IntermediateLength:ShortLanguages:

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).

Step 7: Extending the Class

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

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.

Step 9: Main Function

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

Step 10: Replace Function

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

Step 11: Start Timer

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

Step 12: Listeners

Adds the listeners to the Timer and TextField objects.

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.

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!

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.