Accessibility

Director Article

 

Creating Bitmaps with Alpha Channels for Transparent Flash Applications, Director Bitmap Sprites, and Shockwave 3D Overlays


Table of Contents

  1. Introduction
  2. Creating a Texture with an Opacity Mask Using Adobe Photoshop
  3. Creating a Texture with an Opacity Mask Using Macromedia Flash (PNG)
  4. Leveraging the 256 Levels of Transparency in Alpha Channels Using Macromedia Fireworks
  5. Creating a Picture with an Alpha Channel Gradient for Display in a Transparent Flash Animation Blending with the HTML Page Background
  6. Creating an Alpha Channel Feather Effect in Photoshop (PSD)
  7. Creating an Alpha Channel Feather Effect in Fireworks (PNG)

Leveraging the 256 Levels of Transparency in Alpha Channels Using Fireworks

A very powerful technique, often overlooked, is to turn a photo or 3D rendering bitmap into an alpha channel for advanced compositing.

You want to turn a picture into an alpha channel with Macromedia Fireworks to create a PNG bitmap file.

  1. Open an existing image in Macromedia Fireworks MX 2004. For example, select a photo from your digital camera or a 3D rendering from Alias Maya or Autodesk Media and Entertainment 3DS Max, or create a gradient using the Gradient tool in the toolbox.

  2. Select the picture.

    The selected picture in Fireworks MX 2004

    Figure 15. The selected picture in Fireworks MX 2004

  3. Select Filters > Other > Convert to Alpha.

    The Convert to Alpha filter

    Figure 16. The Convert to Alpha filter

    All the color information is lost and turned into transparency data. You can now see the picture is gray, and you can see a gray and white checkerboard through it, indicating the presence of an alpha channel and the image transparence.

    The converted bitmap now showing gray

    Figure 17. The converted bitmap now showing gray

  4. Save the PNG file (File > Save As) and be sure to select Fireworks PNG as the file type (not PNG Flattened). Director and Flash can import PNG files with an alpha channel, so you may use the resulting alpha picture in Director or Flash. A very good use of this is to render a shadow pass in a 3D package, convert it to alpha, and then composite it with a color rendering.
  5. In Macromedia Flash MX 2004, select Import to Stage and select the newly created PNG bitmap.
  6. Using the rectangle tool, draw a rectangle filled with a color such as purple.

  7. Move the image so it overlaps the colored rectangle. You can see the picture is colored by the rectangle.

    The transparent photo overlapping a color filled vector rectangle

    Figure 18. The transparent photo overlapping a color filled vector rectangle

You could convert the rectangle to a movie clip and alter its color either in the timeline or dynamically using the new Color() and setRGB() ActionScript instructions:

colorObject = new Color(_root.movieClipInstanceName);
colorObject.setRGB(0x993366); // hexadecimal red green blue color value

Page 4 of 7
Previous Page
Next Page