Sfat rapid Utilizați FZip pentru a deschide fișiere zip în cadrul AS3

În acest tutorial vă voi prezenta FZip, o librărie AS3 care vă permite să deschideți fișiere zip în interiorul proiectelor Flash. Acest lucru poate salva o mulțime de lățime de bandă; în acest tutorial vom încărca un fișier zip de 2,5MB care conține active de 9,3MB.


Rezultatul final al rezultatelor

Să aruncăm o privire asupra rezultatului final la care vom lucra. Faceți clic aici pentru a deschide un SWF care, la rândul său, va încărca un fișier zip plin de imagini și le va afișa într-o rețea de teracotă.

(Estomparea vizibilă pe unele pictograme se datorează faptului că Flash încearcă să le mărească până la 32x32 pixeli, chiar dacă acele imagini particulare sunt de 16x16 pixeli.)


Pasul 1: Obținerea arhivelor de bibliotecă și zip

Va trebui să faceți o copie a bibliotecii FZip din githubul lui Claus Wahlers.

Extrageți biblioteca. În interiorul directorului src există un folder numit "deng"; copiați acest dosar în dosarul în care vă stocați FLA.

Apoi avem nevoie de o arhivă de zip cu care să lucrăm. Am ales setul de pictograme WooFunction, disponibil gratuit de la woothemes.com.

Salvați acest lucru în același director în care veți stoca FLA.


Pasul 2: Creați un nou document Flash

Deschideți un nou FLA și dați-i următoarele proprietăți:

  • Dimensiune: 550x400px
  • Culoare fundal: alb

Salvați ca fzip.fla.


Pasul 3: Adăugați componente în scenă

Mergi la Fereastră> Componente și trageți o componentă TileList în scenă.

Sub "Parametrii componentelor" setați următoarele proprietăți:

  • columnCount: 16
  • lățimea coloanei: 32
  • ROWCOUNT: 8
  • înălțimea rândului: 32

Dați TileList numele instanței imageTileList, și setați următoarele proprietăți în panoul "Poziție și dimensiune":

  • X: 20
  • Y: 68
  • W: 100
  • H: 100

Apoi, selectați Instrumentul pentru text și asigurați-vă că în panoul "Caracter" sunt setate următoarele proprietăți:

  • Dimensiune: 50pt
  • Culoarea neagra

Acum trageți un TextField pe scenă și dați-i numele instanței imagesLoaded. Asigurați-vă că TextField este setat la "Text clasic" și respectiv "Text dinamic" și setați următoarele proprietăți:

  • X: 54
  • Y: 161
  • W: 454
  • H: 60

Pasul 4: Creați un nou document AS3

Mergi la Fișier> Nou și alegeți "File Actionscript".

Salvați acest fișier ca Main.as.


Pasul 5: Pachetul, importurile și constructorul

Interior Main.as adăugați următoarele:

 funcția privată demonstrează (): 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 extinde MovieClip funcția publică Main () setupZip (); 

Aici am importat clasele de care avem nevoie pentru acest tutorial și am creat Principal() constructor.


Pasul 6: Adăugați variabile

Definiți următoarele variabile de mai sus funcție publică ():

 privat zip: FZip; // instanța clasei private FZIP var numFiles: int = 0; // Numărul de fișiere private var numFilesLoaded: int = 0; // Numărul de fișiere încărcate private var done: Boolean = false; // A fost procesată arhiva zip? privat var tileListDp: DataProvider = nou DataProvider (); // Furnizor de date pentru TileList

Aici adăugăm câteva variabile de care avem nevoie în tot tutorialul. Vedeți comentariile pentru utilizarea lor.


Pasul 7: setupZip ()

Adăugați următoarea funcție nouă Principal():

 funcția privată setupZip (): void zip = new FZip (); zip.addEventListener (Eveniment.OPEN, onOpen); zip.addEventListener (eveniment.COMPLETE, onComplete); zip.load (noua adresă URLRequest ("wootheme.zip")); // modificați acest lucru pentru a se potrivi cu adresa URL a fișierului zip imageTileList.visible = false; 

