• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL

Lesson 14. Fonts and Menus > Changing the Background Transparent Color

Changing the Background Transparent Color

The specifications for the closing sequence of the movie call for the white surrounding the oval to disappear and the white rectangle to remain and surround the fiveears sprite. As you have seen in earlier lessons, you can apply the Background Transparent ink effect to an image so that the white background pixels in the image become transparent, allowing the background to show through. The Matte ink has a similar effect, making all adjacent white pixels around the edge of an image transparent; white pixels that are inside the image but not adjacent to any of the white pixels around the edge remain white. The gray oval you just added to the stage is surrounded by white pixels, and the white inside the oval is connected to the white area surrounding the oval. In this task, you will first experiment with ink effects to see if they will solve your problem. Next you will make a quick modification using the Paint window and then change the background color, solving the problem.

In the score, select the Oval sprite and apply the Background Transparent ink.

See how all of the white areas become transparent? Since you need white in the fiveears rectangle, the Background Transparent ink will not solve the problem.

Figure .

With the Oval sprite still selected, apply the Matte ink.

You don't see any change; the white areas of the image remain transparent, even the white area inside the image. The reason is that the white inside the image touches the white surrounding the image. The Matte ink effect spreads to all connected white pixels.

The solution to this problem is to use a color other than white around the edges of the graphic and then make that color transparent instead. (Well, actually the solution is to send the graphic back to the graphic artist to make the necessary changes. But in many real-life situations, the graphic artist is out sick, or is overworked, or has moved to another project and you can't expect less than a two-week turnaround. That is generally about two weeks longer than you have to meet your own deadline, so you do what you can!)

Select the Copy ink to return the sprite to its original state.

With the sprite in its original state, you can see that there are four white areas surrounding the oval and one rectangular white area inside the oval.

Figure .

Double-click the Oval sprite to open the Paint window. In the Paint window, click the foreground color chip and choose the color with palette index 32.

Actually, any color that is not used in the image will do. But remember the number so you can use it when you specify the new background color.

Figure .

Select the Paint Bucket tool and click any white area in the image.

All the visible white area in the Paint window turns the color of the foreground color chip.

Figure .

Now you need to restore the white area inside the oval. The simplest way to do so is to draw a rectangle filled with white.

Click the foreground color chip and choose white. Then select the Filled Rectangle tool and draw a white rectangle inside the oval.

Position the cross-hair pointer in the upper-left corner of the pink area inside the oval and then drag down to the right. Make sure that the right edge of the rectangle you're drawing just covers the pink area and that the bottom edge is even with the bottom of the oval. Make sure not to leave any pink areas inside the oval. If you don't like your first try, you can immediately undo it and try again. Edit > Undo Bitmap (Windows Ctrl+Z, Macintosh Command+Z) will undo your last action. You can also use the other paint tools to clean up the rectangle.

You could consider the image done now, but you could also make a slight improvement. When you filled the white area of the image, the fill color extended to the sides of the visible area of the Paint window. The size of the image has been effectively increased—and so has the file size. It is a simple matter to crop the image again.

In the Paint window, select the Marquee tool; then use it to select an area just slightly larger than the oval.

You don't have to be too exact. It's okay if a little pink shows around the image as long as the entire oval is still present.

Choose Edit > Copy Bitmap (Windows Ctrl+C, Macintosh Command+C) to make a copy of the selected area. Double-click the Eraser tool to erase the entire image.

Choose Edit > Paste Bitmap (Windows Ctrl+Z, Macintosh Command+Z) to paste the selection of the image back into the Paint window. Close the Paint window.

On the stage, the sprite reflects the changes you have made. The sprite is surrounded by pink, and the white rectangle appears inside the oval shape.

Figure .

If you use the Background Transparent or Matte ink at this stage, the pink will remain and the white will disappear because white is still what Director considers the background color. In the next step, you'll tell Director that the pink color is actually the background color that should be made transparent.

Select the Oval sprite in the score. Use the background color chip on the sprite toolbar to set the background color to the color with palette index 32 (or the same color you used in the Oval sprite).

Figure .


If you don't have the sprite toolbar displayed, there are several other locations where the background color can be set. With the sprite selected, you can open the Property Inspector, for example. In the graphic view, you see the foreground and background color chips identified with paint buckets. In the list view, they are labeled foreColor and backColor. A fourth location is the color chips of the tool palette window.


When you click a color chip, the palette window appears, and the top line displays a number identifying the currently selected color. If the top line is labeled Index, then the number is a palette index number. If the top line is labeled RGB, then the number is a hexadecimal representation of the color—the first two digits are the red component, followed by the green and blue components. Sometimes the palette index is more convenient; sometimes you may want to change an RGB component, and then the RGB display is more useful. The RGB value is generally a more accurate and reliable method for specifying an exact color and is the method used by most Web pages. To switch between the two display modes, choose Modify > Movie Properties (or open the Property Inspector and select the Movie tab) and set the Property Inspector to the graphic view. The two radio buttons labeled RGB and Palette Index allow you to choose which mode you want to use.

With the Oval sprite still selected, set the ink for the sprite to Background Transparent.

On the stage, the graphic should now have a transparent background so you can see through to the black background.

If the background is not transparent, you have probably selected the wrong color for the sprite's background color. Make sure that the same color that you used to fill around the edges of the oval in the Paint window is the same color you chose from the background color chip.


To double-check the location of the color used in the cast member, open the Oval cast member in the Paint window. Select the Eyedropper tool and click the colored area around the oval. Click the foreground color chip, and you will see the exact color highlighted in the color palette.

Figure .



Not a subscriber?

Start A Free Trial

  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint