Vi er nå i posisjon til å starte arbeidet med speedometeret kjørelengde teller. Vår app vil spore den totale distansen du har reist og vil oppdatere kilometertelleren for å reflektere dette. Her er hvordan kjørelengde telleren vil se:

Vi ønsker sifrene i skranken til jevnt rulle mellom verdier. For å se dette i aksjon ta en titt på forhåndsvisnings SWF vist i starten av denne opplæringen. Hver gang en ekstra mil er krittet opp vil du se tallene i telleren farten.

Vår disken består av åtte sifre, og vi vil starte med å skrive en klasse som representerer et ensifret.

Hvis du vil spare deg for den innsatsen du vil finne et filmklipp i biblioteket ditt som heter "Digit". Du finner det innenfor "Counter-mappen. Dobbeltklikk "Digit" for å flytte inn i sin tidslinje.

Sitter på tidslinjen er et filmklipp eksempel heter 'kolonne'. Denne filmsnutten inneholder de enkelte punktgrafikk som representerer hvert av numrene som brukes av siffer. Bare én av disse tallene vil etter hvert være synlig til enhver tid via en maske

Det kan i utgangspunktet virke merkelig, men kolonnen faktisk inneholder hvert nummer to ganger -. 0 til 9 og 0 til 9 igjen. Dette duplisering tillater oss å effektivt simulere sifret rulle rundt, for eksempel fra 9 til 0.

I diagrammet nedenfor skal illustrere dette sammen med et par andre scenarier:

I diagrammet ovenfor, den røde firkanten representerer området av "Digit" filmklipp som faktisk vil være synlig for brukeren. For å vise brukeren et annet nummer, den 'kolonne' eksempel vil bli rullet oppover -. Masken området vil alltid forbli på samme sted

Det første eksemplet ovenfor viser en bevegelse fra tallet "0" til 4-tallet. Som du kan se, bruker vi bare den øverste halvdelen av kolonnen for dette - vi aldri flytte til de gjentatte tallene i den nederste halvdelen. Det samme gjelder også for det andre eksemplet hvor vi beveger oss fra antall '5' til antall "9".

Det tredje eksemplet er imidlertid annerledes. Det viser sifret flytte fra antall '5' til antall '3'. Denne gang vi beveger oss fra tallene i den øvre halvdel av kolonnen til de like tall i den nedre halvdel av kolonnen. Det samme gjelder også for den siste eksempel, hvor vi beveger oss fra tallet "9" til antall "0".

I hovedsak flytter fra et lavere tall til et høyere tall vil alltid foregå helt innenfor øvre halvdel av kolonnen. Men for å gi illusjon av å rulle tilbake rundt fra et høyere tall til et lavere tall må vi alltid flytte fra den øvre halvdel av kolonnen til en av de dupliserte tallene i nederste halvdel.

La oss faktisk skrive den klassen som er forbundet med og styrer 'Digit' filmklipp

