0.12 Using chroma key compositing to create transparent backgrounds  (Page 2/6)

The fundamentals of pixel processing

In the lesson titled Fundamentals of Image Pixel Processing , I showed you how to:

• Load the contents of an image file into a BitmapData object encapsulated in a Bitmap object.
• Use the setPixel32 , getPixels , and setPixels methods to access and modify the color content of the individual pixels that make up an image.

The organization of image information

In that lesson, I also explained how the color and transparency information for an image is stored in files and in the computer's memory. That includedtopics such as:

• Vector graphics versus bitmap graphics
• Width, height, and color depth
• The RGB and ARGB color models
• The effect of the transparency or alpha value (total and partial opacity or transparency)
• Bitmap image file formats (GIF, JPEG, PNG)

Creating a transparent background

In this lesson, I will show you how to convert an image with a constant color background (such as the top image in Figure 1) into an image with a transparent background (such as the bottom image in Figure 1) .

Chroma key compositing

This involves the use of a technique commonly known as chroma key compositing .

Here is a little of what Wikipedia has to say on the subject:

"Chroma key compositing (or chroma keying) is a technique for compositing two images or frames together in which a color (or a small colorrange) from one image is removed (or made transparent), revealing another image behind it.

This technique is also referred to as color keying, colour-separation overlay (CSO; primarily by the BBC[1]), greenscreen, and bluescreen.

It is commonly used for weather forecast broadcasts, wherein the presenter appears to be standing in front of a large map, but in thestudio it is actually a large blue or green background. The meteorologist stands in front of a bluescreen, and then different weather maps are added on those parts in the image where the color is blue."

Commonly used in computer graphics

The process is also commonly used in computer graphics where it is desired to overlay one image onto another without letting the background color of the frontimage show.

That is the intent of this lesson, and the process developed here will be used in a future lesson on animation.

Preview

In this lesson, I will show you to start with an image having a solid background color, such as the top image in Figure 1 and how to convert thatimage into one with a transparent background, such as the bottom image in Figure 1.

Figure

Screen output for the program named chromakey01.

A yellow Canvas object

Both images in Figure 1 are displayed on the same yellow Canvas object.

The color of the canvas is hidden by the magenta background color of the top image. However, that magenta background is totally transparent in the bottomimage, allowing the yellow color of the canvas to show through.

Discussion and sample code

The MXML file

The MXML file, shown in Listing 8, is no different from MXML files used to launch ActionScript programs in earlier lessons. Therefore, no explanation ofthe MXML code is warranted.