Share
To ganger i måneden besøker vi noen av våre leseres favorittinnlegg fra hele historien til Activetuts +. Denne opplæringen ble først publisert i juli 2009.
Preloaders er et must i dine Flash-applikasjoner. De forteller brukeren at programmet kjører, men kan ikke vise noe innhold før de er tilstrekkelig lastet. I denne opplæringen hjelper jeg deg med å lage en Apple-inspirert forhåndslaster MovieClip og lære deg hvordan du viser noen innlastingsinformasjon. Alt dette ved hjelp av Flash og ActionScript 3.0.
La oss se på det endelige resultatet vi skal jobbe for:
Vi skal lage en forhåndslaster MovieClip ved hjelp av Flash-verktøy, for eksempel Primitive Tool Rectangle og noe som er veldig viktig for å få riktig justering: Snap To Objects-alternativet. Klippet vil ha sin bevegelse i tidslinjen, og vi vil bygge koden i to klasser. Første klasse vil ta vare på forladeren, og den andre vil være Dokumentklassen, hvor vi starter forladeren.
Åpne Flash og opprett en ny Flash-fil (ActionScript 3).
Still scenestørrelsen til ønsket mål og legg til en bakgrunnsfarge. Jeg har brukt 600 x 300px i størrelse og lagt til en grå radialgradient (# 666666, # 333333).
Denne forladeren består av en enkel form som gjentas 12 ganger.
Velg Primitive Tool Rectangle og sett hjørneradiusen til 15, pass på å låse hjørne radius kontroll slik at hvert hjørne er like avrundet.
Sett fargen til hvit og tegne et 25 x 85px rektangel, ikke bruk et slag.
Det er det, dette er den grunnleggende formen som vil være hoveddelen av vår preloader.
Bruk Juster-panelet til å angi den tidligere opprettede formen øverst på scenen.
Dupliser formen (Cmd + D) og juster den til bunnsenteret.
Dupliser begge formene og gå til Endre> Forvandle> Roter 90?.
Her kommer den vanskelige delen, velg Free Transform Tool og sørg for at du har valgt alternativet Snap To Objects (dette er magnetikonet i verktøylinjen, eller du kan gå til Vis> Snapping> Snap to Objects). Begynn å rotere topp- og bunnformene, og du vil merke at rotasjonen stopper ved hver bestemt vinkel. Vi bruker to stopp for å skille figurene fra hverandre og slutter til noe slikt:
Vi endrer formene 'alpha-egenskapen for å få følger-effekten vi er ute etter. Det er 12 figurer, det er litt mer enn 8, men for å unngå bruk av decimaler vil vi sette 9 i 8 multipler og for de siste 3 vil vi legge til 10. Dette gir oss alfa verdier på 8, 16, 24? 72, 80, 90, 100. Ta en titt på bildet for å få ideen.
Konverter alle former til en enkelt MovieClip og gi den navnet "Preloader". Merk av for Eksporter for handlinger og skriv "classes.Preloader" i klassetekstfeltet. Dobbeltklikk på klippet for å få tilgang til tidslinjen. Animasjonsprosessen er veldig enkel; legg til en ny keyframe og roter figurene til den 100% alfaformen er i posisjon der 8% alfaformen var. Gjenta dette til du får full animasjon. Rammer skal være i denne rekkefølgen:
Siden animasjonen er tidslinjebasert, vil hastigheten avhenge av rammene per sekund av filmen, min er 25 fps og jeg har brukt 2 bilder per stat.
Vår preloader er 300 x 300 px i størrelse, normalt ville det ikke være så stort, men det er godt å ha muligheten. Velg en passende størrelse for preloaderen og senter den på scenen. Jeg valgte 48 x 48px.
Opprett et dynamisk tekstfelt og gi det forekomstnavnet "info". Dette viser total KB for å laste, beløpet som for øyeblikket er lastet og prosentandelen som den representerer. Skriv litt tekst for å få en ide om størrelsen den vil bruke og sentrere den.
Opprett en ny ActionScript-fil og begynn å importere de nødvendige klassene:
pakklasser import flash.display.MovieClip; importer flash.text.TextField; importere flash.events.Event; importer flash.events.ProgressEvent;
offentlig klasse Preloader utvider MovieClip
Siden vår preloader er en MovieClip, og den bruker en tidslinje, skal vi utvide denne klassen ved hjelp av MovieClip-klassen.
Vi trenger bare å bruke en variabel i denne klassen. Denne variabelen lagrer forekomstnavnet til tekstfeltet vi bruker for å vise lasteinformasjonen.
private var dataTextField: TextField;
offentlig funksjonstart (dataTextField: TextField): void this.dataTextField = dataTextField; // Setter dataTextField var til parameterverdien / * LoaderInfo Object er ansvarlig for lasteprosessen, i denne koden legger vi til lyttere for å sjekke fremdriften og når filmen er fullt lastet * / this.loaderInfo.addEventListener (ProgressEvent. PROGRESS, onProgress); this.loaderInfo.addEventListener (Event.COMPLETE, onComplete);
privat funksjon onProgress (e: ProgressEvent): void / * Her bruker vi noen lokale variabler for å lage bedre lesekode * / var loadedBytes: int = Math.round (e.target.bytesLoaded / 1024); var totalBytes: int = Math.round (e.target.bytesTotal / 1024); var prosent: int = (e.target.bytesTotal / e.target.bytesLoaded) * 100; / * Setter innlastingsdataene til tekstfeltet * / dataTextField.text = String (loadedBytes + "of" + totalBytes + "KB Loaded \ n" + prosent + "% Complete");
Accentsconagua
privat funksjon onComplete (e: Event): void / * Fjern lyttere * / this.loaderInfo.removeEventListener (ProgressEvent.PROGRESS, onProgress); this.loaderInfo.removeEventListener (Event.COMPLETE, onComplete); // Her kan du legge til en funksjon for å gjøre noe spesifikt, jeg brukte bare et spor * / spor ("Lastet!"); Opprett en ny ActionScript-fil og begynn å skrive:
pakklasser import flash.display.MovieClip; offentlig klasse Main utvider MovieClip offentlig funksjon Main (): void / * Starter forprogrammerer, "preloader" er forekomstnavnet på klippet * / preloader.start (info);
Denne koden blir dokumentklassen, så gå tilbake til .Fla-filen og legg til "classes.Main" til klassetekstfeltet i egenskapspanelet.
Du kan alltid endre fargene på forhåndsinnlasteren for å bruke den med differents bakgrunner. En enkel måte å gjøre det på er å endre tynnverdien i egenskapene til klippet, prøv det!
Takk for at du leser, vær så snill å legge igjen kommentarer og spørsmål.
