Epace Games: Flash tips!

Over the past year and a half, I have picked up several tips when it comes to making Flash games. Some of these I use so frequently, that they have become essential to my development process. Here is the first batch...

1. Flash IDE Project

I use the free editor FlashDevelop as my primary text editor and debugger. In the latest versions, you can create a "Flash IDE Project" which will link to whichever FLA file you have open in Adobe Flash. This setup is advantageous because the text editor in Flash otherwise is very slow, and FlashDevelop comes with many neat features like a profiler (discussed as the next tip).

Prior to this, working with the two software packages was cumbersome. You would have to export art assets as SWC or SWF files, and then embed or import them into FlashDevelop. In some cases, FlashDevelop would have to be closed before you can overwrite one of the files.

To make matters worse, an embedded SWF that is instantiated as a MovieClip is very misleading because actually it gives just a container that stores the real clip you want, as a child object. To gain access safely, you have to use some obscure stream-related event listener. The only time I needed to do this (prior to the Flash IDE project feature) was when a sponsor handed me a compiled SWF to use in my preloader class.

2. FlashDevelop's amazing profiler

FlashDevelop has many useful features; the profiler definitely is somewhere on the top of the list. Open it by going to "View", and then "SWF Profiler". Click the red flag to green, and then hit F5 to publish and launch the game. The profiler only works in debug mode, so be sure you are not running in release mode.

I like to view the live object count. I've managed to find certain objects that accidentally got left around without being garbage collected due to some reference hidden somewhere.

3. Invisible box for buttons

How many times have you played a Flash game and had trouble clicking on a button? Often times these buttons are text based so you have to click on them in just the right place. Well, as a simple fix, all you have to do is overlay your button with an invisible shape with alpha set to zero.

The invisible rectangle above is on a separate layer on top of this text:

3. Text with outlines

Often times I like to outline my text with a dark color. To do this, first type the text in any font you want, and then break it down to a shape by hitting Ctrl-B twice. Copy this and use Ctrl-Shift-V to paste it in place on a different layer.

Then hide the top layer, and use the "Ink Bottle Tool" to create an outline around each character.

Then show the top layer and this is what you get:

This is flexible because it is possible to change the outline to a gradient, or even move the layer top around to give a more three dimensional look.

4. Paint inside

If you do all your painting in Flash using just the brush tool (or if you are planning to do so), then I cannot stress the "Paint Inside" option enough. Basically I never turn this option off, unless I am sketching on a bottom layer.

This tool forces your brush to paint only in the shape that began the stroke. It makes it super easy to add shadows and highlights because you don't have to "keep inside the lines."

4. Drop shadow

Have some boring buttons? Give them some depth by using the "Drop Shadow" filter. This makes just about anything pop out. Here are three blank placeholder buttons with a black shadow behind them. I like to use drop shadows on sponsorship logos, because it makes them easier to see on any background.

(Ignore the tooth and its painted shadow)

4. Ambient light

For background art, there is an option to "cacheAsBitmap". As long as it does not get scaled, rotated, or otherwise transformed (translation is okay), then it will be cached for ready use under the hood. This does improve performance if objects constantly get redrawn on top.

With that said, you can throw in a constant color effect for free...