Bitmaps in Flash
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
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.
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.
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.
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.
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,
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.
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.
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.