Share
In deze tutorial zal ik je voorstellen aan FZip, een AS3-bibliotheek waarmee je zip-bestanden in je Flash-projecten kunt openen. Dit kan veel bandbreedte besparen; in deze tutorial laden we een zipbestand van 2,5 MB dat 9,3 MB aan items bevat.
Laten we eens kijken naar het uiteindelijke resultaat waar we naartoe zullen werken. Klik hier om een SWF te openen die op zijn beurt een zipbestand vol afbeeldingen laadt en deze weergeeft in een tegelraster.
(De vervaging die zichtbaar is op sommige pictogrammen is het gevolg van het feit dat Flash automatisch probeert om ze te schalen tot 32x32 px, ook al zijn die bepaalde afbeeldingen 16x16px.)
Je moet een kopie van de FZip-bibliotheek uit de github van Claus Wahlers halen.
Pak de bibliotheek uit. In de map src bevindt zich een map met de naam "deng"; kopieer deze map naar de map waar u uw FLA opslaat.
Vervolgens hebben we een zip-archief nodig om mee te werken. Ik kies de WooFunction icon set, gratis beschikbaar via woothemes.com.
Sla dit op in dezelfde map waar u uw FLA opslaat.
Open een nieuwe FLA en geef deze de volgende eigenschappen:
Bewaar deze als fzip.fla.
Ga naar Venster> Componenten en sleep een component TileList naar het werkgebied.
Onder "Componentparameters" stelt u de volgende eigenschappen in:
Accentsconagua
columnCount: 16kolombreedte: 32aantal rijen: 8rijhoogte: 32
Geef de TileList de naam van het exemplaar imageTileList, en stel de volgende eigenschappen in het venster "Positie en grootte" in:
Selecteer vervolgens het gereedschap Tekst en zorg ervoor dat de volgende eigenschappen zijn ingesteld in het venster "Teken":
Sleep nu een TextField naar het werkgebied en geef het de instantienaam imagesLoaded. Zorg ervoor dat het TextField is ingesteld op respectievelijk "Klassieke tekst" en "Dynamische tekst" en stel de volgende eigenschappen in:
Ga naar Bestand> Nieuw en kies "Actionscript-bestand".
Sla dit bestand op als Main.as.
Binnen Main.as voeg het volgende toe:
private function demonstration (): void package 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 Main breidt MovieClip uit public function Main () setupZip ();
Hier hebben we de klassen geïmporteerd die we nodig hebben voor deze tutorial, en we hebben de Hoofd() constructorfunctie.
Definieer de volgende variabelen hierboven openbare functie Hoofd ():
private var zip: FZip; // Exemplaar van FZIP-klasse private var numFiles: int = 0; // Aantal bestanden privé var numFilesLoaded: int = 0; // Aantal geladen bestanden private var done: Boolean = false; // Voltooid zip-archief? private var tileListDp: DataProvider = new DataProvider (); // Gegevensprovider voor de TileList
Hier voegen we enkele variabelen toe die we tijdens de zelfstudie nodig zullen hebben. Zie de opmerkingen voor hun gebruik.
Voeg de onderstaande nieuwe functie toe Hoofd():
private function setupZip (): void zip = new FZip (); zip.addEventListener (Event.OPEN, onOpen); zip.addEventListener (Event.COMPLETE, onComplete); zip.load (nieuwe URLRequest ("wootheme.zip")); // wijzig dit om overeen te komen met de URL van je zipbestand imageTileList.visible = false; Hier maken we een nieuw exemplaar van de FZip-klasse, voegen we twee gebeurtenislisteners toe en laden we ons zipbestand. Als laatste gaan we verder imageTileList onzichtbaar zijn (we willen niet dat het verschijnt totdat alle afbeeldingen uit de zip geladen zijn).
Voeg de volgende nieuwe functie toe onder de setupFzip () functie die u hierboven hebt ingevoerd:
private function onOpen (evt: Event): void addEventListener (Event.ENTER_FRAME, onEnterFrame);
Deze functie wordt opgeroepen wanneer het zip-archief is geopend. Hier voegen we een toe ENTER_FRAME gebeurtenis luisteraar.
Voeg de volgende code nieuwe functie toe onder de OnOpen () functie die u in de bovenstaande stap hebt ingevoerd.
private function onComplete (evt: Event): void done = true;
Deze functie wordt aangeroepen wanneer er geen bestanden meer zijn om uit het zip-archief te verwerken.
Voeg het volgende toe onder de onComplete () functie die u hierboven hebt ingevoerd. Deze functie wordt elk frame geactiveerd nadat het zipbestand is geopend:
private function onEnterFrame (evt: Event): void // laad slechts 32 bestanden per frame om verwerkingskracht te sparen voor (var i: uint = 0; i < 32; i++) // any new files available? if(zip.getFileCount() > numFiles) // yes so it it var file: FZipFile = zip.getFileAt (numFiles); // is dit een png in de pictogrammenmap? if (file.filename.indexOf ("woofunction-icons") == 0 && file.filename.indexOf (". png")! = -1) var loader: Loader = new Loader (); Loader.loadBytes (file.content); tileListDp.addItem (source loader); numFilesLoaded ++; numFiles ++; else // geen nieuwe bestanden beschikbaar // controleer of we klaar zijn als (gereed) removeEventListener (Event.ENTER_FRAME, onEnterFrame); removeChild (imagesLoaded); imageTileList.visible = true; imageTileList.dataProvider = tileListDp; // Sluit de Loop-onderbreking af; imagesLoaded.text = numFilesLoaded + "Afbeeldingen geladen"; Hier is het vlees van de code.
Omdat dit elk frame uitvoert, plaatsen we een kunstmatige beperking op het aantal bestanden in het archief dat we tegelijkertijd behandelen. Dat is het doel van de for-loop.
zip.getFileCount () laat zien hoeveel bestanden in de zip zitten; numFiles bewaart hoeveel bestanden we hebben behandeld tot dusver. Dus, regel 5 controleert of er nog meer bestanden zijn om mee om te gaan.
Als er geen bestanden meer zijn, gaan we naar regel 17 en doen we gewoon wat op te ruimen: verwijder de ENTER_FRAME luisteraar, verwijder het tekstveld "laden", maak de tegellijst zichtbaar en koppel deze aan de gegevens.
Als er bestanden over zijn, krijgen we de volgende in onze lijst met numFiles als een index. We controleren vervolgens of het een PNG is uit de pictogrammenmap; omdat we de structuur van de zip van tevoren kennen, kunnen we vals spelen en gewoon controleren of de naam en het pad van het bestand "woofunction-icons" en ".png" bevatten.
Om de afbeelding van de zip naar een DisplayObject te krijgen, kunnen we een Loader gebruiken. Deze klasse wordt vaak gebruikt om een afbeelding vanuit een URL te laden, maar hier gebruiken we de methode loadBytes () om de gegevens van de ByteArray gemaakt door FZip te verkrijgen.
Sinds lader strekt DisplayObject, we kunnen het gewoon rechtstreeks aan de DataProvider van TileList toevoegen. Vervolgens verhogen we beide numFilesLoaded en numFiles.
Waarom hebben we twee gehele getallen om bij te houden hoeveel bestanden worden geladen? Goed, numFiles houdt telling van alle bestanden die we hebben bekeken vanuit de zip, terwijl numFilesLoaded houdt telling specifiek van de beeld bestanden die we hebben geladen in de DataProvider. Het is de laatste variabele die we gebruiken om de "loading" -tekst aan het einde van de functie bij te werken.
FZIP is een geweldig klein hulpprogramma om wat laadtijd en bandbreedte te besparen. Ik hoop dat je deze tutorial nuttig hebt gevonden, en bedankt voor het lezen!
