Share
In questo tutorial ti presenterò FZip, una libreria AS3 che ti consente di aprire i file zip all'interno dei tuoi progetti Flash. Questo può far risparmiare molta banda; in questo tutorial verrà caricato un file zip da 2,5 MB contenente risorse pari a 9,3 MB.
Diamo un'occhiata al risultato finale su cui lavoreremo. Fare clic qui per aprire un file SWF che a sua volta carica un file zip pieno di immagini e visualizzarle in una griglia affiancata.
(La sfocatura visibile su alcune icone è dovuta al fatto che Flash tenta automaticamente di ridimensionarle a 32x32 px, anche se quelle immagini particolari sono 16x16 px.)
Avrai bisogno di gradare una copia della libreria FZip dal github di Claus Wahlers.
Estrai la libreria. All'interno della cartella src c'è una cartella chiamata "deng"; copia questa cartella nella cartella in cui conserverai il tuo FLA.
Quindi abbiamo bisogno di un archivio zip con cui lavorare. Scelgo il set di icone WooFunction, disponibile gratuitamente da woothemes.com.
Salva questo nella stessa directory in cui archiverai il tuo FLA.
Apri un nuovo FLA e assegna le seguenti proprietà:
Salva questo come fzip.fla.
Vai a Finestra> Componenti e trascinare un componente TileList sullo stage.
Sotto "Parametri componente" imposta le seguenti proprietà:
Accentsconagua
columnCount: 16larghezza della colonna: 32rowCount: 8altezza della riga: 32
Assegna a TileList il nome dell'istanza imageTileList, e imposta le seguenti proprietà nel pannello "Posizione e dimensioni":
Quindi seleziona lo strumento Testo e assicurati che le seguenti proprietà siano impostate nel pannello "Carattere":
Ora trascina un campo di testo sullo stage e assegnagli il nome dell'istanza imagesLoaded. Assicurati che TextField sia impostato su "Testo classico" e "Testo dinamico", rispettivamente, e imposta le seguenti proprietà:
Vai a File> Nuovo e scegli "File Actionscript".
Salva questo file come Main.as.
Dentro Main.as aggiungere il seguente:
private function 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. *; importare fl.controls.TileList; importare fl.data.DataProvider; public class Main estende MovieClip public function Main () setupZip ();
Qui abbiamo importato le classi di cui avremo bisogno per questo tutorial e abbiamo impostato il Principale() funzione di costruzione.
Definire le seguenti variabili sopra funzione pubblica Main ():
zip var privata: FZip; // Istanza della classe FZIP private numFiles: int = 0; // Numero di file private var numFilesLoaded: int = 0; // Numero di file caricati private var done: Boolean = false; // Fatto l'elaborazione dell'archivio zip? private var tileListDp: DataProvider = new DataProvider (); // Provider di dati per TileList
Qui aggiungiamo alcune variabili di cui abbiamo bisogno durante il tutorial. Vedi i commenti per il loro utilizzo.
Aggiungi la seguente nuova funzione di seguito Principale():
funzione privata setupZip (): void zip = new FZip (); zip.addEventListener (Event.OPEN, onOpen); zip.addEventListener (Event.COMPLETE, onComplete); zip.load (new URLRequest ("wootheme.zip")); // cambia questo in modo che corrisponda all'URL del file zip imageTileList.visible = false; Qui creiamo una nuova istanza della classe FZip, aggiungiamo due listener di eventi e carichiamo il nostro file zip. Ultimo, abbiamo impostato imageTileList essere invisibile (non lo vogliamo mostrare fino a quando tutte le immagini dallo zip non sono state caricate).
Aggiungi la seguente nuova funzione sotto il setupFzip () funzione che hai inserito sopra:
funzione privata onOpen (evt: Event): void addEventListener (Event.ENTER_FRAME, onEnterFrame);
Questa funzione viene chiamata quando l'archivio zip è stato aperto. Qui aggiungiamo un ENTER_FRAME ascoltatore di eventi.
Aggiungi la seguente nuova funzione di codice sotto il onOpen () funzione inserita nel passaggio precedente.
funzione privata onComplete (evt: Event): void done = true;
Questa funzione viene chiamata quando non ci sono più file da elaborare dall'archivio zip.
Aggiungi il seguente sotto il onComplete () funzione che hai inserito sopra. Questa funzione verrà attivata ogni fotogramma dopo l'apertura del file zip:
funzione privata onEnterFrame (evt: Event): void // Carica solo 32 file per frame, per risparmiare potenza di elaborazione per (var i: uint = 0; i < 32; i++) // any new files available? if(zip.getFileCount() > numFiles) // sì, prendilo file var: FZipFile = zip.getFileAt (numFiles); // si tratta di un png nella cartella delle icone? 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 // nessun nuovo file disponibile // controlla se abbiamo finito if (done) removeEventListener (Event.ENTER_FRAME, onEnterFrame); removeChild (imagesLoaded); imageTileList.visible = true; imageTileList.dataProvider = tileListDp; // Exit the Loop break; imagesLoaded.text = numFilesLoaded + "Immagini caricate"; Ecco la carne del codice.
Poiché questo è in esecuzione su ogni frame, poniamo una restrizione artificiale sul numero di file all'interno dell'archivio con cui ci occupiamo contemporaneamente. Questo è lo scopo del ciclo for.
zip.getFileCount () rivela quanti file ci sono nella zip; numFiles memorizza quanti file abbiamo trattato finora. Quindi, la riga 5 controlla se ci sono ancora più file da trattare.
Se non ci sono file rimasti, salta alla riga 17 e facciamo solo un po 'di pulizia di base: rimuovere il ENTER_FRAME ascoltatore, rimuovere il campo di testo "loading", rendere visibile l'elenco di tile e collegarlo ai dati.
Se ci sono file rimasti, otteniamo il prossimo nella nostra lista usando numFiles come un indice. Quindi controlliamo se si tratta di un PNG dalla cartella delle icone; dato che conosciamo la struttura dello zip in anticipo, possiamo imbrogliare e verificare se il nome e il percorso del file contengono "icone-woofing" e ".png".
Per ottenere l'immagine dallo zip e in un DisplayObject, possiamo usare un Loader. Questa classe viene spesso utilizzata per caricare un'immagine da un URL, ma qui stiamo utilizzando il suo metodo loadBytes () per ottenere i dati dal ByteArray creato da FZip.
Da caricatore si estende DisplayObject, possiamo semplicemente aggiungerlo direttamente al DataProvider di TileList. Quindi incrementiamo entrambi numFilesLoaded e numFiles.
Perché abbiamo due numeri interi per tenere traccia del numero di file caricati? Bene, numFiles tiene conto di tutti i file che abbiamo esaminato dallo zip, mentre numFilesLoaded tiene conto in particolare del Immagine file che abbiamo caricato nel DataProvider. È la seconda variabile che usiamo per aggiornare il testo di "caricamento" alla fine della funzione.
FZIP è una piccola utility per risparmiare tempo di caricamento e larghezza di banda. Spero tu abbia trovato questo tutorial utile e grazie per la lettura!
