Apr
16

How to truly optimise flash web banners

0 Comments
Posted by Hex in Essential Tips, Web Development

It took me 7 years as a flash designer to realise that optimising a flash web banner is an art. Yes web banners are just web banners, they sound easy to develop but trust me, it’s not when your flash banner is byte critical and have to appear on Yahoo or other advertising channels and the file size restriction is 30kb even if your brief basically says “we need to include everything! Not sure how it can be done but it must be done”.

Here’s one that I developed for the movie 30 Days of Night (click on banner to replay) for Qais Consulting (I know, banner looks pixellated but this is what I call – compromise – for file size restriction), I would like to share with you my experience while developing this innocent looking banner which only weighs 29.7kb.

7 Points Checklist:

Here are 7 points to note when optimising your web banner. With this checklist, hopefully you won’t have to tear your hair out like I did. The final point I’m going to talk about using fonts which to me, is the most critical area of optimisation:

  1. Try to use vectors as opposed to png/gifs/jpeg.
  2. If you have to use png/gifts/jpeg, optimise them before importing them into flash, to further optimise them, right click on the graphic asset in the library and click “Properties”. Set the compression to “Photo(JPEG)”, uncheck the “Use default document quality” checkbox and enter a small number for it’s quality.
  3. ALWAYS, as much as possible, to re-use graphics or vectors. For this instance, the blood looks like a big MovieClip of vector but it is not. If I were to use a whole vector of blood, there would be too many curves hence too much for flash to calculate. What I did was to create 3 small MovieClips of vector blood, and patch them all over the banner. Another example for this instance is the grills at the top of the banner when the animation starts, only 1 grill bar is used and duplicated to make a set of grill.
  4. Similar to point 3, keep the number of MovieClips to a minimum, for example if you’re going to use a mask, use that mask MovieClip throughout the entire banner!
  5. Use as little gradient as possible, if your project permits.
  6. When using mask, do not use shape mask (especially transforming from one shape to another completely different shape) which will add to file size. Always use “tweening” instead (that’s if you’re not using actionscript animation)
  7. The most is important point of all – FONTS. We all think that by typing in the letters, it is taken for granted that they’re already fully optimised since they are like vector shapes, but wrong. The more letters/words you use in your flash banner, the bigger the filesize. Why? Also depending on the fonts you use, each individual letter have curves eg. “g”, “b”, “o”, “p”, “s”, using a combination of letters forming words and words into sentences, they add to flash’s calculation efforts, hence file sizes will increase proportionally to the number of letters. Solution: Type the texts in Photoshop and export them as optimised “gifs” and import them back into flash. Evidently it works for this banner and it is the last optimisation technique that I discovered before I went completely bonkers.

One more tip about developing your byte critical flash banner:

If you’re not sure which asset in your flash file is causing the increase in filesize, go to “Settings” at the “Properties” panel in Flash, click on the “Flash” tab and check the “Generate size report” checkbox. This will generate a text file listing all the assets that are used in your flash banner including their individual file size in Bytes, from there it’ll be easy to see who is the culprit at a glance.

About hex:

Hex is an interactive web design boutique that creates beautiful and well executed interactive websites.

Find all posts by hex | Visit Website

You can leave a response, or trackback from your own site.

Leave a Reply

Categories

From Twitter