Aici vom crea o nouă instanță a clasei FZip, vom adăuga doi ascultători de evenimente și vom încărca fișierul zip. În sfârșit, am stabilit imageTileList a fi invizibil (Nu vrem să se afișeze până când toate imaginile de pe zip au fost încărcate).


Pasul 8: onOpen ()

Adăugați următoarea funcție nouă sub setupFzip () funcția pe care ați introdus-o mai sus:

 funcția privată onOpen (evt: Event): void addEventListener (Event.ENTER_FRAME, onEnterFrame); 

Această funcție este apelată atunci când arhiva zip a fost deschisă. Aici adăugăm un ENTER_FRAME ascultător de evenimente.

Pasul 9: onComplete ()

Adăugați următoarea nouă funcție de cod sub onOpen () funcția pe care ați introdus-o în pasul de mai sus.

 funcția privată onComplete (evt: Event): void done = true; 

Această funcție este apelată atunci când nu există alte fișiere de procesat din arhiva zip.


Pasul 10: onEnterFrame ()

Adăugați următoarele sub onComplete () funcție pe care ați introdus-o mai sus. Această funcție va fi declanșată la fiecare cadru după deschiderea fișierului zip:

 Funcția privată onEnterFrame (evt: Event): void // Încărcați numai 32 de fișiere per cadru, pentru a economisi puterea de procesare pentru (var i: uint = 0; i < 32; i++)  // any new files available? if(zip.getFileCount() > numFiles) // yes da so get var file: FZipFile = zip.getFileAt (numFiles); // acesta este un png în folderul icoane? dacă (file.filename.indexOf ("woofunction-icons") == 0 && file.filename.indexOf (". png")! = -1) var încărcător: Loader = new Loader (); loader.loadBytes (file.content); tileListDp.addItem (sursa: încărcător); numFilesLoaded ++;  numFiles ++;  altfel // nu există fișiere noi disponibile // verificați dacă am terminat dacă (terminat) removeEventListener (Event.ENTER_FRAME, onEnterFrame); removeChild (imagesLoaded); imageTileList.visible = true; imageTileList.dataProvider = tileListDp;  / / Ieșire din pauză de buclă;  imagesLoaded.text = numFilesLoaded + "Imaginile încărcate"; 

Iată carnea din cod.

Deoarece aceasta rulează fiecare cadru, vom plasa o restricție artificială asupra numărului de fișiere din arhiva cu care ne ocupăm imediat. Acesta este scopul forului.

zip.getFileCount () dezvăluie câte fișiere sunt în zip; numFiles stochează câte fișiere am tratat pana acum. Deci, linia 5 verifică dacă există încă mai multe fișiere de rezolvat.

Dacă nu mai există fișiere rămase, treceți la linia 17 și faceți doar câteva clarificări de bază: eliminați ENTER_FRAME ascultător, eliminați câmpul de text "încărcare", faceți vizibilă lista țiglelor și conectați-o la date.

Dacă rămân fișiere, vom folosi următoarea din lista noastră numFiles ca un indice. Atunci verificăm dacă este un PNG din dosarul cu pictograme; deoarece știm mai întâi structura zip-ului, putem șterge și verificăm dacă numele și calea fișierului conține "icoane woofunction" și ".png".

Pentru a obține imaginea din zip și într-un DisplayObject, putem folosi un Loader. Această clasă este adesea folosită pentru a încărca o imagine dintr-o adresă URL, dar aici folosim metoda loadBytes () pentru a obține datele din ByteArray create de FZip.

De cand Încărcător extinde DisplayObject, putem să-l adăugăm direct la Furnizorul de date al TileList. Apoi crestem ambele numFilesLoaded și numFiles.

De ce avem două numere întregi pentru a urmări câte fișiere sunt încărcate? Bine, numFiles ține cont de toate fișierele pe care le-am examinat din zip, în timp ce numFilesLoaded ține cont mai ales de imagine fișiere pe care le avem încărcate în DataProvider. Este ultima variabilă pe care o folosim pentru actualizarea textului "încărcare" la sfârșitul funcției.


Concluzie

FZIP este un utilitar uimitor pentru a salva un timp de încărcare și o lățime de bandă. Sper că ați găsit acest tutorial util, și vă mulțumim pentru lectură!

Cod