Quick Tips: Bruk FZip å åpne Zip-filer Innen AS3

Quick Tips: Bruk FZip å åpne Zip-filer Innen AS3
en
Del
4
Share < .no> Dette Cyber ​​mandag Envato Tuts + kurs vil bli redusert til bare $ 3. Ikke gå glipp av.

I denne opplæringen vil jeg introdusere deg til FZip, en AS3 bibliotek som lar deg åpne zip-filer inni Flash prosjekter. Dette kan spare mye båndbredde; i denne opplæringen vil vi legge i en 2,5 MB zip-fil som inneholder 9.3MB verdt av eiendeler.




Endelig resultat Forhåndsvisning

La oss ta en titt på den endelige resultere vi skal jobbe mot. Klikk her for å åpne en SWF som igjen vil laste en zip-fil full av bilder, og vise dem i en flislagt rutenett.

(The uskarphet synlig på noen ikoner skyldes Flash automatisk forsøker å skalere dem opp til 32x32px, selv om de spesielle bildene er 16x16px)



Trinn 1:. Får biblioteket og Zip Arkiv

Du vil trenge å grad en kopi av FZip biblioteket fra Claus Wahlers ' github.

Pakk biblioteket. Inne i src mappen er det en mappe som heter "deng"; kopiere denne mappen til mappen hvor du vil lagre FLA.

Neste vi trenger en zip-arkiv å jobbe med. Jeg velger WooFunction ikonsettet, som er tilgjengelig gratis fra woothemes.com

Lagre dette til den samme katalogen der du vil lagre FLA



Trinn 2:.. Opprett ny Flash dokument

Åpne en ny FLA og gi den følgende egenskaper:

Størrelse: 550x400px

Bakgrunnsfarge: Hvit

Lagre dette . som fzip.fla



Trinn 3: Legg Komponenter til Stage

Gå til Vindu > Komponenter
og dra en TileList komponent til scenen

