February 2002 DEB Tip: Use Gradients to Give Objects a 3-D Appearance

Last update: 19-feb-03

Debbie Berg

Web Designer

Web Instructor

Technical Writer

Consulting Services

Need help designing your Web site?
Is it time to redesign your Web site?
Is your Web site meeting your visitors' needs?
Want a site review to find out?
Need help marketing your Web site through the search engines?

Please contact me to discuss my fees

Flawebdeb Information

Check out Debbie's 2003 Training Schedule

Take a look at some
of Debbie's most recent clients

What are people saying about Debbie?

"Debbie is a very knowledgeable, engaging instructor!"

M. Pine
Kansas City, MO

"Ms. Berg knows her stuff! She takes the time to explain technical concepts in great detail, which is very helpful. I can't wait to apply what I've learned!"

J. Matheson
Miami, FL

February 2002 DEB Tip

Back to DEB Tips

Use Gradients to Give Objects a 3-Dimensional Appearance

Flash is a two-dimensional program. Using a gradient in Flash can give a two-dimensional object a third dimension. In this example, let's create a series of circular outlines, then add one of Flash's preset gradients to give the outlines a three-dimensional appearance.

1. First, create an oval shape on the Stage that contains a light gray stroke and no fill. Also, set the Stage to black.

2. Access the Info panel (Window...Panels...Info) and set the X and Y coordinates to 125 x 125 pixels for the stroke on the Stage.

3. Next, create a copy of the stroke, then choose Edit...Paste in Place. Select Modify...Transform...Scale and Rotate and set the Scale percentage to 40%. Then select Paste in Place again and choose the Scale and Rotate option again as well. Set the Scale percentage to 110%.

4. Select the PAINT BUCKET tool from the Toolbox, select the preset Black-Gray-White gradient from the Fill section and fill the centermost stroke on the Stage.

5. With the PAINT BUCKET tool still selected, choose the TRANSFORM FILL option on the Toolbox and double-click the centermost stroke we just filled with the gradient. Choose the SCALE selection handle around the gradient and scale the gradient slightly to lighten it.

6. Use the PAINT BUCKET tool to fill the outer stroke with the preset gradient again. This time, use the TRANSFORM FILL option to change the gradient's light source. Drag the light source button to the opposite side of the gradient fill. Changing the gradient's light source will give the object a raised, three-dimensional appearance.

7. Finally, use the PAINT BUCKET tool again to fill the outermost stroke with the preset gradient.

Source: This lesson was developed especially for YOU by Debbie Berg :-)

WATCH FOR MORE DEB TIPS TO COME! STOP BY AND SEE MY NEW DEB TIP EACH MONTH...

D.E.B. Tips

Flash

Dreamweaver/Flash
Conference