Optimization and File Size Tutorial

[jmtb02]

Extensive Optimization and File Size Tutorial
by jmtb02

After this tutorial, you should understand:
*Sound Compression
*Pre-flash Optimization of Audio
*Controlling Audio Compression within the Flash Environment
*Minimizing file size
*Vector vs. Bitmap
*What All Those Trace Bitmap Fields Actually Do
*Anti-Aliasing Text
*Symbol and Graphic Usage
*Other Tips

This is my first tutorial, so bear with it. Hopefully it will be appended to the very bottom of the AS:Main for future reference. There have been several threads floating through the forum concerning how to knock down file sizes for Newgrounds, getting the FLA file size down, etc. I thought it would be generally helpful to provide a help source for getting the file size down and to keep the flash environment streamlined.

Differing from T-H's Tutorial, I hope to provide a less script-based optimization method, which could be more useful towards animators and lesser programmers who, most likely, would not be using programming methods that are incredibly hard on the processing speed of flash.

Sound
Optimization of sound is one of the most important aspects of flash development. When music and sound files are imported into flash, they are going to play a huge role in the increase of .fla size, due to the library system flash incorporates. When sound files are imported into flash (via the File>Import>Import to Library/Import to Stage), they will be copied into the flash file, not linked externally. The means that the sound file will actually “live” inside the flash file, allowing the audio to travel with the .fla file if you were to move it to another computer.

However, the common misconception is that flash audio is copied file size for file size. This is not true, as the audio file expands massively when imported to Flash. Here is an example.

Hard Drive
Sound File: 4.6 MB/160 kbps

Flash
Same Sound File in Flash File: ~54.4 MB

As you can see, any sound file you add to flash is going to make your fla huge. Thus, it may be important to start optimizing in a secondary program, such as Audacity if you want to cut down the bloat. To do this, follow these steps:
1) Download Audacity and the LAME Encoder, and install the Audacity program. Drop the lame_enc.dll in the audacity directory.
2) Open the program, and hit File>Open. Find your mp3 file.
3) Hit File>Preferences, then hit the File Formats tab. In the box where it says “MP3 Export Setup”, hit find library. Select the lame_enc.dll that you stored in your program directory.
4) Drag the Bit Rate down to 64 (kbps). This will provide a good balance of bit rate and quality.
5) Close the Preferences panel. Click the Selection Tool, and select the audio you would like to have exported. Remember, the less audio you have, the smaller the file size will be. If you are just using 45 seconds of a song, there is no need to export the entire sound piece!
6) Hit File>Export Selection as Mp3. Now you should be able to export a nice, small file size. Import your sound file to Flash, and realize the size you have just fixed it at.

Hard Drive
Originally…
Sound File: 4.6 MB/160 kbps
Now…
Sound File: 1.7 MB/64 kbps

Flash
Originally…
Sound File: ~54.4 MB/160 kbps
Now…
Sound File: ~19.7 MB/64 kbps

Here are some more tips for keeping the flash file down…
*Sound loops can provide an infinite amount of music time for a much smaller file size. A 15 second loop will be much smaller, and it will be able to continually play over and over again as background music. This is very good for games that require a user to have the same music for a very long time.
*Setting the volume to zero within the “Edit Envelope” window will still export the sound. You may want to cut the sound clip down if you find yourself using a long sound file but turned most of the sound off.
*Switching from stereo to mono may also be helpful, as it can reduce the file size a lot. However, once again, you must strike a balance between file size vs. quality, so consider your options carefully.

SWF Size

Now that your FLA side is finished, now you can easily modify the swf side. If you did the optimization techniques from the previous section, you have much less work to do for the swf export.

In Flash, open up the File>Publish Settings window. Here you will find the options for how your flash will export. Click the “Flash” tab and look at the many options you have for flash; specifically, the bottom half of the window. You will find many options for sound publishing.

The first options are for the bit rate for the two different styles of sound in flash: Event and Streaming. Event sounds are sounds that will play independently of the timeline, while streaming sounds are sounds that will synchronize to the timeline, and flash will drop frames (if necessary) to keep up with the sync. You can probably guess when each will be more important.

