Introduction to Flash MX Tutorial > Define properties for a new document and create a gradient background > Create a gradient background

 

Create a gradient background

A gradient displays subtle variations of a color, or transitions between two or more colors. In the finished tutorial file, the background is a gradient that blends black and dark blue with a transparent area that allows part of the gray Stage color to be displayed. You achieve this effect using the Color Mixer.

Note: While gradients offer interesting effects in movies, overuse of gradients can adversely affect computer processor speeds and decrease the speed at which an animation plays. When designing a movie, consider both your artistic and performance requirements to determine the best use of gradients.

 
Draw a rectangle

Earlier in the tutorial, you created a grid that aligned against the Stage and allowed you to snap objects to the grid lines. Now you'll draw a rectangle that snaps to the area of the grid bordering the Stage.

1

In the pop-up menu above the right side of the Stage, enter 75% to view the entire Stage.

This setting indicates your magnified or scaled-down view of the Stage. The setting does not affect the actual size of the Stage in your movie, which you specified in the Document Properties dialog box.

2

In the toolbox, select the Rectangle tool.

3

In the toolbox, click the Stroke Color control. Select No Stroke (the button with the red diagonal line above the color palette).

The selected fill color of the shape is unimportant; you'll soon change the color.

4

Starting from the upper left corner of the Stage, drag to the lower right corner of the Stage to draw a rectangle that covers the Stage.

When you release the pointer, the rectangle snaps to the edges of the Stage, along the hidden grid.

Note: While completing the tutorial, you may find it useful to undo a change you've made. Flash can undo several of your recent changes, depending on the number of undo levels you have set in Preferences. To undo, choose Edit > Undo or press Control+Z (Windows) or Command+Z (Macintosh). Conversely, you can redo what you've undone by choosing Edit > Redo or pressing Control+Y (Windows) or Command+Y (Macintosh).

 
Specify a color for the gradient

Dark blue is the first color you'll add to your gradient.

1

In the toolbox, select the Arrow tool. On the Stage, click inside the rectangle to select the fill.

When you drew the rectangle, the Property inspector displayed properties for the Rectangle tool. When you select a shape that has already been created, the Property inspector displays properties for the shape.

2

If the Color Mixer is not open, choose Window > Color Mixer.

3

To expand the Color Mixer, click the white arrow in the panel title bar.

4

If the Color Mixer is not fully expanded, click the arrow in the lower right of the panel.

5

In the Fill Style pop-up menu, select Radial.

6

Click the gradient slider to the left of the gradient bar to select it.

7

Click the color box in the upper left corner of the window to open the color palette. Use one of the following methods to select dark blue:

Type 000066 in the hexadecimal value text box and press Enter or Return.

Move the eyedropper over the color swatches until you find the dark blue with the hexadecimal value of 000066, then click the swatch to select it.

 
Change the alpha value

In the Color Mixer, the Alpha text box indicates the transparency of the color, with 0% indicating that the color is completely transparent, and 100% indicating the color is completely opaque. You'll specify an alpha value of 0% to create a gradient that includes dark blue and black along with the gray Stage color that shows through the transparent areas of the gradient.

In the Color Mixer, either type 0 in the Alpha text box and press Enter or Return, or move the Alpha slider to 0.

 
Add a second gradient color

You'll now add black to the gradient.

1

In the Color Mixer, click the gradient slider to the right of the gradient bar to select it.

2

Click the color box to open the color palette and select the black with a hexadecimal value of 000000.

Remember, you can either type the hexadecimal value in the Hexadecimal text box and press Enter or Return, or you can find and select the color swatch with the same hexadecimal value.