This tutorial guides you through the process of using the gradient tools in Macromedia Flash Basic 8 and Macromedia Flash Professional 8. With Flash, you can create simple color gradients and complex gradient effects. In this tutorial, you learn how to do some of both.

A gradient is an area of a graphic where one color changes into another color. Flash can create two main types of gradients: linear and radial. Linear gradients change color along a single axis, such as horizontal or vertical. A radial gradient changes color in an outward direction starting from a focal point. You can adjust the direction of the gradient, its colors, the location of the focal point, and many other properties of gradients.

The following illustrations show the two types of gradients:

A two-color linear gradient from red to black

A two-color radial gradient from red to black

This tutorial takes you through the steps to create an illustration using an assortment of gradients.

After examining the completed illustration, you'll begin by opening a starter Flash document and end by publishing the document for web playback. The tutorial should take approximately 20 minutes to complete.

Before you take this tutorial you should read Flash Basics, in Getting Started with Flash.

In this tutorial, you will complete the following tasks:

Examine the completed FLA file

Open the starter document

Apply a linear gradient

Create a radial gradient

Apply the finishing touches

Test the application

The tutorial in this chapter follows the order of a typical workflow for creating a Flash application. Other workflows are also possible.

The tutorial workflow includes the following tasks:

• Examine the completed FLA file allows you to look at the completed Flash document.
• Open the starter document lets you begin the tutorial with a FLA file that has some graphics already created for you. You will apply gradient effects to these graphics.
• Apply a linear gradient shows you the steps needed to apply a linear gradient with specific colors.
• Create a radial gradient shows you the steps needed to apply a radial gradient and make adjustments to its focal point.
• Apply the finishing touches shows you the steps for performing a transform operation on a gradient. A transform operation is a change in an object's size or shape. You will also add a few more gradient effects to complete the illustration.
• Test the application shows you how to publish your Flash document to a SWF file and view it in a web browser.  

As you examine the finished version of an application you'll create, you will also look at the Flash workspace.

In this section, you will complete the following tasks:

• Open the authoring document
• Review the completed FLA file
• Close the completed FLA file

In subsequent sections, you'll go through the steps to create the application yourself.

Open the authoring document

It's helpful to analyze the completed authoring document, which is a FLA file, to see how the author designed the illustration and understand what you are going to create.

The files for this tutorial are located in the Samples and Tutorials folder in the Flash application folder. For many users, particularly in educational settings, this folder is read-only. Before proceeding with the tutorial, you should copy the entire gradient tutorial folder to the writable location of your choice.

On most computers, you will find the Gradients tutorial folder in the following locations:

• In Windows: boot drive\Program Files\Macromedia\Flash 8\Samples and Tutorials\Tutorial Assets\Creating Graphics\Gradients.
• On the Macintosh: boot drive/Applications/Macromedia Flash 8/Samples and Tutorials/Tutorial Assets/Creating Graphics/Gradients.

Copy the Gradients folder to another location on your hard disk that you have write-access to. In the Gradients folder, you will find a Flash file called gradients_finished.fla. Double-click the file to open it in Flash. You now see the completed tutorial file in the Flash authoring environment.

Review the completed FLA file

In the completed FLA file, you will see the combined effects of several gradients. The illustration looks like this:

There are five gradients in the illustration:

• A gradient from black to green on the background.
• A gradient from black to green to black on the bottom of the eight ball.
• Another from white to black in the highlight on the top of the eight ball.
• A subtle gradient on the white circle surrounding the number "8."
• A radial gradient in the shadow beneath the eight ball.

Close the completed FLA file

To close the document, select File > Close.

If you prefer to keep the finished file open as a reference while working with the starter file, be careful not to edit it or save any changes to it.

Now that you have seen the completed file, it is time to create your own Flash document. To get started, you'll open a starter file that contains a few graphics to which you will apply gradients.

1. In Flash, select File > Open.
2. Navigate to the following directory:
   • In Windows: Hard Disk\Program Files\Macromedia\Flash 8\Samples and Tutorials\Tutorial Assets\Creating Graphics\
   • On the Macintosh: Hard Disk/Applications/Macromedia Flash 8/Samples and Tutorials/Tutorial Assets/Creating Graphics/
