With faster and faster internet connections, the need (and even thought) for having smaller file sizes has been fading over the past couple of years. We have seen sites pop up in excess of 5 – 10 MB, which just a couple years ago would have been outrageous. With the popularity of mobile in mind, and the fact that even on a quick connection most people don’t want to wait 30 – 60 seconds for a Flash page to load, file-size is still very important.

Below are some tricks that we have picked up over the years that could/should help shave a little bit from your files. Feel free to post your comments at the bottom of the page and let us know what works for you.

Does everything need to be an image?
A lot of time, someone that is bring a design straight from a Photoshop file to a Flash project will simply cut up the flash and use all the images in Flash. There are some good reasons to do this, but we recommend going through the design and picking out areas that are:

• reusable – a lot of buttons get reused, just take out the text, save the background and create a reuse the background image for all buttons
• backgrounds – many backgrounds are just gradients. You could do this very quickly in Flash using shapes or, even better, you could create it with Actionscript.
• Text Areas – For best practices, we generally keep a rule to minimize and, if possible, eliminate all text embedded in images. We use TextFields instead which allow us to have more dynamic content.

How are you managing you animations?
There are many ways to animate in Flash / Actioscript and the key is figuring out which is right for you. If you have a lot of file size to work with and a detailed animation, you might want to use an image sequence. If you are just moving things around the stage but they don’t really follow any patter, you might want to use frame-by-frame animations. Maybe you have a little less random motion and could use Tweens, or a Tweening library.

Whatever your choice, they all effect your file-size. The more keyframes, the larger the size. If you are using image sequences maybe consider making it a video. If you are doing a lot of Tweens, maybe consider using an Actionscript Tweening Engine (something like Greensock – TweenLite/TweenMax). There are lots of options that can yield fairly similar results, we recommend taking a look at a couple options to see which gives you the best file-size bang for your buck.

Check your image quality.
When you import an asset, it will either be stored as lossy or lossless. Lossy files lose quality when they get save (jpg, etc) and lossless don’t (png, gif, etc). If you look at the properties of any image in your library, you will notice that you can control which type of compression you would like to apply. Be careful with this, you might think that setting a large image to 50% lossy compression is best, but what if there are very few colours and only solid shapes in your image? Lossless may be a better approach and yield a smaller output. We recommend comparing the values vs the output, there is a convenient test button on that properties window that can help with that.

When working in Flash, we recommend always bringing in uncompressed images like PNG’s. If you export everything from your Photoshop design as a transparent 24bit PNG, you have a lot more power in Flash. If you were to save everything as a JPG, you would lose the transparency and some quality before you even get to start working with the file. Once you have the PNG images inside of Flash, we would suggest adjusting the quality. You may notice that you need really high compression % for everything to appear smooth, but most of the time something like 75% is more than enough.

Font Embedding
There are a number of different ways to embed fonts in Flash, but all should follow the same basic rule – only embed the characters that you need. If you are in the IDE, make sure you specify as few characters as possible to embed with a font. If you are in Flash Builder or Flex, make sure that you specify the smallest unicode range that you will ever need. For some pointers check out the following link and some of the resources they link to: http://divillysausages.com/blog/as3_font_embedding_masterclass

Other tips:

• If you can do something in code, do it. Most of the time it will take up less file-size. Make sure to compare code vs timeline just to be sure, some code libraries can tack on a ton of file-size.
• When placing items on stage, make sure they are on a full pixel. This doesn’t optimize your Flash, but objects may appear blurry when not on a full pixel and your first instinct might be to compress them less.

• Tweet