Share
Dans ce tutoriel, je vais vous présenter FZip, une bibliothèque AS3 qui vous permet d'ouvrir des fichiers zip dans vos projets Flash. Cela peut économiser beaucoup de bande passante; Dans ce tutoriel, nous allons charger un fichier zip de 2,5 Mo contenant 9,3 Mo d’actifs..
Jetons un coup d'œil au résultat final sur lequel nous allons travailler. Cliquez ici pour ouvrir un fichier SWF qui chargera à son tour un fichier zip contenant des images et les affichera dans une grille en mosaïque.
(Le flou visible sur certaines icônes est dû à la tentative automatique de Flash de les redimensionner jusqu'à 32 x 32 pixels, même si ces images sont au format 16 x 16 pixels.)
Vous devrez graver une copie de la bibliothèque FZip à partir du github de Claus Wahlers..
Extraire la bibliothèque. Dans le dossier src, il y a un dossier nommé "deng"; copier ce dossier dans le dossier où vous allez stocker votre fichier FLA.
Ensuite, nous avons besoin d’une archive zip avec laquelle travailler. J'ai choisi le jeu d'icônes WooFunction, disponible gratuitement sur woothemes.com.
Enregistrez-le dans le même répertoire où vous allez stocker votre fichier FLA..
Ouvrez une nouvelle FLA et attribuez-lui les propriétés suivantes:
Enregistrer ceci sous fzip.fla.
Aller à Fenêtre> Composants et faites glisser un composant TileList sur la scène.
Sous "Paramètres de composant", définissez les propriétés suivantes:
Accentsconagua
columnCount: 16largeur de colonne: 32rowCount: 8rowHeight: 32
Donnez le nom de l'instance à TileList imageTileList, et définissez les propriétés suivantes dans le panneau "Position et taille":
Ensuite, sélectionnez l'outil Texte et assurez-vous que les propriétés suivantes sont définies dans le panneau "Caractère":
Maintenant, faites glisser un TextField sur la scène et donnez-lui le nom de l'occurrence imagesLoaded. Assurez-vous que TextField est défini sur "Texte classique" et "Texte dynamique", respectivement, et définissez les propriétés suivantes:
Aller à Fichier> Nouveau et choisissez "Fichier Actionscript".
Enregistrer ce fichier sous Main.as.
À l'intérieur Main.as ajoutez ce qui suit:
fonction privée démonstr (): void package import flash.display.MovieClip; importer deng.fzip.FZip; importer deng.fzip.FZipFile; import flash.display.Loader; import flash.net.URLRequest; importer flash.events. *; import fl.controls.TileList; importer fl.data.DataProvider; classe publique Main étend MovieClip fonction publique Main () setupZip ();
Ici, nous avons importé les classes dont nous aurons besoin pour ce tutoriel, et mis en place le Principale() fonction constructeur.
Définir les variables suivantes ci-dessus fonction publique Main ():
var code privé: FZip; // Instance de la classe FZIP private var numFiles: int = 0; // Nombre de fichiers private var numFilesLoaded: int = 0; // Nombre de fichiers chargés private var done: Boolean = false; // Vous avez traité l'archive zip? private var tileListDp: DataProvider = new DataProvider (); // fournisseur de données pour TileList
Nous ajoutons ici quelques variables dont nous aurons besoin tout au long du tutoriel. Voir les commentaires pour leur utilisation.
Ajoutez la nouvelle fonction suivante ci-dessous Principale():
fonction privée setupZip (): void zip = new FZip (); zip.addEventListener (Event.OPEN, onOpen); zip.addEventListener (Event.COMPLETE, onComplete); zip.load (new URLRequest ("wootheme.zip")); // change cela pour qu'il corresponde à l'URL de votre fichier zip imageTileList.visible = false; Ici, nous créons une nouvelle instance de la classe FZip, ajoutons deux écouteurs d’événements et chargeons notre fichier zip. Enfin, nous avons mis imageTileList être invisible (nous ne voulons pas qu'il apparaisse tant que toutes les images du zip ne sont pas chargées).
Ajouter la nouvelle fonction suivante sous le setupFzip () fonction que vous avez entrée ci-dessus:
fonction privée onOpen (evt: Event): void addEventListener (Event.ENTER_FRAME, onEnterFrame);
Cette fonction est appelée à l'ouverture de l'archive zip. Ici nous ajoutons un ENTER_FRAME écouteur d'événement.
Ajouter le code suivant nouvelle fonction sous le onOpen () fonction que vous avez entrée à l'étape ci-dessus.
fonction privée onComplete (evt: Event): void done = true;
Cette fonction est appelée lorsqu'il n'y a plus de fichiers à traiter à partir de l'archive zip.
Ajouter ce qui suit sous le onComplete () fonction que vous avez entrée ci-dessus. Cette fonction sera déclenchée chaque image après l’ouverture du fichier zip:
fonction privée onEnterFrame (evt: Event): void // Ne chargez que 32 fichiers par image pour économiser la puissance de traitement de (var i: uint = 0; i < 32; i++) // any new files available? if(zip.getFileCount() > numFiles) // oui, obtenez-le var fichier: FZipFile = zip.getFileAt (numFiles); // est-ce un png dans le dossier des icônes? if (file.filename.indexOf ("woofunction-icons") == 0 && fichier.filename.indexOf (".png")! = -1) var loader: Loader = new Loader (); loader.loadBytes (fichier.content); tileListDp.addItem (source: loader); numFilesLoaded ++; numFiles ++; else // aucun nouveau fichier disponible // vérifie si nous avons terminé if (done) removeEventListener (Event.ENTER_FRAME, onEnterFrame); removeChild (imagesLoaded); imageTileList.visible = true; imageTileList.dataProvider = tileListDp; // Quitter la boucle break; imagesLoaded.text = numFilesLoaded + "Images chargées"; Voici la viande du code.
Comme cela exécute chaque image, nous allons imposer une restriction artificielle sur le nombre de fichiers de l’archive que nous traitons en même temps. C'est le but de la boucle for.
zip.getFileCount () révèle combien de fichiers sont dans le zip; numFiles stocke le nombre de fichiers que nous avons traités jusque là. Donc, la ligne 5 vérifie s'il y a encore plus de fichiers à traiter.
S'il ne reste plus aucun fichier, nous passons à la ligne 17 et procédons à un nettoyage de base: supprimez le fichier ENTER_FRAME écouteur, supprimez le champ de texte "chargement", rendez la liste des mosaïques visible et reliez-la aux données.
S'il reste des fichiers, nous obtenons le prochain dans notre liste en utilisant numFiles comme un index. Nous vérifions ensuite s'il s'agit d'un fichier PNG à partir du dossier icons. comme nous connaissons auparavant la structure du zip, nous pouvons tricher et vérifier si le nom et le chemin du fichier contiennent "woofunction-icons" et ".png".
Pour obtenir l'image à partir du zip et dans un objet DisplayObject, nous pouvons utiliser un chargeur. Cette classe est souvent utilisée pour charger une image à partir d'une URL, mais ici nous utilisons sa méthode loadBytes () pour obtenir les données à partir du ByteArray créé par FZip..
Puisque Chargeur s'étend DisplayObject, nous pouvons simplement l'ajouter directement au fournisseur de données de TileList. Puis on incrémente les deux numFilesLoaded et numFiles.
Pourquoi avons-nous deux entiers pour savoir combien de fichiers sont chargés? bien, numFiles tient compte de tous les fichiers que nous avons examinés depuis le zip, alors que numFilesLoaded tient compte spécifiquement de la image les fichiers que nous avons chargé dans le fournisseur de données. C'est la dernière variable que nous utilisons pour mettre à jour le texte "loading" à la fin de la fonction.
FZIP est un petit utilitaire étonnant permettant d’économiser du temps de chargement et de la bande passante. J'espère que vous avez trouvé ce tutoriel utile et merci d'avoir lu!
