Accessibility

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)

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

Creating a Texture with an Opacity Mask (a Bitmap with a Non-Rectangular Shape)

Contrary to a common belief, you do not have to use Photoshop channels and masks to create an alpha channel. You only need it when you want to actually draw the alpha channel using Photoshop tools. But most users just want to have the shape of their bitmap smoothly anti-alias against any background, period!

In the following steps, you will give a shape to a bitmap and have it smoothly anti-alias against any background.

Using Adobe Photoshop (PSD)

  1. Create a new image in Adobe Photoshop (Control+N or File > New).

  2. Add a new layer as shown in Figure 1.

    The Layers tab in Adobe Photoshop

    Figure 1. The Layers tab in Adobe Photoshop

    The newly created layer in the Layers tab

    Figure 2. The newly created layer in the Layers tab

  3. Draw in it or type some text. In this example, I typed a black character using the right arrow sign of the Webdings typeface (Alt+052) with a 4 pixel-wide white stroke.

    Typing some text and adding some effects

    Figure 3. Typing some text and adding some effects

    The resulting arrow symbol

    Figure 4. The resulting arrow symbol

  4. Disable the background layer visibility.

    The disabled Background layer

    Figure 5. The disabled Background layer

    The now transparent arrow symbol

    Figure 6. The now transparent arrow symbol

  5. Save the PSD file. Director can directly import PSD files with an alpha channel. For your purpose, it is useless to save to the PNG (Portable Network Graphics), TGA (Targa), or TIFF formats. However, should you want to export to PNG, select the Save for Web option in the file menu, select PNG-24 and Transparency.

    Note: Do not use the Save as PNG option as it doesn't retain the alpha channel information.

  6. Open Director and import your bitmap into Director's internal cast.

    Note: Deselect the Trim White Space option when importing to retain the image width and height, as shown in Figure 7 below.

    Importing a bitmap with an alpha channel

    Figure 7. Importing a bitmap with an alpha channel

    Note: You can drag a bitmap or a selection of bitmaps from Windows Explorer or the MacOS Finder to the Director internal cast.

    If your bitmap has an alpha channel, the Use Alpha option will be active and selected by default in the Bitmap tab of the Property inspector.

    Checking the alpha channel

    Figure 8. Checking the alpha channel

  7. Drag the arrow bitmap cast member from the internal cast to the stage twice, hence creating two overlapping bitmap sprites. As you can see, the arrow shape is transparent and the two bitmaps anti-alias smoothly against the scene and against each other, using the alpha channel data.

    Overlapping alpha bitmaps in Director MX 2004l

    Figure 9. Overlapping alpha channel bitmaps in Director MX 2004

Page 2 of 7
Previous Page
Next Page