Creating transparent graphics in Flash
Often in web development, you have layouts with a unique look and feel. These layouts will have an assortment of colors and images used to brand the look & feel of the website. The problem is when you need to place additional images in the layout. In this case, a typical image will not work, only a transparent. However, using graphic interchange format (GIF) format to create a transparent graphic usually doesn’t work in a layout when in Flash.
In these cases, the solution is either a portable network graphic (PNG) or a nifty trick which involves saving the image in the clipboard of Fireworks and then pasting from the clipboard in Flash. In this article, we’ll show both techniques and discuss the advantages and disadvantages of both.
If you would like to follow along with creating transparent graphics in Flash or even try your hand at creating a few, you will find the project files download link helpful.
Transparency
Transparency is simply a way to hide certain parts of an image. In our examples, we need to hide the background of our image.
The layout
For example, we’ll use the following layout to illustrate how to create and insert a transparent image:
As you can see, the layout is created with the following:
- Two background images which were sliced from original images
- Joined together in one seamless layout
- White gradient covers the images to lighten the dark green tint
Let’s see how we create a PNG graphic which can later be inserted in this layout so that it blends seamlessly.
Create a PNG graphic
For this article’s purpose, we’ll use Fireworks; you may use Photoshop if you want. Follow these steps to open Fireworks:
- Locate the start button
- Select Programs>Macromedia Fireworks
- In Fireworks, from the main menu, select File>Open
- Navigate to the directory where the project files are located and select ryan_reduced.jpg
Let’s make this image a look a little better by creating a feather, follow these steps:
From the Tools menu, select the rectangle tool:
Move your mouse cursor just inside the left inner corner of our image, and drag to the bottom:
Note that you feather should have the following settings (the red outline above is for illustrating the visual sections of our mask):
Set fill color to white, by selecting the paint bucket (1.) and entering #FFFFFF (2.):
For Edge, select Feather:
Set 13 for feather amount:
Creating the mask
To create the feathered mask, follow these steps:
Move your mouse cursor to the blank area of the canvas, left click and drag over your image:
From the main menu, select Modify>Group as Mask, your image looks like this:
From the optimize panel, select PNG 32:
Exporting your image
In order to import the image into Flash, we need to export it from Fireworks. Follow these steps:
- From the main menu, select File>Export
- From the window, select the directory where the project files are located
- In the file name text field, enter ryan_reduced.png
- Left click OK
Importing the graphic
In order to use the image in Flash, we need to import it in our library, follow these steps:
- Locate the start button
- Select Programs>Macromedia Flash
- From the main menu, select File>Open
- Navigate to the directory where the project files are located and select gradient.fla
- In Flash, from the main menu, select File>Import
- Navigate to the directory where the project files are locate and select ryan_reduced.png
- Make sure you are on the image layer:
- Make sure key frame one is selected
- From the library, select our PNG image and drag it on the stage
- Publish your movie, by selecting File>Publish
- The result should look like this:
While this method works, PNG images are large in file size, and when you need many images to be transparent, it will eventually affect your overall movie file size. Let’s examine our other solution.
Copy/Paste image from Fireworks into Flash
Rather than the hassle of optimizing our image to a PNG, using the same graphic from above, follow these steps:
In the optimize panel, select JPEG – Better Quality:
Using the pointer tool from the Tools menu, select your feathered graphic:
Right click and select Edit>Copy:
In Flash, make sure you are on the image_copy layer:
- Select frame one
- On the stage, right click and select Paste
- In the library, you will have a bitmap image:
With frame one selected, from the library, select the PNG and drag on the stage
Publish your movie and the canvas should look like this:
Both should look identical. Using this approach is typically better since you can set a better optimization setting for your graphics. As a result, when you copy/paste, there’s no need to store multiple PNG images which result in larger movie file sizes. You as the developer can choose which method is more appropriate for your application. Sometimes when you use the clip board method, Flash will also import a Fireworks objects folder:
There’s no harm done, it’s just a way in which Fireworks and Flash communicate.
Summary
In this article you were introduced to transparency in Flash. You also learned a bit about:
- Transparency
- How to create a feathered image, export as PNG and use in your Flash layout
- Use the same image, export as JPEG and then copy/paste from Fireworks in Flash
As a result, getting transparency to work in Flash with images from Fireworks should be a breeze!
If you have questions, contact me.