Tech Tips: Compress Transparent PNGs with Flash

Do you use transparent PNGs in Flash, Flex or AIR? Want to cut your application file size in half?

Problem:
Embedding transparent PNGs dramatically increases the size of your Flash, Flex and AIR applications. Photoshop and Fireworks dot not have any compression available for transparent PNGs (that I am aware of).

Solution:
Import your PNGs into Flash, give them a linkage id, and export the file as a SWF. Make sure to set your compression level in the publish settings (default is 80%). Using this method, I was able to cut the file size in half for a number of applications.

PLAIN TEXT
Actionscript:
  1. [Embed(source="assets/images/images.swf#myImage.png")]
  2. private var MyImage:Class;
  3. private var myImage:BitmapAsset = new MyImage() as BitmapAsset;

or

PLAIN TEXT
Actionscript:
  1. [Embed(source="assets/images/images.swf#myImage.png")]
  2. private var MyImage:Class;
  3. private var myImage:BitmapAsset = new MyImage() as BitmapAsset;

rather than. . .

PLAIN TEXT
Actionscript:
  1. // Don't use this one ;)
  2. [Embed(source="assets/images/myImage.png")]
  3. private var MyImage:Class;
  4. private var myImage:BitmapAsset = new MyImage() as BitmapAsset;

It is also much easier to manage your external assets from a SWF. Designers can set up a nice slice sheet using the stage in Flash. Much easier than managing tons of small PNGs in folders everywhere.

Image Manager
In addition to using the SWF it can also be very useful to set up an ImageManager to serve out images to your application. This prevents having to change code in multiple places to update the same image reference.

Image Manager Class:

PLAIN TEXT
Actionscript:
  1. package com.cb.utils
  2. {
  3.    import mx.core.BitmapAsset;
  4.  
  5.    public class ImageManager
  6.   {
  7.       public static const MY_IMAGE_ID:String = "my_image_id";
  8.  
  9.       [Embed(source="assets/images/images.swf#myImage.png")]
  10.       public static var MyImage:Class;
  11.      
  12.       public static function getMovie(id:String):BitmapAsset
  13.       {
  14.          var result:BitmapAsset;
  15.          switch(id){
  16.             case MY_IMAGE_ID:
  17.             default:
  18.                result = new MyImage();
  19.          break;
  20.          }
  21.          return result;
  22.       }
  23.    }
  24. }

To access an image from the manager class just make this call:

PLAIN TEXT
Actionscript:
  1. var myImage:BitmapAsset = ImageManager.getImage(ImageManager.MY_IMAGE_ID);

Importing PNGs into Flash
And for those of you that need a refresher on importing PNGs into Flash and setting up linkage IDs:
step1

Select your file. Than go into the library. . .
step2

Finally. . .
step3

Enjoy!

Disclaimer: It may be obvious but you must be using transparent PNGs in your app to see a decrease in file size ;) Most of the apps I work on have lots of transparent PNGs!

This was originally posted on blackcj.com, Chris Black's personal blog. Chris is a Senior Developer at Sierra Bravo.

, , , ,
Filed under Technology

Leave a Comment