Share
Dans ce didacticiel, nous allons apprendre à développer et à mettre en œuvre un formulaire de vérification de l'âge à utiliser dans vos sites Web ou vos applications. Continuez de lire pour en savoir davantage!
Jetons un coup d'œil au résultat final sur lequel nous allons travailler:
En utilisant la classe Date, nous comparerons la date de naissance de l'utilisateur à la date du jour. Tout d’abord, nous allons créer une interface attrayante à l’aide de Flash CS5 et des outils de dessin..
Lancez Flash et créez un nouveau document. Définissez la taille de la scène sur 600x300px et la cadence sur 24 images par seconde..
C'est l'interface que nous allons utiliser, un fond dégradé avec un panneau noir semi-transparent. Ce panneau contient une série de champs de texte qui afficheront les commentaires de l'utilisateur et captureront les entrées de l'utilisateur..
Il y a aussi un bouton pour effectuer la vérification de l'âge.
Sélectionnez l'outil Rectangle (R) et créez un rectangle de 600x300 px. Placez-le au centre de la scène et remplissez-le avec ce dégradé radial: # F2DC57 à # E9B31B.
Sélectionnez l'outil Rectangle Primitive (R), puis créez un rectangle arrondi de 350x180 px avec un rayon de 7px et remplissez-le avec # 111111 60% alpha. Centrer dans la scène.
Convertissez la forme en MovieClip et ajoutez le filtre suivant:
Vous devriez finir avec quelque chose comme ceci:
Nous allons créer une série de champs de texte statiques qui indiqueront à l'utilisateur où saisir les données. Rien de trop difficile. Le format utilisé est le suivant: DIN Bold, 17px, #DDDDDD.
Quatre autres champs de texte sont nécessaires dans l’interface. Le premier est un champ de texte dynamique qui affiche différents messages. La date de naissance est «Date de naissance», nommez ce champ par défaut. messages.
Les trois autres sont Input TextFields, nécessaires pour capturer la date de naissance de l'utilisateur. Les noms d'instance sont les suivants: monthField, dayField, yearField.
Un bouton sera utilisé pour appeler la fonction qui vérifiera l'âge de l'utilisateur.
Utilisez l'outil Texte pour créer un bouton de base basé sur des caractères et nommez-le. enterButton.
Créez une nouvelle classe ActionScript 3.0 (Cmd + N) et enregistrez-la sous Main.as dans votre dossier de classe.
Le mot clé package vous permet d'organiser votre code en groupes pouvant être importés par d'autres scripts. Il est recommandé de les nommer en commençant par une lettre minuscule et d'utiliser des interconnexions pour les mots suivants, par exemple: mes classes. Il est également courant de les nommer sur le site Web de votre entreprise: com.mycompany.classesType.myClass.
Dans cet exemple, nous utilisons une seule classe. Il n'est donc pas nécessaire de créer un dossier de classes..
paquet
Ce sont les classes que nous devons importer pour que notre classe fonctionne, le importation directive met à la disposition de votre code des classes et des packages définis en externe.
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;
Ici, nous déclarons la classe en utilisant le classe mot-clé de définition suivi du nom que nous voulons pour la classe, rappelez-vous que vous devez enregistrer le fichier en utilisant ce nom.
le s'étend mot-clé définit une classe qui est une sous-classe d'une autre classe. La sous-classe hérite de toutes les méthodes, propriétés et fonctions, ainsi nous pouvons les utiliser dans notre classe.
public class Main étend Sprite
Ce sont les variables que nous allons utiliser, lisez les commentaires dans le code pour en savoir plus à leur sujet.
privé tween: Tween; // Un objet d'interpolation pour effectuer des animations private var minimumAge: int = 21; // L'âge minimum requis pour afficher le contenu privé var var tooOldAge: int = 130; // Une personne ne peut pas être aussi vieille (et si c'est le cas, elle n'utilisera probablement pas une application comme celle-ci;) private var months: Array = ["Jan", "Feb", "Mar", "Apr", "Mai", "juin", "juillet", "août", "sept", "oct", "nov", "déc"]; // Un tableau des abréviations des mois private var currentDate: Date = new Date (); // Date courante private var userBirth: Date; // va stocker l'utilisateur birthdate private var userAge: Number; // va stocker l'âge de l'utilisateur
Le constructeur est une fonction qui s'exécute lorsqu'un objet est créé à partir d'une classe. Ce code est le premier à s'exécuter lorsque vous créez une instance d'un objet ou que vous l'exécutez à l'aide de la classe de document..
public function Main (): void // Répond le panneau du centre jusqu'au centre tween = new Tween (panel, "y", Strong.easeOut, - panel.height, stage.stageHeight / 2,0.5, true); // Ajoute un écouteur d'événement au bouton Entrée et appelle la fonction verifyAge lors de l'activation de panel.enterButton.addEventListener (MouseEvent.MOUSE_UP, verifyAge);
La fonction suivante convertit la chaîne de mois écrite par l'utilisateur en numéro de mois afin qu'elle puisse être utilisée dans la classe Date..
fonction privée monthToNumber (month: String): int // Une chaîne de l'abréviation du mois est nécessaire var monthNumber: int; // va stocker le numéro du mois // Le prochain for parcourt le tableau en comparant ses mois à celui écrit par l'utilisateur pour (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
La fonction suivante sera exécutée lorsque l'utilisateur cliquera sur le bouton Entrer. Elle contient la majeure partie du code principal et sera analysée en plusieurs parties..
fonction privée verifyAge (e: MouseEvent): void
Cette ligne convertit les chaînes écrites dans les champs de saisie de texte en un objet de date valide, ce qui permet de comparer les dates ultérieurement.
Notez l'utilisation de la fonction monthToNumber ici.
userBirth = new Date (int (panel.yearField.text), monthToNumber (panel.monthField.text), int (panel.dayField.text));
Autre élément important, la ligne suivante calcule l’âge de l’utilisateur en soustrayant les dates et en divisant le résultat..
userAge = Math.floor ((Number (currentDate) - Number (userBirth)) / / (1000 * 60 * 60 * 24) / 365);
Vous vous demandez probablement pourquoi nous divisons en utilisant (1000 * 60 * 60 * 24) / 365, cela correspond à (millisecondes * secondes * minutes * heures) / jours. C'est pourquoi nous avons les années.
Il est temps de vérifier l'âge de l'utilisateur, mais ajoutons d'abord quelques tests d'erreur.
Les lignes suivantes vont vérifier le tooOldAge pour voir si la saisie de l'utilisateur est réaliste.
if (userAge> tooOldAge) panel.messages.textColor = 0xAA0000; panel.messages.text = "Vous ne pouvez pas être" + userAge + "years";
Si l'âge de l'utilisateur est supérieur à l'âge minimum (dans ce cas, 21 ans), affichez un message de bienvenue et chargez le contenu réel de l'application..
else if (userAge> = minimumAge) panel.messages.textColor = 0xF2DC57; panel.messages.text = "BIENVENUE"; tween = new Tween (panel, "x", Back.easeIn, panel.x, stage.stageWidth + panel.width / 2 + 10,0.3, true); // Animation du panneau loadContent ();
Un autre test d'erreur, cette fois pour les personnes prétendant être du futur.
else if (userBirth.getFullYear ()> currentDate.getFullYear ()) panel.messages.textColor = 0xAA0000; panel.messages.text = "Vous venez du futur?";
Et enfin, un message à l'utilisateur qui n'a pas l'âge requis pour accéder au site.
else panel.messages.textColor = 0xAA0000; panel.messages.text = "Vous devez être" + minimumAge + "ou plus"; réorienter();
Cette fonction est appelée lorsque l'utilisateur passe la vérification de l'âge, c'est l'endroit pour commencer à charger le contenu actuel du site..
fonction privée loadContent (): void // Le contenu va ici
Si l'utilisateur échoue à la vérification de l'âge (s'il est mineur), il sera redirigé vers un autre site..
Accentsconagua
fonction privée redirect (): void // browseToURL (new URLRequest ("http://www.tutsplus.com"))); Essayez de modifier les paramètres du fichier, l'âge minimum, l'âge maximum et ajoutez du contenu réel, utilisez-le dans vos projets!
Merci d'avoir lu ce tutoriel, j'espère que vous l'avez trouvé utile!
