Introduction to Learning Interactions Tutorial > Modify the Welcome page > Create a gradient background |
![]() ![]() ![]() |
Create a gradient background
A gradient displays subtle variations of a color, or transitions between two or more colors. You'll create a gradient that blends white and blue.
You'll now draw a simple rectangle as the first step in creating a gradient background.
1 |
In the toolbox, select the Rectangle tool. |
2 |
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. |
|
3 |
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. |
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
White is the first color you'll add to your gradient.
1 |
In the toolbox, select the Pointer tool. On the Stage, click inside the rectangle to select the fill. |
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. If the Color Mixer is not fully expanded, click the arrow in the lower right of the panel. |
4 |
In the Fill Style pop-up menu, select Radial. |
5 |
If the gradient slider to the left of the color bar is not selected, with a small triangle above it, click it. |
6 |
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 white: |
![]() |
Move the eyedropper over the color swatches until you find white with the hexadecimal value of FFFFFF, then click the swatch to select it. |
![]() |
Type FFFFFF in the hexadecimal value text box and press Enter or Return. |
You'll now add blue 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 blue with a hexadecimal value of 003366. |
Remember, you can either type the hexadecimal value in the hexadecimal value text box and press Enter or Return, or you can find and select the color swatch with the same hexadecimal value. |
|
3 |
In the toolbox, select the Fill Transform tool. On the Stage, click anywhere inside the rectangle. |
An ellipse that indicates the shape and location of the gradient appears around the Stage (resize the Stage view, as necessary). The ellipse has controls for the location, width, scale, and rotation of the radial gradient. |
|
4 |
Drag the circular middle handle, which controls the size of the gradient, to the right to make the ellipse larger, spreading out the lighter area of the gradient. |
5 |
Drag the gradient center control toward the lower right side of the Stage. |
6 |
Lock the _bckgrnd layer. |
![]() ![]() ![]() |