November 11, 2003

In our last article, we discussed the barriers stopping Web surfers from visiting Flash-based Web sites. One, barrier is the size of Flash movies. We argued that when visitors enter Flash-based Web sites with large download requirements that they often prefer to go elsewhere. To stop that, Flash designers and developers must reduce the size of Flash documents.

There are several ways to reduce the size of a Flash-based Web site such as laying out and spreading and reusing the elements. Some solutions involve optimizing inputs imported into the Flash authoring system. Others, involve reducing the size of designed elements created within Macromedia Flash. Finally, some solutions are concerned with the scripting aspect of Flash.

Spread the Love

The first thing one must do when starting a Flash project, is to visualize the entire Web site like a storyboard. This method, also used when designing Web sites, programming software, project management and cartoon animation, allows all participants to identify each component used to assemble the final site. Only by having a visual map of an entire Web site, can one spot trouble.

When it comes to optimizing a Flash-based Web site, the storyboard helps determine where to make the cuts. For example, if there is a large introduction at the root of a Web site, following this with lighter contents may be preferable so that visitors do not have to wait twice for contents to appear. Spreading elements over a wider area reduces the download.

Reuse It

A strength of Macromedia Flash is reusing elements in several parts of a movie. The most widely known trick is to transform into a symbol, any repeated element. Symbols are loaded only once in the host's system. Modifying a symbol's properties, such as its colour, size, and shape allows you to reuse and customized it without forcing a new download.

Similar contents such as components can be used with minimal size increases. An effective method that combines reusing contents and spreading it is to break up your files into smaller ones and loading them into a main movie or spreading it over several HTML pages. This is an effective way to diminish the size of a Flash-based Web site, as smaller downloads are effective.

Optimize It

When importing images, video or sound files into Macromedia Flash, optimizing your source documents is very important. One can optimize some files within Flash. Others are more difficult to improve within the program. A simple trick, when working with images is to import them at the exact size they will be used in the Flash presentation. Don't scale with Flash.

One should compress videos as much as possible. There are tools designed specifically to optimize video resources used within Macromedia Flash. Flash best optimizes sounds, since by default, they are exported as compressed MP3 files. Avoid fancy fonts that you wish to save within a file. They add much to a published document's size.

There are effective image compression options within Flash. Don't be shy, compress those images. If designers compress them in regular HTML sites, then there is no reason not to compress them in Flash movies. With much adjustments, the quality loss can be minimal. Compressed with Flash MX's internal features if no third party plug in is available.

One can reduce sound files when one understands how to use them within movies. Event sounds are smaller, although one loses some flexibility with synchronization. There are specific options to optimize speech, music and other types of sounds in Flash. Use them. Using mono instead of stereo can also help. Unless the sound is critical. Few will notice the difference.

Design With Your Brain

When creating elements within Flash, a few things will avoid big files. Avoiding gradients is the best thing to do. Gradients use many layers of shapes to blend in and avoid banding. However, it comes at a price. Using custom strokes will also increase the size of your Flash file.

Tracing your illustrations, instead of randomly converting bitmaps to vectors helps. Shapes are heavier than strokes. Tracing line art using Flash's automatic tool creates two strokes for each line. Tracing illustrations manually eliminates one stroke. Vectors are effective for simple shapes with few lines, few geometric forms and few colours.

Flash users have many misconceptions. Many think that transforming a bitmap into a vector file, grouping it or transforming it into a symbol will reduce size. While it's true that vectors are usually lighter than bitmaps, complex ones are often heavier! There are usually few gains by converting a complex bitmap illustration into a vector image.

Grouping shapes is useful when working on a file. It does not save size. You cannot make an element's size go away by grouping it. It's not a magic wand. Transforming an element into a symbol is only useful if that element returns several times. If it's not repeated, it's only a workflow issue.

The type of symbol used in a document can offer a small size reduction. Graphic symbols are generally heavier than movies or buttons. Unless a thousand are used, the gain will be small. Using effects on symbols tend to increase their size. Duplicating your symbols may be more effective and apply your effects directly within the design, rather than relying on effects.

Script It - Or Not!

A script can reproduce many animation. For example, if converting a dot into a line without manually animating it is feasible. Often, using a script for such an animation will reduce the final size of the file. However, it is not a full proof solution. Using ActionScript to animate, while reducing file size, also adds to the loading time.

Loading time and optimization is not just about the final size of a Flash movie. It is also about the resources needed to play an action. The movie clip control, On Enterframe, for example, consumes much of the host computer's resources when used. A simple animation with a motion tween may often be more flexible and easier to use than an ActionScript command.

Optimizing a Flash document requires a good understanding of all the parts used for your presentation. Simply reducing the file size of a movie is not enough. One must also optimize ActionScripts. When achieved, this will allow your Flash-based Web site to be more user friendly.

However, after making your Web site as user friendly as possible, you still want to be able to track users and let potential visitors find your site on search engines such as Google and All the Web. Developers who play the search engine optimization game have criticized Flash-based Web sites. In next week's article, we'll see what can be done to fix that problem.

Coolstreak Cartoons Inc.

Copyright ® 2003. Use of material in this document®including reproduction, modification, distribution, electronic transmission or republication®without prior written permission is strictly prohibited.