However, back on topic, you will see the default set to 16 kbps. This means that for every second of flash, this will be the memory size of every second of music playback and storage (there are other factors, however, they will not be as important for flash). The default for flash is 16 kbps, which is pretty low quality when you compare it to an every day mp3 (128 kbps). However, you will notice when you export, that the file size is incredibly low. So what you need to do is strike a balance between quality and file size (say, 64 kbps, as we used earlier).

Please do not post... this is not the end of of the tutorial.... (1/4)

[jmtb02]

So click the “set” next to either, and you will be able to set the quality. There are a few options here…
1) Compression Style
There are many different sound compression options, so will need to choose which is best for your project. Personally, I find mp3 to be fine, but if you want to explore more options like ADPCM (for extremely compressed sound) or RAW (for absolutely no sound compression), then go for it.
2) Preprocessing
This is where you can set the flash to run on mono. This will decrease your flash swf size, but it will lessen the quality.
3) Bit Rate
Here is where you set that bit rate we were talking about. 64 kbps is great, but also explore your other options.
4) Compression
There are three options here, and most do not realize what they do. The quality of compression is the speed at which flash will be compressing your mp3 files at export time. Fast has faster compression but lower quality, and best is vice-versa. Medium strikes a balance between the two. Basically, the compression is going to cramp your export time but shape your sound files differently, so you will need to experiment. Just setting this to medium is good.

So once you are done fixing these sound files, you need to question what these will affect in your movie. Basically, they will blanket all sound files which are not edited individually through the library (which we will get to later), and change their bitrate if necessary. However, if you would like to override the settings you previously set through the library, you can check the “override sound settings” menu, and it will automatically override your previous settings.

To change individual sounds, open up your library (Window>Library or ctrl+L). Double click any sound you would like to edit, and a window will pop up. The editing technique here is similar to that of which you have already done.

The quality and number of sound files playing at once will have an impact on how fast your flash runs. You will notice that if you play a game with sound on, it may slow it down a bit.
*Minimize the amount of sound happening at once. If you have five or six sounds playing at once, flash will have to play these while playing your animation, which can be severe trauma for the program. If you are playing a set series of sounds all at once, you may want to edit them together in Audacity and reimport in.
*Minimize file size. Higher file size means more work for flash, so limit your file sizes.
*Kill sounds as soon as possible. Don’t let a sound be followed by 10 seconds of silence or similarly, don’t let it play when there is no audible sound.

Graphics

Graphics can become heavy and a burden if not streamlined for internet use. Here is a guide to making your flash smoother and run quicker, while maintaining file size.

To begin with, let’s explore the basic principle of vector art. Unlike bitmap or raster images, which are mapped grids of pixels of different shades, vector art is constructed of mathematical geometric primitives, such as lines, circles, rectangles, Bezier curves, and polygons (and text, but that’s not important now). Essentially, whatever you draw on the screen is translated into a code, which flash draws through mathematical equations and simple shapes. This is why flash can be scaled so well; the resizing of vector art is merely the scaling of equations and shapes.

So, as a case study, lets draw the same rectangle in flash and the same rectangle in a bitmap format, gif. The rectangle will be 50x50 pixels on a 100 x 100 white canvas, and the rectangle will have a simple gradient from black to white vertically.

Rectangle
Flash – 0.144 kb
Gif – 1.46 kb

So you can see that the flash file handles file size much better than bitmap… however, this is not always the case. The more geometric in shape the file is, the better flash is going to be. When objects get more complex, such as traced bitmaps, you will end up having a larger file than a bitmap. The amount of detail in the vector art will determine whether or not the file will be larger or smaller. On average, most images drawn in vector will yield a smaller file size. But when images go into extreme detail, such as seen in traced bitmaps, images will end up becoming costly and annoying.

Bitmaps

Flash has the ability to import bitmaps as they are, but they also have the ability to trace bitmaps as vector art. Simply, flash redraws the entire bitmap artwork as vector equations and shapes; the detail level is based on the user’s decision on how much detail there is. Flash has problems with traced bitmaps sometimes. The amount of processing and shapes it will take to trace a bitmap in high quality can be enormous. Here, I will show you how to process a bitmap correctly and efficiently.

