Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
  1. Code
  2. ActionScript

Develop an Age Verification Form Using ActionScript 3

Read Time:6 minsLanguages:

In this tutorial, we'll learn how to develop and implement an Age Verification form for use in your websites or applications. Read on to find out more!

Final Result Preview

Let's take a look at the final result we will be working towards:

Step 1: Overview

Making use of the Date class we'll compare the user birthdate to the current date. Firstly though, we'll pull together a nice looking interface using Flash CS5 and the drawing tools.

Step 2: Document Settings

Launch Flash and create a new document. Set the stage size to 600x300px, and the frame rate to 24fps.

Step 3: Interface

This is the interface we'll use, a gradient background with a semi-transparent black panel. This panel contains a series of TextFields that will display feedback to the user and will capture the user input.

There is also a button to perform the age verification.

Step 4: Background

Select the Rectangle Tool (R) and create a 600x300 px rectangle. Place it on the center of the stage and fill with this radial gradient: #F2DC57 to #E9B31B.

Step 5: Panel Background

Select the Rectangle Primitive Tool (R) then create a 350x180 px rounded rectangle with a 7px corner radius and fill it with #111111 60% alpha. Center it in stage.

Convert the shape to MovieClip and add the following filter:

You should end with something like this:

Step 6: Static TextFields

We'll create a series of static Textfields that will tell the user where to enter the data. Nothing too difficult. The format used is: DIN Bold, 17px, #DDDDDD.

Step 7: Dynamic and Input TextFields

Four more TextFields are needed in the interface, the first one is a Dynamic TextField that will display different messages, it has "Date of Birth" written by default, name this field messages.

The other three are Input TextFields, needed to capture the user birthdate, the instance names are: monthField, dayField, yearField.

Step 8: Action Button

A button will be used to call the function that will verify the user age.

Use the Text Tool to create a basic character-based button and name it enterButton.

Step 9: New ActionScript Class

Create a new (Cmd + N) ActionScript 3.0 Class and save it as Main.as in your class folder.

Step 10: Package

The package keyword allows you to organize your code into groups that can be imported by other scripts, it's recommended to name them starting with a lowercase letter and use intercaps for subsequent words for example: myClasses. It's also common to name them using your company's website: com.mycompany.classesType.myClass.

In this example, we're using a single class, so there isn't really a need to create a classes folder.

Step 11: Import Directive

These are the classes we'll need to import for our class to work, the import directive makes externally defined classes and packages available to your code.

Step 12: Declare and Extend the Class

Here we declare the class using the class definition keyword followed by the name that we want for the class, remember that you have to save the file using this name.

The extends keyword defines a class that is a subclass of another class. The subclass inherits all the methods, properties and functions, that way we can use them in our class.

Step 13: Variables

These are the variables we'll use, read the comments in the code to find out more about them.

Step 14: Constructor

The constructor is a function that runs when an object is created from a class, this code is the first to execute when you make an instance of an object or runs using the Document Class.

Step 15: Handle Months

The following function converts the month string written by the user to the month number, this way it can be used in the Date class.

Step 16: Verify Age

The next function will be executed when the user clicks the Enter button, it contains most of the main code so it will be analyzed in parts.

Step 17: Convert Strings to Date

This line converts the strings written in the Input TextFields to a valid date object, this way we can compare the dates later.

Notice the use of the monthToNumber function here.

Step 18: Calculate User Age

Another important part, the next line calculates the user age by subtracting the Dates and dividing the result.

You're probably wondering why we are dividing using (1000*60*60*24) / 365, this is (milliseconds*seconds*minutes*hours) / days. That's why we get the years.

Step 19: Check for Too Old People

Time to check user age, but first let's add some error testing.

The next lines will check the tooOldAge to see if the user input is a realistic age.

Step 20: Let User Pass

If the user age is over the minimum age (in this case 21), display a welcome message and load the actual app content.

Step 21: Check for People from the Future

Another error test, this time for people claiming to be from the future.

Step 22: Under Required Age

And lastly, a message to the user that hasn't the required age to enter the site.

Step 23: Load Actual Content

This function is called when the user passes the age verification, it's the place to start loading the actual site content.

Step 24: Redirect

If the user fails the age verification (is under age) it will be redirected to another site.


Try modifying the parameters of the file, the minimum age, the maximum age and add some real content, use it in your projects!

Thanks for reading this tutorial, I hope you've found it useful!

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