STEP 07 fleshing out the speaker USING GRADIENTS

Gradients are a fill type and are thus available through the Paint Bucket tool. Although you can create your own gradients, the default black-to-white radial gradient is perfect for the speaker.

To apply the gradients for a 3D look, follow these steps:

Choose the Paint Bucket tool and, from the Fill Color swatch, select the radial gradient (the second pattern from the left), as shown in figure 03:16.

Figure 03:16.
Fill the innermost circle with the gradient.

Although the gradient is close to what I am ultimately looking for, some adjustment is still required. Flash offers a Transform Fill tool for just that purpose.
While the Paint Bucket tool is still selected, choose the Transform Fill tool, and select the just-filled gradient. The Transform Fill tool appears at the bottom right of the toolbar; it will appear only when you select the Paint Bucket.

The gradient editing handles appear around the selected gradient as shown in figure 03:17.

Figure 03:17.
Adjust the gradient as necessary by manipulating the gradient editing handles.

I increased the gradient's scale by dragging the scale handle. This caused the hotspot of the gradient to soften a touch.
Apply a second gradient to the middle circle.
Select Transform Fill modifier again.

A general rule of user interface design holds that for any three-dimensional object, the light source should come from the upper left of the screen. To make one area appear to bulge out of the screen (convex) and the other to appear to recede (concave), I'll adjust the outer gradient so that the center point is opposite that of the inner gradient, as shown in figure 03:18.

Figure 03:18.
Complete the speaker by filling the area between the outermost and the middle circle with a medium gray. Other modifications can be made to finish the speaker, such as changing the color of the innermost circle's outline to a light orange to define it better, and/or removing the outermost line.

Figure 03:16.

Figure 03:17.

Figure 03:18.