Please do not post... this is not the end of of the tutorial.... (2/4)

[jmtb02]

Import your bitmap into flash, and click it once. Within the Modify>Bitmap>Trace Bitmap, you will see a bunch of confusing fields. Let’s go through them one at a time.

Color Threshold
This number determines the color quality of the bitmap into vector. Given two pixels, pixel A and pixel B, and your color threshold of 5. In determining the color of pixel B by pixel A, if B is 5 or less RGB color values away from A, then B will become the same shade as A in the final trace. Essentially, your color quality is determining how many shades off your pixel is from adjacent ones, and determining whether or not to just make it easier for flash and make it the same color. If your number is 1, then each pixel will be within at least one RGB color of the original bitmap color and adjacent pixels. For 10, each pixel will be within 10 colors of RGB. This number can range up to 500, and as low as 1. A higher range will yield a much lower file and processing size, so keep this in mind.

Minimum Area
This number chooses the amount of surrounding pixels to do color threshold checks on. The higher the number, the lower the quality.

Curve Fit
This chooses how smooth the outlines of colors are for when there are connecting pixels of similar color from threshold checks. You can choose three different levels, with the “pixel” being the best quality.

Corner Threshold
This decides how sharp to make corners. Sharper corners yield a straighter look, while few corners will eliminate strong corners. This option is less for performance, and more for the effect you are trying to achieve for your tracing.

What is recommended?
If you are looking for a threshold that tends to hit at a good balance of quality and still looking like the bitmap, I would recommend the following arrangement:
Threshold: 10
Minimum Area: 1
Curve Fit: Tight
Corner Threshold: Many Corners.
Adjusting the curve fit from there is a good way to see other options for bitmap quality.

If you put your tracing on full quality, you may crash your flash window, or may have to wait for a few minutes for the rendering to finish. If you are running into this problem, this should definitely be an indicator that you are producing a trace that is far too good of quality to produce for the web (of course, your computer could just be really slow, but that’s usually not the case either).

Leaving in Bitmap Form

Sometimes, I would even suggest you just leave the bitmap in bitmap form. Because flash will just read it like a normal bitmap file, it will load quickly and really have no calculations or shapes to render. In some cases, your bitmap can be even smaller that a traced version, and better quality as well.

If you have bitmaps on the screen, it is best to minimize the amount of bitmaps on the screen as once. If at all possible, reuse the same bitmaps over again to minimize file memory. The larger your library, the larger the filesize, so minimize the amount of bitmaps you are importing. Instead of importing four corner pieces, try importing just one, and rotating 4 times. Easy, right?

Exporting Quality

When you export your movie, you do have the option or changing the overall bitmap compression. Open up File>Publish Settings>Flash Tab, and find the jpeg quality sliding bar. Here, you can set the compression at which flash will compress for runtime (for all bitmaps, not just jpeg). This does not affect the quality of the bitmap; what it does is sets how much compression there should be to lower the swf file size. What happens is that when you export the flash file, it compresses the images into smaller files. The more compression, the lower the file size, but more compression also means more work for flash to decompress the images. So finding a good balance again (80 is good), for compression is important.

Now, when you actually want to affect the image quality, start by right clicking on the image in the library, and selecting properties. You have the same options as the Publish Settings window, except you may also choose to smooth the bitmap, which will analyze your pixels and choose pixel colors based on adjacent pixels.

Remember, if you are importing jpeg, you are already importing an image with compression on it. If you are importing a gif or png, you are importing an image that is lossless, which means that the image has no loss of quality when saved (full pixels). However, flash will automatically compress gif or png as jpg during export, so if you do not want this to happen, you can switch between jpg or lossless through the bitmap properties window.

Anti-Aliasing Text

Anti-aliasing is a way for flash to create better rasters of text, by cutting down on text quality and shading, thus shrinking file size. It is a good habit to get into setting the anti-aliasing for text. To set the alias, select a text, and open the properties panel. You will find a drop down with many options.

Use Device Fonts
This takes the fonts the user has in their own computer, and uses it to generate text. This will keep the flash file smallest, as it imports the user’s fonts at runtime.

