Drawing: Using Gradients	Home • Members • Tutorials • Forum • iSnapChat • Contact Us

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


A Gradient Filled Shape is selected.

3. If the Color Mixer is closed, open it: Window > Color Mixer (Shift F9)
   
   
4. Male sure that in the Color Mixer the Fill Bucket is selected:
   

Note: Look at the Color Mixer - it displays the selected Gradient's settings:


Gradient Settings.

5. Double click the left: Gradient Color Swatch

Note: This will open the pop-up Swatches Panel:


Swatches Panel.

6. Chose a: Color

Note: After selecting a new color the Gradient appearance will change:



7. Double click the right: Gradient Color Swatch

Note: That while pop-up Swatches are open you may click virtually anywhere on your screen to find a suitable color.

8. Chose a new: Color


Done.

9. 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:

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.

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


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

4. Drag the new swatch to a new position:



Note: To delete a color swatch just drag it down and away.

5. Try variations on the theme including:
   
   
   • Adding new Swatches
   • Dragging Swatches to new locations
   • Changing a Swatches color
   • Deleting Swatches (drag the swatch down and away
     
     
6. On the Stage select a new shape with a: Solid Fill



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

7. In the Color Mixer select: Type > Radial

The program applies the last used Gradient parameters that can be edited as needed:


Previous Gradient Settings are applied.

8. Change the Gradients swatch settings:


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


Note the various Control Handles.

3. Drag the various: Control Handles

	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 >>>

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