Opprett en ny klasse og legg følgende til det.
pakke {import flash.display.MovieClip; import flash.events.Event; import flash.geom.Rectangle; import com.greensock.TweenLite; import com.greensock.easing.Linear; public class Digit strekker MovieClip {statisk privat konst DIGIT_HEIGHT: uint = 25; statisk privat konst DIGIT_WIDTH: uint = 23; offentlig Var kolonne: MovieClip; private Var currval: int; private Var PREVVAL: int; offentlig funksjon Digit () {currval = 1; PREVVAL = 1; scrollRect = new rektangel (0, 0, DIGIT_WIDTH, DIGIT_HEIGHT); } Offentlig funksjon innstilt verdi (verdi: int): void {//Sett sifret verdi. PREVVAL = currval; currval = verdi% 10; //Hvis det er første gang så snapper til verdien. //Ellers flytte til verdien. if (PREVVAL == -1) {snapColumn (); } Else {moveColumn (); }} Offentlig funksjon får valuta (): int {return currval; } Private funksjon snapColumn (): void {column.y = -currVal * DIGIT_HEIGHT; } Private funksjon moveColumn (): void {//Stopp kolonne fra animere. TweenLite.killTweensOf (kolonne); //Sikre at vi starter fra øvre halvdel av kolonnen. if (column.y < - (DIGIT_HEIGHT * 10)) {column.y + = (DIGIT_HEIGHT * 10); } //Finn ut hvor mange vi er i dag stoppet på. Var valStoppedAt: int = Math.abs (column.y /DIGIT_HEIGHT); //Beregn y-posisjon kolonnen må flyttes til å //vise den nye dagens antall. Var targY: Number = -currVal * DIGIT_HEIGHT; //Hvis den nye nåværende verdien er mindre enn verdien vi stoppet på //da må vi simulere sifret innpakning tilbake rundt. For å gjøre //dette, vil vi rulle inn i bunnen halvparten av kolonnen. if (currval < valStoppedAt) {targY - = (DIGIT_HEIGHT * 10); } //Utfør selve rulle animasjon på kolonnen. Var varighet: uint = Math.abs (column.y - targY) /DIGIT_HEIGHT; TweenLite.to (kolonne, varighet, {y: targY, letthet: Linear.easeNone}); }}}

Lagre klassen som Digit.as.

Digit klasse offentlige API består av en enkelt eiendom som heter verdi. Ved å sette denne egenskapen, vil sifret bla til den verdien. Det er ett unntak fra dette likevel. Hvis verdien eiendommen blir satt for første gang da klassen vil bare plassere siffer om denne verdien i stedet for å bla til det. Dette gjør at sifret å bli satt i en innledende standardposisjon første gang sin verdi eiendommen ligger.

Ta en titt på import uttalelser i klassen. Du vil se at denne klassen, som Speedometer klassen, utnyttet TweenLite API:
import com.greensock.TweenLite, import com.greensock.easing.Linear;

Men så vel som å bruke TweenLite klasse vi også importere en av de TweenLite lettelser klasser navngitte Linear, som vil bli brukt til å definere hvordan kolonne med tall innenfor "Digit" filmklipp er tweened

Tre medlem variabler brukes innen Digit.as.:
offentlig Var kolonne: MovieClip; private Var currval: int; private Var PREVVAL: int;

Den første - Kolonnen - rett og slett har en referanse eksempel kolonnen som sitter på den "Digit" filmklipp tidslinje til. De andre to medlem variabler - currval og PREVVAL - brukes til å lagre gjeldende verdi at sifferet representerer og den forrige verdien det representert

Klassen har to konstanter erklærte at angi bredden og høyden på hver av de. numeriske verdier innenfor "Digit" filmklipp:
statisk privat konst DIGIT_HEIGHT: uint = 25; statisk privat konst DIGIT_WIDTH: uint = 23;

Disse konstantene blir brukt i ulike steder i hele klassen, den første er innenfor konstruktør:
offentlig funksjon Digit () {currval = 1; PREVVAL = 1; scrollRect = new rektangel (0, 0, DIGIT_WIDTH, DIGIT_HEIGHT);}

Som nevnt tidligere, vil bare én verdi vises til enhver tid innenfor "Digit" filmklipp. Dette kan oppnås ved å tegne en maske i "Digit" filmklipp tidslinje, men masker er CPU intensive og anbefales ikke for mobile enheter. En alternativ tilnærming til å skape en maske er å sette en skjerm objektets scrollRect eiendom. De DIGIT_WIDTH og DIGIT_HEIGHT konstanter brukes her til å definere en rektangulær region som sitter over det første sifferet i filmklipp kolonne.

I tillegg innenfor konstruktøren både currval og PREVVAL er misligholdt til -1, noe som indikerer at en verdi har ennå ikke er satt for sifret via sin verdi eiendom

Nå la oss se på den metoden som gjør at innstillingen av verdien boligen.
offentlig funksjon innstilt verdi (verdi: int): void {//Sett sifret verdi. PREVVAL = currval; currval = verdi% 10; //Hvis det er første gang så snapper til verdien. //Ellers flytte til verdien. if (PREVVAL == -1) {snapColumn (); } Else {moveColumn (); }}

Annet enn å sette den nye verdien og lagrer den forrige verdien bestemmer denne metoden om å rulle 'kolonne' eksempel er filmklipp til den nye verdien eller om det skal festes til det. Husk, når verdien er satt for første gang vi rett og slett ønsker å plassere 'kolonne' eksempel ved at verdien snarere enn å rulle.

Det mest kompliserte metode innen denne klassen er moveColumn (), som er ansvarlig for å skyve den "kolonne" eksempel for å vise den korrekte verdi for brukeren. Metoden er godt kommentert og er vist nedenfor:
privat funksjon moveColumn (): void {//Stopp kolonne fra animere. TweenLite.killTweensOf (kolonne); //Sikre at vi starter fra øvre halvdel av kolonnen. if (column.y < - (DIGIT_HEIGHT * 10)) {column.y + = (DIGIT_HEIGHT * 10); } //Finn ut hvor mange vi er i dag stoppet på. Var valStoppedAt: int = Math.abs (column.y /DIGIT_HEIGHT); //Beregn y-posisjon kolonnen må flyttes til å //vise den nye dagens antall. Var targY: Number = -currVal * DIGIT_HEIGHT; //Hvis den nye nåværende verdien er mindre enn verdien vi stoppet på //da må vi simulere sifret innpakning tilbake rundt. For å gjøre //dette, vil vi rulle inn i bunnen halvparten av kolonnen. if (currval < valStoppedAt) {targY - = (DIGIT_HEIGHT * 10); } //Utfør selve rulle animasjon på kolonnen. Var varighet: uint = Math.abs (column.y - targY) /DIGIT_HEIGHT; TweenLite.to (kolonne, varighet, {y: targY, lette: Linear.easeNone});

For de som krever nærmere forklaring, her er noen pseudo-kode som skal gjøre ting klarere}:

Hvis 'kolonne' ruller til en posisjon, stoppe det.

Hvis du på en verdi i nedre halvdel av kolonnen "og deretter hoppe til samme verdi i øvre halvdel.
< li> Beregn målet y-posisjon kolonnen "må flyttes til for å avsløre den nåværende verdien i den øverste halvdel av kolonnen.

Hvis den nåværende verdien er mindre enn den forrige verdien deretter justere målet y-posisjon for å sikre at vi bla til samme verdi i de nederste halvdel.

Bruk TweenLite, utløse rulle animasjon til målet y-posisjon.


Alt som gjenstår å gjøre nå er knytte klassen til "Digit" filmklipp i biblioteket.


Høyreklikk på "Digit" filmklipp i biblioteket og velg Egenskaper ... å ta opp Symbol dialogboksen Egenskaper


I dialogboksen, klikk på "Export for Action 'boksen og skriv" Digit "inn i Class-feltet.


Klikk OK og lagre din FLA <. br>

Nå er det på tide å teste Digit klasse og sikre at det fungerer som forventet


---


Trinn 17:. Teste en Digit


Vi kommer nærmere å fullføre kilometerteller, men før vi går videre la oss teste Digit klassen og se den i aksjon.


Vi bruker Application klassen for rask test.


Først drar en forekomst av ' Digit 'filmklipp fra biblioteket på roten tidslinjen. Navn forekomsten 'tallet' og plasserer den på scenen på (158, 449):


Innen Application.as, legge til følgende medlem variabel referanse til 'tallet' filmklipp eksempel:
offentlig Var siffer: Digit; offentlig Var speedometer: Speedometer, private Var geolocation: IGeolocation;

Nå, la oss gi den sifret et standardverdien ved å legge til følgende linje på slutten av Application klassens konstruktør:
geolocation.setRequestedUpdateInterval (1000 ); geolocation.addEventListener (GeolocationEvent.UPDATE, handleGeolocationUpdate); digit.value = 6;.

Lagre klassen


Publiser og teste dette på skrivebordet ved å velge Control | Test Movie | i Flash Professional.




Previous:Quick
Next Page:Quick Tips: Full Screen Tidslinje Presentation