Share
I denna handledning introducerar jag dig till FZip, ett AS3-bibliotek som låter dig öppna zip-filer i dina Flash-projekt. Detta kan spara mycket bandbredd; i den här handledningen lägger vi in en 2.5MB zip-fil som innehåller 9,3MB värde av tillgångar.
Låt oss ta en titt på det slutliga resultatet vi kommer att arbeta för. Klicka här för att öppna en SWF som i sin tur ska ladda en zip-fil full av bilder och visa dem i ett kaklat rutnät.
(Den suddiga syn på vissa ikoner beror på att Flash automatiskt försöker skala upp till 32x32px, även om de specifika bilderna är 16x16px.)
Du kommer att behöva gradera en kopia av FZip-biblioteket från Claus Wahlers github.
Extrahera biblioteket. Inne i src-mappen finns en mapp med namnet "deng"; kopiera den här mappen till mappen där du kommer att lagra din FLA.
Nästa behöver vi ett zip-arkiv att arbeta med. Jag väljer WooFunction ikonuppsättningen, tillgänglig gratis från woothemes.com.
Spara det i samma katalog där du kommer att lagra din FLA.
Öppna en ny FLA och ge den följande egenskaper:
Spara detta som fzip.fla.
Gå till Fönster> Komponenter och dra en TileList-komponent till scenen.
Under "Komponentparametrar" anger du följande egenskaper:
Accentsconagua
column: 16kolumnbredd: 32rowCount: 8Radhöjd: 32
Ge TileList förekomstnamnet imageTileList, och ställ in följande egenskaper i panelen "Position och storlek":
Välj sedan Textverktyget och se till att följande egenskaper är inställda på panelen "Tecken":
Dra nu en TextField på scenen och ge det förekomstnamnet imagesLoaded. Se till att TextField är inställt på "Classic Text" respektive "Dynamic Text" och ställ in följande egenskaper:
Gå till Fil> Ny och välj "Actionscript File".
Spara den här filen som Main.as.
Inuti Main.as lägg till följande:
privat funktion visa (): void paket import flash.display.MovieClip; importera deng.fzip.FZip; importera deng.fzip.FZipFile; importera flash.display.Loader; importera flash.net.URLRequest; importera flash.events. *; importera fl.controls.TileList; importera fl.data.DataProvider; public class Main utökar MovieClip public function Main () setupZip ();
Här importerade vi de klasser vi behöver för denna handledning och sätter upp Main () konstruktörfunktion.
Definiera följande variabler ovan allmän funktion Main ():
privat var zip: FZip; // Instans av FZIP-klass privat var numFiles: int = 0; // Antal filer privat var numFilesLoaded: int = 0; // Antal filer laddade privat var gjort: Booleskt = false; // Klar bearbetat zip-arkiv? privat var tileListDp: DataProvider = new DataProvider (); // Dataföretag för TileList
Här lägger vi till några variabler som vi behöver i hela handledningen. Se kommentarerna för deras användning.
Lägg till följande nya funktion nedan Main ():
privat funktion setupZip (): void zip = new FZip (); zip.addEventListener (Event.OPEN, onOpen); zip.addEventListener (Event.COMPLETE, onComplete); zip.load (ny URLRequest ("wootheme.zip")); // ändra det här för att matcha din zip-fil URL imageTileList.visible = false; Här skapar vi en ny instans av FZip-klassen, lägger till två händelsehörare och laddar vår zip-fil. Sist satt vi imageTileList att vara osynlig (Vi vill inte att den ska visas tills alla bilder från zip har laddats).
Lägg till följande nya funktion under setupFzip () funktionen du skrev in ovan:
privat funktion onOpen (evt: Event): void addEventListener (Event.ENTER_FRAME, onEnterFrame);
Den här funktionen kallas när zip-arkivet har öppnats. Här lägger vi till en ENTER_FRAME händelse lyssnare.
Lägg till följande kod ny funktion under VidÖppning () funktion du skrev in i steget ovan.
privat funktion onComplete (evt: Event): void done = true;
Den här funktionen heter när det inte finns några fler filer att bearbeta från zip-arkivet.
Lägg till följande under onComplete () funktionen du angav ovan. Denna funktion utlöses varje ram efter att zip-filen har öppnats:
privat funktion onEnterFrame (evt: Event): void // Bara ladda 32 filer per bild, för att spara bearbetningseffekt för (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); // är det här en png i ikonen mappen? om (file.filename.indexOf ("woofunction-icons") == 0 && file.filename.indexOf (".png")! = -1) var loader: Loader = new Loader (); Loader.loadBytes (file.content); tileListDp.addItem (källa: loader); numFilesLoaded ++; numFiles ++; else // inga nya filer tillgängliga // kontrollera om vi är klara om (gjort) removeEventListener (Event.ENTER_FRAME, onEnterFrame); removeChild (imagesLoaded); imageTileList.visible = true; imageTileList.dataProvider = tileListDp; // Avsluta Loop break imagesLoaded.text = numFilesLoaded + "Bilder laddade"; Här är köttet i koden.
Eftersom det här körs varje ram lägger vi en artificiell begränsning av antalet filer i arkivet som vi hanterar på en gång. Det är syftet med for-loop.
zip.getFileCount () avslöjar hur många filer som finns i dragkedjan numfiles lagrar hur många filer vi har behandlat än så länge. Så kontrollerar linje 5 om det fortfarande finns fler filer att hantera.
Om det inte finns några filer kvar, hoppar vi över till linje 17 och gör bara grundläggande clearup: ta bort ENTER_FRAME lyssnare, ta bort textfältet "lastning", gör kakellistan synlig och länka den till data.
Om det finns filer kvar, får vi nästa i vår lista med numfiles som ett index. Vi kontrollerar sedan om det är en PNG från ikonen mappen; Eftersom vi känner till zip-strukturen i förväg kan vi fuska och bara kontrollera om filens namn och sökväg innehåller "woofunction-icons" och ".png".
För att få bilden från zip och in i ett DisplayObject kan vi använda en Loader. Denna klass används ofta för att ladda en bild från en URL, men här använder vi sin loadBytes () -metod för att få data från ByteArray skapad av FZip.
Eftersom Lastare sträcker Display, Vi kan bara lägga till det direkt till TileList's DataProvider. Då ökar vi båda numFilesLoaded och numfiles.
Varför har vi två heltal för att hålla reda på hur många filer som laddas? Väl, numfiles håller räkna med alla filer vi har granskat från zip, medan numFilesLoaded fortsätter räkna specifikt med bild filer som vi har laddade in i DataProvider. Det är den senare variabeln som vi använder för att uppdatera texten "laddning" i slutet av funktionen.
FZIP är ett fantastiskt litet verktyg för att spara lite laddningstid och bandbredd. Jag hoppas att du har hittat denna handledning användbar, och tack för att du läste!
