Flash Optimization: The Performance vs. File Size Conundrum

**Additional information below (added 09/23/09)**

I have heard, and asked, the question many times: “How do I get this swf down to file size?” This question has a cousin in another form: “How come this swf plays so slow at times?”

The two sound different, right? Well, they are, but at the same time they are the exact same.

Balancing File size and Performance can be very tricky. In fact, it can be down-right frustrating. There are a lot of factors that go into optimizing for performance. In order to keep your brain from frying into molten lava, here are a few things to keep in mind.

First let’s talk a little about how Flash Player renders – or “draws”.

Flash must abide by the rules of a computer system and the monitors in which computers display their visual output. Flash is subject to the laws of the computer bit system¹, an incremental system of numeric values starting with 8 bits (one piece of information with 2 values: on and off) to a byte and building onward. Flash must also bow itself to the laws of pixels. Your computer screen is made up of tiny little squares called pixels. Your monitor resolution might be 1024×768, which means there are 1024 pixels along the top and 768 pixels along the side.

With this understood we can now see that Flash Player must “draw” within these confines. It must know that there is – essentially – an unlimited amount of colors (or information) that each pixel of your monitor can display (not at the same time, of course). And, it can only “draw” in squares.

Try this:

Take out a piece of paper and draw a perfect, straight line diagonally across it. Easy, right? Now, draw a half inch grid on your piece of paper, perpendicular to the edges. Try to draw a perfect, straight, diagonal line by filling in adjacent squares. Not so easy, is it? Now try to do it with color while moving the line square by square to one side than the other. Nah, just kidding.

Bitmaps vs. Vectors

If you tried the above example, you didn’t just stumble on how Flash Player must “draw” a straight line, but you also proved the difference between vector and bitmap. The first line you drew was a vector, whereas the second (with the grid) was a bitmap. Flash authoring environment can create vectors, but when Flash Player plays on your screen, it must abide by pixel laws. That is not to say that Flash Player turns vectors to bitmaps automatically, really it doesn’t.

Vectors are basically made up of “imaginary” lines connected by points, then “filled” with color. This takes quite a bit of mathematical calculations to be converted to pixels. Since Flash must do the math for drawing lines between points, the more points that are on a vector path, the more math Flash must do. This not only can lead to slower performance, but also higher file size. Gradients in vectors can be hard on Flash Player, too, since it must draw even more colors.

Bitmaps can be created in just about any photo or illustration software (PhotoShop and Illustrator for example), as a .png, .jpg, or .gif. These are basically dozens to thousands of pixels filled with a predefined color. It is easier to do the math of something that is already defined than it is to have to figure it out every time you would want to draw it. Keep in mind that the more complex the bitmap pixels – the more colors and large dimensions used – the more math Flash has to do.

Bitmaps themselves generally aid in visual performance, but can lead to large, up-front file sizes and thus longer load times. Vectors are great for loading quickly – smaller file size – but can be a beast for Flash to have to redraw every frame during an animation, especially if they are complex.

If you are using bitmaps, first thing you will want to do is make sure the quality settings aren’t obscene. To do this, first go to the Publish Setting (File>Publish Settings), click on the Flash tab and adjust the bitmap quality slider. This works for pngs, but what about jpgs? To change their settings, simply double click on each jpgs little green icon in the library and check its quality settings. (In CS4 you can highlight multiple items, right click and choose Properties.) Jpgs will most likely have “Use Imported Bitmap Quality” checked which is 102% (weird huh?). Uncheck its radial and enter your own percentage. 75 – 80 is good for quality, less is better for file size. Also, if your jpgs are in constant motion, click the “Allow Smoothing” radial. This will keep your bitmaps from those gross “scan lines” but will be fuzzy if static (or standing still), so if they aren’t constantly moving, leave it unchecked.

With Vectors, setting cacheAsBitmap with ActionScript or turning on the “Use Runtime Bitmap Caching” in the Properties Panel on the containing movie clip will help performance a little. But when static, they may look fuzzy. Vectors look great without being turned to bitmaps and are static.

Filters and Blend Modes

Filters and Blend Modes have little to nothing to do with load but can severely hinder performance, especially during animations. This is because Flash Player has to do even more math on the fly, as the animations play out. When you apply a Filter to a movie clip, Flash Player has to render that out immediately while playing. FP sort of runs your movie clip with cacheAsBitmap, essentially rendering your movie clip as a faux “bitmap” on the fly. This puts a damper on how well FP runs simply because it has to figure all the information within a tiny fraction of a second. Filters can also lead to strange “pixel shifts” or even large jumps, depending on the intensity and of which filter you are using.

Blend Modes kill performance, much in the way Filters do. Using Blend Modes not only has to force Flash to render the movie clip they are applied to, but also any below them. Obviously, there is a lot involved in doing that, so Flash Player has to think through that as well.

**Reuse and Recycle to Reduce

Reuse as any graphical elements as possible. Whether they are vector or bitmap, reusing common or shared symbols will greatly reduce file size.

Let’s say you have 12 rectangular movie clip buttons. You would not want to recreate 12 different rectangles. Instead, create one square and scale, rotate, and manipulate that one square as often as you need to. If you need to alter colors, simply tint that same square to the color of your choice. Try to find all the ways you can possibly reuse and recycle graphics as often as possible. In fact, make it a habit.

Masking

Even though it looks great, in general Masking puts a damper on performance. This is further explained in another post found here.

The End User

The user’s hardware does come into account as well. If the computer your Flash piece is being viewed on has great amount of RAM, an awesome video card, plenty of hard drive space, etc. then your flash piece will usually play nicely. If the user has a machine with fewer capabilities, your Flash piece will render slower.

Size Reporting

To see just what all is taking up loading and how large bitmaps and vectors are, go to your publish settings (File>Publish Settings), in the Flash tab click on “Generate File Size Report.” Also, when testing your movie (cntl+enter) hit cntl+B to bring up the Bandwidth Profiler. These will show you file size, but not necessarily performance hits.

Conclusion

Balancing File Size and Performance is not a simple task. There is a lot to keep in mind when creating your Flash piece. It might be best to ask yourself a series of questions before even getting to the nitty-gritty of designing.

1. What is the allowable file size, if there is any?
2. What is going to be animating and what is going to be static?
3. What kind of computer might my audience be viewing my work on?
4. Am I shooting for better performance, faster loading times, smaller file size, or a combination?
5. Can I create that as vector or will I need to use photography?
6. Does my bitmap quality really need to be very high if it is just animating?
7. Do my bitmaps need to be large size or can I crop them down?
8. Can I clean up parts of my bitmap images so there aren’t so many colors and they aren’t so detailed? Or do they need to be really crisp and pixel perfect?
9. Do my vectors need to be complex or can they be rather simple?
10. How many items are animating on the screen at one time? Does there need to be so many?
11. Do I need to use filters or is there a better way to obtain the same visual appearance?

Keep these all in mind and your Flash work will be that much more exceptional. Do this all on a consistent basis and optimizing will become like second nature.

¹ In decimal calculations: Each bit is a piece of information (on or off), there are 8 bits to a byte, 1000 bytes to a kilobyte, 1000 kilobytes to a megabyte, etc. This is based off of the metric systematic calculation. Binary calculation is actually 8 bits to a byte, 1024 bytes to a kilobyte, 1024 kilobytes to a megabyte, etc. To learn more, run a simple internet search.

Advertisement