Transparent Objects
This tutorial will explain how to export transparency in a bitmap image from Photoshop to Flash using the .png format.




Drag the sphere.
.png files support an 8-bit alpha channel. Meaning that each pixel has 4 values- one for Red, Green, Blue and Transparency. This allows .png files in Flash to have dynamic transparency, as opposed to a linear transparency, where the entire image is transparent the same amount.

The two parts of a .png are illustrated in the left diagram. The Image is just a normal graphic of a sphere, and the Alpha channel is the transparency. Black pixels on the Alpha channel mean that the corresponding pixel on Image will be completely transparent. White pixels on the Alpha channel mean it's completely opaque, and everything in between makes it partially transparent.

The sphere in the left diagram was rendered and exported with 3D Studio MAX.

1.
In Photoshop 5.5, create or open the image you want transparently imported to Flash.

The image must be created in Photoshop, or have transparent layers.

If you don't feel like creating a new image, use this e.

2.
In the Layers window, hide the Background layer, to expose the default grid.

Now, effect this layer to have the transparency you'd like in Flash.

In the menu go:
File > Save for Web...

3.
Change the Settings dropdown to PNG-24, and select Transparency.

Press OK, and save the file.

Now, when you import the .png into Flash the image won't have a white chunk around it, and it will be anti-aliased.

To affect the alpha channel with Photoshop 5.5, read step 4. If you're using Photohop 6+, skip to step 5

4.
Now, open the .png file you just exported in Photoshop. It will have only one layer, and one channel.

Go to the Channels palette, and select the Alpha 1 channel. Right now the e alpha channel is just anti-aliased around the edges. To make the center look transparent, drag Alpha 1 onto the Load channel as selection button.

In the menu:
Select > Modify > Contract... 7 pixels.

Select > Feather... 3 pixels.

and then fill the selection with a light gray color.

Press Ctrl+S to save the .png.


5.
Open Flash, create a new symbol or layer, and File > Import... the .png.


Drag the transparent e!
Grab the .fla.


All supplied media is Copyright © 2000 Anson Vogt.
Un-educational use of this media is strictly prohibited.