Countdown i stil med en Airport Terminal Timer
Del
Del
13
Del
Dette Cyber Monday Envato Tuts + kurs vil bli redusert til bare $ 3. Ikke gå glipp av.
I denne opplæringen vil vi gjøre en gjenbrukbar nedtellingsur med en dynamisk måldato som kan stilles inn via XML. Vi skal animere tallene blar nedover i stil med en gammel flyplassen eller togstasjonen status bord. Vi dekker kode, grafikk og animasjon.
publiseres Tutorial
Hver noen uker, vi besøker noen av våre lesernes favoritt innlegg fra hele historien til området. Denne opplæringen ble først publisert i mai 2010.
Trinn 1: Sett opp din Flash File
Opprett en ny Flash-fil (Actionscript 3) med disse innstillingene: 500x300, svart bakgrunn ., og 30 fps
Trinn 2: Lag digit_bottom MovieClip
Opprett en ny MovieClip kalt 'digit_bottom' og tegne et avrundet rektangel inni den ca 36px bred x 50 piksler høy. (En rask måte å tegne et rektangel med presise dimensjoner er å velge rektangel verktøyet og Alt-klikk på scenen.)
Gi rektangelet en gradient fylle from # 111111 (øverst) til # 333333 (nederst) og en 2 px disposisjon farget # 333333
Trinn 3:. Plasser rektangel
Plasser rektangelet slik at registreringen poenget med MovieClip (den lille '+') er nøyaktig halvveis mellom toppen og bunnen, og den venstre kanten. Hvis du har gjort ditt rektangel 50 piksler høye, deretter y-verdien bør være -25
Trinn 4:. Tilsett Antall
Lag et nytt lag, og legge til et dynamisk tekstfelt som heter " t_num '. Velg en font som har en flyplass eller togstasjonen føler for det (som Helvetica, DIN, eller utdanningen). Jeg bruker Helvetica Bold.
Sett Avsnitt Format til sentrert, og husk å legge ned skriftene for tallene 0-9.
Plasser tekstfeltet slik at det er sentrert på bakgrunn rektangel .
Vi kommer til å bruke dette MovieClip som base for en annen grafisk, så ta deg tid til å sørge for at det ser bra ut
Trinn 5:. Legg en maske
Lag et nytt lag på tidslinjen av digit_bottom Velg den øverste halvdelen av masken rektangel og slett. det Høyreklikk på maske Gå inn i biblioteket, duplisere digit_bottom Dette MovieClip vil være tilnærmet identisk med digit_bottom Slett grafikken for tiden på maskere Den eneste andre justeringen du kanskje ønsker å gjøre her er å justere fargen på teksten og skyggelegging av bakgrunnen avrundet rektangel. Jeg gjorde grafikken i min digit_top Opprett en ny MovieClip heter "Digit". Dra i digit_top Hotell og digit_bottom Nå kopierer begge movieclips ( digit_top Hotell og digit_bottom Du skal nå ha 4 movieclips inni Digit Vi må gjøre litt av animasjon lureri for å få bla tall effekten vi ønsker. Ta en titt på diagrammet under vår Digit Nå snur vi nede top2 top2 På dette punktet vil vi relayer og null posisjonene til de 2 skjulte klipp å bli klar for neste flip. Legg merke til hvordan klippene er i samme posisjoner som Trinn 1, bare snudd Nå som vi har den enkelte Digit Opprett en ny MovieClip på scenen kalt 'Clock "med forekomstnavnet' klokke '. Inne i nye MovieClip sted 9 kopier av Digit Legg noen kolon for å skille de movieclips og etiketter for hver seksjon. Designen er opp til deg. Jeg har lagt en mørk avrundet rektangel som bakgrunn for min klokke. Til slutt, legge til et dynamisk tekstfelt som heter "t_date '. Det er der vi vil vise målet dato klokken teller ned til. Husk å legge skriften for dette tekstfeltet hvis du ikke bruker et system font Opprett en ny Actionscript-fil som heter "Digit. som "og legge til denne koden for å lage den tomme skall for klassen: Dette gjør ikke mye ennå. Vi har et par av arrays for å holde 2 sett med digit_top Hotell og digit_bottom (Merk:. Jeg bruker streken i mine variabelnavn for å indikere private variabler). Vi re skal bruke den TweenLite biblioteket for å animere vår Digit Last ned AS3 versjon av TweenLite biblioteket her. Plasser 'com' mappe i samme katalog som hoved Flash-fil (eller i kilde banen, hvis du har satt opp en annen klasse bane). Legg disse to linjene øverst på Digit Vi knapt kommer til å skrape i overflaten av hva TweenLite kan gjøre i denne opplæringen. For mer informasjon sjekk ut TweenLite Dokumentasjon Legg denne funksjonen til Digit Her er hva som skjer, linje for linje: < .no> Ta en titt på diagrammet i trinn 8 hvis du er forvirret om animasjon her. Legg denne funksjonen til Digit Når flip animasjon full vi vil kjøre denne funksjonen. Det bytter _currentDigit Hotell og _nextDigit Legg denne funksjonen til Digit De to første linjene i denne funksjonen pop _nextDigit Etter klippene er re-lagdelt, setter vi de Scaley egenskaper slik at de vil være klare for neste flip . Dette betyr å endre _nextDigit [BOTTOM] Igjen, sjekk diagrammet i trinn 8 hvis du 're får tapt En ting vi glemte å gjøre er posisjon klipsene ordentlig for første flip animasjon. Vi kan gjøre det enkelt ved å legge et kall til null En siste ting vi trenger i vår Digit klassen er en måte å få tilgang til private _number Opprett en ny Actionscript-fil med navnet 'Clock.as'. Lim inn denne koden: Ikke mye her ennå. Bare importere noen av klassene vi trenger. Jeg har også et par private variabler. _clockTimer Legg denne funksjonen til klokken klassen rett under konstruktøren: Dette er funksjonen som vi bruker til å sette mål dato for klokken. Det aksepterer en dato (selvfølgelig) og tildeler det til _targetDate Etter å ha startet timeren setter funksjon t_date Den siste linjen i denne funksjonen samtaler oppdatering Denne funksjonen er litt lenge fordi det er der det meste av arbeidet blir gjort. Legg den til Clock Klasse: Denne funksjonen aksepterer en Timerevent som parameter. Standardverdien for denne parameteren er null Den første linjen av denne funksjonen blir gjeldende dato og tid som en dato objekt . Deretter finner vi forskjellen mellom dagens dato og målet dato (linje 37). Hvis forskjellen er 0 eller mindre, så er det siste målet dato, så vi stoppe _clockTimer Siden forskjellen i tid mellom nå og målet er beregnet i millisekunder, trenger vi å konvertere til en fin skjerm som kan leses av dager, timer, minutter og sekunder (linje 46-62). Regnestykket her er ganske enkelt så lenge du vet at det er 1000 millisekunder i et sekund, 60 sekunder i et minutt, 60 minutter i en time og 24 timer i døgnet. På linje 65 vi lagrer alle de verdiene som elementer i en matrise. Starter på linje 68 vi sløyfe gjennom hvert element og legge den til en rekke tegn som heter "diffString '. Mens du gjør dette vi også legge ledende nuller der det er nødvendig (linje 71). Så hvis våre verdier for klokken var 30 dager, 5 timer, 56 minutter og 6 sekunder diffString Den siste tingen denne funksjonen gjør er sløyfe gjennom tegnene i diffString Finn (eller opprett) en god tikkende lyd som vil spille hver gang klokken oppdateringer. Importere det inn i Library of Flash-filen og sette klassenavnet til "TickSound" i sammenhengen innstillinger. Legg til _tickSound Og spille av lyden inne i oppdatere Vår nedtelleren er fullført, vi trenger bare noen måte å sette målet dato. Opprett en ny Actionscript-fil som heter "Main.as" med denne koden: Alt dette gjør er å sette mål dato for Clock eksempel på scenen. Jeg bruker fulls () og Date.UTC () for å konvertere datoen til Universal tidskode. På denne måten datoen vil være riktig når det blir konvertert tilbake til lokal tid på brukerens datamaskin. Husk også at de månedene er null-basert. Så, er måneden fire faktisk mai, ikke april. I Flash-filen satt dokument klassen til "Main". Hvis du trenger en oppfriskning om bruk av Document Class sjekke ut dette Quick Tips Test din film nå, og alt skal fungere. Prøv å endre målet dato i hovedklassen og se hvordan nedtelling endringer. En mulig ulempe for hvordan vi har satt opp dette er at målet dato er hardkodet i vår SWF. Det er fint, men det ville vært kult om vi kunne dynamisk laste datoen slik at vi kan gjenbruke nedtellingen for forskjellige ting. La oss se hva vi kan gjøre med det ... Opprett en ny XML-fil i samme mappe som Flash-fil som heter "targetDate.xml '(en XML-fil er bare en ren tekst-fil). Legg dette til XML-filen: Ved hjelp av dette formatet for vår måldato er ganske oppblåst (det er mer markup enn det faktiske data), men det vil holde ting veldig klart i forbindelse med denne opplæringen Nå la oss gjøre noen endringer i vår Hoveddokument klasse. Erstatt alt i denne filen med denne koden: Du vil merke vi har importert noen ekstra klasser for å hjelpe oss med å laste XML-filen. I konstruktør-funksjonen skaper vi en ny URLLoader eksempel å laste ned filen for oss. Vi legger en hendelse lytteren som vil kalle en funksjon som heter "onDataLoaded" når filen er ferdig lastet Legg denne funksjonen til Hovedklasse: Denne funksjonen lager en ny XML objekt fra filen vi lastet. Vi deretter opprette en ny dato objekt fra verdiene i XML. Vi igjen med fullstopp () og Date.UTC () for å konvertere datoen til Universal tidskode. Den siste linjen er den samme som før, det bare sender måldato til vår Clock eksempel Det er ganske mye det for denne. Det er et par forbedringer du kanskje har lyst til å gjøre selv: Lykke til! Som alltid legge inn en kommentar og la meg vite hva du synes. Anmeldelser
MovieClip og kaller det "maske". Kopier avrundet rektangel og lim på plass på maskere
lag (Edit > Lim på plass, eller Kommando-Skift-V)
lag, velger Mask og sørg for at det er maske alle lagene under det
Trinn 6:.. Lag den digit_top MovieClip
MovieClip og navngi den nye kopien 'digit_top'.
klipp, bortsett masken vil være å vise den øverste halvdelen av grafikk i stedet for bunnen.
lag. Kopier avrundet rektangel og igjen Lim på plass på maskere
lag. Denne gangen velger den nederste halvdelen og slette den.
klipp en litt mørkere for å simulere lyset som kommer fra toppen
Trinn 7:. Opprett Digit MovieClip
movieclips og plassere dem begge på 0,0. Gi dem forekomstnavn 'top1' og 'bottom1'.
), opprette et nytt lag, og Lim på plass en kopi av hver. Nevn de nye kopier 'top2' og 'bottom2'
MovieClip. 2 eksemplarer av digit_top Hotell og 2 eksemplarer av < em> digit_bottom
. Jeg skal forklare hvorfor vi sette den opp som dette i neste trinn
Trinn 8:. Animasjon Strategy
MovieClip (jeg gjengi det i 3D, så du kan se den lagvise lettere):
Animasjon Trinn 1:
< p> Vi starter ut med bottom2
klipp snudd opp ned (med Scaley eiendom) og plassert bak top2
klipp. På dette punktet de 2 klemmene som er synlige er top2 Hotell og bottom1
. Tallene på disse to klipp tilsvarer hverandre, slik at de danner et komplett sifret
Animasjon Trinn 2:.
klipp til sentrum av siffer. På dette punktet Scaley vil være null, så klippet vil ikke være synlig. Samtidig er vi også bla nedover bottom2
klipp, men dette skal vi snu hele veien til bunnen. Siden det er bak top2
, det vil ikke vises før den vender forbi halvveis. Nå 2 synlige klippene er top1 Hotell og bottom1
. Tallene på disse to klippene samsvarer ikke, men det er greit fordi dette trinnet varer bare for et kort øyeblikk
Animasjon Trinn 3:.
klippet opphold i sentrum som bottom2
fortsetter å falle helt ned til bunnen. Når det er på plass tallene på de synlige klipp ( top1 Hotell og bottom2
) igjen matche for å danne en komplett sifret
Animasjon Trinn 4:.
Trinn 9:. Opprett Clock MovieClip
MovieClip satt opp, la oss bygge døgnet.
MovieClip; 2 for sekunder, 2 for minutter, 2 timer, og tre dager. Gi hvert tall en forekomst navn. Fra venstre til høyre navngi dem 'digit0', 'digit1', 'digit2', og så videre.
Trinn 10:. Opprett Digit Class
pakke {import flash.display.MovieClip; public class Digit strekker MovieClip {private konst TOPP: int = 0; privat konst BOTTOM: int = 1; private Var _currentDigit: Array; private Var _nextDigit: Array; private Var _number: String = "0"; //CONSTRUCTOR offentlig funksjon Digit () {_currentDigit = new Array (top1, bottom1); _nextDigit = new Array (top2, bottom2); }}}
movieclips. Jeg har satt opp 2 konstanter, topp og bunn for å holde styr på topp- og bunn klipp innenfor disse arrays. _number
variabel vil holde sifret som er utstilt til enhver tid
< p> Finn ditt Digit
MovieClip i biblioteket og tildele denne klassen til det i sammenhengen innstillinger
Trinn 11:. Import den TweenLite Library
MovieClip.
klasse, like under MovieClip import..
import com.greensock * import com.greensock.easing *
Trinn 12:. Programmer flipTo Animation
Klasse:
offentlig funksjon flipTo (num: String): void {_number = num; _nextDigit [TOP] .t_num.text = num; _nextDigit [BOTTOM] .t_num.text = num; //Flip ned toppen av sifferet til halvveis TweenLite.to (_currentDigit [TOP], 0,15, {Scaley: 0, letthet: Linear.easeNone}); //Snu neste siffer bunnen ned TweenLite.to (_nextDigit [BOTTOM], 0,3, {Scaley: 1, onComplete: flipComplete, letthet: Bounce.easeOut});}
Denne funksjonen aksepterer en String som vil holde sifret vi skal bla til. Den første linjen bare setter vår _number
variable å holde den sifret.
array å vise at samme siffer.
Så bruker vi TweenLite til lom Scaley eiendommen av TOP MovieClip av _currentDigit
til 0. Dette gir den effekten at det er "falle" mot midten av sifferet.
Den siste linjen er en annen tween, denne gangen animere BOTTOM klipp av _nextDigit
fra toppen av sifret ned til bunnen. Igjen vi bruker den Scaley eiendommen for å simulere denne effekten, men denne gangen fra -1 til 1. Siden det er tweening dobbelt så langt som TOP klippet, vi gir det dobbelt så mye tid (.3 sekunder i stedet for 0,15) . Når dette tween er ferdig vil det ringe en funksjon som heter "flipComplete '. Vi skal skrive at funksjon i neste trinn.
Trinn 13 : Tilsett flipComplete () Funksjon
klassen rett under flipTo
funksjon:
privat funksjon flipComplete (): void {//swap sifre Div neste: Array = _currentDigit; _currentDigit = _nextDigit; _nextDigit = neste; //Nulllagdeling reset ();}
arrays. Etter det er gjort det kaller en funksjon som heter "reset" for å nullstille klippet lag og posisjoner for neste flip. La oss skrive at funksjon nå
Trinn 14:. Tilsett reset () Funksjon
Klasse:
privat reset funksjon (): void {addChild (_nextDigit [BOTTOM]); addChild (_currentDigit [TOP]); //Snu opp neste bunnen for å stå bak den nåværende topp _nextDigit [BOTTOM] .scaleY = 1; _nextDigit [TOP] .scaleY = 1;}
BOTTOM og deretter _currentDigit
TOP til toppen av listen displayet. Jeg pleier å bare bruke addChild () for å gjøre dette fordi det krever mindre å skrive enn å bruke setChildIndex ().
fra 1 til -1 og _nextDigit [TOP]
fra 0 til 1.
Trinn 15:. Legg til Constructor
funksjon rett i Digit klassen konstruktør:
//CONSTRUCTORpublic funksjon Digit () {_currentDigit = new Array (top1, bottom1); _nextDigit = new Array (top2, bottom2); reset ();}
Trinn 16: Legg inn nummeret () Funksjon
variabel fra utsiden av klassen. Vi vil legge til en enkel tilgangsfunksjonen:
offentlig funksjon få nummeret (): String {return _number;}
Trinn 17: Lag Clock Class
pakke {import flash.display.MovieClip; import flash.events.TimerEvent; import flash.media.Sound; import flash.utils.Timer; public class Klokke strekker MovieClip {private Var _clockTimer: Timer; private Var _targetDate: Dato; //CONSTRUCTOR offentlig funksjon Clock () {}}}
vil telle ned sekundene for oss, og _targetDate
vil holde datoen som vi teller ned til
Trinn 18:. Legg den innstilte () Funksjon
//angi målet dato og starte nedtellingen timerpublic funksjon sett (dato: Dato): void {_targetDate = dato; _clockTimer = new Timer (1000) //huke hvert sekund (1000 millisekunder) _clockTimer.addEventListener (TimerEvent.TIMER, oppdatering); _clockTimer.start (); //Vise måldato over klokken t_date.text = _targetDate.toLocaleString () toUpperCase (.); //Oppdaterer klokken gang her så det begynner med riktig tid oppdateringen ();}
variabel. Det instantiates da vår _clockTimer
. _clockTimer
vil kalle oppdatere
funksjonen én gang per sekund for å oppdatere tallene.
tekst med målet dato. Den toLocaleString () -funksjonen sørger datoen vises i brukerens lokale tidssone.
gang for å stille klokken til riktig tid. Ellers ville det vise "000 00:00:00" i ett sekund før den første timer hendelsen
Trinn 19:. Legg ned oppdateringen () Funksjon
privat funksjon oppdateringen (e: Timerevent = null): void {var nå: Date = new Date (); //Få gjeldende tid //finne forskjellen (i ms) mellom målet og nå Var diff: Number = _targetDate.valueOf () - now.valueOf (); if (diff < = 0) {//Tiden er ute! //Gjøre noe kult her _clockTimer.stop (); _clockTimer.removeEventListener (TimerEvent.TIMER, oppdatering); diff = 0; } //Konvertere til sekunder diff = Math.round (diff /1000); //Antall dager Var dager: int = Math.floor (diff /(24 * 60 * 60)); diff - = dager * (24 * 60 * 60); //Antall timer Var timer: int = Math.floor (diff /(60 * 60)) diff - = timer * 60 * 60; //Antall minutter Var min: int = Math.floor (diff /60); diff - = min * 60; //Sekunder er alt som er igjen Var sek: int = diff; //Oppretter en rekke strenger å holde antall for hver verdi Var diffArr: Array = new Array (String (dager), String (timer), String (min), String (sek)); Var diffString: String = "" var len: int = 3; //Den første verdien (dager) har 3 sifre. Alle de andre har 2 for hver (var s: String i diffArr) {//pad strengen med en ledende null hvis nødvendig mens (s.length < len) {s = "0" + s; } Len = 2; //Alle de andre verdiene er 2 sifre diffString + = s; //Legger polstret strengen til diffString} //gå gjennom hvert tegn i diffString og sett tilsvarende tall for (var i: int = 0; i < diffString.length; i ++) {if (diffString.substr (i, ! 1) = dette ["siffer" + i] .number) {denne ["siffer" + i] .flipTo (diffString.substr (i, 1)); }}}
. Dette gir oss muligheten til å kalle funksjonen uten å sende en parameter, som vi gjør i set
funksjon.
(linje 38-44).
ville se slik ut:. "030055606"
(ved hjelp av charAt () metoden). For hvert tegn i strengen sjekker vi for å se om det er forskjellig fra antallet som vises på tilsvarende tall. Dette er enkelt på grunn av måten vi oppkalt våre sifrede tilfeller. Hvis nummeret ikke er den samme som den som vises i øyeblikket vi fortelle at sifret å snu til nummeret i diffString
Trinn 20:. Legg Sound
variabel til toppen av Clock klassen rett under de to andre variabler:
private Var _clockTimer: Timer, private Var _targetDate: Dato; private Var _tickSound: Sound = new TickSound ();
funksjon:
_tickSound.play ();
Trinn 21: Legg hoveddokumentet Class
pakke {import flash.display.MovieClip; public class Hoved strekker MovieClip {offentlig funksjon main () {//setter måldato for klokken Var targetDate: Date = new Date (); targetDate.setTime (Date.UTC (2010, 4, 28, 20, 00)); clock.set (targetDate); }}}
Trinn 22:. Test
< h2> Trinn 23: Lag XML File
< targetDate > < år > 2011 < /år > < måned > 3 < /måned > < day > 25 < /day > < time > 20 < /time > < minutters > 21 < /minutt > < /targetDate >
Trinn 24:. Legg den XML
pakke {import flash.display.MovieClip; import flash.net.URLLoader; import flash.net.URLRequest; import flash.events.Event; public class Hoved strekker MovieClip {//CONSTRUCTOR offentlig funksjon main () {//laste XML Var xmlLoader: URLLoader = new URLLoader (); xmlLoader.addEventListener (Event.COMPLETE, onDataLoaded); xmlLoader.load (ny URLRequest ("targetDate.xml")); }}}
Trinn 25:. Tilsett onDataLoaded () Funksjon
privat funksjon onDataLoaded (e: Hendelses): void {var xml: XML = new XML (e.target.data); Var targetDate: Date = new Date (); targetDate.setTime (Date.UTC (int (xml.year), int (xml.month), int (xml.day), int (xml.hour), int (xml.minute))); clock.set (targetDate);}
Trinn 26:. Wrap Up
Avhengig av hva du bruker nedtellingen for, kan det være lurt å gjøre noe spesielt for brukeren når nedtellingen går i null. Du vil legge dette til Klokke
klasse i den delen av oppdatere
funksjon som sjekker om timeren er på null.