Create en Apple Inspirert Flash preloader
Del
Del
en
Del
Dette Cyber mandag Envato Tuts + Kursene vil bli redusert til bare $ 3. Ikke gå glipp av.
To ganger i måneden, vi besøker noen av våre lesere favoritt innlegg fra hele historien Activetuts +. Denne opplæringen ble først publisert i juli 2009.
preloaders er en må ha i Flash-applikasjoner. De forteller brukeren at programmet kjører, men kan ikke vise noe innhold til de er tilstrekkelig lastet. I denne opplæringen vil jeg hjelpe deg med å opprette en Apple-inspirert preloader MovieClip og lære deg hvordan du kan vise noen Belastningen. Alt dette ved hjelp av Flash og Actionscript 3.0
Endelig resultat Forhåndsvisning
La oss ta en titt på det endelige resultatet vi skal jobbe mot.
Trinn 1: Kort oversikt
Vi kommer til å lage en preloader MovieClip bruker Flash verktøy som rektangel Primitive Tool og noe veldig viktig å få riktig justering: Fest til objekter alternativet . Klippet vil ha sin bevegelse i tidslinjen, og vi vil bygge koden i to klasser. Den første klassen vil ta vare på den preloader og den andre vil være dokument klasse, hvor vi skal starte preloader
Trinn 2:. Starte
Åpne Flash og skape en ny Flash-fil (Actionscript 3).
Sett scenen størrelsen på dine ønskede dimensjoner og legge til en bakgrunnsfarge. Jeg har brukt 600 x 300px i størrelse og lagt en grå radial gradient (# 666666, # 333333)
Trinn 3:. Opprette figurar
Dette preloader er sammensatt av én enkel form som gjentas 12 ganger.
Velg rektangel Primitive Tool og sette hjørnet radius til 15, sørge for å låse hjrneradius kontroll slik at hvert hjørne er like avrundet.
Set fargen til hvit og og tegne en 25 x 85px rektangel, ikke bruk et slag.
Det er det, dette er den grunnleggende formen som vil være den viktigste delen av vår preloader.
Trinn 4:. Plassere Shapes
Bruk Juster-panelet for å sette laget tidligere formen øverst midt på scenen
Duplicate formen (Cmd + D) og juster . det til bunn-senter
Duplicate både former og gå deretter til Endre > Transform > . Rotere 90º
Her kommer den vanskelige delen, velg Free Transform Tool og sørg for at du har valgt Fest til objekter alternativ (dette er magneten ikonet i verktøylinjen, eller du kan gå til Vis > snapping > Snap til objekter). Begynne å rotere topp- og bunn figurer, vil du legge merke til at rotasjonen stopper ved hver bestemt vinkel, vil vi bruke to stopp for å skille figurene fra hverandre, og endte til noe sånt som dette:
Trinn 5: Endre Alpha
Vi kommer til å endre formene 'alpha eiendom for å få "følge" effekten vi er ute etter. Det er 12 figurer, som er litt mer enn 8, men for å unngå bruk av desimaler vi satt ni i 8 multipler og for siste 3 vil vi legge til 10. Dette gir oss alpha verdier på 8, 16, 24 .. 0,72, 80, 90, 100. Ta en titt på bildet for å få ideen
Trinn 6:. Animere
Konverter alle figurene inn i en enkelt MovieClip og gi den navnet "preloader". Sjekk Export for Action boksen og skriv "classes.Preloader" i klassen tekstfeltet. Dobbeltklikk på klippet for å få tilgang til sin tidslinje. Animasjonen Prosessen er meget enkel; legge til en ny Keyframe og rotere figurer inntil 100% alpha formen er på plass der 8% alfa formen var. Gjenta dette til du får full animasjon. Rammene skal være i denne rekkefølgen:
Siden animasjonen tidslinje basert, hastigheten vil avhenge av bilder per sekund av filmen, er min 25fps og jeg har brukt 2 bilder per stat
.
Trinn 7: Velge Størrelse
Vår preloader er 300 x 300px i størrelse, normalt ville det ikke være så stor, men det er godt å ha muligheten. Velg en passende størrelse for din preloader og sentrere det på scenen. Jeg valgte 48 x 48px
Trinn 8:. Belastningen
Lag en dynamisk tekstfeltet og gi den forekomstnavnet "info". Dette vil vise den totale KB å laste, hvor mye som er lastet inn og prosent at det representerer. Skriv litt tekst for å få et inntrykk av størrelsen vil det bruke og sentrere det
Trinn 9:. Opprette Preloader Class
Opprett en ny Actionscript-fil og starte import av nødvendige klasser :
pakke klasser {import flash.display.MovieClip; import flash.text.TextField; import flash.events.Event; import flash.events.ProgressEvent;
Trinn 10: Utvide Class
public class Preloader strekker MovieClip {
Siden vår preloader er en MovieClip og den bruker en tidslinje, vi kommer til å utvide dette klasse bruker MovieClip klasse
Trinn 11:. Variabler
Vi trenger bare å bruke én variabel i denne klassen. Denne variabelen vil lagre forekomsten navnet på tekstfeltet vi bruker til å vise Belastningen
privat Var dataTextField: Textfield;
Trinn 12:. Begynn Funksjon
offentlig funksjon start (dataTextField: Textfield ): void {this.dataTextField = dataTextField; //Setter dataTextField Var til parameterverdien /* Den loaderInfo Object er ansvarlig for lasting prosessen, i denne koden legger vi lytterne til å sjekke fremdriften og når filmen er fullastet * /this.loaderInfo.addEventListener (ProgressEvent. PROGRESS, onProgress); this.loaderInfo.addEventListener (Event.COMPLETE, onComplete); }
Trinn 13: Fremskritts Function
privat funksjon onProgress (e: ProgressEvent): void {/* Her bruker vi noen lokale variabler å ta bedre lesekoden * /var loadedBytes: int = Math. runde (e.target.bytesLoaded /1 024); Var totalBytes: int = Math.round (e.target.bytesTotal /1024); Var prosent: int = (e.target.bytesTotal /e.target.bytesLoaded) * 100; /* Setter lasting av data til tekstfeltet * /dataTextField.text = String (loadedBytes + "med" + totalBytes + "KB Lastet \\ n" + prosent + "% Complete");}
Trinn 14: The Complete Funksjon
privat funksjon onComplete (e: Hendelses): 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 spesielt, jeg bare brukt et spor * /spor;}
Step 15 ("Loaded"): Dokument Class
Opprett en ny Action fil og begynne å skrive:
pakke klasser {import flash.display.MovieClip; public class Hoved strekker MovieClip {offentlig funksjon main (): void {/* Starter preloader, "preloader" er navnet på forekomsten av klippet * /preloader.start (info); }}}
Denne koden vil være dokumentet klassen, så gå tilbake til FLA fil og legge til "classes.Main" til klassen tekstfeltet i egenskapsvinduet.
Konklusjon
Du kan alltid endre fargen på preloader å bruke den med differents bakgrunn, er en enkel måte å gjøre det for å endre Tint verdien i egenskapene av klippet, prøv det!
Takk for at lesing, gjerne legge inn kommentarer og spørsmål.