Loading data med kommandoer
Del
Del
Del
Del
Dette Cyber mandag Envato Tuts + kurs vil bli redusert å bare $ 3. Ikke gå glipp av.
Det er veldig vanlig å laste eksterne data (for eksempel SWF-filer) under kjøring, men bare når data er helt full kan vi lese eller manipulere innholdet. Vanligvis må vi lytte til hele hendelsen sendt ut av en Loader Denne opplæringen viser hvordan du oppretter en laste forlengelse til kommandoen rammeverk i min forrige tutorial, Tenker i Kommandoer del 1 av 2, å pakke laste ferdigstillelse håndtering på ett sted. Denne laste extension kan også kombineres med scenen rammeverket dekket Tenker på kommandoer del 2 av 2. Mange klasser som brukes i denne opplæringen er dekket i forrige tutorial, så jeg anbefaler at du leser de tidligere tutorials før du går videre. I tillegg introduserer denne opplæringen begrepet data manager, en sentral "bank" som lagrer referanser til dataobjekter. Du kan registrere data til data krybbe med en unik nøkkel streng, og senere få tilgang til data ved å gi den tilsvarende tasten streng. Dette sparer deg bryet med å holde referanser av dataobjekter og noen variable siktet problemer. Forresten, trenger du GreenSock Tweening Platform for å fullføre disse eksemplene. Normalt vi håndtere de innlastede data i hele arrangementet lytteren funksjon. Dette bryter hverandre to biter av kode som er logisk koblet. Og ved å se på koden, kan det hende at strømmen av tanken bli avbrutt som ditt syn hopper fra laste funksjonen til hele arrangementet lytteren. La oss se på logikken flyten av en naiv SWF lasting tilnærming. Anmeldelser Lasteren laster en SWF fra en URL, og onComplete () Neste, innenfor onComplete () Den høyt nivå logikk flyt er svært lineær. påkalle Loader.load () Det er når Command tilnærming kommer inn i bildet. Fra diagrammet nedenfor, kan vi se at koden er ganske lineær ved hjelp av kommandoer, ved at alle kommandoene er lineært lenket sammen av en serie kommando. Selv om programmet "viderekobling" inn i setProperties () Alright, før vi kommer ned til noe mer om lasting, la oss først ta en titt på DataManager Kodingen er ganske grei, som vist nedenfor. Så når vi ønsker å registrere en nøkkel streng "MYDATA" med et dataobjekt - la oss si, en sprite - vi kunne skrive koden som følger: Senere, hvor som helst i koden, kunne vi skrive følgende kode for å få en henvisning av sprite og legge den til en skjerm listen. Så enkelt er det, ingen flere spørsmål om å opprettholde objektreferanser og variable scope Nå la oss ta en titt på hvordan den naive lasting tilnærming laster en ekstern bilde. Laste koden ligger i en funksjon, og fullføringen håndteringskode ligger i et annet. Vi kommer til å laste inn tre bilder og legge dem til scenen når lastingen er fullført. Dessuten vil vi overvåke innlastingen ved å lytte til fremdriften hendelser Åpne Flash og opprette en ny Flash Document Anmeldelser Tegn en fremdriftslinje på scenen; Dette er for å representere den innlastingen. Konvertere hele fremdriftslinjen til et symbol og gi den en forekomst navnet "progressBar_mc". Innen fremdriftslinjen symbol, konvertere den indre fremdriftslinjen til et annet symbol, og gi den en forekomst navnet "innerBar_mc" Plasser tre bilder i samme mappe som FLA-filen, som heter "bilde1.jpg", "bilde2.jpg", og "image3.jpg". Her er hva de tre bildene ser ut som Opprett en ny AS filen for dokumentet klasse for FLA filen. Koden er ganske grei, og alle detaljer er forklart i kommentarfeltet. Først blir tre hjullastere opprettet og lasting starter. På hver fremgang hendelse, fremdriftslinjen oppdatert. Når lastingen er fullført, blekner fremdriftslinjen ut og de tre bildene visne i en etter en Trykk CTRL + ENTER for å teste filmen. Du vil se at fremdriftslinjen umiddelbart fades ut og de tre bildene falmer i. Det er fordi bildene er lokale filer, som betyr at de kan legges nesten umiddelbart. For å simulere online nedlastingshastighet, velger du først View > Last ned Innstillinger > DSL Ok, er det på tide å laste inn bilder med kommandoen rammeverket. Før vi går videre, la oss lage noen nytte kommandoer som skal brukes senere i eksempelet. Igjen er disse kommando klasser basert på kommando rammeverket presentert i min forrige tutorial (del 1), og jeg anbefaler at du går gjennom dem før du går videre. Hvis du har lest veiledningen før, kan du alltids ta turen tilbake hvis du trenger minne uthvilt. Her har vi tenkt å lage to kommandoer for å registrere og avregistrere data for dataene leder klassen. RegisterData Denne kommandoen omslutter en Loader Denne kommandoen innkapsler påkallelse av en annen funksjon. Den er designet slik at du kan gi en ekstra parameter array for funksjonen som skal påberopes Det var det. . Tid for eksempel Kopier FLA filen fra forrige eksempel til en ny mappe og kopiere bildefilene sammen med det Opprett en ny AS filen for dokumentet klasse av den kopierte FLA-filen, som heter "LoadingDataWithCommands". Husk å endre klasse dokumentnavnet i FLA filen til denne nye. Koden for dokumentet klassen er ganske ren. Det setter bare den aktuelle scenen til en LoadingScene Det er to scener totalt. LoadingScene Utvide < em> Scene Nå, lage intro kommando for lasting scenen. Introen vil opprette tre hjullastere og begynne lasteprosessen. Dette gjøres ved å overstyre createIntroCommand () Deretter overstyre onSceneSet () Og da overstyre createOutroCommand Anmeldelser . Denne kommandoen skal fade ut fremdriftslinjen Til slutt opprette onProgress Nå opprette en ny klasse for hovedscenen, utvide < em> Scene Overstyr createIntroCommand () Alright. Vi er ferdige! Test filmen og simulere online nedlasting. Du vil se nøyaktig samme resultat som i forrige eksempel, men denne gangen det er gjort med kommandoen rammeverk og scenen rammeverk. I denne opplæringen, jeg har vist deg hvordan du legger eksterne bilder med kommandoen rammeverket. LoaderLoad Vi har skrevet mer kode i det andre eksemplet enn den første. Husk at hensikten med å bruke kommandoen rammeverket og scenen rammeverket er ikke å oppnå samme resultat med mindre kode, men å forvalte koden på en systematisk og modulær tilnærming, noe som gjør livet ditt lettere når det kommer til fremtidig vedlikehold og modifikasjon. Det første eksemplet klemmer all koden inn i en enkelt klasse, noe som gjør det vanskelig for fremtidig vedlikehold hvis koden beløpet skal vokse ekstremt store. Det andre eksemplet, derimot, skiller logisk uavhengig koden i forskjellige scener, noe som gjør det lettere for fremtidige endringer. Også, ved å integrere med kommandoen rammeverk og scenen rammeverk, har vi gjort plass til fremtidig utvidelse, hvor vi kan legge til flere scener og intro /outro kommandoer uten å forstyrre irrelevant kode. Dette er slutten av denne opplæringen. Jeg håper du likte den. Takk for lesing!
eller URLLoader
objekt som laster inn data for ferdigstillelse håndtering. Ofte vi skrive kode som laster dataene i én funksjon, og skrive kode som håndterer gjennomføring av lasting i en annen funksjon, men dette kan forbedres ved å gruppere hele lasteprosessen sammen ..
Hvorfor laste data med kommandoer?
funksjonen er påberopt av dispatchEvent ()
metode som sender en komplett hendelse, der dispatchEvent ()
metoden startes internt av lasteren. Vel, faktisk, det er påberopt av LoaderInfo
objekt som tilhører Loader
objekt, men for enkelhets skyld, la oss bare si det dispatchEvent ()
metoden er påberopt av Loader.
funksjon, doMoreStuff ()
funksjonen er påberopt etter start ferdigstillelse håndtering er gjort, og som funksjonens navn antyder, gjør flere ting
metoden først, onComplete ()
andre, og doMoreStuff ()
tredje. Men som du vil legge merke til fra diagrammet, blir hver funksjon er påkallelse integrert i funksjon liket av den forrige, noe som resulterer i en "nestet" kode. I min egen mening, hvis logikken flyten av en viss funksjonalitet er lineær, den tilhørende koden skal være skrevet på en lineær måte, ikke nestet. Ellers kan koden noen ganger bli forvirrende hvis påkalling reiret nivået er for høyt.
, addChildLoader ()
, og doMoreStuff ()
funksjoner; deres påkallelse er lineær.
Data Manager
klasse. En data manager kan du knytte en nøkkelstreng med et dataobjekt, og du kan få en henvisning til dette dataobjekt overalt i koden. Med data manager, trenger du ikke å bekymre deg for å holde data referanser og variable omfang. Alt du trenger å gjøre er å registrere et stykke data til sjefen med en nøkkel streng
Pakkedata {import flash.utils.Dictionary; public class DataManager {//en ordbok som opprettholder streng-data relasjoner privat Static Var _data: ordbok = new ordbok (); //returnerer dataobjektet forbundet med en nøkkel streng public static funksjon GetData (nøkkel: String): * {return _data [key]; } //Registrerer et dataobjekt med en nøkkel streng public static funksjon registerData (nøkkel: String, data: *): void {_data [key] = data; } //Avregistrerer en nøkkelstreng public static funksjon unregisterData (nøkkel: String): void {slette _data [key]; } //Avregistrerer alle nøkkel strenger public static funksjon clearData (): void {for (var nøkkelen: String i _data) {slette _data [key]; }}}}
Var sprite: Sprite = new Sprite (); DataManager.registerData ("MYDATA", sprite);
Var sprite:. Sprite = DataManager. GetData ("MYDATA") som Sprite, container.addChild (sprite);
Naive Laster Approach
Trinn 1:.. Lag en Flash dokument
Trinn 2: Lag en Progress Bar
Trinn 3:. Forbered Images
Trinn 4:. Opprett dokument Class
pakke {import com.greensock.TweenMax.; import flash.display.DisplayObject; import flash.display.Loader; import flash.display.MovieClip; import flash.events.Event; import flash.events.ProgressEvent; import flash.net.URLRequest; public class NaiveLoading strekker MovieClip {private Var loader1: Loader; private Var loader2: Loader; private Var loader3: Loader; offentlig funksjon NaiveLoading () {//krympe fremdriftslinjen til null skala progressBar_mc.innerBar_mc.scaleX = 0; //oppretter lastere loader1 = new Loader (); loader2 = new Loader (); loader3 = new Loader (); //legger fremdrifts lyttere loader1.contentLoaderInfo.addEventListener (ProgressEvent.PROGRESS, onProgress); loader2.contentLoaderInfo.addEventListener (ProgressEvent.PROGRESS, onProgress); loader3.contentLoaderInfo.addEventListener (ProgressEvent.PROGRESS, onProgress); //legger kompletterings lyttere loader1.contentLoaderInfo.addEventListener (Event.COMPLETE, onComplete); loader2.contentLoaderInfo.addEventListener (Event.COMPLETE, onComplete); loader3.contentLoaderInfo.addEventListener (Event.COMPLETE, onComplete); //Start lasting loader1.load (ny URLRequest ("bilde1.jpg")); loader2.load (ny URLRequest ("bilde2.jpg")); loader3.load (ny URLRequest ("image3.jpg")); } Private funksjon onProgress (e: ProgressEvent): void {//beregne total biter å laste Var bytesTotal: uint = 0; bytesTotal + = loader1.contentLoaderInfo.bytesTotal; bytesTotal + = loader2.contentLoaderInfo.bytesTotal; bytesTotal + = loader3.contentLoaderInfo.bytesTotal; //beregne total biter lastet Var bytesLoaded: uint = 0; bytesLoaded + = loader1.contentLoaderInfo.bytesLoaded; bytesLoaded + = loader2.contentLoaderInfo.bytesLoaded; bytesLoaded + = loader3.contentLoaderInfo.bytesLoaded; //oppdatering fremdriftslinjen skala progressBar_mc.innerBar_mc.scaleX = bytesLoaded /bytesTotal; } Private Var _completeCount: int = 0; privat funksjon onComplete (e: Hendelses): void {_completeCount ++; if (_completeCount < 3) tilbake; //fjerne fremgang lyttere loader1.contentLoaderInfo.removeEventListener (ProgressEvent.PROGRESS, onProgress); loader2.contentLoaderInfo.removeEventListener (ProgressEvent.PROGRESS, onProgress); loader3.contentLoaderInfo.removeEventListener (ProgressEvent.PROGRESS, onProgress); //fjerne kompletterings lyttere loader1.contentLoaderInfo.removeEventListener (Event.COMPLETE, onComplete); loader2.contentLoaderInfo.removeEventListener (Event.COMPLETE, onComplete); loader3.contentLoaderInfo.removeEventListener (Event.COMPLETE, onComplete); Var image1: Displayobject = loader1.content; Var image2: Displayobject = loader2.content; Var image3: Displayobject = loader3.content; //justere lastet bilde stillinger image1.x = 30, image1.y = 30; image2.x = 230, image2.y = 30; image3.x = 430, image3.y = 30; //legge lastet bilder å vise liste addChild (image1); addChild (image2); addChild (image3); //fade ut fremdriftslinje TweenMax.to (progressBar_mc, 0.5, {autoAlpha: 0, blurFilter: {blurX: 20, Blury: 20}}); //visne i lastede bilder TweenMax.from (image1, 0.5, {forsinkelse: 0,5, alpha: 0, blurFilter: {blurX: 20, Blury: 20}}); TweenMax.from (image2, 0.5, {forsinkelse: 0,7, alpha: 0, blurFilter: {blurX: 20, Blury: 20}}); TweenMax.from (image3, 0.5, {forsinkelse: 0,9, alpha: 0, blurFilter: {blurX: 20, Blury: 20}}); }}}
Trinn 5: Test Movie
som simulerte nedlastingshastighet, og trykk deretter CTRL + ENTER igjen uten å lukke testvinduet for å starte simulere online nedlasting. Denne gangen skal du se fremgangen vokse gradvis bredere før det forsvinner ut.
redskaps Kommandoer
data ledere Kommandoer
kommandoregistre data til lederen, mens UnregisterData
kommando avregistrerer data
pakke commands.data {import commands.Command.; import data.DataManager; //denne kommandoregistre data til data manager public class RegisterData strekker Command {public Var nøkkel: String; offentlig Var data: *; offentlig funksjon RegisterData (nøkkel: String, data: *) {this.key = nøkkel; this.data = data; } Ride beskyttet funksjon utføre (): void {DataManager.registerData (nøkkel, data); fullstendig(); }}} Pakken commands.data {import commands.Command; import data.DataManager; //denne kommandoen avregistrerer data fra data manager public class UnregisterData strekker Command {public Var nøkkel: String; offentlig funksjon UnregisterData (nøkkel: String) {this.key = nøkkel; } Ride beskyttet funksjon utføre (): void {DataManager.unregisterData (nøkkel); fullstendig(); }}}
Den LoaderLoad Command
eksempel er load ()
metoden. Du kan gi en onProgress
kommando som kjøres på hver fremgang hendelse og en onComplete
henrettet når lastingen er fullført. Legg merke til at komplett ()
metoden startes når lastingen er fullført. Dette kodelinje er ekstremt viktig. Hvis du ikke kalle metoden, vil kommandoen aldri betraktes som komplett, jamming hele programmet i verste fall
pakke commands.loading {import commands.Command.; import flash.display.Loader; import flash.events.Event; import flash.events.ProgressEvent; import flash.net.URLRequest; import flash.system.LoaderContext; public class LoaderLoad strekker Command {public Var loader: Loader; offentlig Var url: URLRequest; offentlig Var kontekst: LoaderContext; offentlig Var onProgress: Command; offentlig Var onComplete: Command; offentlig funksjon LoaderLoad (loader: Loader, url: URLRequest, kontekst: LoaderContext = null, onProgress: Command = null, onComplete: Command = null) {this.loader = loader; this.url = url; this.context = sammenheng; this.onProgress = onProgress; this.onComplete = onComplete; } Ride beskyttet funksjon utføre (): void {//legge lyttere loader.contentLoaderInfo.addEventListener (ProgressEvent.PROGRESS, progressListener); loader.contentLoaderInfo.addEventListener (Event.COMPLETE, completeListener); loader.contentLoaderInfo.addEventListener (Event.COMPLETE, loadingComplete); //Start lasting loader.load (url, kontekst); } Private funksjon loadingComplete (e: Hendelses): void {//fjerne lyttere loader.contentLoaderInfo.removeEventListener (ProgressEvent.PROGRESS, progressListener); loader.contentLoaderInfo.removeEventListener (Event.COMPLETE, completeListener); loader.contentLoaderInfo.removeEventListener (Event.COMPLETE, loadingComplete); fullstendig(); } Private funksjon progressListener (e: ProgressEvent): void {//utføre onProgress kommandoen if (onProgress) onProgress.start (); } Private funksjon completeListener (e: Hendelses): void {//utføre onComplete kommandoen if (onComplete) onComplete.start (); }}}
Den InvokeFunction Command
pakke commands.utils {import commands.Command.; //denne kommandoen påkaller en funksjon public class InvokeFunction strekker Command {public Var func: Function; offentlige Var args: Array; offentlig funksjon InvokeFunction (func: Funksjon, args: Array = null) {this.func = func; this.args = args; } Ride beskyttet funksjon utføre (): void {func.apply (null, args); fullstendig(); }}}
Trinn 1:. Kopier Flash Document File
Trinn 2: Opprett dokument Class
med en scene manager. Vi bruker scenen rammeverket presentert i min forrige tutorial (del 2). Du kan sjekke det ut hvis du har glemt hvordan du bruker den
pakke {import flash.display.MovieClip.; import scenes.SceneManager; public class LoadingDataWithCommands strekker MovieClip {offentlig funksjon LoadingDataWithCommands () {var sceneManager: SceneManager = new SceneManager (); sceneManager.setScene (ny LoadingScene (denne)); }}}
laster bildene og oppdaterer fremdriftslinjen. Etter at lastingen er fullført, scene transporter til MainScene
, som blekner i belastede Images
Trinn 3:. Den Loading Scene
klasse for å lage en ny klasse som heter LoadingScene
. container
Eiendommen har en referanse til hoved sprite. Dette gir oss muligheten til å få tilgang til fremdriftslinjen senere
pakke {import scenes.Scene.; public class LoadingScene strekker Scene {private Var container: LoadingDataWithCommands; offentlig funksjon LoadingScene (container: LoadingDataWithCommands) {this.container = beholder; }}}
metoden. Følgende kode går inn i klassen kroppen, samme som konstruktøren
//introen kommandoen begynner lasting av de tre imagesoverride offentlig funksjon createIntroCommand (): Command {var loader1. Loader = new Loader (); Var loader2: Loader = new Loader (); Var loader3: Loader = new Loader (); Var kommando: Command = new ParallelCommand (0, //krympe fremdriftslinjen for å nullstilt nye SetProperties (container.progressBar_mc.innerBar_mc, {scaleX: 0}), //lastrelaterte kommandoer som utføres i serie nye SerialCommand (0, //registrerer tre hjullastere til data manager ny ParallelCommand (0, ny RegisterData ("loader1", loader1), ny RegisterData ("loader2", loader2), ny RegisterData ("loader3", loader3)), //Start tre-lasting kommandoer i parallell ny ParallelCommand (0, ny LoaderLoad (loader1, ny URLRequest ("bilde1.jpg"), null, ny InvokeFunction (onProgress) //onProgress kommando), ny LoaderLoad (loader2, ny URLRequest ("bilde2.jpg") , null, ny InvokeFunction (onProgress) //onProgress kommando), ny LoaderLoad (loader3, ny URLRequest ("image3.jpg"), null, ny InvokeFunction (onProgress) //onProgress kommando)))); tilbake kommandoen;}
metoden. Denne metode kalles når intro-kommandoen er fullført, noe som indikerer at lastingen er fullført. Innenfor denne metoden, forteller vi scenen manager til transitt til hovedscenen. Før scenen overgangen blir outro kommandoen kjøres først
styre offentlig funksjon onSceneSet (). Void {sceneManager.setScene (ny MainScene (container));}
//den outro kommandoen fades ut fremdriften baroverride offentlig funksjon createOutroCommand (). Command {var kommandoen: Command = new SerialCommand (0, //fade ut fremdriftslinje ny TweenMaxTo (container .progressBar_mc, 0.5, {autoAlpha: 0, blurFilter: {blurX: 20, Blury: 20}}), //fjerne fremdriftslinje fra visningsliste ny removeChild (container, container.progressBar_mc)); tilbake kommandoen;}
metode påberopes av InvokeFunction
kommandoer
privat funksjon onProgress (): void {//hente dumper referanser fra data. Lederen Var loader1: Loader = DataManager.getData ("loader1") som Loader; Var loader2: Loader = DataManager.getData ("loader2") som Loader; Var loader3: Loader = DataManager.getData ("loader3") som Loader; //beregne total biter å laste Var bytesTotal: uint = 0; bytesTotal + = loader1.contentLoaderInfo.bytesTotal; bytesTotal + = loader2.contentLoaderInfo.bytesTotal; bytesTotal + = loader3.contentLoaderInfo.bytesTotal; //beregne total biter lastet Var bytesLoaded: uint = 0; bytesLoaded + = loader1.contentLoaderInfo.bytesLoaded; bytesLoaded + = loader2.contentLoaderInfo.bytesLoaded; bytesLoaded + = loader3.contentLoaderInfo.bytesLoaded; //oppdatering fremdriftslinjen skala container.progressBar_mc.innerBar_mc.scaleX = bytesLoaded /bytesTotal;}
Trinn 4: The Main Scene
klasse
pakke {import scenes.Scene.; public class MainScene strekker Scene {private Var container: LoadingDataWithCommands; offentlig funksjon MainScene (container: LoadingDataWithCommands) {this.container = beholder; }}}
metoden. Denne metoden vil legge til lastere til listevisning, og fade dem i én etter én. I tillegg dataene viktige strenger er avregistrert fra data manager
styre offentlig funksjon createIntroCommand (). Command {//hente dumper referanser fra data manager Var loader1: Loader = DataManager.getData ("loader1") som Loader; Var loader2: Loader = DataManager.getData ("loader2") som Loader; Var loader3: Loader = DataManager.getData ("loader3") som Loader; Var kommando: Command = new ParallelCommand (0, //lastet-image-håndtering kommandoer nye SerialCommand (0, //justere lastet bilde stillinger nytt ParallelCommand (0, nye SetProperties (loader1, {x: 30, y: 30}), nye SetProperties (loader2, {x: 230, y: 30}), nye SetProperties (loader3, {x: 430, y: 30})), //legge lastet bilder å vise liste ny ParallelCommand (0, ny AddChild (container , loader1), ny AddChild (container, loader2), ny AddChild (container, loader3)), //visne i lastede bilder nytt ParallelCommand (0, ny TweenMaxFrom (loader1, 0.5, {blurFilter: {blurX: 20, Blury: 20 }}), ny TweenMaxTo (loader1, 0.5, {autoAlpha: 1}), ny TweenMaxFrom (loader2, 0.5, {forsinkelse: 0,2, alpha: 0, blurFilter: {blurX: 20, Blury: 20}}), ny TweenMaxTo (loader2, 0.5, {forsinkelse: 0,2, autoAlpha: 1}), ny TweenMaxFrom (loader3, 0.5, {forsinkelse: 0,4, alpha: 0, blurFilter: {blurX: 20, Blury: 20}}), ny TweenMaxTo (loader3 , 0.5, {forsinkelse: 0,4, autoAlpha: 1}))), //unregsiter data fra data manager ny ParallelCommand (0, ny UnregisterData ("loader1"), ny UnregisterData ("loader2"), ny UnregisterData ("loader3 «))); tilbake kommandoen;}
Trinn 5: Test Movie
Sammendrag
kommandoen kan brukes til å laste eksterne SWF-filer, også. Videre kan du lage dine egne kommandoer for å laste eksterne annet enn bilder og SWF-filer data, ved å innkapsle den URLLoader
klassen inn dine kommandoer.