Display Data Med Funky Animerte Needle Målere
Del
Del
Del
Del
Dette Cyber mandag Envato Tuts + kurs vil bli redusert til bare $ 3. Ikke gå glipp av.
Opprette tiltalende datavisualisering har alltid vært en av Flash viktigste funksjoner. Den lar deg oppnå eye candy resultater med ekte dynamisk data; det være seg i en preloader, et spill, eller et kontor presentasjon.
Denne enkle veiledningen vil vise deg hvordan å bygge en nål måler meter. Du vil lære å anvende en "glans" effekt, kommunisere med XML, og bruke en tween motoren rotasjoner
Trinn 1:. Folder Oppsett
Lag tre filer: gauge.fla, gauge.xml, og Main.as.
Trinn 2: XML Struktur
Åpne gauge.xml. Denne filen vil inneholde data som fylles meter; redigere dem slik du vil, basert på følgende struktur:?
< xml version = "1.0" encoding = "ISO-8859-1" > < indikatorer >? < måler > < verdi > 64 < /verdi > < beskrivelse > Mann < /beskrivelse > < /måler > < måler > < verdi > 26 < /verdi > < beskrivelse > Kvinne < /beskrivelse > < /måler > < /indikatorer >
Verdien er en prosentandel og så bør være mellom 0 og 100. Beskrivelsen vil vises på den tilsvarende måleren
Trinn 3: Stage Innstillinger
.
Åpne gauge.fla og endre innstillingene som vist nedenfor
Trinn 4:. Opprett Gauge Movie Clip
Opprett et nytt symbol, navn det gauge_mc Hotell og sette Class til Gauge Deretter oppretter du en sirkel som vist nedenfor: Dette vil danne måleren er innmaten , så nevne dette laget "bakgrunn" Legg et strøk med blekkhus verktøyet (snarvei: S) med følgende innstillinger: Bytt til markeringsverktøyet, klikker du på hjerneslag å velge det, og trykk Modify > Shape > Konverter Lines til Fyller Lag et nytt lag, you name it "nål pin" og i sentrum make en liten grå sirkel med en tykk svart ramme: Lag et nytt lag under pinnen sin og gi den navnet "nål". Tegne en linje, konvertere linjen til en fyll og konvertere dette fyllet til et symbol (kalt needle_mc). Du må flytte både registreringspunkt og rotasjonspunktet av denne nye symbolet til sentrum av bunnen av linjen. For å flytte registreringspunkt, dobbeltklikker du på nål for å redigere, deretter flytter du fyllet til registreringspunktet er på riktig sted. For å flytte rotasjonspunktet, gå tilbake til å redigere gauge_mc symbol, og deretter bruke Free Transform verktøyet (snarvei: Q) for å dobbeltklikke den lille sirkelen. Dette vil knipse det til registreringen nålespissen Lag et nytt lag under nålen er navngitt "markører". Tegn en sirkel, mindre enn rammen, med en tykk svart strek og ingen fyll På et annet nytt lag, velg Polystar verktøyet, og bruke den til å skape en ti-sidig stjerne, sentrert på pinnen. Vi vil bruke dette til å lage de små markører rundt ringen På markører lag, tegne tynne linjer fra nålen til hvert punkt av stjernen. På denne måten vet du at de er jevnt fordelt Lag en sirkel enda mindre enn markøren ring, velg deretter linjene inne i denne sirkelen og trykk delete for å slette dem alle Slett den indre sirkel, de ytre markører og den nederste delen av markør ringen, som uthevet nedenfor: Label markører: den første som 0, den mellomste som 50, og den siste som 100. Lag et nytt lag på toppen av alle de andre navngitte "glass" og en annen ovenfor som heter "glans". I glasslag, tegne en hvit sirkel på størrelse med bakgrunnen. Klikk på Vindu > Color Hotell og gi den en radial gradient fyll, der begge fargene er hvit, men man har en 20% alfa og den andre har en 5% alfa. I gloss lag, skape to hvite sirkler med gradient alfaer som går fra 70% til 30%. Bruk markeringsverktøyet til å presse sine figurer til de som er vist nedenfor: Lag en ny layer som heter "label" og legge til et tekstfelt med "label_txt" som sin forekomsten navn. Ikke glem å legge ned skriften Legg et nytt lag som heter "verdi" og legge til et tekstfelt med "value_txt" som sitt eksempel navn. Igjen, ikke glem å legge ned i skriftene. Jeg bruker en font som heter LCDDot, som du finner i zip-filen Akkurat nå er nålen peker på 50% mark . Vi trenger det for å peke på 0% når den starter, så dobbeltklikk på "needle_mc", velg fyll og roter det til -143º. Dette vil gi oss forskyvningen vi trenger Pass på at ingenting er valgt, deretter i Properties panelet, skriv Hoved Vi skal bruke GreenSock sin tweening motor, TweenMax. Du kan laste det ned her: http://blog.greensock.com/tweenmax/ Importer de nødvendige klassene for Main.as: Denne koden skal gå etter "import com.greensock.events.TweenEvent;" men før den siste "}". Main () -funksjonen vil være den første funksjonen kjøre når SWF laster Sett denne koden før de to siste "}" i filen. Denne funksjonen vil bli kjørt når XML har lastet Igjen, sett dette før de to siste "}" i koden din Denne funksjonen er kjørt flere ganger som nålen tweened (rotert) Forvirret om hvor noen av koden bør gå? Sjekk det ut her Nå er alt du trenger er å dra tilbake til gauge.fla, og i den første rammen legge en bakgrunn og en tittel: Som du ser, det er enklere enn det ser ut. Ta deg god tid og utvide på konseptet: lage en preloader, en båndbredde meter, uansett hva du liker. Håper du likte denne opplæringen, takk for lesing!
Trinn 5:. Bakgrunns Innstillinger
Trinn 6:. Legg et området Stroke
< p> (Klikk på bakgrunn sirkel å påføre slag.)
Trinn 7: Lag en ramme med gradient effekter
. Nå, kopiere fyll og lime den inn i et nytt lag, opprettet ovenfor eksisterende lag, kalt "ramme". Legg til to nye graderings slag, hver enkelt piksel tykk. Man går på innsiden av rammen, den andre går på utsiden
Trinn 8:. Tegn Pin
Trinn 9: Tegn Needle
Trinn 10:. Tegn Marker Ring
Trinn 11:. Lag en stjerne
Trinn 12:. Koble stjernens til senteret
Trinn 13:. Lag en Inner Circle for Beskjæring
Trinn 14:. Ytterligere Avlinger
Trinn 15: Label Markører
Trinn 16: Gjør Glassaktig og Glossy Effects
Trinn 17: Legg en beskrivelse Etikett
Trinn 18: Legge til en verdi etikett
Trinn 19:. Korrigering av Needle rotasjon Point
Trinn 20:. Sett Document Class
inn Klasse boksen for å sette Main.as som dokumentet klassen. Nå åpner det
Trinn 21:. Import Classes
pakke {import flash.display.MovieClip; import flash.events.Event; import flash.net.URLLoader; import flash.net.URLRequest; import com.greensock.TweenMax; import com.greensock.events.TweenEvent; }
Trinn 22: Skriv hoved Constructor
public class Hoved strekker MovieClip {private Var xmlLoader. URLLoader; //dette vil laste xml private Var xml: XML; //dette vil inneholde xml data lastet av xmlLoader private Var målere: Array; //dette vil lagre de opprettede målere offentlig funksjon main () {målere = new Array (); //Start rekken xmlLoader = new URLLoader (); //Start lasteren xmlLoader.addEventListener (Event.COMPLETE, updateGauges) //når XML er lastet, oppdaterer målere xmlLoader.load (ny URLRequest ("gauge.xml")); //initierer lasting av XML-filen}}
Trinn 23: Gjør Gauge Flytt
privat funksjons updateGauges (e: Hendelses):. Void {//fylles xml med den mottatte data xml = new XML (e.target.data); //gjentas gjennom målere inne i xml struktur Var ln: int = xml.gauge.length (); //antall < måler > s inne i XML-filen Var i: int = 0 while (i < ln) {målere [i] = new Gauge (); //oppretter et nytt Gauge og setter den i målerne [] rekke måleinstrumenter [i] .label_txt.text = xml.gauge [i] .description [0] .toUpperCase (); //legger beskrivelsen til etiketten av i-te måler basert på XML i-th < måler > målere [i] .value_txt.text = "0%" //starter måleren måleren verdi //animerer måleren rotasjon (286 er maksimal rotasjon av nålen vi bygget) Var TM: TweenMax = nye TweenMax (målere [i] .needle_mc, 2, {rotasjon: Math.round (xml.gauge [i] .value [0] * 286/100)}); //denne hendelsen blir aktivert når tween verdiendringer; Vi gjør dette for å oppdatere verdien teksten i henhold til nåleposisjon tm.addEventListener (TweenEvent.UPDATE, onTween) //y posisjonerings målere [i] .Y = 45 //x posisjonering (220 piksler av avstanden mellom dem og 50 piksler offset fra venstre marg målere [i] .x = (i * 220) + 50 //legger til scenen addChild (måleinstrumenter [i]); //øker jeg for neste iterasjon i ++}}
Trinn 24: Gjør Tall Endre
privat funksjon onTween (e: Hendelses):.. void {/* dette vil hindre en velkjent rotasjon bug inne flash * der, når du roterer, etter at den når 180º det begynner å telle opp fra -180 * (dvs. 0 til 180, -180 til 0). Ved å legge 360 til ligningen når rotasjonen er negativ * vi kan sørge for at verdien er korrekt * * /if (e.target.target.rotation < 0). {e.target.target.parent.value_txt.text = (Math.round (( 360 + e.target.target.rotation) * 100/286) + "%"); } else {e.target.target.parent.value_txt.text = (Math.round (e.target.target.rotation * 100/286) + "%"); }}
Trinn 25: Sjekk ut full Kode
Trinn 26:. Finish Up
Konklusjon