mudska.com / blog

by Brad Kozak
Founder, Captain Digital

Macromedia Flash has?and will, by all indications?continue to revolutionize online advertising. It offers advertisers a platform to develop dynamic, rich-content ads. However, it’s incumbent upon rich media ad designers to deliver content that is both compelling and optimized in such a way as to provide rich content in the smallest footprint possible.

Why should you bother to optimize? Frankly, the difference between a rudimentary Macromedia Flash ad and a comparable animated GIF ad might make you think twice about the need for optimization. After all, Macromedia Flash is inherently a streaming format with vector-based graphics and a built-in programming language that is both compact and fast. In a perfect world, every home would have fiber-optic connections to the Internet—or DSL or cable, at the very least. While the percentage of broadband market penetration continues to increase, dial-up users are something every advertiser must take into account, depending on the product, the demographic, and the site you plan to use as an advertising platform. The Interactive Advertising Bureau (IAB) has attempted to establish a number of standards for advertising dimensions and file load sizes. They’ve been at least partially successful in their efforts to bring some sense of order to online advertising. Their standards are weighted in favor of dial-up users. If the site you want to advertise on adopts the IAB standards, you have little choice but to design and optimize your ads to follow their specifications.

Now that you know optimization is a necessary step, how should you go about it?

Step 1: Plan Ahead

There’s nothing quite like creating the online equivalent of an advertising masterpiece only to discover that your magnum opus exceeds the download size standards set by the IAB and that your site publisher rejected it. The best way to avoid this situation is to start with a target size in mind. That way your realistic expectations automatically constrain your design specs. If you plan to create an ad with streaming video, there’s no way to optimize it to a 15K load with an 85K rollover stream, no matter how hard you try.

Step 2: Optimize Vectors As You Go

Ever draw or edit some vector object in Macromedia Flash and then see the number of points in that object when you click on the subselection tool? It can be pretty scary. What you thought was a fairly efficient object has multiple redundant points along each curve. It’s always a good idea to use the optimization tool within Macromedia Flash to minimize file size as you draw or edit. This tool can reduce your object size by as much as 70%. Keep in mind, however, that this technique is best used sparingly, as extreme optimization tends to change the overall shape and curve accuracy of an object. (This issue becomes less relevant if you invest in a tool like Optimaze—more on that later.)

Step 3: Optimize Bitmaps Early and Often

Sometimes you just can’t get the look you want with vector art alone. At times like these, you probably wonder what size is best for your bitmaps. Assuming that the browser window won’t automatically scale your SWF file—a problem with some ads that play on Flash-centric sites—you can usually plan to go with a 72 dpi, 100% size bitmap. (I don’t recommend scaling up bitmaps, as you increase processor overhead and introduce obvious image compression artifacts.)

Bitmaps with a limited palette or an abstract design can handle significantly more compression than those with lots of detail. This is where you should start thinking about your ultimate file size in Macromedia Flash because adding a lot of bitmap content can cause your file size to balloon quickly out of control.

Heavy compression ruins the look of a bitmap. In an application like Macromedia Fireworks or Adobe Photoshop, preview the results of your compression settings before committing to saving a version of your bitmap. No matter what compression setting and file size you select, do yourself a favor and always save your original, uncompressed source file. Don’t make the mistake of assuming that you’ll never need to go back and change the file. The minute you delete or overwrite your original file is the moment you’ll wish you had it back.

Regarding which file format to choose, there are several schools of thought on this one. Without a doubt, PNG is the best format to get a file into Macromedia Flash, especially if you need any kind of transparent or semi-transparent masking. GIF is a good option if you have a limited number of colors in the file and want to avoid the kind of artifacts you typically see with JPEG compression. JPEGs are a popular choice for many developers, possibly because it’s been the most popular format for 24-bit graphics on the web for some time. BMP files have no built-in compression, so you have to rely on the internal compression settings within Macromedia Flash.

Step 4: Substitute ActionScript for Tweens

Yes, yes, I know. You’re a graphic designer, not a programmer. Your eyes glaze over at the mere thought of coding. But if you succumb to this aversion, you’ll miss out on a way to reduce your file sizes without sacrificing the integrity of your design because of typical bitmap and vector compression.

Using ActionScript to program animations requires significantly less overhead to achieve complex movements than you need to create tweening movies or shapes. Using ActionScript also opens up the possibility of introducing real random behavior into your work. Imagine reducing file sizes of designs with complex animations anywhere from 50% to 90% just by using ActionScript and a little math. For the mathphobic designers out there, many websites provide free code snippets that allow you to add ActionScript programming with virtually no effort.

Step 5: Use a Third-Party Compression Utility

Now that you’ve done everything you can to minimize file size, you need to push optimization to the limit to squeeze every bit of performance out of your SWF. There are two third-party compression utilities that you should consider an essential part of your Macromedia Flash toolbox: Optimaze for vector graphics and Sorenson Squeeze for videos.

Optimaze is nothing short of amazing. This incredibly useful and well-designed utility allows you to adjust the amount of compression with a slider as you watch your animation play. There’s little guesswork to optimize a file completely. If you are integrating video into your work, use Sorenson Squeeze to solve most—if not all—of your compression problems. Both applications yield compression ratios up to 98%. (Your results may vary.)

Step 6: Compress Audio

‘Tis a pity that most ads today make little use of audio. Nothing puts the “multi” in multimedia like audio. However, many advertisers are sensitive to audio’s potential drawbacks, especially the aggravation factor in the workplace. Audio is also a bandwidth hog. Nevertheless, your best bet to create effective, frugal audio is to optimize your audio outside Macromedia Flash in an editing application such as Sonic Foundry’s Sound Forge and then configure the publish settings in Macromedia Flash to use the file’s original compression settings.

Step 7: Use the New Features in Macromedia Flash MX

I’ve heard developers express reluctance at using the features introduced in Macromedia Flash MX for fear of users not having the Flash 6 plug-in. Strangely, most clients have not expressed that same fear. Interestingly enough, over 70% of computers already have the Flash 6 plug-in and I suspect the penetration statistics is significantly higher for broadband users.

About the Author:

Brad Kozak is the founder of Captain Digital, a strategic marketing and rich media design agency in Plano, Texas. A vector graphics pioneer, he spent six years at Micrografx as their creative director and user interface evangelist. He subsequently worked for Altsys (now a division of Macromedia) as the senior product manager for Virtuoso, the Windows NT/Sun Solaris/NeXTStep version of FreeHand. In 1992, Brad launched his own design agency, specializing in both traditional print and online, interactive graphics.