Under "Component Parametere" set følgende egenskaper:.

  • Kolonner: 16

    columnWidth: 32

    ROWCOUNT: 8

    rowHeight: 32

    Gi TileList forekomstnavnet imageTileList, og angi følgende egenskaper i "posisjon og størrelse" panel: < .no>
    X: 20

    Y: 68

    W: 100

    H: 100

    Neste velg Text Tool og sørge for at følgende egenskaper er satt i "Character" panel:

    Størrelse: 50pt

    Farge: Svart

    Nå drar en Textfield på scenen, og gi den forekomstnavnet imagesLoaded. Kontroller at Textfield er satt til "Classic Text" og "Dynamic Text", henholdsvis, og angi følgende egenskaper:

    X: 54

    Y: 161
    < li> W: 454

    H: 60



    Trinn 4: Lag ny AS3 Document

    Gå til Fil > . Ny Hotell og velg "Action File"

    Lagre denne filen som Main.as.



    Trinn 5: Pakke, Import og Constructor

    Inside Hoved .as legge til følgende:
    privat funksjon demonstrere (): voidpackage {import flash.display.MovieClip; import deng.fzip.FZip; import deng.fzip.FZipFile; import flash.display.Loader; import flash.net.URLRequest; import flash.events. *; import fl.controls.TileList; import fl.data.DataProvider; public class Hoved strekker MovieClip {offentlig funksjon main () {setupZip (); }}}

    Her har vi importert klassene vi trenger for denne opplæringen, og sette opp hoved () konstruktør funksjon



    Trinn 6:. Legg Variabler

    Definer Følgende variabler ovenfor offentlig funksjon main ():
    private Var zip: FZip; //Instans FZIP classprivate Var numFiles: int = 0; //Antall filesprivate Var numFilesLoaded: int = 0; //Antall filer loadedprivate Var gjort: Boolean = false; //Ferdig behandle zip-arkiv privat Var tileListDp: dataprovider = ny dataprovider (); //dataleverandøren for TileList

    Her legger vi noen variabler vi trenger hele opplæringen. Se kommentarene for deres bruk



    Trinn 7:. SetupZip ()

    Legg til følgende nye funksjonen under main ():
    privat funksjon setupZip (): void {zip = new FZip (); zip.addEventListener (Event.OPEN, VedÅpning); zip.addEventListener (Event.COMPLETE, onComplete); zip.load (ny URLRequest ("wootheme.zip")); //endre dette som passer din zip-filen URL imageTileList.visible = false;}

    Her skaper vi en ny forekomst av FZip klassen, tilsett to hendelsen lyttere, og legger vår zip-fil. Sist, setter vi imageTileList å være usynlig (Vi vil ikke at det å vise frem alle bildene fra zip har lastet)



    Trinn 8:. VedÅpning ()

    Legg følgende nye funksjonen under setupFzip () -funksjonen du skrev ovenfor:
    privat funksjon VedÅpning (evt: Hendelses): void {addEventListener (Event.ENTER_FRAME, onEnterFrame);}

    Denne funksjonen blir kalt når zip arkivet har blitt åpnet. Her legger vi en ENTER_FRAME hendelse lytteren

    Trinn 9:. OnComplete ()

    Legg til følgende kode ny funksjon under VedÅpning () -funksjonen du skrev inn i trinn over
    privat funksjon. onComplete (evt: Hendelses): void {gjort = true;}

    Denne funksjonen blir kalt når det ikke er flere filer til prosessen fra zip arkivet



    Trinn 10: onEnterFrame () <. br>

    Legg til følgende under onComplete () -funksjonen du oppga. Denne funksjonen vil bli utløst hver ramme etter zip-filen er åpnet:
    privat funksjon onEnterFrame (evt: Hendelses): void {//Bare last 32 filer per bilde, for å spare prosessorkraft for (var i: uint = 0; i < 32; i ++) {//noen nye filer tilgjengelig? if (zip.getFileCount () > numFiles) {//ja så får det Div file: FZipFile = zip.getFileAt (numFiles); //Dette er en png i ikoner mappen? if (file.filename.indexOf ("woofunction-ikoner") == 0 & & file.filename.indexOf () = -1 "png."!) {var dumper: Loader = new Loader (); loader.loadBytes (file.content); tileListDp.addItem ({kilde: loader}); numFilesLoaded ++; } NumFiles ++; } Else {//ingen nye filer tilgjengelig //sjekke om vi er ferdige if (ferdig) {removeEventListener (Event.ENTER_FRAME, onEnterFrame); removeChild (imagesLoaded); imageTileList.visible = true; imageTileList.dataProvider = tileListDp; } //Avslutt Loop break; }} ImagesLoaded.text = numFilesLoaded + "Bilder Loaded";}

    Her er kjøtt av koden

    Siden dette er i gang hver ramme, vil vi plassere en kunstig begrensning på antall filer innenfor. arkivet som vi håndtere på en gang. Det er hensikten med for-loop

    zip.getFileCount () viser hvor mange filer er i zip.; numFiles butikker hvor mange filer vi har jobbet med så langt
    . Så, linje 5 sjekker om det fortsatt er flere filer for å håndtere

    Hvis det ikke er noen filer igjen, vi hopper til linje 17 og bare gjøre noen grunnleggende clearup. Fjern ENTER_FRAME lytteren, fjerne " loading "tekstfeltet, få flis liste synlig, og koble det til dataen.

    Hvis det finnes filer igjen, får vi den neste i vår liste ved hjelp numFiles som en indeks. Vi sjekker da om det er en PNG fra ikoner mappe; siden vi vet strukturen i zip på forhånd, kan vi jukse og bare sjekke om filens navn og bane inneholder "woofunction-ikoner" og ".png".

    For å få bildet fra zip og inn i en Displayobject, kan vi bruke en Loader. Denne klassen er ofte brukt til å laste et bilde fra en URL, men her vi bruker sine loadBytes () metode for å få data fra ByteArray skapt av FZip.

    Siden Loader strekker Displayobject, vi kan bare legge det rett til TileList sin dataprovider. Deretter øke vi begge numFilesLoaded og numFiles.

    Hvorfor har vi to heltall å holde styr på hvor mange filer er lastet? Vel, holder numFiles telling av alle filene vi har undersøkt fra zip, mens numFilesLoaded holder telle spesielt av image
    filer som vi har lastet inn i dataprovider
    . Det er den sistnevnte variabel som vi bruker til å oppdatere "loading" tekst på slutten av funksjonen.



    Konklusjon

    FZIP er en utrolig liten nytte å spare lasting tid og båndbredde . Jeg håper du har funnet denne opplæringen nyttig, og takk for lesing! Anmeldelser