Share
In diesem Tutorial werde ich Ihnen FZip vorstellen, eine AS3-Bibliothek, mit der Sie ZIP-Dateien in Ihren Flash-Projekten öffnen können. Dadurch kann viel Bandbreite eingespart werden. In diesem Tutorial laden wir eine 2,5-MB-ZIP-Datei, die Assets im Wert von 9,3 MB enthält.
Werfen wir einen Blick auf das Endergebnis, auf das wir hinarbeiten werden. Klicken Sie hier, um eine SWF-Datei zu öffnen, in der eine ZIP-Datei mit Bildern geladen und in einem gekachelten Raster angezeigt wird.
(Die Unschärfe, die auf einigen Symbolen sichtbar ist, ist darauf zurückzuführen, dass Flash automatisch versucht, sie auf 32x32px zu skalieren, obwohl diese Bilder 16x16px sind.)
Sie müssen eine Kopie der FZip-Bibliothek von Claus Wahlers Github abschließen.
Extrahieren Sie die Bibliothek. Im src-Ordner befindet sich ein Ordner mit dem Namen "deng". Kopieren Sie diesen Ordner in den Ordner, in dem Sie Ihren FLA speichern möchten.
Als nächstes brauchen wir ein Zip-Archiv, um damit arbeiten zu können. Ich wähle das WooFunction-Icon-Set, das kostenlos bei woothemes.com erhältlich ist.
Speichern Sie dies in demselben Verzeichnis, in dem Sie Ihre FLA speichern möchten.
Öffnen Sie eine neue FLA und geben Sie die folgenden Eigenschaften an:
Speichern Sie dies als fzip.fla.
Gehe zu Fenster> Komponenten und ziehen Sie eine TileList-Komponente auf die Bühne.
Legen Sie unter "Komponentenparameter" folgende Eigenschaften fest:
Accentsconagua
columnCount: 16Spaltenbreite: 32Reihenanzahl: 8Zeilenhöhe: 32
Geben Sie der TileList den Instanznamen imageTileList, und legen Sie im Bereich "Position und Größe" folgende Eigenschaften fest:
Wählen Sie anschließend das Textwerkzeug aus und stellen Sie sicher, dass die folgenden Eigenschaften im Bereich "Zeichen" festgelegt sind:
Ziehen Sie nun ein TextField auf die Bühne und geben Sie den Instanznamen an imagesLoaded. Stellen Sie sicher, dass das Textfeld auf "Klassischer Text" bzw. "Dynamischer Text" festgelegt ist, und legen Sie die folgenden Eigenschaften fest:
Gehe zu Datei> Neu und wähle "Actionscript File".
Speichern Sie diese Datei als Main.as.
Innerhalb Main.as Folgendes hinzufügen:
private Funktion demonstr (): 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 erweitert MovieClip public function Main () setupZip ();
Hier haben wir die Klassen importiert, die wir für dieses Tutorial benötigen, und die Main() Konstruktorfunktion.
Definieren Sie die folgenden Variablen oben öffentliche Funktion Main ():
privater var zip: FZip; // Instanz der FZIP-Klasse private var numFiles: int = 0; // Anzahl der Dateien private var numFilesLoaded: int = 0; // Anzahl der geladenen Dateien privat var done: Boolean = false; // Fertig ist das Zip-Archiv? private var tileListDp: DataProvider = neuer DataProvider (); // Datenanbieter für die TileList
Hier fügen wir einige Variablen hinzu, die wir im gesamten Tutorial benötigen. Siehe die Kommentare zur Verwendung.
Fügen Sie die folgende neue Funktion unten hinzu Main():
private Funktion setupZip (): void zip = new FZip (); zip.addEventListener (Event.OPEN, onOpen); zip.addEventListener (Event.COMPLETE, onComplete); zip.load (neue URLRequest ("wootheme.zip")); // Ändern Sie dies so, dass es der URL Ihrer ZIP-Datei entspricht imageTileList.visible = false; Hier erstellen wir eine neue Instanz der FZip-Klasse, fügen zwei Ereignis-Listener hinzu und laden unsere ZIP-Datei. Zum Schluss setzen wir imageTileList unsichtbar sein (Wir möchten nicht, dass es angezeigt wird, bis alle Bilder der ZIP-Datei geladen wurden).
Fügen Sie die folgende neue Funktion unter dem hinzu setupFzip () Funktion, die Sie oben eingegeben haben:
private Funktion onOpen (evt: Event): void addEventListener (Event.ENTER_FRAME, onEnterFrame);
Diese Funktion wird aufgerufen, wenn das Zip-Archiv geöffnet wurde. Hier fügen wir ein ENTER_FRAME Ereignis-Listener.
Fügen Sie den folgenden Code mit einer neuen Funktion unter dem hinzu onOpen () Funktion, die Sie im obigen Schritt eingegeben haben.
private Funktion onComplete (evt: Event): void done = true;
Diese Funktion wird aufgerufen, wenn keine weiteren Dateien aus dem ZIP-Archiv verarbeitet werden können.
Fügen Sie Folgendes unter dem hinzu onComplete () Funktion, die Sie oben eingegeben haben. Diese Funktion wird nach dem Öffnen der ZIP-Datei bei jedem Frame ausgelöst:
private Funktion onEnterFrame (evt: Event): void // Nur 32 Dateien pro Frame laden, um Verarbeitungsleistung zu sparen (var i: uint = 0; i < 32; i++) // any new files available? if(zip.getFileCount() > numFiles) // yes, also holen Sie sich die var-Datei: FZipFile = zip.getFileAt (numFiles); // Ist das ein Png im Icons-Ordner? if (file.filename.indexOf ("woofunction-icons") == 0 && file.filename.indexOf (". png")! = -1) var loader: Loader = neuer Loader (); loader.loadBytes (file.content); tileListDp.addItem (source: loader); numFilesLoaded ++; numFiles ++; else // Keine neuen Dateien verfügbar // Überprüfen Sie, ob wir fertig sind if (done) removeEventListener (Event.ENTER_FRAME, onEnterFrame); removeChild (imagesLoaded); imageTileList.visible = true; imageTileList.dataProvider = tileListDp; // Verlasse die Loop-Pause; imagesLoaded.text = numFilesLoaded + "Images Loaded"; Hier ist das Fleisch des Codes.
Da dies für jeden Frame ausgeführt wird, wird die Anzahl der Dateien im Archiv, mit denen wir uns gleichzeitig befassen, künstlich eingeschränkt. Das ist der Zweck der for-Schleife.
zip.getFileCount () zeigt an, wie viele Dateien sich in der ZIP-Datei befinden; numFiles speichert, mit wie vielen Dateien wir uns befasst haben bisher. Zeile 5 prüft also, ob noch weitere Dateien vorhanden sind.
Wenn keine Dateien mehr vorhanden sind, fahren wir mit Zeile 17 fort und erledigen nur ein paar grundlegende Schritte: Entfernen Sie die ENTER_FRAME Listener, entfernen Sie das Textfeld "Laden", machen Sie die Kachelliste sichtbar und verknüpfen Sie sie mit den Daten.
Wenn noch Dateien vorhanden sind, erhalten Sie die nächste in unserer Liste mit numFiles als Index. Wir prüfen dann, ob es sich um eine PNG-Datei im Ordner "Icons" handelt. Da wir die Struktur der ZIP-Datei vorher kennen, können wir schummeln und einfach überprüfen, ob der Name und der Pfad der Datei "woofunction-icons" und ".png" enthält..
Um das Bild aus der ZIP-Datei in ein DisplayObject zu holen, können wir einen Loader verwenden. Diese Klasse wird häufig verwendet, um ein Bild von einer URL zu laden. Hier verwenden wir jedoch die Methode loadBytes (), um die Daten aus dem von FZip erstellten ByteArray abzurufen.
Schon seit Lader erweitert DisplayObject, Wir können es einfach direkt in den DataProvider der TileList aufnehmen. Dann erhöhen wir beide numFilesLoaded und numFiles.
Warum haben wir zwei Ganzzahlen, um zu verfolgen, wie viele Dateien geladen werden? Gut, numFiles Zählt alle Dateien, die wir aus der ZIP-Datei geprüft haben, mit numFilesLoaded zählt speziell für die Bild Dateien, die wir haben in den DataProvider geladen. Dies ist die letzte Variable, mit der wir den Ladetext am Ende der Funktion aktualisieren.
FZIP ist ein erstaunliches kleines Programm, um Ladezeit und Bandbreite zu sparen. Ich hoffe, Sie fanden dieses Tutorial hilfreich und vielen Dank für das Lesen!
