So you want your Flash Website to load faster? Of course you do!
This article will share a raft of useful techniques that can be implemented to decrease the file size of your Flash movies, and thus have them load faster.
This is not intended to be a ‘how-to’ article, but rather, to provide information about what you can do to decrease the size of your Flash movies. Once you’re aware of the available techniques, you can then pursue their implementation yourself.
1. Use symbols, animated or otherwise, for every element that appears more than once in your movie.
A symbol is a reusable element found in the library of your movie. When you place a symbol on the stage or inside another symbol, you’re working with an instance of that symbol. Unlike using individual graphics, you can use many instances of a given symbol, with almost no addition to the file size of your movie.
Converting all artwork to symbols will ultimately save you bandwidth. Because Flash refers to a singular symbol to generate multiple instances, the user only has to download the graphic once, even if you use it a hundred times in your site.
In addition, symbols can save you time and trouble when it comes to making changes to your movie. This is because the changes you make to a symbol are reflected in each instance of that symbol throughout your movie.
2. Use very few — if any — raster graphics.
Although Flash has no problem allowing you to add raster graphics to your movies, it really isn’t the preferred graphic choice. Flash would be much happier if you used vector graphics.
A very brief definition of vector vs. raster graphics for those who are not familiar: vector graphics are simply mathematical definitions of shapes and lines that are used to construct your graphic. Because your graphics are created from numbers and equations, you maintain a completely scalable image. Raster file formats like BMP, JPEG, and GIF, on the other hand, are defined not by mathematics, but by a series of pixels lined up in rows with color values applied to each individual pixel (or dot).
Because vector graphics are essentially just mathematical equations that, when formulated, produce a graphic they take up very little storage space, and add little to the overall file size of your movie.
While this may be old news to some, hopefully this information will help the new Flash user avoid making that grave mistake of taking their honed Photoshop skills and trying to drop all those raster graphics into Flash. In short, a nice raster graphic used occasionally is probably ok, just don’t try and build your entire Flash site from raster graphics.
3. Change the quality of jpg images.
So you totally disregarded the statement above, and went ahead and added that .jpg to your Flash movie? Well, let’s at least trim it down.
Open up your library by hitting CTRL + L, and locate your imported .jpg. Right-click on it and go to properties. Uncheck ‘use imported JPEG data’ and you’ll find that you can adjust the image quality. You will have to play with the quality setting until you find a happy medium of appearance vs. file size. I always adjust this setting — it alone can make a huge difference to your file size.
4. Load images dynamically.
A great new feature of MX is that it gives you the ability to load .jpg graphics dynamically. This is achieved in the same way you would load an external .swf — using the loadMovie() action. Add a MovieClip to the stage and give it and instance name of “imageholder”. Then add the following actionscript to a keyframe:
loadMovie("name_of_jpg.jpg","imageholder"); Warning! Progressive JPEG images do not appear when loaded dynamically using the loadMovie action.
5. Other useful tips to optimize images.
Using the Modify — Smooth, Straighten and Optimize commands found on the menu bar to refine shapes and lines may also help to reduce the overall size of your swf. You can use these commands repeatedly on a shape until you are satisfied with the level of optimization, or the look of the graphic.
Also in the Modify menu is the Trace Bitmap command. This command will convert a bitmap to a vector image, and often does a good job — though, usually, the quality of conversion depends on the complexity of the image. Typically .gifs convert better than .jpgs. You may want to play with this command and see how it affects different graphics.
6. Limit the number of special line types such as dashed, dotted, ragged, and so on.
Solid lines are smaller. Lines created with the pencil tool require less memory than brush strokes.
7. Use layers to separate elements that change over the course of the animation from those that don’t.
A nice feature of Flash is that, no matter how many layers you use, this won’t have any impact on the size of your Flash movie. Therefore, it’s good practice to place non-animated objects on their own layer, separating them from animated objects.
8. Limit the number of fonts and font styles.
The more fonts you use, the more fonts Flash has to save in your .swf — and the more fonts saved in your .swf, the bigger the file size will be. Pretty simple right?
Here’s a useful tip, though. Let’s say you just got this really nifty font, and you want to use it on a few buttons. In order for that font to be seen by people that don’t have the font installed, you’ll have to embed it. This is pretty easy — just go to the character options for that font, and there you’ll be the option to embed the entire font, uppercase characters, lowercase characters, numerals and punctuation.
If all you want is the button to say “home” or something this simple, then there’s no use in embedding the entire alphabet, just go to the input box that says, “and these characters” and type in “home” This way you’re only storing 4 characters in your .swf file.
9. Import text into your Flash movie.
You may want to decide to keep your text separate from your Flash movie. This allows you to easily make modifications without having to open up Flash — and can make it easy for someone who doesn’t have Flash or Flash knowledge to make changes. They can simply edit a .txt file. In addition, your .swf file will be smaller because Flash will no longer be responsible for storing your text.
How can you create the external text file and import it into Flash?
- Open up notepad and follow this pattern:
variable_name=content&variable_name2=content& The content is attached to each variable, and will soon be loaded into Flash.
The “&” is the delimiter. Save your .txt file with the name “content.txt”.
loadVariablesNum("content.txt", "0") This loads the content.txt file into level0 of your movie. You could also use:
loadVariables("content.txt","MovieClip") which would load the content into the MovieClip with the given instance name.
Because your text no longer resides in your Flash movie, you decrease the file size, and your main Flash movie will now load more quickly: instead of having to preload a 150K swf, you may only have to preload a 100K swf.
10. Optimizing Sound in Flash.
Use MP3 compression, the smallest sound form when possible.
Once you’ve imported in your MP3 file, open your library with CTRL+L and right-click to bring up properties. You may want to uncheck “use imported MP3 quality” — with this option unchecked, you can change both the Bit Rate and Quality. You may find that a lower Bit Rate and Quality reduces file size while producing a sound that’s still fine for use.
11. Use the Color Effects menu in the Instance properties dialog box to create many different colored Instances of a single symbol.
Every instance of a symbol has specific properties that can be modified. These properties apply only to the specific instance — not the original symbol.
You can, for instance, use the tint option in the color properties of the selected object to change its color, instead of creating another symbol. Other properties include brightness, and alpha. By using a single instance of an object multiple times, you again re the overall file size.
12. Modularize your movies.
Modularization is the process of breaking up a single large Flash movie into multiple smaller .swf files in an effort to decrease the load time, and make your movie easier to manage. You can learn more about modularization by reading SitePoint’s article titled Modularize Flash.
Remember the words of Stan Lee: “With great power comes great responsibility.” The responsible Flash user will take great steps to ensure that their Flash site loads as quickly as possible, even if that means sacrificing a little eye-candy.
Mark AngelettiMark runs Search-This.com, a resource site for Internet marketing and web development. He also enjoys talking about faith, music, and all things web-related on his blog, What a Savage.
