Tutorial Update: Basic Blit with Transparency

Super cool 8bitrocket.com reader, MR. K, asked a very interesting question today. He asked if this tutorial included transparency because both the screen background and the helicopter background are black. Some how I completely missed that point when I created the original tutorial. The answer is that of course blitting can be done against a complex background with transparency, but the sprite sheet I used was didn’t have any transparency, and my background was just a black square. Opps!

Sure enough, the original tile sheet was a png file, but it had a solid non-transparent background. So, I opened up the tile sheet in Fireworks, selected the background with the selection tool and deleted it out. I saved it off as a png file and re-imported it into Flash. The new file looks like this:

Since our site has a dark gray background, you can tell right away the difference between that file and this one from the original tutorial.

The difference is HUGE. As the original file created a set of sprite tiles with a big black square around them.

I also created a 400×400 background tile to use as a background:

When they are put together, they look like this:

/downloads/blog/2008_basic_blit2/basic_blit_rect.swf

Very few code changes were needed, I just referenced a library item as the background instead of instantiating a black square. The tile sheet in my code was already set to use transparency, so no other changes were needed.

All of the new source files are here