Develop en Alderskontroll Form Bruke Actionscript 3
Del
Del
Del
Del
Dette Cyber Monday Envato Tuts + kurs vil bli redusert til bare $ 3. Ikke gå glipp av.
I denne opplæringen, vil vi lære å utvikle og implementere et skjema Alderskontroll for bruk i dine nettsteder eller applikasjoner. Les videre for å finne ut mer
Endelig resultat Forhåndsvisning
La oss ta en titt på det endelige resultatet vi skal jobbe mot:
Trinn 1: Oversikt
Å gjøre bruk av Date klassen vi vil sammenligne brukeren fødselsdato til dagens dato. Først skjønt, vil vi trekke sammen en fin utseende grensesnitt ved hjelp av Flash CS5 og tegneverktøy
Trinn 2:. Dokumentinnstillinger
Launch Flash og opprette et nytt dokument. Satt scenen størrelse til 600x300px, og bildefrekvensen til 24fps
Trinn 3:. Interface
Dette er grensesnittet vi 'll bruk, en gradient bakgrunn med en semi-gjennomsiktig svart panel. Dette panelet inneholder en rekke textfields som vil vise tilbakemelding til brukeren, og vil fange brukerundersøkelser
Det er også en knapp for å utføre aldersverifisering
Trinn 4..: Bakgrunn
Velg rektangelverktøyet (R) og lage en 600x300 px rektangel. Plasser den på midten av scenen og fyll med dette radial gradient: # F2DC57 til # E9B31B
Trinn 5:. Panel Bakgrunn
Velg rektangel Primitive Tool (R) og deretter opprette en 350x180 px avrundet rektangel med en 7px hjrneradius og fyll den med # 111111 60% alfa. Sentrere det i scenen
Konverter formen til MovieClip og legge til følgende filter:.
Du bør slutte med noe sånt som dette:
Trinn 6: Statisk textfields
Vi skal lage en serie av statiske textfields som vil fortelle brukeren hvor å legge inn data. Ingenting er for vanskelig. Formatet som brukes er:. DIN Bold, 17px, #DDDDDD
Trinn 7: Dynamisk og Input textfields
Fire mer textfields er nødvendig i grensesnittet, den første er en dynamisk Textfield som vil vise ulike meldinger, har det "fødselsdato" skrevet av standard navn dette feltet meldinger De tre andre er Input textfields, for å fange brukeren fødselsdato, instansnavn er: monthField, dayField, yearField En knapp skal brukes til å ringe funksjon som vil bekrefte brukernes alder. Bruk tekstverktøyet til å skape en grunnleggende karakter-basert knappen og gi den navnet enterButton. Opprett en ny (Cmd + N) Actionscript 3.0 Class og lagre den som Main.as Pakken søkeord lar deg organisere koden din inn i grupper som kan importeres av andre scripts, det er anbefalt å gi dem navn som starter med en liten bokstav og bruke intercaps for etterfølgende ord for eksempel: myClasses I dette eksempelet bruker vi en enkelt klasse, så det er ikke egentlig en. må opprette et klasser mappe Dette er de klassene vi trenger å importere for klassen vår til å fungere, import Her erklærer vi klassen med klasse strekker Dette er de variablene vi vil bruke, lese kommentarene i koden for å finne ut mer om dem Konstruktøren er en funksjon som kjøres når et objekt er opprettet fra en klasse, er den første som skal utføres når du gjør en denne koden forekomst av et objekt eller kjører ved hjelp av Document Class Følgende funksjonen konverterer måneden strengen skrevet av brukeren til månedens nummer, slik at den kan brukes i Dato klassen Den neste funksjonen vil bli henrettet når brukeren klikker på Enter-knappen, den inneholder de fleste av de viktigste koden så det vil bli analysert i deler Denne linjen konverterer strengene skrevet i Input textfields til en gyldig dato objekt, på denne måten kan vi sammenligne datoene senere. Legg merke til bruken av monthToNumber funksjon her. En annen viktig del, beregner neste linje brukeren alder ved å trekke Datoer og dividere resultat Du lurer sikkert på hvorfor vi dividere bruker (1 000 * 60 * 60 * 24) /365, er dette (millisekunder * sekunder * minutter * timer ) /dager. Det er derfor vi få årene Tid for å sjekke brukernes alder, men først la oss legge til noen feil testing De neste linjene vil sjekke tooOldAge å se om brukerundersøkelser er et realistisk alder Hvis brukeren alder er over minstealderen (i dette tilfellet 21), viser en velkomstmelding og laste selve appinnhold En annen feil test, denne gangen for folk som utgir seg for å være fra fremtiden Og til slutt, en melding til brukeren som ikke har den nødvendige alder å skriver nettstedet Denne funksjonen kalles når brukeren passerer aldersverifisering, det er stedet å begynne å laste selve nettstedet innhold Hvis brukeren ikke aldersverifisering (er mindreårig) det vil bli omdirigert til et annet nettsted Prøv å endre parameterne for filen, minstealder, maksimum alder og legg til litt ekte innhold, bruk det i dine prosjekter! Takk for at du leser denne opplæringen, jeg håper du har funnet det nyttig! Anmeldelser
.
Trinn 8:. Handling Knapp
Trinn 9:. New Action Class
i klassen mappen
Trinn 10: Pakken
. Det er også vanlig å nevne dem ved hjelp av selskapets hjemmeside: com.mycompany.classesType.myClass
pakken {
Trinn 11:. Import direktiv
direktivet gjør eksternt definerte klasser og pakker tilgjengelig i koden
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;
Trinn 12: Erklærer og Forleng Class
definisjon søkeord etterfulgt av navn som vi ønsker for klassen, husk at du må lagre filen ved hjelp av dette navnet.
søkeord definerer en klasse som er en underklasse av en annen klasse. Underklasse arver alle metoder, egenskaper og funksjoner, på den måten vi kan bruke dem i klassen vår
public class Hoved strekker Sprite {
Trinn 13:. Variabler
privat Var tween. Tween; //En tween objekt for å utføre animationsprivate Var minimumAge: int = 21; //Minstealder kreves for å vise contentprivate Var tooOldAge: int = 130; //En person kan ikke være så gammel (og hvis det er det sannsynligvis ikke vil være å bruke en app som dette;) private Var måneder: Array = ["Jan", "februar", "Mar", "april", "May", "juni", "Jul", "august", "SEP-", "oktober", "november", "dek"]; //En rekke forkortelser av monthsprivate Var currentDate: Date = new Date (); //Den nåværende dateprivate Var userBirth: Dato; //Vil lagre bruker birthdateprivate Var userAge: Number; //Vil lagre brukerens alder
Trinn 14: Constructor
offentlig funksjon main (): void {//Tweens panelet fra opp til sentrum tween = new Tween (panel, "y", Strong.easeOut, - panel.. høyde, stage.stageHeight /2,0.5, true); //Legger en hendelse lytteren til Enter-knappen og kaller verifyAge funksjonen når aktivert panel.enterButton.addEventListener (MouseEvent.MOUSE_UP, verifyAge);}
Trinn 15: Handle Måneder
privat funksjon monthToNumber. (måned: String): int //En streng av måneden forkortelsen er nødvendig {var monthNumber: int; //Vil lagre månedens nummer //Det neste for viljen sløyfe gjennom rekke sammenligne tabell måneder til den ene skrevet av brukeren for (var i: int = 0; i < months.length; i ++) {if (panel .monthField.text == måneder [i]) {monthNumber = i; //Hvis månedens kamper lagres}} returnere monthNumber; //Og så returnert som funksjonsverdien}
Trinn 16: Kontroller Age
privat funksjon verifyAge (e: MouseEvent):. void {
Trinn 17: Konverter Strings til dato
userBirth = new Date(int(panel.yearField.text),monthToNumber(panel.monthField.text),int(panel.dayField.text));
Step 18:. Beregn Bruker Age
userAge = Math.floor ((Number (currentDate) - Antall (userBirth) ) /(1 000 * 60 * 60 * 24) /365);
Trinn 19:.. Sjekk for Too Old People
if (userAge > tooOldAge). {panel.messages.textColor = 0xAA0000; panel.messages.text = "Du kan ikke være" + userAge + "år";}
Trinn 20: La User Pass
else if (userAge >. = minimumAge) {panel.messages.textColor = 0xF2DC57; panel.messages.text = "VELKOMMEN"; tween = new Tween (panel, "x", Back.easeIn, panel.x, stage.stageWidth + panel.width /2 + 10,0.3, true); //Animerer panelet loadContent ();}
Trinn 21: Se etter Personer fra Future
annet. if (userBirth.getFullYear () > currentDate.getFullYear ()) {panel.messages.textColor = 0xAA0000; panel.messages.text = "Er du fra fremtiden?";}
Trinn 22: Under Nødvendig Age
else {panel.messages.textColor = 0xAA0000.; panel.messages.text = "Du må være" + minimumAge + "eller over"; omdirigere ();}
Trinn 23: Legg faktiske innholdet
privat. funksjon loadContent (): void {//Content går her}
Trinn 24:. Omadresser
privat funksjon redirect (): void {//navigateToURL (ny URLRequest ("http://www.tutsplus.com"));}
Konklusjon