Now: Tutorial for Web and Software Design > Flash > Basic > Flash Content
> Transparent Objects [Bookmark it]
Transparent Objects

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

.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.

Drag the sphere

The sphere in the 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.

image 1

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...

image 2

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

image 3

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 image 4 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.

image 5

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

Drag the transparent e!

Grab the .fla.


[Bookmark][Print] [Close][To Top]
  • Prev Article-Flash:

  • Next Article-Flash:
  • Related Materias
    Motion Animations
    Shape Transformations
    Effects on Animations
    Generating and Publishing 
    Introduction to ActionScri
    Handwriting Flash Movie
    E-card Announcement
    Butterfly Wings Animation
    Graphics in Flash
    Controlling File Size in F
    Topics
    Photoshop Tutorial
     

    Special Effect

      3D Effect
      Photoshop Articles
    Programming Tutorial
     

    C/C++ Tutorial

      Visual Basic
      C# Tutorial
    Database Tutorial
     

    MySQL Tutorial

      MS SQL Tutorial
      Oracle Tutorial
    Graphic Design Tutorial
     

    Coreldraw Tutorial

      Illustrator Tutorial
      3D Graphics Articles
    Webmaster Articles
     

    Domain Service

      Web Hosting
      Site Promotion
    Java Tutorial&Articles
     

    Java Servlets

      JavaEE Tutorial
     

    JavaBeans Tutorial

    XML Tutorial&Articles
     

    XML Style Tutorial

      AJAX Tutorial
      XML Mobile
    Flash Tutorial&Articles
     

    Flash Video

      Action Script
      Flash Articles
    OS Tutorial&Articles
     

    Linux Tutorial

      Symbian Tutorial
      MacOS Tutorial