Tutorial Details

• Difficulty: Beginner
  
• Program: Flash
  
• Estimated Completion Time: 1 hour
  

Tweet



Share




Download Source Files


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.

[You must be registered and logged in to see this image.]



Step 3: Interface



[You must be registered and logged in to see this image.]

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.

[You must be registered and logged in to see this image.]



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.

[You must be registered and logged in to see this image.]

Convert the shape to MovieClip and add the following filter:

[You must be registered and logged in to see this image.]

You should end with something like this:

[You must be registered and logged in to see this image.]

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.

[You must be registered and logged in to see this image.]



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.

[You must be registered and logged in to see this image.]



Step 8: Action Button



[You must be registered and logged in to see this image.]

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.

[You must be registered and logged in to see this image.]



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.view source

print?

1

package

2

{

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.view source

print?

3	import flash.display.Sprite;

4	import flash.events.MouseEvent;

5	import fl.transitions.Tween;

6	import fl.transitions.easing.Strong;

7	import fl.transitions.easing.Back;

8	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.view source

print?

10	public class Main extends Sprite

11

{

Step 13: Variables


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












google_protectAndRun("render_ads.js::google_render_ad", google_handleError, google_render_ad);
view source

print?

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

13

14	private var minimumAge:int = 21; //The minimum age required to display the content

15	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

16	private var months:Array = ]"Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"]; //An array of the abbreviations of the months

17	private var currentDate:Date = new Date(); //The current date

18	private var userBirth:Date; //Will store the user birthdate

19	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.view source

print?

21	public function Main():void

22

{

23	//Tweens the panel from up to the center

24	tween = new Tween(panel,"y",Strong.easeOut, - panel.height,stage.stageHeight / 2,0.5,true);

25	//Adds an event listener to the Enter button and calls the verifyAge function when activated

26	panel.enterButton.addEventListener(MouseEvent.MOUSE_UP, verifyAge);

27

}

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.view source

print?

27	private function monthToNumber(month:String):int //A string of the month abbreviation is needed

28

{

29	var monthNumber:int; //Will store the month number

30

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

32

33	for (var i:int = 0; i < months.length; i++)

34

{

35	if (panel.monthField.text == months[i])

36

{

37	monthNumber = i; //If the month matches is stored

38

}

39

}

40

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

42

}

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.view source

print?

42	private function verifyAge(e:MouseEvent):void

43

{

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.view source

print?

44	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.view source

print?

46	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.view source

print?

48	if (userAge > tooOldAge)

49

{

50	panel.messages.textColor = 0xAA0000;

51	panel.messages.text = "You can't be " + userAge + " years";

52

}

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.view source

print?

53	else if (userAge >= minimumAge)

54

{

55	panel.messages.textColor = 0xF2DC57;

56	panel.messages.text = "WELCOME";

57	tween = new Tween(panel,"x",Back.easeIn,panel.x,stage.stageWidth + panel.width / 2 + 10,0.3,true); //Animates the panel

58	loadContent();

59

}

Step 21: Check for People from the Future


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

print?

60	else if (userBirth.getFullYear() > currentDate.getFullYear())

61

{

62	panel.messages.textColor = 0xAA0000;

63	panel.messages.text = "Are you from the future?";

64

}

Step 22: Under Required Age


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

print?

65

else

66

{

67	panel.messages.textColor = 0xAA0000;

68	panel.messages.text = "You must be " + minimumAge + " or over";

69	redirect();

70

}

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.view source

print?

73	private function loadContent():void

74

{

75	//Content goes here

76

}

Step 24: Redirect


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

print?

78	private function redirect():void

79

{

80	//navigateToURL(new URLRequest("http://www.tutsplus.com"));

81

}

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