Drawing: Using Gradients

Home • Members Tutorials Forum iSnapChat Contact Us 


Flash Tutorials


Drawing: Using Gradients

207 Drawing
Flash Compatibility: Flash 8   (Also works in Flash MX04/MX)

Written by: Andrei Doubrovski   from:   Meet the Flash

Editor: Phil Schulz

Length: 600 words

Assumed Knowledge: Minimal knowledge of Flash

Difficulty: Easy


Free Flash Tutorial

In Flash you use Gradient fills to make natural color transitions and imitate the play of shadow and light. The ready-made Gradients from the Color Swatches can solve some of these tasks but in this tutorial you will also learn how to customize Gradients to achieve much better effects.

Cross Ref: Flash Drawing Tutorials 201 to 209 are a consecutive series and you may want to start from the beginning: Pencil Tool

Using Gradients


Step One: Using the Color Mixer to Edit Gradients

  1. Activate the Selection Tool:

  2. Click a: Gradient Filled Shape

  3. A Gradient Filled Shape is selected.

  4. If the Color Mixer is closed, open it: Window > Color Mixer (Shift F9)

  5. Male sure that in the Color Mixer the Fill Bucket is selected:
  6. Note: Look at the Color Mixer - it displays the selected Gradient's settings:

    Gradient Settings.

  7. Double click the left: Gradient Color Swatch
  8. Note: This will open the pop-up Swatches Panel:

    Swatches Panel.

  9. Chose a: Color
  10. Note: After selecting a new color the Gradient appearance will change:

  11. Double click the right: Gradient Color Swatch
  12. Note: That while pop-up Swatches are open you may click virtually anywhere on your screen to find a suitable color.

  13. Chose a new: Color

  14. Done.

  15. On the Stage select an different: Gradient Fill Shape

    New Selection.

  1. In the Color Mixer change the Fill type to: Linear

  1. Drag the left swatch to the right:

  2. Drag the right swatch to the left:
  3. Note: By moving the color swatches you redistribute Gradient colors. For example, move the left swatch to the right to broaden corresponding color range. Also you can swap swatches places to change the Gradient direction - left to right for linear Gradients or center to edge for radial ones.

    Swatches have been moved to opposite ends.

  4. Add a new Swatch by clicking under the Gradient Bar: New Swatch

  5. Additional swatches create new color ranges, so you can create much more complex Gradients.

  6. Drag the new swatch to a new position:
  7. Note: To delete a color swatch just drag it down and away.

  8. Try variations on the theme including:

  9. On the Stage select a new shape with a: Solid Fill

  10. Note: A solid fill can be easily converted to a Gradient fill.

  11. In the Color Mixer select: Type > Radial
  12. The program applies the last used Gradient parameters that can be edited as needed:

    Previous Gradient Settings are applied.

  13. Change the Gradients swatch settings:

  14. New colors and swatch settings.

    Note: With the Color Mixer though, we can't change a Gradient's angle or fit a Gradient in an oblong shape. For this kind of work, activate the Gradient Transform Tool and click a Gradient fill you want to transform.

Step Two: Using the Gradient Transform Tool

  1. Select the Gradient Transform Tool:

  2. Select a Shape with a: Gradient Fill

  3. Note the various Control Handles.

  4. Drag the various: Control Handles
  5. Gradient Width
    Gradient Size
    Gradient Rotation
    Gradient Focal Point (is the centre of gradients colour)
    Gradient Centre (is the centre of the space or shape that the gradient occupies)

    Note: Use the Control Handles to adjust the way that the Gradient looks.

      Cross Ref:
      Go to the next in this drawing series: Next >>>


Please indicate what you thought of this tutorial 
10 is the best: 
10 9 8 7 6 5 4 3 2 1

14177 visitors to this page since 7 Dec 06 •

Phil Schulz's Facebook Profile
Webwasp is Phil Schulz's baby. You are welcome to contact me or become my Facebook friend: Click here

 Top of Page HomeMembers Tutorials Forum iSnapChat Contact Us 
 All material on this site is protected under international copyright © law. DO NOT reproduce any material from this site without written permission. Please ask as permission is often granted.