We are in the NOW age so when it comes to Flash games the size of your SWF file is something to be concerned about. It might be less true if players are expecting to get to a huge game (like an MMO for example) but I won’t bother with this here and just skip to the part on how to reduce the size of your Flash games.

Transparency is like Canadian bacon

Your first stop is files with transparency as those are most likely to be the most problematic files for your arteries. First you should ask yourself if you really need transparency in each file. Maybe you can merge some files together or maybe you can just put a black background and it wouldn’t matter.

For Spacewars I have a few planets (that I created myself following some helpful tutorials, just google for them) that don’t need to have transparency. The background of the game is black and I have particles on top of the background to have a motion feeling when ships are moving. Planets are taking most of the screen so I don’t need to have another layer behind them which would force me to make them transparent.

If you don’t need transparency then tweak your files as JPEG

When you don’t need transparency then there’s probably no need for PNG files. You should probably take a look at JPEG files and play with the quality setting.

Most of the time you don’t need to keep a quality of 100%. I’ve been able to drop the quality of some files as low as 40% without any real noticeable downsides. It might change the image a bit but without the original to compare you might not just notice it.

In the previous example the left version is the original PNG at 207 KB and on the right the JPEG version at 30 KB. You can probably see some difference if you’re picky but if you don’t see the PNG version then you just wouldn’t know. By reducing the quality setting of JPEG files you can drop significantly the size of your files. Just going from 100% to 80% will already make a big difference in the size of the file with almost no difference. So experiment with this setting.

Use PNG-8 instead of PNG-24

If you really need transparency then maybe you can save your files as PNG-8 and still keep them nicely looking. This might however request some tricks in Flash to make everything nice.

Here you can see the difference. On the left you have a PNG-24 file at 60 KB and on the right you have a PNG-8 version with the matte setting set to black at 20 KB.

Now clearly the ship on the right doesn’t look as good as the ship on the left. However once you see the ship in the game you don’t really notice anything. Since the background of the game is mostly black (with planets or nebula) the matte is not much of a problem. To help have clean borders I also add a black glow filter in AS3 when I load the ship. You do end up with a black border but here it happens that this border works nicely.

As it is right now I have kept all my ships as PNG-24 files as they are not the biggest files and will only consider converting them if I need to reduce the size of the SWF file once I add music.

Tweak your music!

I’d recommend downloading Audacity (free) and then learning how to use it. It’s fairly simple so I won’t go through how to use this software here.

By bringing your music to 20,050 HZ and changing the Bit Rate (you probably don’t need it to be 256 for a Flash game) you will be able to considerably reduce the size of your music files with barely noticeable loss of quality.

Music files are most likely to be the biggest files you’ll add to your project so it’s worth taking some time to optimize their size and do some reading about Audacity.

Use a particle emitter instead of huge transparent sprites

Fairly simple though it might mean you won’t have the exact effect you were looking for. For example I thought I’d be using TimelineFX to create the special effects for Spacewars. It would have created however huge files even though it would have been beautiful. So I switch to using an AS3 particle emitter instead. Maybe not as nice but if people don’t play my game because they don’t want to wait to download 20 MB of special effects then it won’t do any good.

Store data away

If you really have a lot of data then using a service like Playtomic or Player.IO might something you’d like to consider. It’s probably the last thing you’ll check when trying to reduce the size of your SWF file as code is far from being the most problematic thing you’ll face but it’s still good to know about it.

Experience with Spacewars

Using those techniques I’ve been able to get the SWF file of Spacewars from nearly 12 MB to about 6 MB so taking some time to tweak your files is very well worth it. I still haven’t added music and I still need to add some ships but I feel like I won’t have any trouble to keep the size of the final SWF file under 10 MB. I will probably revisit some files I tweaked to make sure the game load as fast as possible.

Of course since Spacewars do have quite a bit in it I won’t be able to get a 2 MB file but there’s a limit to optimization if you don’t want your game look like crap in the end.

Share