1. Code
  2. ActionScript

Quick Tip: Use FZip to Open Zip Files Within AS3

Read Time:5 minsLanguages:

In this tutorial I will introduce you to FZip, an AS3 Library that lets you open zip files inside your Flash projects. This can save a lot of bandwidth; in this tutorial we will load an 2.5MB zip file which contains 9.3MB worth of assets.

Final Result Preview

Let's take a look at the final result we will be working towards. Click here to open a SWF that will in turn load a zip file full of images, and display them in a tiled grid.

(The blurring visible on some icons is due to Flash automatically attempting to scale them up to 32x32px, even though those particular images are 16x16px.)

Step 1: Getting the Library and Zip Archive

You will need to grad a copy of the FZip library from Claus Wahlers' github.

Extract the library. Inside the src folder there is a folder named "deng"; copy this folder to the folder where you will store your FLA.

Next we need a zip archive to work with. I choose the WooFunction icon set, available for free from

Save this to the same directory where you will store your FLA.

Step 2: Create New Flash Document

Open a new FLA and give it the following properties:

  • Size: 550x400px
  • Background Color: White

Save this as fzip.fla.

Step 3: Add Components to Stage

Go to Window > Components and drag a TileList component to the stage.

Under "Component Parameters" set the following properties:

  • columnCount: 16
  • columnWidth: 32
  • rowCount: 8
  • rowHeight:32

Give the TileList the instance name imageTileList, and set the following properties in the "Position and Size" panel:

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

Next select the Text Tool and make sure the following properties are set in the "Character" panel:

  • Size: 50pt
  • Color: Black

Now drag a TextField onto the stage, and give it the instance name imagesLoaded. Make sure the TextField is set to "Classic Text" and "Dynamic Text", respectively, and set the following properties:

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

Step 4: Create new AS3 Document

Go to File > New and choose "Actionscript File".

Save this file as

Step 5: Package, Imports and Constructor

Inside add the following:

Here we imported the classes we will need for this tutorial, and set up the Main() constructor function.

Step 6: Add Variables

Define the following variables above public function Main():

Here we add some variables we will need throughout the tutorial. See the comments for their usage.

Step 7: setupZip()

Add the following new function below Main():

Here we create a new instance of the FZip class, add two event listeners, and load our zip file. Last, we set imageTileList to be invisible (We don't want it to show until all the images from the zip have loaded).

Step 8: onOpen()

Add the following new function beneath the setupFzip() function you entered above:

This function gets called when the zip archive has been opened. Here we add an ENTER_FRAME event listener.

Step 9: onComplete()

Add the following code new function beneath the onOpen() function you entered in the step above.

This function gets called when there are no more files to process from the zip archive.

Step 10: onEnterFrame()

Add the following beneath the onComplete() function you entered above. This function will be triggered every frame after the zip file has been opened:

Here's the meat of the code.

Since this is running every frame, we'll place an artificial restriction on the number of files within the archive that we deal with at once. That's the purpose of the for-loop.

zip.getFileCount() reveals how many files are in the zip; numFiles stores how many files we've dealt with so far. So, line 5 checks whether there are still more files to deal with.

If there aren't any files left, we skip to line 17 and just do some basic clearup: remove the ENTER_FRAME listener, remove the "loading" text field , make the tile list visible, and link it to the data.

If there are files left, we get the next one in our list using numFiles as an index. We then check whether it's a PNG from the icons folder; since we know the structure of the zip beforehand, we can cheat and just check whether the file's name and path contains "woofunction-icons" and ".png".

To get the image from the zip and into a DisplayObject, we can use a Loader. This class is often used to load an image from a URL, but here we're using its loadBytes() method to get the data from the ByteArray created by FZip.

Since Loader extends DisplayObject, we can just add it straight to the TileList's DataProvider. Then we increment both numFilesLoaded and numFiles.

Why do we have two integers to keep track of how many files are loaded? Well, numFiles keeps count of all the files we've examined from the zip, whereas numFilesLoaded keeps count specifically of the image files that we've loaded into the DataProvider. It's the latter variable that we use to update the "loading" text at the end of the function.


FZIP is an amazing little utility to save some loading time and bandwidth. I hope you've found this tutorial useful, and thanks for reading!

Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.