Share
En este tutorial, te presentaré FZip, una biblioteca AS3 que te permite abrir archivos zip dentro de tus proyectos Flash. Esto puede ahorrar una gran cantidad de ancho de banda; En este tutorial cargaremos un archivo zip de 2.5MB que contiene activos de 9.3MB..
Echemos un vistazo al resultado final en el que trabajaremos. Haga clic aquí para abrir un archivo SWF que, a su vez, cargará un archivo zip lleno de imágenes y las mostrará en una cuadrícula en mosaico.
(La imagen borrosa visible en algunos íconos se debe a que Flash intenta escalarlos automáticamente hasta 32x32px, aunque esas imágenes en particular son 16x16px).
Deberá graduar una copia de la biblioteca FZip del github de Claus Wahlers.
Extraer la biblioteca. Dentro de la carpeta src hay una carpeta llamada "deng"; Copie esta carpeta en la carpeta donde guardará su FLA.
A continuación necesitamos un archivo zip para trabajar. Elijo el conjunto de iconos WooFunction, disponible de forma gratuita desde woothemes.com.
Guarde esto en el mismo directorio donde almacenará su FLA.
Abre una nueva FLA y dale las siguientes propiedades:
Guardar esto como fzip.fla.
Ir Ventana> Componentes y arrastre un componente TileList al escenario.
En "Parámetros de componentes", establezca las siguientes propiedades:
Accentsconagua
columnCount: dieciséisancho de columna: 32número de filas: 8altura de la fila: 32
Dale a TileList el nombre de la instancia imageTileList, y configure las siguientes propiedades en el panel "Posición y tamaño":
A continuación, seleccione la Herramienta de texto y asegúrese de que las siguientes propiedades estén configuradas en el panel "Carácter":
Ahora arrastra un TextField al escenario y dale el nombre de la instancia imagesLoaded. Asegúrese de que TextField esté configurado en "Texto clásico" y "Texto dinámico", respectivamente, y configure las siguientes propiedades:
Ir Archivo> Nuevo y elige "Archivo de Acciones".
Guardar este archivo como Main.as.
Dentro Main.as agregue lo siguiente:
función privada demostración (): paquete nulo import flash.display.MovieClip; importar deng.fzip.FZip; importar deng.fzip.FZipFile; importar flash.display.Loader; importar flash.net.URLRequest; importar flash.events. *; importar fl.controls.TileList; importar fl.data.DataProvider; La clase pública Main extiende MovieClip public function Main () setupZip ();
Aquí importamos las clases que necesitaremos para este tutorial y configuramos el Principal() función constructora.
Defina las siguientes variables arriba Función pública principal ():
privado var zip: FZip; // instancia de la clase FZIP privada var numFiles: int = 0; // Número de archivos privados var numFilesLoaded: int = 0; // Número de archivos cargados privados var done: Boolean = false; // ¿Terminado de procesar el archivo zip? private var tileListDp: DataProvider = new DataProvider (); // Proveedor de datos para TileList
Aquí agregamos algunas variables que necesitaremos a lo largo del tutorial. Ver los comentarios para su uso..
Agregue la siguiente nueva función a continuación Principal():
función privada setupZip (): void zip = new FZip (); zip.addEventListener (Event.OPEN, onOpen); zip.addEventListener (Event.COMPLETE, onComplete); zip.load (nueva URLRequest ("wootheme.zip")); // cambia esto para que coincida con la URL de tu archivo zip imageTileList.visible = false; Aquí creamos una nueva instancia de la clase FZip, agregamos dos escuchas de eventos y cargamos nuestro archivo zip. Por último, nos propusimos imageTileList para ser invisible (no queremos que se muestre hasta que todas las imágenes del archivo zip se hayan cargado).
Agregue la siguiente función nueva debajo de setupFzip () función que ha introducido anteriormente:
función privada onOpen (evt: Event): void addEventListener (Event.ENTER_FRAME, onEnterFrame);
Esta función se llama cuando se ha abierto el archivo zip. Aquí agregamos un ENTER_FRAME oyente del evento.
Agregue el siguiente código nueva función debajo de la onOpen () Función que ingresaste en el paso anterior.
función privada onComplete (evt: Event): void done = true;
Esta función se llama cuando no hay más archivos para procesar desde el archivo zip.
Agregue lo siguiente debajo de onComplete () función que ha introducido anteriormente. Esta función se activará en cada fotograma después de abrir el archivo zip:
función privada onEnterFrame (evt: Event): void // Solo cargar 32 archivos por frame, para ahorrar energía de procesamiento para (var i: uint = 0; i < 32; i++) // any new files available? if(zip.getFileCount() > numFiles) // sí, así que consíguelo el archivo var: FZipFile = zip.getFileAt (numFiles); // ¿Es este un png en la carpeta de iconos? 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 // no hay nuevos archivos disponibles // comprobar si hemos terminado si (hecho) removeEventListener (Event.ENTER_FRAME, onEnterFrame); removeChild (imagesLoaded); imageTileList.visible = true; imageTileList.dataProvider = tileListDp; // Salir de la pausa del bucle; imagesLoaded.text = numFilesLoaded + "Images Loaded"; Aquí está la carne del código..
Dado que esto se ejecuta en cada fotograma, colocaremos una restricción artificial en la cantidad de archivos dentro del archivo que tratamos a la vez. Ese es el propósito del for-loop..
zip.getFileCount () revela cuántos archivos hay en el zip; numFiles almacena cuántos archivos hemos tratado hasta aquí. Entonces, la línea 5 verifica si todavía hay más archivos para tratar.
Si no queda ningún archivo, saltamos a la línea 17 y solo hacemos una limpieza básica: elimine el ENTER_FRAME escuche, elimine el campo de texto de "carga", haga visible la lista de mosaicos y vincúlela a los datos.
Si quedan archivos, obtenemos el siguiente en nuestra lista usando numFiles como un índice. Luego verificamos si es un PNG de la carpeta de iconos; Como sabemos de antemano la estructura del archivo zip, podemos hacer trampa y simplemente verificar si el nombre y la ruta del archivo contiene "woofunction-icons" y ".png".
Para obtener la imagen desde el archivo zip y en un objeto DisplayObject, podemos usar un cargador. Esta clase se usa a menudo para cargar una imagen desde una URL, pero aquí estamos usando su método loadBytes () para obtener los datos del ByteArray creado por FZip.
Ya que Cargador se extiende DisplayObject, solo podemos agregarlo directamente al Proveedor de datos de TileList. Luego incrementamos ambos numFilesLoaded y numFiles.
¿Por qué tenemos dos enteros para realizar un seguimiento de cuántos archivos se cargan? Bien, numFiles cuenta todos los archivos que hemos examinado desde el zip, mientras que numFilesLoaded sigue contando específicamente de la imagen archivos que hemos cargado en el DataProvider. Es la última variable que usamos para actualizar el texto de "carga" al final de la función.
FZIP es una pequeña utilidad sorprendente para ahorrar tiempo de carga y ancho de banda. Espero que hayas encontrado útil este tutorial, y gracias por leer!
