TechNote

Using image alpha channels in Authorware

Authorware's display modes

Alpha mode blends a graphic's alpha channel;a semi-transparent part of the image;with any background image behind it.

Modes control how graphic images and, to a certain extent, text are displayed on the screen. For example, let's say you create a graphic using an image editing program, add text to it, apply some effects, and then import it into a display or interaction icon. From there you can choose the mode of display for the graphic. Opaque displays the graphic in its original form. But the remaining modes can apply some very useful effects to your image..

Transparent and matte modes

By far the most popular modes are matte and transparent. Transparent mode makes all white pixels in an image transparent. The pixels must be pure white (255, 255, 255) to be transparent. That has caused problems over the years since many graphics programs anti-alias graphics to remove jagged edges. Anti-aliasing works by taking an area where jagged edges occur and averaging the color of the image with the color of the background. Averaging the color makes a smoother transition between foreground and background and gives the illusion of removing the jagged edges. By the way, Authorware 5 supports anti-aliased text! So text you type in the display and interaction icons can be anti-aliased against the background to give text smoother edges.

Matte mode works the same as transparent mode with one important difference. It removes only pixels that are white and that are either touching the edge of the image or touching another white pixel that touches the edge. In other words, all contiguous white pixels from the edge inward are made transparent. The following illustration illustrates matte mode more clearly.

If you import the image in the illustration and display it in transparent mode, both areas A and C appear transparent, leaving area B opaque. Matte mode however, makes only area A transparent. Area C remains opaque because even though its pixels are white, they don't touch the edge, nor do they touch another white pixel that touches the edge.

Inverse and erase modes

Authorware's other modes are inverse and erase. Inverse is a peculiar effect that I personally don't use very often. It works by taking your image and displaying the inverse of whatever color is behind it.

Inverting a color produces a color negative;or chromatic opposite;of the image you've imported. A chromatic opposite is created by taking every pixel's mathematical opposite. Every pixel consists of a red, green, and blue value (RGB). Each number falls between 0 and 255. So pure blue is (0,0,255). To figure out what a color's mathematical opposite is, just take each value and subtract it from 255. In the case of pure blue, the opposite color is (255, 255, 0) or pure yellow. If you're confused about why red and green make yellow, remember we're dealing with a colors of light;not colors of paint. If you mix red and green ink together, you get a marvelous shade of mucky brown. Light, however, behaves differently.

The key to understanding inverse mode is to remember the color is taken from whatever is behind the image to which the mode is applied, as shown in this illustration:

To understand how this works, try this simple experiment.

In Authorware, open a display icon and draw a square. Set it to a medium blue color. Now, draw a circle and drag it so it partially covers the square. Make it any color you want (this example uses red). Choose Window > Inspectors > Modes (or press Control+M) to display the Modes inspector. While the circle is still selected, change the mode to inverse. Instead of a red circle overlapping a blue square, I now have a yellow area wherever the circle overlaps the square, and black everywhere else. Move the circle around and notice inverse mode changes the background color to its chromatic opposite. As we demonstrated, yellow is the opposite of blue, and of course black is the opposite of white. So wherever the circle intersects white, it appears black. Wherever the circle intersects blue, it appears yellow. Fascinating, if mostly impractical.

Finally, we come to erase mode. Erase is fairly straightforward: Anything that intersects a graphic set to erase is changed to the background color.

Note: The modes are arranged, not in alphabetical order, but in order of memory usage. The easiest effect for your computer to handle is opaque;obviously, since it's not doing anything to the graphic. Matte is next, followed by transparent, and so on.

The most popular modes are matte and transparent. Transparent mode makes all white pixels in an image transparent. The pixels must be pure white (255, 255, 255) to be transparent.

Alpha mode

Authorware 5 introduces a new mode;alpha mode.The word alpha refers to a channel.

All pixels have three values: red, green, and blue. All images also have three channels: one red, one green, and one blue. Each channel is a representation of the image in a single hue. The pixels in the red channel are all some value of red between 0 (no red) and 255 (full red). The image you see when you import a graphic is the combination of the three channels into one color composite.

A channel with 256 color values is called an 8-bit channel. Three 8-bit channels can be combined to produce images with up to 16.7 million distinct colors in them. Most developers reduce the 16.7 million possible colors in an image to a limited palette of 256 colors. Palettes are beyond the scope of this article, except to say you can't limit the colors in an image to the colors available in a palette if you plan to use alpha mode. The reason will become apparent soon enough.

Let's shift gears for a moment and look at the RGB channels in a different light. RGB values represent color. Using the red, green, and blue channels alone, there's no way to specify opacity of a color, only its hue.

An alpha channel is an extra channel that certain image file formats support. It describes opacity. Four 8-bit channels make up a 32-bit image.

But if the red channel consists of red pixels, blue of blue, and green of green, what colors represent opacity? The standard is black and white. A fully transparent pixel is black and a fully opaque pixel is white. (If you've used Macromedia Director, you might recognize that as mask mode.)

	The top half shows the image as it appears in Authorware using opaque mode. The lower half shows the alpha channel. Black pixels will be transparent, and white pixels will remain opaque

Authorware however takes it a step further. A 50% gray pixel in the alpha channel will make a pixel in the composite image 50% transparent! You can blend images with the background showing through at any percentage you want.

You can also perform the equivalent of anti-aliasing in a transparency. We'll do that later to create glows and drop shadows that can be moved across the screen without losing their effect.

Authorware supports alpha channels created in four file formats: PNG (32-bit), TIFF, JPEG, and Photoshop (PSD). This example uses PNG files exclusively, although any of the other formats also work.

Creating an alpha channel in Macromedia Fireworks

To create an image with an alpha channel, you can use any image editing package that supports channel manipulation. Some popular packages are Macromedia FreeHand, Adobe Photoshop and Corel Photopaint. Many 3D packages such as 3D Studio Max, Lightwave, Bryce 3D, and RayDream can render an image with an alpha channel in place or as a separate grayscale image.

To create an alpha channel in Fireworks:

Start by creating a new image 450 (L) x 100 (H).
Select Transparent background.
Select the Text tool and type AUTHORWARE.
Open the Styles window (Shift+F11) and select the text style located at lower left corner.
Double click the text to open the Text Editor window and change the font size to 44.
Open the Optimize window under Window > Optimize and select PNG32 file type.
Select File > Export and name the file AlphaChannel.

The final result should like this:

Importing an alpha channel image in Authorware

Let's import the image into Authorware. The procedure is the same as importing any other image.

Drag a display icon to the flowline and open it.
Choose Modify > File > Properties (Control+Shift+D) to display the Propertiies dialog box.
Change the Background color to black or any dark color you like.
Choose File > Import (or press Control+Shift+R) to display the Import dialog box.
Select the Fireworks PNG file you just created.
Once the image is on the screen, position it.
Press Control+M to display the Modes inspector and select Alpha.

The white portion of the image described as transparent in the alpha channel is now transparent.

Note: Some image editing programs allow you to have many channels in your image. Authorware supports only one. If you import a graphic with more than one channel, alpha channel support won't work properly. Be sure you get rid of any extra channels before importing.