trials and tribulations of the 30k flash banner

Introduction

Your client wants a blockbuster, but you have only a measly 28,080 pixels and 30kb to play with. How do you balance your creative vision with the production realities of a Flash banner? When you think of the endless hours of life lost on shaving off a vital few K in pursuit of optimisation nirvana, it’s easy to become philosophical about your career. But don’t sack it just yet. Web designers and developers are natural problem solvers and these restrictions need not limit creativity.

Preparation

Make sure a creative schedule is supplied as it contains vital information such as banner dimensions, placements and the all important file sizes. Without this information you could be designing a banner that doesn’t meet the requirements and end up wasting valuable time and budget.

Communication

"It's all about knowing the limits and using things sparingly..."

Some clients have high expectations for the banner creative. Video and sound are common requests. It’s up to you to communicate that their expectations may be unrealistic. Clients will appreciate your honesty. It’s all about guiding the client in the right direction for the job ahead and setting boundaries for what can be achieved within the spec.

Design

There are no hard, set rules when designing a 30K banner. You can design a simple banner with no images, no gradients and no animations and be guaranteed to produce a 30K Flash banner. I see the challenge as being able to use all these elements and still produce top quality work. It’s all about knowing the limits and using things sparingly.

Plan Movie

Planning out your movie will give a better idea of all the different elements required to complete the job. Knowing your key library symbols will save you from repeating or perhaps uploading more symbols than required. Keep symbols in the library to a minimum and try to reuse as many as possible.

Fonts

Even the number of different fonts and font styles you use can have an effect on file size so use them wisely. When embedding fonts choose only the characters you need rather than the whole font family.

Images

When using images keep them to what is absolutely necessary to complete the job. Having one or two good quality images is better than having four poor ones. Optimising your images in a separate application before importing them to Flash is valuable, if you can take a few K off by reducing the colours etc., then every little bit helps. Flash does give you the option to optimise your images further, do this by right clicking the image, going to properties and here you will see the compression option. When importing the image into your library, try to make them the exact maximum physical size you require. It wastes valuable K when you bring in an image that is bigger than needed. Sometimes you can get a better result by converting your bitmap image into a vector; however this isn’t always the case depending on the image detail so it is one to try and test.

Components

"When embedding fonts choose only the characters you need..."  

In general the fewer the components you have the smaller the file size. Keep only essentials in the library. I mentioned before how it helps to know how many movies clips etc. you have and how to reuse them. When you reuse a symbol it doesn’t add any file size as you are just reusing the same item over and over.

Frames

Reducing the number of frames in your movie will also help. Using actionscript to replace vast numbers of frames is a great way to do this. A perfect example is using actionscript to hold your banner at a certain point for a period of time rather than inserting more frames to be played out. Good resource sites such as www.ffiles.com/ and www.kirupa.com/ will provide excellent snippets of actionscript.

Testing

"An absolute must ... is testing."

An absolute must when building a banner to a small file size is testing. When previewing your banner select “bandwidth profiler,” this will show information such as the frame rate, dimensions and also the current file size. If your banner is sneaking above that vital 30K, start chipping away, it will be worth it in the end.

Summary

I’ve recommended many tips and tricks to reduce your Flash file size but the best advice I can offer is to experiment, use gradients, alphas and images but use them in moderation. Today we’re always being told that too much of anything is a bad thing and this advice should also be applied to the 30K banner.

gavin wilke
digital designer

+ read gavin's bio