Bitmap Text
This will turn off text smoothing, and save the outlines of all the text of the font. It will fill text in dynamically, and export at the size you desire (dependent on how you import to the library). Note that the quality will suffer due to the blocky type if you choose a low font size at import, but expand your text above the level you set. Your file size will be smaller.

Anti-Alias for Animation
Embedding the font outlines at export and at medium quality, this creates a good balance for animated text. It is not recommended that you use this method for small or static text. The file size is large due to embedding of font outlines.

Anti-Alias for Readability
Embedding the font outlines at export and great quality, this method makes it easiest to read small fonts, but has problems with animation. It is recommended that you do not use this font for animation, but to use it for blocks of text (especially small font sizes).

Custom
At times, you may need to set your own anti-aliasing. However, it is not quite necessary unless you are working with very crucial text, such as text on cell phones or portable devices.

Please do not post... this is not the end of the tutorial... (3/4)

[jmtb02]

Use of Symbols
In Flash, you have the ability to use objects in your library more than once with little cost to your flash file size. By utilizing the same shapes for animations or loading dynamically, you can minimize your file size by a lot.

Using the “Use Count” in your Library
Every once in a while, it will be good to enter your library to check your “use counts”. As a column sorting tool, you can scroll over and find the column that is marked for “use count”, and will be displeased to see that it does not show any of your symbols ever being used. To turn on your use counts, go into the library panel (ctrl+L) and find the menu button in the top right section of the panel bar. Select “Keep Use Counts Updated” and it will count all the library items that are used. Note that it will only count objects on the stage, and will not count objects loaded through actionscript. You can use this tool to figure out which symbols are junk and can be deleted, which can be extremely helpful. Also, for an even quicker fix, you can select the “Select Unused Items” option, and hit Delete to remove all unused symbols.

Symbol Points
A good indicator of how much a symbol will slow down a piece is by selecting the graphical portion with the white arrow tool (sub-selection tool). A complex shape with a huge amount of points loaded several times may yield a slower animation. This is especially true for bullets, explosions, or other objects that may be imported several times via duplicateMovieClip() or attachMovie(). However, for the most part, you may not have to worry about this for less complex actionscript and animation.

Drawing
When drawing in Flash, while your focus should not primarily be on your streamlining the movie, you should take into consideration some techniques for making your animation run better.

The first is the turning on of the “smoothing” objection. When using the brush tool, you can select (from the properties panel extension) the “smoothing” option, which is a number that determines the smoothness of your lines. The smoother the shapes, the less points the object will have. This will round your corners more, and will yield smaller resource size.

Transparencies will slow down your animation a lot. Because Flash has to calculate the colors based on the transparency and the object behind it, the animation may have “lag” if the different parts are animated. This also applies to symbols with tint or alpha change to them, dynamically or through the properties panel.

Filters
Filters will drag your movie down in some cases, but most of the time you can survive with them. It is ill-advised to use multiple filters together unless it is totally necessary. The more filters you use, the more work it is going to be for Flash to work. You will find that some filters will be even more bothersome than others, but for the most part, it is just better to use less filters if you can.

Blending
Blending is a horribly slow method that is not entirely perfect yet for the Flash-environment. Similar to what other programs such as Photoshop use, it allows objects in different layers to calculate different pixel combinations to create different effects, such as inversion of color or hard light. These effects, since they are pixel by pixel, are incredibly hard on flash. I would recommend only using 0-1 blends in a single frame. Actually, I would advise against using them at all, but that is just my take.

Caching As a Bitmap File
Using the simple property instance.cacheAsBitmap = true; will yield a signicant increase in performance for a complex animated vector graphic. Flash, on the load of the movie, will cache the animated part as a bitmap (per frame) and draw a bitmap graphic. This will significantly increase the quality of your animation, because there is a lot less rendering for flash. Note that when you apply filters, that Flash will immediately turn on Bitmap caching on that movieclip without notifying you.

Importing Film
With the release of Flash 8 comes a critical update to the way Flash can import movies, with many more options and levels of importing quality. However, I feel that this tutorial should not cover it since most of the way film is imported into Flash is more critical to film makers as it is to Flash programmers and animators; also, the interface for importing movies is so streamlined now that people should have no trouble understanding how to import. Unlike sound and graphics, the quality is prompted at import, so you know what you are getting into when you import the film.

