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 thisprivate 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!