Bitmaps in Flash

Bitmaps in Flash by KyleMKP

Required Materials: Adobe Photoshop 5.5 or later, Macromedia Flash 4 or later.

We all like animutation music videos, and one of the hallmark characteristics of these funny pieces of work is the use of celebrity portraits attached to animated bodies. Many times, however, the raster images, or bitmaps, being used in these videos have not been edited properly for use in Flash. This can have a very nasty effect on the visual quality of the animation and detract from its entertainment value.

Bitmaps are painted images that are encoded pixel-for-pixel with binary color values. Flash, despite its ability to import bitmaps, was not designed for animating this type of data. The drawing tools in Flash are vector drawing tools, intended for creating stroke paths and fill paths. The purpose of this tutorial is not to explain the differences between vector graphics and bitmaps, but it should suffice to say that they are two completely different types of data.

With that said, there is a very effective way to edit bitmaps so that they fit nicely into any Flash animation. It all starts with the most ubiquitous graphics editing program to ever exist - good old Adobe Photoshop.

For a bitmap to blend well into a Flash movie, it must have organic edges and a transparent background. Hence, what we need is a bitmap format which recognizes zero-alpha (transparent) pixels, and is handled in the same way by both Photoshop and Flash. So, who's our Huckleberry? It's the PNG format.

Step 1

In Photoshop, open your iconic photograph of Colin Mochrie, or whichever celebrity is going to be fighting aliens in your video. Duplicate the photograph onto a second layer by clicking Layer > Duplicate Layer, and give it the name photo, or whatever name you wish.

Step 2

On the layers panel, select your background layer. Now select the entire layer by clicking Select > All or hitting CTRL + A. Fill the entire layer with one solid color. It is important to use a color that will not blend in with any portion of the photograph. In this tutorial, I will use pure blue (R:0, G:0, B:255 or #0000FF), because it is an unnatural color and is thus extremely unlikely to blend with any portion of a photograph.

Step 3

Now select your new photo layer and begin deleting all of extra space around Colin Mochrie's head. It's always easiest to draw a big sloppy circle around the head, and then invert your selection by clicking Select > Inverse or hitting SHIFT + CTRL + I. From there, continue to trim it down until you've cut out the head with no extra pixels around it.

NOTE: The task of cutting out a part of a photograph is much easier if you have the lasso tool set to a 1px feather, as this doubles the anti-aliasing effect, and provides a small buffer of lowered-alpha pixels in between the photo and the zero-alpha background.

Step 4

Now that you have your celebrity's head cut out from the photograph, go ahead and crop off the unnecessary space around it. This is important for several reasons. First, it reduces the file size. Second, reducing the number of zero-alpha pixels in your Flash movie will allow for faster runtime performance. Third, when animating an object in Flash, having unnecessary space around it can cause funny things to happen when the object rotates, skews, etc.

Step 5

Alright, so now we have a clean-cut image of Colin Mochrie's head set against a blue background. On the layers panel, click the eyeball icon next to the background layer to make it invisible.

Step 6

Now that the only thing visible in our workspace is Colin Mochrie's head, it's time to save this image as a PNG. Click File > Save As and select the PNG format from the Format drop down menu. Photoshop may raise a flag and say that this image must be saved as a copy with these settings. That's fine, just click OK and save the image where you want it.

Step 7

Now head over to Flash. With your Flash document open and your library panel open, click File > Import > Import to Library.

With the bitmap in your library, it is now ready for use in your Flash movie as a bitmap symbol. Go ahead and drag an instance of it onto the stage to see the organic edges.

That's all there is to it.