General Tips
Flash has many other practices for keeping file sizes low. Here are a few of them.

Flash will save a lot of information in its own file. For example, Flash will save your undo states (up to however many you saved), old media (even when deleted previously), and other information, even if it doesn’t get saved into your final swf file. Try to reduce the clutter as much as possible, by using the “Save and Compact” method instead of the “Save As” or “Save”.

When embedding fonts, you do not need to embed every single character. Most text fonts have hundreds to thousands of different characters, when most people just need the basic symbols, letters, and numbers. Try to cut down on what you need to embed. Embedding necessary characters can be done through the through the text boxes (select and enter the properties panel, hit “embed”).

In order to ensure a nice quality to your Flash, you should include a method of changing the quality of the movie throughout the game or animation. Flash has four main quality levels: Low, Medium, High, and Best. You should learn how to code something simple to help users choose the best quality. Check out the "Quality Toggling" Tutorial by Denvish for a brief introduction to this process.

I think this is about it… if you have any questions or comments, feel free to leave your remarks. Yes, it was quite long, so thanks for bearing with it.

[Nick]

Whoa! I've just scanned through and there's some pretty good tips there. Good job :D

As: Main useful links, anyone?

[jmtb02]

At 4/10/06 01:56 PM, _Nick_ wrote: Whoa! I've just scanned through and there's some pretty good tips there. Good job :D

Thanks Nick, I appreciate it. If anyone else has any comments or suggestions, they would be highly appreciated, since this was my first tutorial and I wasnt quite sure what I was getting myself into.

[xflashmanx0]

ya i say its really good and alot of good tips in there

[mrEotter]

Damn... I bump this because it's so helpful! Nice thread.

[Inglor]

longstuff :) nice work, learned a thing or two myself

[bigwill432]

great job!

[Paranoia]

Pretty good, although I think you were being pretty generous with your sound quality. I wouldn't set my streams above 32kbps (maybe a bit more for events, as I generally have these as just short beeps, clicks and effects). Still very useful for people not too familiar with optimisation.

[jmtb02]

At 7/9/06 11:49 AM, _Paranoia_ wrote: Pretty good, although I think you were being pretty generous with your sound quality. I wouldn't set my streams above 32kbps (maybe a bit more for events, as I generally have these as just short beeps, clicks and effects). Still very useful for people not too familiar with optimisation.

I thought 64 kb was a good balance, but of course, we all have our opinions. I just wanted to provide a number that wasnt >=128 kb, which is why everyone has really huge flash files. 32 would work though, just nothing below 16-20.

Of course, my sound classes complain that even 160 kbps is too low for my animations, but that's only because sound is their life.

[Kahze]

thanks alot for posting this

[Jenjamik]

Sweet tutorial. I think you should have encluded a section about vector optimization though (Modify ---> Shape ---> Optimize). I picked that up from Adam Phillips and it's proved very handy for me indeed.

[beast-unleashed]

link to the LAME encoder dont work

[CaiWengi]

I think you were very clear and didnt over complicate anything, congrats. A very helpful tutorial, and since its from you Im sure its all very useful and advice we can trust

Thanks!

[henke37]

A good trick when you are here on newgrounds and have music from the audio portal is to just load the mp3 at runtime instead of exporting it into the swf. Sure, you don't get to chose the export quality, but it's not recoded either. Given how much of the size can be from just audio portal submissions, this can drastically reduce the size of the swf. Besides, it's just music, sometimes we don't even care that the music doesn't load directly.

[Bantilan]

uhmm... converting Bitmap to Flash... yah it was good for compression....

But for me, I almost convert all of my Flashes especially the detailed one to bitmap.. why? because it will less the memory and will make your Flash fast, although it was big.. but it will make your flashes playeble in 256mb RAM PC.. :D

[xTOXICxEMPIRE]

Whoa, great tutorial man, this will come in heaps handy later!
Most of my flash submissions have massive file sizes, as I like to put in a variety of music.
Cheers & Bookmarked!

[Arthuria99]

Thanks for the tutorial dude, they're really helpful