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

Home > Articles > Web Design & Development > Adobe Flash

This chapter is from the book

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 markers, called gradient pointers, that indicate which color goes where in the lineup of color bands. You define the color for each pointer. By positioning the pointers 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 Color Mixer panel.

To create a three-color linear gradient:

  1. Open the Color Mixer panel.
  2. From the Color Mixer panel's Fill Style menu, choose Linear ( Figure 3.85 ).

    Figure 3.85 Choose Linear from the Fill Style menu to access the tools for defining linear gradients.

    The tools for defining gradients—a color-proxy box (a set of swatches for setting a gradient pointer's color) and a gradient-definition bar—appear.
  3. If the panel is collapsed, click the triangle in the bottom-right corner of the panel. The Color Picker and gradient- preview window appear ( Figure 3.86 ).

    Figure 3.86 The expanded Color Mixer panel displays the gradient-preview window and Color Picker.

  4. Position the pointer on or below the gradient-definition bar. Flash adds a plus sign to the pointer, indicating that you can add a new gradient pointer in this area.
  5. To add a new pointer, click anywhere along the gradient-definition bar. Flash adds a new gradient pointer containing the color currently specified in the Color Mixer.
  6. To change the leftmost pointer's color, select it and then do one of the following:
    • Click the color-proxy box in the top half of the Color Mixer panel, and choose a color from the set of swatches that appears.
    • Enter new values in the Alpha and/or RGB or HSB fields.
    • Choose a new color in the Color Picker.
    • Enter a new value in the Hex field.
  7. Repeat step 6 for the middle and rightmost pointers.
  8. Drag the pointers to position them on the gradient-definition bar ( Figure 3.87 ).

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

    Place pointers closer together to make the transition between colors more abrupt; place them farther apart to spread the transition out over more space. As you modify the gradient, your changes appear in the Toolbar's fill-color box. The new gradient also appears in the Property Inspector for any tools that create a fill—say, the oval tool. Those tools are now loaded and ready to create shapes using that gradient.

To create a new radial gradient:

  1. Open the Color Mixer panel.
  2. From the Fill Style menu, choose Radial. 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 3.88 ). The leftmost pointer defines the inner ring; the rightmost pointer defines the outer ring.

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

  3. Follow steps 4 through 8 of "To create a three-color linear gradient" earlier in this chapter to define the color transitions in the radial gradient.

You can save a new gradient by adding it to the Color Swatches panel.

To add a gradient to the Color Swatches panel:

  1. Create a new gradient, using any of the techniques outlined in the preceding sections.
  2. In the Color Mixer panel, do one of the following:
    • From the Options menu, choose Add Swatch.
    • Position the pointer over the blank area of the Color Swatches panel, and when the paint-bucket icon appears, click.
    Flash adds the new gradient to the gradients section of the Color Swatches panel.
  • + Share This
  • 🔖 Save To Your Account