3. Open the gradients_start.fla file. 

In this section you will add a linear gradient to the background.

1. Click the Selection tool in the Tools panel.
2. Select the gray box in the layer named Background.
3. Select Window > Color Mixer to display the Color Mixer panel.
4. In the Color Mixer's Type pop-up menu, select Linear.
5. Double-click the right gradient color swatch and select the color green (#006600).

   

   Selecting the right gradient color swatch in the Color Mixer

   
   

   

   Selecting the color green #006600 in the Color Picker

   
   
6. Double-click the left gradient color swatch and select the color black (#000000).
7. Select the Gradient Transform tool from the Tools panel. The Gradient Transform controls appear on the Stage around the gradient.

   

   The Gradient Transform tool

   
   
8. Drag the Gradient Rotate handle to rotate the linear gradient clockwise as shown.

   The Gradient Rotate handle

   
   

   

   Rotating the gradient clockwise

   
   
9. Lock the Background layer in the Timeline to prevent further changes to this layer.
10. Select File > Save to save your FLA file. 

Next, you will add a radial gradient to the black eight ball.

1. Double-click the black circle in the layer called Ball. This opens the group containing the eight-ball shape.
2. Select the black circle shape. You will apply a gradient to this shape. Do not select the number "8" on the eight ball.
3. In the Color Mixer panel select Radial from the Type pop-up menu. Select Mirror Overflow mode from the Overflow pop-up menu.

   

   The correct Radial Type and Mirror Overflow settings

   
   
4. Double-click the left gradient color swatch and select the color black (#000000).
5. Double-click the right gradient color swatch and type 002200 into the color text box. Press Enter.
6. Drag the left gradient color swatch to the right about three-fourths of the way as shown in the following illustration. This makes the green part of the gradient appear only in the outer 25% of the ball shape.

   

   Dragging a gradient color swatch

   
   
7. Select the Zoom tool from the Tools panel and click the circle shape to magnify it.
8. Select the Gradient Transform tool in the Tools panel.
9. Rotate the radial gradient 90º clockwise by dragging the Gradient Rotate handle.

   

   Dragging to rotate the gradient 90º clockwise.

   
   
10. Select the Focal Point control and drag it near the top of the circle.

    

    Dragging the Focal Point control toward the top of the circle shape

    
    
11. Select the center control point and drag the entire gradient upward a short distance as shown in the following illustration. The mirrored overflow gradient is at the bottom of the circle.

    

    Dragging the center control point upwards

    
    
12. Select the Selection tool in the Tools panel.
13. Double-click the Zoom tool to return the Stage area to a view of 100%.
14. Double-click the Stage area to deselect the eight-ball group.
15. Select File > Save to save your FLA file. 

In this section, you will create a gradient and then use the Free Transform tool to change its shape.

1. Select the Shadow layer in the Timeline.
2. Select the Oval tool in the Tools panel.
3. Hold down Shift and then drag on the Stage with the Oval tool to draw a circle approximately 150 pixels square. This should be about the same diameter as the eight ball.
4. In the Color Mixer's Type menu, select Radial.
5. Move the left gradient color swatch all the way to the left. You should have one swatch all the way to the left and one all the way to the right.
6. Double-click the left swatch and select the color black (#000000) in the Color Picker.
7. Double-click the right swatch to display the Color Picker.
8. Select the color black (#000000).
9. In the Color Picker, drag the Alpha slider down to zero. This creates a gradient from black to transparent, allowing the green background to show through the edge of the circle you just drew.
10. Select the Gradient Transform tool from the Tools panel and drag the Focal Point control of the gradient back to the center of the circle.
11. Select the Free Transform tool and scale the circle along the y (vertical) axis by dragging the top-center handle downward as shown in the following illustration.
12. Select the Selection tool from the Tools panel.
13. Drag the shadow shape under the eight ball with the Selection tool.
14. Click outside the Stage to deselect the shadow.
15. Select File > Save to save your FLA file.