Tricks to Compress Your Flash Banner Ads

Author: Charles Moser, TDH Marketing Inc.

May 2010

Flash banner ads are everywhere, and if you have even a little bit of experience with Adobe Flash, you may be tasked with creating an online advertisement. If the ad is fairly simple with little content and/or imagery you will probably have little to no problem meeting file size restrictions. On the flip side, clients may have an abundance of information and want an exciting ad that seems impossible to squeeze into 40k!

Squeezing out those final kilobytes

Step 1: Cutting Back

Don’t be afraid to cut out fluff.The client may want 10 photos, where maybe 2-3 will get the message across.There may be room to tighten up copy and/or the number of transitions in the ad.  As always, keep an open line of communication with your client. Explain to them the steps you have taken to conserve file size and why things will need to be cut to meet file size restrictions.

Step 2:Go Vector if Possible

Vector graphics are incredibly small compared to raster images.

A little explanation:

Vector graphics is the use of geometrical primitives such as points, lines, curves, and shapes or polygon(s), which are all based on mathematical equations, to represent images in computer graphics.

A raster graphics image or bitmap is a data structure representing a generally rectangular grid of pixels, or points of color, viewable via a monitor, paper, or other display medium.

Since vector graphics are math based, they offer not only tiny file size, but scalability without loss of quality.Vector images are not suitable however, for displaying continuous tone images (i.e. digital photographs).

So, if you go with a banner ad design that is comprised of more line art / vector illustration rather than digital photography, you are already saving yourself a ton of space!

Note: If using logos, try to get them from the client as a vector eps or Adobe Illustrator file. Illustrator vector files import directly into Flash.



Step 3:Avoid Embedded Fonts

Unless you are using standard system fonts to display text for your banner ad, you will probably want to break your fonts down into vector graphics.  Honestly, you are going to save file size doing this, even if they are standard fonts.To convert your font to a vector, please follow these steps:

• Lay down your text using the Flash Text Tool
• With your text selected use the “Break Apart” command: Modify->Break Apart or CNTRL-B two times.The first time breaks the text line into individual letters, the second time breaks those letters down into vector shapes.


Step 4: Compress PNG Graphics (When using Raster)

Once your raster graphics are imported into Flash, they are handled as bitmaps. A bitmap or pixmap is a type of memory organization or image file format used to store digital images. Flash allows two distinct ways to control the handling of your raster graphics:

• Photo (JPEG)
• Lossless (PNG/GIF)

Once your image has been imported into the Flash Library, double click on it to bring up the image properties. From here you can tell Flash how you would like your image to be handled. For the most part, I like using PNG graphics with Flash.They allow you to use transparency without anti-aliasing artifacts.

When dealing with photos, I use the Photo (JPEG) compression method. If you uncheck “use document default quality”you can then specify the quality of the image by entering a number between 0 and 100. By pressing the “Test” button you can visually see how it will affect your image and get a compression status report!

When dealing with Lossless compression, the file savings are not as significant, unless you are using a tiny PNG or GIF with a limited color palette. If you are using a very simple image with only a few colors, remind yourself to use a vector graphic instead to expand your creative options?

When it comes to PNG compression, here are some tools that can help:

• In Photoshop, always use “Save as Web & Devices” Alt+Shift+Ctrl+S. It affords you more control over the output size and quality of your image.
• PunyPNG is a free online PNG compressor.
• PNGGauntlet is a another desktop PNG compressor that is also free.


Step 5: Graphic Consolidation Trick

This technique I’ve found saves quite a bit of file size. For this example I’m going to use three images that fade in across the Flash timeline in a 300x250 pixel stage. For the first movie, I’ve imported my three graphics into the library, added them to the stage and created the fade-in effect. I also set my compression at 50% for these three images. My resulting movie comes out to be 11k.This does not seem like a very large file, however, imagine that this is a 40k ad. Approximately 27% has already been used!

For the consolidation trick, it is assumed you know how to use masks and work with movie clips in Flash. Instead of the three images being imported into Flash I’ve consolidated them into one, as seen below:



Now, I’m going to create three movie clips which will use the same source image as the consolidated graphics. I will place a mask above the photo layer and isolate the graphic I wish to use.

Once I have my movie clips completed, I place them on the stage, create the identical fadein effect and publish my movie.The size is only 8.55k! By using the same photos in a single image and isolating them with masks, I’ve saved 6% of my file size and I did not have to degrade the image with additional compression.



The Skinny

The techniques listed above can be applied to any Flash application to reduce file size and load time. If you’ve tried these techniques or any other techniques you may have run across and still cannot hit your file size target, please revisit Step 1.

Charles Moser is the Director of Interactive Services for TDH Marketing.He manages the ebusiness department as well as handling web site design, interactive multimedia and custom software application development.Mr. Moser has vast  expertise in 3-D modeling, gaming and animation. TDH Marketing, Inc., is a leading business development and marketing firm headquartered in Dayton,Ohio since 1994 with joint ventures and affiliations throughout the United States, Europe and Asia.