Develop an Age Verification Form Using ActionScript 3

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 600×300 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 350×180 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.

package
{

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.

import flash.display.Sprite;
import flash.events.MouseEvent;
import fl.transitions.Tween;
import fl.transitions.easing.Strong;
import fl.transitions.easing.Back;
import flash.net.URLRequest;

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.

public class Main extends Sprite
{

Step 13: Variables

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

private var tween:Tween; //A tween object to perform animations

private var minimumAge:int = 21; //The minimum age required to display the content
private var tooOldAge:int = 130; //A person can't be this old (and if it is it probably will not be using an app like this ;)
private var months:Array = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"]; //An array of the abbreviations of the months
private var currentDate:Date = new Date(); //The current date
private var userBirth:Date; //Will store the user birthdate
private var userAge:Number; //Will store the user age

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.

public function Main():void
{
	//Tweens the panel from up to the center
	tween = new Tween(panel,"y",Strong.easeOut, -  panel.height,stage.stageHeight / 2,0.5,true);
	//Adds an event listener to the Enter button and calls the verifyAge function when activated
	panel.enterButton.addEventListener(MouseEvent.MOUSE_UP, verifyAge);
}

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.

private function monthToNumber(month:String):int //A string of the month abbreviation is needed
{
	var monthNumber:int; //Will store the month number

	//The next for will loop through the array comparing the array months to the one written by the user

	for (var i:int = 0; i < months.length; i++)
	{
		if (panel.monthField.text == months[i])
		{
			monthNumber = i; //If the month matches is stored
		}
	}

	return monthNumber; //And then returned as the function value
}

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.

private function verifyAge(e:MouseEvent):void
{

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.

userBirth = new Date(int(panel.yearField.text),monthToNumber(panel.monthField.text),int(panel.dayField.text));

Step 18: Calculate User Age

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

userAge = Math.floor((Number(currentDate) - Number(userBirth)) / (1000*60*60*24) / 365);

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.

if (userAge > tooOldAge)
{
	panel.messages.textColor = 0xAA0000;
	panel.messages.text = "You can't be " + userAge + " years";
}

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.

else if (userAge >= minimumAge)
{
	panel.messages.textColor = 0xF2DC57;
	panel.messages.text = "WELCOME";
	tween = new Tween(panel,"x",Back.easeIn,panel.x,stage.stageWidth + panel.width / 2 + 10,0.3,true); //Animates the panel
	loadContent();
}

Step 21: Check for People from the Future

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

else if (userBirth.getFullYear() > currentDate.getFullYear())
{
	panel.messages.textColor = 0xAA0000;
	panel.messages.text = "Are you 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.

else
{
	panel.messages.textColor = 0xAA0000;
	panel.messages.text = "You must be " + minimumAge + " or over";
	redirect();
}

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.

private function loadContent():void
{
	//Content goes here
}

Step 24: Redirect

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

private function redirect():void
{
	//navigateToURL(new URLRequest("http://www.tutsplus.com"));
}

Conclusion

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!

Leave a Reply

Your email address will not be published. Required fields are marked *