Share
In deze zelfstudie leren we hoe u een Age Verification-formulier voor gebruik in uw websites of applicaties kunt ontwikkelen en implementeren. Lees verder om meer te weten te komen!
Laten we eens kijken naar het eindresultaat waar we naartoe zullen werken:
Gebruikmakend van de klasse Date, vergelijken we de geboortedatum van de gebruiker met de huidige datum. Ten eerste zullen we echter een mooie interface samenstellen met Flash CS5 en de tekengereedschappen.
Start Flash en maak een nieuw document. Stel de stage-grootte in op 600x300 px en de framesnelheid op 24 fps.
Dit is de interface die we zullen gebruiken, een verloopachtergrond met een semi-transparant zwart paneel. Dit paneel bevat een reeks tekstvelden die feedback geven aan de gebruiker en de gebruikersinvoer vastleggen.
Er is ook een knop om de leeftijdsverificatie uit te voeren.
Selecteer het gereedschap Rechthoek (R) en maak een rechthoek van 600x300 px. Plaats het in het midden van het werkgebied en vul dit radiale verloop: # F2DC57 tot # E9B31B.
Selecteer het Primitieve gereedschap Rechthoek (R) en maak vervolgens een afgeronde rechthoek van 350x180 px met een 7px hoekstraal en vul deze met # 111111 60% alpha. Centreer het in fase.
Converteer de vorm naar MovieClip en voeg het volgende filter toe:
Je zou moeten eindigen met zoiets als dit:
We maken een reeks statische tekstvelden die de gebruiker vertellen waar de gegevens moeten worden ingevoerd. Niets is te moeilijk. Het gebruikte formaat is: DIN Bold, 17px, #DDDDDD.
Er zijn nog vier TextFields nodig in de interface, de eerste is een Dynamic TextField dat verschillende berichten zal weergeven, het heeft standaard de 'Geboortedatum', noem dit veld berichten.
De andere drie zijn Input TextFields, nodig om de geboortedatum van de gebruiker vast te leggen, de instantienamen zijn: maandVeld, dagVeld, jaarVeld.
Een knop zal worden gebruikt om de functie aan te roepen die de leeftijd van de gebruiker zal verifiëren.
Gebruik het tekstgereedschap om een op basis van tekens gebaseerde knop te maken en deze een naam te geven enterButton.
Maak een nieuwe ActionScript 3.0-klasse (Cmd + N) en sla deze op als Main.as in je klasmap.
Met het sleutelwoord van het pakket kunt u uw code indelen in groepen die door andere scripts kunnen worden geïmporteerd. Het wordt aanbevolen deze een naam te geven die begint met een kleine letter en intercaps te gebruiken voor volgende woorden, bijvoorbeeld: mijn lessen. Het is ook gebruikelijk om ze een naam te geven via de website van uw bedrijf: com.mycompany.classesType.myClass.
In dit voorbeeld gebruiken we een enkele klasse, dus het is niet echt nodig om een klassenmap te maken.
pakket
Dit zijn de klassen die we moeten importeren voor onze klas om te werken, de importeren richtlijn maakt extern gedefinieerde klassen en pakketten beschikbaar voor uw 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;
Hier verklaren we de klas met behulp van de klasse definitie sleutelwoord gevolgd door de naam die we voor de klas willen, onthoud dat je het bestand met deze naam moet opslaan.
De strekt keyword definieert een klasse die een subklasse van een andere klasse is. De subklasse erft alle methoden, eigenschappen en functies, op die manier kunnen we ze in onze klasse gebruiken.
public class Main breidt uit
Dit zijn de variabelen die we zullen gebruiken, lees de opmerkingen in de code om meer over hen te weten te komen.
private var tween: Tween; // Een tween-object om animaties uit te voeren privé var minimumAge: int = 21; // De vereiste minimumleeftijd voor het weergeven van de inhoud private var tooOldAge: int = 130; // Een persoon kan niet zo oud zijn (en als het is dat het waarschijnlijk geen app als deze gebruikt;) privé var maanden: Array = ["Jan", "Feb", "Mar", "Apr", "kan", "juni", "juli", "augustus", "september", "oktober", "november", "december"]; // Een array van de afkortingen van de maanden private var currentDate: Date = new Date (); // De huidige datum private var userBirth: Date; // De geboortedatum van de gebruiker opslaan private var userAge: Number; // Bewaart de leeftijd van de gebruiker
De constructor is een functie die wordt uitgevoerd wanneer een object wordt gemaakt op basis van een klasse, deze code is de eerste die wordt uitgevoerd wanneer u een exemplaar van een object maakt of wordt uitgevoerd met behulp van de documentklasse.
public function Main (): void // Tweens the panel from up to the center tween = new Tween (paneel, "y", Strong.easeOut, - panel.height, stage.stageHeight / 2.0.5, true); // Voegt een gebeurtenislistener toe aan de knop Enter en roept de verifyAge-functie aan bij geactiveerd panel.enterButton.addEventListener (MouseEvent.MOUSE_UP, verifyAge);
De volgende functie converteert de maandstring die is geschreven door de gebruiker naar het maandnummer, op deze manier kan deze worden gebruikt in de klasse Date.
private function monthToNumber (month: String): int // Een tekenreeks van de maandafkorting is nodig var monthNumber: int; // Sla het maandnummer op // De volgende voor doorloopt de array die de array-maanden vergelijkt met de array die door de gebruiker is geschreven voor (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
De volgende functie wordt uitgevoerd wanneer de gebruiker op de knop Enter klikt, deze bevat de meeste van de hoofdcode zodat deze in delen wordt geanalyseerd.
private function verifyAge (e: MouseEvent): void
Deze regel converteert de tekenreeksen die in de Input TextFields zijn geschreven naar een geldig datumobject, op deze manier kunnen we de datums later vergelijken.
Let op het gebruik van de functie monthToNumber hier.
userBirth = new Date (int (panel.yearField.text), monthToNumber (panel.monthField.text), int (panel.dayField.text));
Een ander belangrijk onderdeel, de volgende regel berekent de leeftijd van de gebruiker door de datums af te trekken en het resultaat te delen.
userAge = Math.floor ((Number (currentDate) - Number (userBirth)) / (1000 * 60 * 60 * 24) / 365);
Je vraagt je waarschijnlijk af waarom we delen met (1000 * 60 * 60 * 24) / 365, dit is (milliseconden * seconden * minuten * uren) / dagen. Dat is waarom we de jaren krijgen.
Tijd om de leeftijd van de gebruiker te controleren, maar laten we eerst een aantal fouttests toevoegen.
De volgende regels zullen de teOldAge controleren om te zien of de gebruikersinvoer een realistische leeftijd is.
if (userAge> tooOldAge) panel.messages.textColor = 0xAA0000; panel.messages.text = "U kunt niet" + userAge + "jaar" zijn;
Als de leeftijd van de gebruiker de minimumleeftijd (in dit geval 21) overschrijdt, geeft u een welkomstbericht weer en laadt u de daadwerkelijke app-inhoud.
else if (userAge> = minimumAge) panel.messages.textColor = 0xF2DC57; panel.messages.text = "WELKOM"; tween = nieuwe Tween (paneel, "x", Back.easeIn, panel.x, stage.stageWidth + panel.width / 2 + 10,0.3, true); // Animates the panel loadContent ();
Nog een fouttest, deze keer voor mensen die beweren dat ze uit de toekomst komen.
else if (userBirth.getFullYear ()> currentDate.getFullYear ()) panel.messages.textColor = 0xAA0000; panel.messages.text = "Ben je van de toekomst?";
En als laatste een bericht voor de gebruiker die niet de vereiste leeftijd heeft om de site te betreden.
else panel.messages.textColor = 0xAA0000; panel.messages.text = "Je moet" + minimumAge + "of ouder zijn"; redirect ();
Deze functie wordt aangeroepen wanneer de gebruiker de leeftijdsverificatie passeert, dit is de plaats waar de daadwerkelijke site-inhoud wordt geladen.
private function loadContent (): void // Content goes here
Als de gebruiker de leeftijdsverificatie niet doorstaat (is minderjarig), wordt deze doorgestuurd naar een andere site.
Accentsconagua
persoonlijke functie redirect (): void // navigateToURL (new URLRequest ("http://www.tutsplus.com")); Probeer de parameters van het bestand, de minimumleeftijd, de maximumleeftijd te wijzigen en een paar echte inhoud toe te voegen, gebruik het in uw projecten!
Bedankt voor het lezen van deze tutorial. Ik hoop dat je het nuttig hebt gevonden!
