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)

Creating a Picture with an Alpha Channel Gradient for Display in a Transparent Flash Animation that Blends with an HTML Page Background

In this section, you will composite a part of a transparent Flash animation with an HTML page background. To this end, you will create an alpha channel bitmap with a gradient.

  1. Open a JPEG file in Adobe Photoshop.
  2. Press Control+A to select the image then press Control+C to copy the image.
  3. Press Control+N to create a new image, and click OK.

  4. Press Control+V to paste the clipboard.

    A nice photo from the Louvres museum

    Figure 19. A nice photo from the Louvres museum

  5. Create a mask by clicking the mask button at the bottom of the Layers tab.

    The photo layer

    Figure 20. The photo layer

    A mask appears next to the photo layer.

    The mask appearing next to the photo layer

    Figure 21. The mask appearing next to the photo layer

  6. Select the mask.

    The selected mask

    Figure 22. The selected mask

  7. Select the Gradient Tool Gradient Tool in the toolbox and use it on the picture to create a gradient in the mask.

    The gradient created in the mask

    Figure 23. The gradient created in the mask

    The gradient you created now also appears in the mask next to the photo layer.

    The mask showing the gradient

    Figure 24. The mask showing the gradient

  8. Disable visibility of the Background layer.

    The disabled Background layer

    Figure 25. The disabled Background layer

    A gray checkerboard now appears through the transparent gradient.

    The gray and white checkerboard showing through the mask gradient

    Figure 26. The gray and white checkerboard showing through the mask gradient

  9. Leave the Background layer disabled.

  10. Select File > Save for Web (Alt+Shift+Control+S). Select PNG-24 and select the Transparency option. Alternatively, you can save the PSD file, open it in Fireworks, and save it as PNG.

    The PNG parameters in the Save for Web window

    Figure 27. The PNG parameters in the Save for Web window

  11. In Macromedia Flash MX 2004, select Import to library to import the PNG file.
  12. Create a new layer and name it Background.
  13. Drag the Background layer to place it at the bottom of the layer stack, so that its display priority will be the lowest.
  14. Drag the PNG bitmap from the library onto the Background layer at a location where only the background color of the Flash animation can be seen (the areas the color of the background are transparent).

  15. Select File > Publish Settings. In the HTML tab, select Transparent Windowless.

    The HTML tab in the Publish Settings window

    Figure 28. The HTML tab in the Publish Settings window

  16. Publish the SWF and HTML files.
  17. Edit the HTML file in Dreamweaver or a text editor of your choice to add a background color.
  18. Open the HTML file in a browser. You will see the alpha channel photo blend with the HTML page background.
Page 5 of 7
Previous Page
Next Page