Publishers of technology books, eBooks, and videos for creative people

Home > Articles > Digital Audio, Video > Adobe Flash

  • Print
  • + Share This
From the author of

Creating New Gradients

In addition to solid colors, Flash works with gradients-bands of color that blend into each other. Gradients can be linear (parallel bars of color) or radial (concentric rings of color). Gradients can create interesting visual effects and are useful for adding shading-to make a circle look like a sphere, for example.

Flash defines each gradient with a set of pointers that indicate what color goes where in the lineup of color bands. You define the color for each pointer. By positioning the markers on the gradient definition bar, you control how wide each band of color is. Each gradient can contain as many as eight colors. You define new gradients in the Fill panel.

To create a three-color linear gradient:

  1. Open the Fill panel and the Mixer panel. For this exercise, place the panels in separate windows so you can see what's happening at each step.

  2. From the Fill panel's Fill menu, choose Linear Gradient.

  3. The tools for defining gradients appear (Figure 9).

    Figure 9

    Select Linear Gradient from the Fill menu to access the tools for defining gradients.

  1. In the Fill panel, click the fill-color box.

  2. From the set of swatches that pops up, select an existing gradient as a starting point.

  3. The selected gradient appears in the Fill panel with two to eight pointers. (Because a gradient must have at least two colors, the bar always contains at least two pointers).

  4. To set up the gradient bar for three colors, in the Fill panel, do one of the following:

    • If your starting gradient has more than three pointers, click and drag the extra pointers away from the gradient-definition bar to remove them.

    • If your starting gradient has only two pointers, click below the gradient-definition bar to add a new pointer.

  5. Click the leftmost pointer for your first color.

  6. When you select a pointer, a pointer-color box appears in the Fill panel, and the Mixer panel replaces its stroke- and fill-color boxes with a color swatch and a gradient-pointer icon. These visual cues indicate that you are currently setting a pointer color (Figure 10).

    Figure 10

    When you select one of the gradient's pointers, a pointer-color box appears in the Fill panel, and the Mixer panel displays the current pointer color.

  7. To define the pointer's color, do one of the following:

    • Click the pointer-color box in the Fill panel, and choose a color from the set of swatches that appears.

    • In the Mixer panel, define a new color.

  8. Repeat steps 6 and 7 for the middle and rightmost pointers.

  9. Drag the pointers to position them on the gradient-definition bar (Figure 11).

  10. Place pointers closer together to make the transition between colors more abrupt; place them farther apart to spread the transition out over more space.

    While you modify the gradient, your changes appear in all fill-color boxes. Check out the one in the Toolbox. Any tool that creates a fill-say, the oval tool-will use your modified gradient.

    Figure 11

    Choose a color for each pointer. The colors and positions of the pointers on the bar define a gradient's color transitions.


  • To choose a gradient for modification, select the existing gradient in the Swatches panel. Flash switches the Fill panel to gradient mode and displays the selected gradient.

  • To increase the size of the gradient-definition bar (so it's easier to add and fine-tune points), resize the Fill panel. As the Fill panel grows, so does the bar.

  • To reverse the direction of a gradient's color transition, drag one pointer over another. In a white-to-black gradient (a white pointer on the left and a black pointer on the right), drag the white pointer to the right past the black one. Your gradient now goes from black to white.

To create a new radial gradient:

  1. Open the Fill and Mixer panels.

  2. From the Fill panel's Fill menu, choose Radial Gradient.

  3. The tools for defining circular gradients appear. The gradient-definition bar looks the same as it does for linear gradients, but the preview shows your gradient as a set of concentric circles (Figure 12). The leftmost pointer defines the inner ring; the rightmost pointer defines the outer ring.

    Figure 12

    Choose Radial Gradient from the Fill menu to create a circular gradient. The preview window translates the horizontal gradient-definition bar into the appropriate circular color transitions.


  • Gradients can have transparency. You simply use a transparent color in one or more gradient pointers. If a gradient has transparency, a grid shows up in the pointer, in the pointer-color box, and in the transparent part of the gradient in the preview window (Figure 13).

  • Figure 13

    When transparent colors make up part of a gradient, grid lines appear in the pointer, the pointer-color box, and the gradient preview window.

  • Each pointer in a gradient can have a different alpha setting. To create fade effects, try creating a gradient that blends from a fully opaque color to a transparent one. You can save a new gradient by adding it to the Swatches panel.

To add a gradient to the Swatches panel:

  1. Create a new gradient using any of the techniques outlined in the preceding section.

  2. In the Fill panel, do one of the following:

    • From the Options menu, choose Add Gradient.

    • Click the Save button (in the bottom-right corner of the panel).

    Flash adds the new gradient to the gradients section of the Swatches panel.

  • + Share This
  • 🔖 Save To Your Account