Login | Register   
RSS Feed
Download our iPhone app
Browse DevX
Sign up for e-mail newsletters from DevX


Learning to Draw in Macromedia Flash MX  : Page 3

Flash is the most ubiquitous drawing and animation tool ever created. Learn to create and edit images using the versatile drawing tools featured in Flash MX.

Using the Pen Tool
Now you are going to create a more complex object—the coffee cup. Start by going to the Timeline panel, adding another layer, and naming it "cup." Then lock the "background" layer by clicking on the dot under the padlock icon (see Figure 7).
Figure 7: Creating and naming the "cup" layer
Locking the background layer prevents you from accidentally altering the work you've already completed, and makes the cup easier to edit as you draw it.

Figure 8: Drawing the oval "building blocks" for the coffee cup.
Drawing complex objects such as this cup is not as intimidating as you may think. Follow this process closely and you'll see that by combining several simple objects, you can easily create a more complex one. Begin by going to the Color Mixer panel and selecting a fill color for the coffee cup and a stroke of none. Select the Oval tool from the Tools panel and draw a narrow, horizontal ellipse. Copy the ellipse you just drew by selecting it using the Arrow tool and then, while holding down the ALT key, click and drag to create a duplicate oval above it. Repeat the duplication of the ellipse again, but this time, place the copy below the selected oval (see Figure 8).
Figure 9: Resizing and aligning the top and bottom of the coffee cup
Select the bottom ellipse with the Arrow tool, and then click on the Modify menu. From the Transform option select Scale and Rotate. In the dialog box that appears, enter the value 50% in the Scale field. Click OK. Select the smaller ellipse and the large one directly above it with the Arrow tool. From the Modify menu, choose the Align option and select Center Vertical (see Figure 9).

The top and bottom of the cup are now in place. You can now use the Pen tool to finish the drawing. From the View menu, select the Rulers option. After the rulers appear, click and drag down from the top ruler to create a guide. A guide is a green line that you create to use as a rule for measuring and aligning objects. Guides are visible while you work, but do not appear in the published Flash file. When the guide bisects the top of the cup, release the mouse. Create another guide for the bottom of the cup (see Figure 10).

Figure 10: Creating guides in the Flash work area.
Select the Pen tool from the Tools panel and set the stroke color to the same color you used to draw the ovals for the top and bottom of the cup and set the fill color to none. Place the Pen tool on the top guide, slightly to the left of the top of the cup. Click and drag the mouse down and to the left until you get a Pen point with handles that resemble the Pen point in Figure 11.

Figure 11: Drawing with the Pen tool
Next, click on the bottom guide just to the left of the bottom of the cup and drag slightly down and to the right, then release the mouse. You should have a line with a slight curve that resembles the line in Figure 12.
Figure 12: Finishing the curve with the Pen tool
Select this line with the Arrow tool and move it to the right until it's touching the sides of both ellipses, forming the left side of the cup. To make the right side, you want an exact duplicate, but curved in the other direction. Copy the line that forms the left side of the cup to the clipboard and paste it back into the document as a new line. Select the new line and choose Transform from the Modify menu, and then select the Flip Horizontal option (see Figure 13).

Figure 13: Creating the right side of the coffee cup using the Transform option
Drag the second line to complete the right side of the coffee cup. Choose the Paint Bucket tool from the Tools panel and set the Fill color to match the cup color you've chosen. Select the Paint Bucket and click inside the hollow area of the cup to fill it. Save your file. Adding Finishing Touches and Text
Select the Oval tool and set the stroke color to the coffee cup color and set the fill color to none. Set the Stroke Height to 10, and then hold down the Shift key while you click and drag to draw a perfect circle about the size of a half-dollar. Select the circle with the Arrow tool and move it over the cup until it forms a handle (see Figure 14).

Figure 14: Drawing a handle for the coffee cup
Figure 17: Choosing a brush shape to draw the steam
Next, select the second large ellipse that you created several steps ago. Go to the Modify menu and from the Transform option select Scale and Rotate. In the dialog box, enter 80% in the Scale field and click OK. Using the Paint Bucket, fill the oval with a dark brown. Select the brown oval and cut it from the document using the Edit menu Cut item. Create a new layer as before, and name it "coffee and text." Paste the brown ellipse into this new layer and place it on top of the cup near the rim, making the cup look full of coffee (see Figure 15).
Figure 15: Creating coffee for the cup
Click on the Type tool, and in the Properties panel at the bottom of the screen, select the Copperplate Gothic Bold font. Enter a type size of 25, select a text fill color and choose the Center Justify option (see Figure16).

Then, click the Type tool just under the red rectangle in the document and type the text "The Coffee Grounds", putting each word on one line. Finally, choose the Brush tool in the Tools panel and set both the Stroke and Fill colors to a light gray or blue. In the Options section of the Tools panel, select the Brush Shape shown in Figure 17.

Figure 16: Selecting properties for the Text tool
Take the Brush and draw a simple curve to illustrate the steam coming off the coffee. If you prefer, you can use the Pen tool to create a more precise curve. Save your file.

Comment and Contribute






(Maximum characters: 1200). You have 1200 characters left.



Thanks for your registration, follow us on our social networks to keep up-to-date