Share
I denne opplæringen vil jeg introdusere deg til FZip, et AS3-bibliotek som lar deg åpne zip-filer i dine Flash-prosjekter. Dette kan spare mye båndbredde; I denne opplæringen legger vi inn en 2,5 MB zip-fil som inneholder 9,3 MB verdier av eiendeler.
La oss se på det endelige resultatet vi skal jobbe for. Klikk her for å åpne en SWF som igjen vil laste en zip-fil full av bilder, og vise dem i et flislagt rutenett.
(Blurringen synlig på noen ikoner skyldes at Flash automatisk prøver å skalere dem opp til 32x32px, selv om disse bildene er 16x16px.)
Du må grave en kopi av FZip biblioteket fra Claus Wahlers 'github.
Trekk ut biblioteket. Innenfor src-mappen er det en mappe som heter "deng"; kopier denne mappen til mappen der du vil lagre FLA.
Deretter trenger vi et zip-arkiv for å jobbe med. Jeg velger WooFunction ikon sett, tilgjengelig gratis fra woothemes.com.
Lagre dette i samme katalog hvor du vil lagre FLA.
Åpne en ny FLA og gi den følgende egenskaper:
Lagre dette som fzip.fla.
Gå til Vindu> Komponenter og dra en TileList-komponent til scenen.
Under "Komponentparametre" angir du følgende egenskaper:
Accentsconagua
Kolonner: 16kolonnebredde: 32ROWCOUNT: 8rowHeight: 32
Gi TileList forekomstnavnet imageTileList, og sett inn følgende egenskaper i panelet "Plassering og størrelse":
Deretter velger du Tekstverktøyet og sørger for at følgende egenskaper er angitt i "Character" -panelet:
Dra nå en TextField på scenen, og gi den forekomstnavnet imagesLoaded. Pass på at TextField er satt til henholdsvis "Classic Text" og "Dynamic Text", og angi følgende egenskaper:
Gå til Fil> Ny og velg "Actionscript File".
Lagre denne filen som Main.as.
Innsiden Main.as legg til følgende:
privat funksjon demonstrere (): void pakke import flash.display.MovieClip; importer deng.fzip.FZip; importer deng.fzip.FZipFile; importer flash.display.Loader; importere flash.net.URLRequest; importer flash.events. *; importer fl.controls.TileList; importere fl.data.DataProvider; offentlig klasse Main utvider MovieClip offentlig funksjon Main () setupZip ();
Her importerte vi klassene vi trenger for denne opplæringen, og setter opp Hoved() konstruktør funksjon.
Definer følgende variabler ovenfor offentlig funksjon Hoved ():
privat var zip: FZip; // Instans av FZIP klasse privat var numFiles: int = 0; // Antall filer private var numFilesLoaded: int = 0; // Antall filer lastet privat var ferdig: Boolsk = false; // Ferdig behandling av zip-arkiv? private var tileListDp: DataProvider = new DataProvider (); // Datatilbyder for TileList
Her legger vi til noen variabler vi trenger gjennom hele opplæringen. Se kommentarene for deres bruk.
Legg til følgende nye funksjon nedenfor Hoved():
privat funksjon setupZip (): void zip = new FZip (); zip.addEventListener (Event.OPEN, onOpen); zip.addEventListener (Event.COMPLETE, onComplete); zip.load (ny URLRequest ("wootheme.zip")); // endre dette for å matche zip-filens URL imageTileList.visible = false; Her oppretter vi en ny forekomst av FZip-klassen, legger til to hendelselyttere, og laster inn zip-filen. Sist satt vi imageTileList å være usynlig (Vi vil ikke at den skal vises før alle bildene fra zip har lastet).
Legg til følgende nye funksjon under setupFzip () funksjonen du skrev inn ovenfor:
privat funksjon onOpen (evt: Event): void addEventListener (Event.ENTER_FRAME, onEnterFrame);
Denne funksjonen kalles når zip-arkivet er åpnet. Her legger vi til en ENTER_FRAME hendelse lytter.
Legg til følgende kode ny funksjon under VedÅpning () funksjonen du skrev inn i trinnet ovenfor.
privat funksjon onComplete (evt: Event): void done = true;
Denne funksjonen kalles når det ikke er flere filer å behandle fra zip-arkivet.
Legg til følgende under onComplete () funksjonen du skrev inn ovenfor. Denne funksjonen blir utløst hver ramme etter at zip-filen er åpnet:
privat funksjon onEnterFrame (evt: Event): void // Bare legg inn 32 filer per ramme, for å lagre prosessorkraft for (var i: uint = 0; i < 32; i++) // any new files available? if(zip.getFileCount() > numFiles) // ja så få det var fil: FZipFile = zip.getFileAt (numFiles); // er dette en png i ikonmappen? hvis (file.filename.indexOf ("woofunction-icons") == 0 && file.filename.indexOf (".png")! = -1) var loader: Loader = new Loader (); loader.loadBytes (file.content); tileListDp.addItem (kilde: loader); numFilesLoaded ++; numFiles ++; ellers // ingen nye filer tilgjengelig // sjekk om vi er ferdige hvis (ferdig) removeEventListener (Event.ENTER_FRAME, onEnterFrame); removeChild (imagesLoaded); imageTileList.visible = true; imageTileList.dataProvider = tileListDp; // Avslutt Loop break imagesLoaded.text = numFilesLoaded + "Bilder lastet"; Her er kjøttet av koden.
Siden dette kjører hver ramme, plasserer vi en kunstig begrensning på antall filer i arkivet som vi håndterer med en gang. Det er formålet med forløpet.
zip.getFileCount () avslører hvor mange filer som er i zip; numFiles lagrer hvor mange filer vi har behandlet så langt. Så, linje 5 sjekker om det fortsatt er flere filer å håndtere.
Hvis det ikke er noen filer igjen, hopper vi over til linje 17 og gjør bare noen grunnleggende opprydding: fjern ENTER_FRAME lytter, fjern tekstfeltet "Lasting", gjør fliselisten synlig, og koble den til dataene.
Hvis det er filer igjen, får vi den neste i listen vår ved hjelp av numFiles som en indeks. Vi sjekker deretter om det er en PNG fra ikonmappen; siden vi kjenner strukturen til zip-en på forhånd, kan vi jukse og bare sjekke om filens navn og sti inneholder "woofunction-icons" og ".png".
For å få bildet fra zip og inn i et DisplayObject, kan vi bruke en Loader. Denne klassen brukes ofte til å laste et bilde fra en URL, men her bruker vi sin loadBytes () -metode for å få dataene fra ByteArray laget av FZip.
Siden loader strekker Displayobject, Vi kan bare legge den direkte til TileList's DataProvider. Så øker vi begge deler numFilesLoaded og numFiles.
Hvorfor har vi to heltall for å holde oversikt over hvor mange filer som er lastet? Vi vil, numFiles fortsetter med å telle alle filene vi har undersøkt fra zip, mens numFilesLoaded fortsetter å telle spesifikt om bilde filer som vi har lastet inn i DataProvider. Det er sistnevnte variabel som vi bruker til å oppdatere "lasting" -teksten ved slutten av funksjonen.
FZIP er et utrolig lite verktøy for å spare litt lastingstid og båndbredde. Jeg håper du har funnet denne opplæringen nyttig, og takk for å lese!
