One thing that I have found in my years of editing and fixing FLAs is that most people seem to take little regard to graphic optimization. Graphic optimization is important in order to make your application as efficient as possible. The Adobe Flash Player (AFP) handles both native vectors and bitmaps. Both of these have specific reasons to use one over the other. I will not get into the visual differences of vector graphics vs. bitmaps, I will explain when and why to use one or the other and how to do so at an optimum level.

To understand graphic optimization for flash you need first examine the AFP and how it handles the two major graphic types. Vector images are built and calculated continuously on stage with their properties applied to them by the AFP. Now the important thing to consider is vectors are little more than an array of points and some extra properties such as stroke, color, and so on. This most always will make for a drastically smaller outputted SWF file. However if your application requires a lot of stage movement, rotating, and tweening than you must also keep in mind that the AFP has to re-calculate all of these points, which can be quite CPU intensive. So vectors might not be the best approach to graphics for flash gaming, unless used for simple static graphics such as menus or buttons.

Bitmaps are the tried and true format for Internet images. They are handled in the AFP with about the same efficiency as any standard web browser. On average using bitmaps will bloat the size of your SWF file, making for longer loading time. The advantage however is that bitmaps are much easier for the AFP to move around on stage. Instead of recalculating numerous points the AFP simply needs to know what the new (x,y) registration point is. The bitmaps are cached so duplication and tweening are much less CPU intensive.

Now it is true that you can cache your vector images as bitmaps. However it is important to keep in mind that this command happens when the object is introduced to the stage. Clearly this makes the use of cached vectors (or vectors in general) a poor choice for things like gun firing in a game or scrolling background objects. To curb the stress on runtime processing you can store your vector in a movie clip and assign that movie clip to export on the first frame, however the caching command will still process when it is called in your script.

Since we know the key difference between the two major graphic types and when they are appropriate, lets look at some ways of optimizing both vectors and bitmaps. While testing for optimal graphic performance it is advised to keep open a system monitor to track CPU usage for spikes. Another important thing to do is enable flash to generate a size report on export. To generate a size report select File -> Publish Settings -> Flash -> Advanced, then click the box for generate size report. After doing this you will get a break down of all of the images that are loading into your application, as well as the frame by frame byte usage.

To make vectors more efficient you remove unnecessary points from the graphic. This will not only reduce your SWF file size but also reduce CPU usage from movement. The key is finding the balance between efficiency and beauty. If you are dealing with complex vectors, such as the ones made when you preform a trace bitmap command, you may want to use the Modify -> Shape -> Optimize tool. This allows you to reduce many of the unneeded points very quickly. Also when using shapes, keep them as simple as possible and convert them to either a graphic or movie clip that you will then use instances of time and time again. By doing this you can re-size, re-color, and re-style several different copies of the same instance.

There are a number of benefits to having your vector stored as a movie clip or graphic. Both allow you to change the color and styles of the graphic, however movie clip adds many nice features for only a small increase in byte size. Movie clips can have several handy filters applied to them. Take advantage of these filters, if you are skilled enough you can really drop your file size and avoid use of several bitmaps. If converted to a class object you can export them to load on the first frame, for preloading, and as mentioned before they can be cached as a bitmap to move more efficiently on stage. Keep in mind several filtered symbols moving on a stage will severely impact CPU usage. Since we are on symbol types, I should say a word about usage of the button type. Don't.

In ways of optimizing bitmaps there is not as many options, but let's go over them. In your library you can right click and open the Properties panel for any bitmap. Here you have a number of options, but the ones we care about are the smoothing and quality settings. Smoothing will slightly blur the bitmap hiding pixelation caused by lowering the quality to shave off precious KBs of space. I find with smoothing on you can use around 50% quality and have good results.

Naturally graphic optimization takes time, especially on large complex projects, however the end result is happier users. Not much, aside from unnecessary sound, annoys users more than long load times and lagging. By taking the time to properly optimize your flash projects you can often eliminate these annoyances. Also it much easier on your server and bandwidth to deliver smaller files.