1. Home
2. Developer Connection
3. Flash Developer Center

Flash Article

 

Drawing in Flash: A Beginner's Introduction to the Flash MX 2004 Drawing Tools

Michele Howley

www.designable.org

The purpose of this exercise is to gain a basic understanding of how to use the drawing tools in Flash MX 2004. Before proceeding, I need to define a few terms. You'll find it much easier to understand how Flash draws if you are familiar with what Flash draws.

The drawing tools in Flash create something called vector artwork. A vector graphic is best described as a graphic made from straight or curved lines with crisp edges. A benefit to using vectors is that you can scale the illustrations you create without harming the quality of the illustration. For example, say you're designing a logo for a client, and the client wants to see their logo on a key chain as well as on a billboard. If the logo is done using vector artwork, you can potentially scale the artwork to any size and still not lose the integrity of your original illustration.

In contrast to vector art there is something called bitmap artwork. (the words bitmap and raster are synonymous. Raster is based on a German word meaning to screen. Raster and bitmap images are made up of pixels). A very important difference between bitmap artwork and vector artwork is that bitmap is not resolution-independent. If you were to enlarge a bitmap image with a resolution of 300 dots per inch (dpi), the quality would deteriorate, most likely leaving the image unacceptable.

Below is a picture showing enlargements of a vector image and a bitmap image. Please note the difference between the two. The vector (shown on the left) is much smoother and more precise than the bitmap (shown on the right). The enlarged bitmap image is pixilated.

Figure 1. Vector vs. bitmap artwork

In this exercise, you'll be dealing with only vector artwork. However, it's important to be able to differentiate between the two.

You can use the Flash drawing tools to draw vector artwork in Flash. But first you'll need to find them.

• Open Flash MX 2004
• Select File > New. The New Document dialog box appears.
• Click Flash Document.
• Click OK.

If you can't see the Tools panel, look at the menu items along the top of your monitor. Select Window > Tools. The Tools Palette appears.

Figure 2. Opening the Tools panel

In this tutorial, you'll focus on five of the tools in the Tools panel (see Figure 2) and the Fill and Stroke Color controls. The five tools we'll cover are as follows:

• The Pen tool
• The Oval tool
• The Rectangle tool
• The Pencil tool
• The Brush tool

I'll also briefly cover the Free Transform tool. You'll create a basic illustration using these tools.

Ready to begin? Good!

Requirements

To complete this tutorial you will need to install the following software and files:

Flash MX 2004

• Try
• Buy

Prerequisite knowledge:

This tutorial is designed for beginners with little or no experience with Flash. What you need for this exercise is the desire to learn. And remember not to panic. The program is your friend. If you become frustrated or confused at any point, just relax and take a deep breath.

The Drawing Tools

The Pen Tool

Now that you've found the Tools panel, you're ready to begin. The first tool you'll use is called the Pen tool (shown below).

Figure 3. The Pen tool

The Pen tool is used to draw precise paths, straight lines, and curved lines. When you draw using the Pen tool, you click and drag to create lines and points. You can adjust line segments by adjusting points on the line and can convert points to form curved lines, and vice versa.

Remember those (somewhat cheesy) sailboat string art "drawings" people created back in the 70s and early 80s? You might think of using the Pen tool as similar to stringing yarn or wire around nails—just like in those pictures. However, the Pen tool takes this "string and nail" concept a step further, letting you create, remove, or convert anchor points (or "nails") to alter the shape and to create curved line segments. You can add or remove any number of anchor points to mold the shape at any time. You can also use the Pen tool to adjust shapes drawn by other tools. The Pen tool is great for tweaking shapes you've drawn until they're perfect.

The Oval Tool

The Oval tool is exactly what you'd assume. It helps you to draw ovals and circles.

Figure 4. The Oval tool

If you click the Oval tool and draw an oval, you will notice that it's not uniform. If you want to draw a perfect circle, hold down the Shift key, and it constrains the shape. Play with this a bit more so you can get the feel for it. You'll notice that if you stop pressing the Shift Key mid-draw, the perfect circle pops back into an oval shape. Similarly, the opposite happens if you press down on the Shift key mid-draw. You can use this technique for the Rectangle tool as well.

The Rectangle Tool

The Rectangle tool is also used to accomplish exactly what it boasts.

Figure 5. The Rectangle tool

Take a look at the lower right side of the Rectangle tool section of the Tools panel. Notice the black arrow. The arrow means that this tool has one or more subtools associated with it. Click the Rectangle tool and hold down, and another option appears.

Figure 6. The PolyStar tool, a subtool of the Rectangle tool

Nested beneath the Rectangle tool is the PolyStar tool, which you can use to draw octagons, pentagons, and hexagons (and any-number-of-sides-agons). You can adjust the number of sides using the Property inspector.

The Pencil Tool

Next up, you have the Pencil tool.

Figure 7. The Pencil tool

Drawing with the Pencil tool is a lot like drawing with a real pencil. However, in Flash, you can adjust the stroke weight and the line quality with the touch of a button. Here's how:

1. Select Window > Properties. The Property inspector opens and appears at the bottom of your screen.
2. Click the Pencil tool in the Property inspector.

Notice that the Property inspector changes depending on which tool you're using. Take a look at Figure 8; when you have Pencil tool selected, you can adjust the color of your stroke, the line weight (note that it's set for 1 pixel in Figure 8), and whether or not you'd like a solid line, a dashed line, or a dotted line.

Figure 8. Property inspector for the Pencil tool, showing stroke color, weight, and style

It's important to remember to use the Property inspector because it gives you specific options for every tool you have learned about thus far. Remember this as you continue learning about and using the drawing tools.

Remember when I said you could change the number of sides on the PolyStar tool using the Property inspector? I'd like you to try that now. Open a new Flash document. Click the Rectangle tool and select the PolyStar tool. Notice the Property inspector at the bottom of your window. You should see something like this:

Figure 9. Property inspector for the PolyStar tool

Now, take a look at the buttons on the right, the Custom and Options buttons. Click Options. The Options box appears.

Figure 10. Changing number of sides of a polygon using the Polygon options settings

Here, you can select polygon or star and type in the number of sides you'd like it to have. Play with this a few times. I suggest drawing a few different shapes to get the hang of it. Say you have a client who, for some reason, wants you to put a starburst into your design. The Options palette is where you would build it.

The Paintbrush Tool

Next up is the Paintbrush tool.

Figure 11. The Paintbrush tool

This Paintbrush tool is like the Pencil tool, only the line quality is a bit more like using paint rather than lead or ink. If you haven't already done so, I suggest opening a new document and exploring the tools. Compare how it feels to draw with the Pencil tool to how it feels to draw with the Paintbrush tool. Again, the Property inspector has changed to accommodate the Paintbrush tool.

The Fill and Stroke Color Controls

Below the other tools in the Tools panel are the Fill and Stroke Color controls. There's an image here for your reference (see Figure 13), however, after I am done going over this, I'd like you to open the program and explore them. After all, applying color to your artwork brings everything to life.

Figure 13. Fill Color and Stroke Color controls

The top image, the black box next to the pencil, is the Stroke Color control. The control with the paint bucket is the Fill Color control. There are some differences between these two color controls that are important to understand. I'm going to walk you through them now.

1. Open a new Flash document window.
2. Click the Circle tool and draw a circle on your main stage.
3. Now, click the Selection tool (the black arrow).
4. Click the center of your circle.

Notice that only the color inside the object is selected. An object that is selected looks like the one at the right of Figure 14.

Figure 14. Selecting your fill

Return to the Tools panel and select a fill color; you may edit the inside of the circle by selecting any color of your choice.

Figure 15. Changing your fill color

Now click outside the circle and select its stroke. Once you're safely over the stroke, notice that the Selection tool changes slightly. A curved line appears next to it, meaning that, if you're ready, Flash is prepared to select your stroke. After clicking the stroke to select it, you can edit the stroke color.

Figure 16. Changing the stroke color

Say you don't want a stroke at all. You can easily turn stroke off or fill off at any time while drawing an object.

1. Select File > New to create a new document.
2. Select the Oval tool.
3. Click the Stroke Color control.
4. Notice a button on the right side of your color palette that looks like a white box with a red line drawn diagonally through it. Click the button. From this point on, any shape you draw will not have a stroke.

Excellent. You should be in great shape to begin using the tools. In the next section, you'll use them to draw a house and very basic landscape.

Drawing a House

Open a new document by selecting File > New, selecting Flash Document, and clicking OK.

You're ready to begin. I'd like you to begin by making sure both your Tools panel and Property inspector are open. You will need them both for this exercise.

• Click the Fill Color control (the paint bucket) and select a fill color of gray.
• Click the Stroke Color control and select a stroke color of black.

If at any time you're confused as to which tool you're using, you can roll over the tool and wait a few seconds; the name of the tool will appear.

Figure 17. Identifying the tool by displaying the tool tip

• Draw a rectangle on your Stage.

This is the foundation of your house. Save your file.

If you ever used a drawing program in the past, you're probably used to drawing shapes and having both shapes retain their original states. Flash treats this a bit differently. Flash treats this much like the artist is working on a real canvas or actually sketching on a piece of paper. (It's important to understand this entirely, so I'm going to take a minute to explain.)

Here's an example. Right now, your rectangle is broken up into little pieces. If you were to drag to select a part of the rectangle, only the part you drag your arrow over will be selected. It's a lot like what I showed you before when I changed the fill color and stroke color of the red circles. I'd like you to draw another triangle on top of the original one. Like this:

Figure 18a. Shapes overlapping other shapes

Next, delete the red square. Notice that on the gray triangle below, the area where there was once a red square, the color is now missing or "punched out."

Figure 18b. Deleting shapes from ungrouped objects.

This is how Flash works. A good way to think of it is like using real paint. Say you drew some grass, and then drew a ball on the grass. Later, you decide that you no longer want the ball and decide to erase it. The grass would no longer be there. When you erase the ball, the grass below it would be gone as well. Think of it this way.

So, you have your gray rectangle and you know you want to keep that gray rectangle just as it is. Using the Selection (black arrow) tool, click and drag to select the gray rectangle. Include the stroke—you don't want to lose your black outline.

After you have selected the triangle and its stroke, select Modify > Group.

Figure19. Grouping your objects

This makes that shape nearly indestructible. You can now draw on top of your rectangle while preserving its original shape.

Now that you have drawn a rectangle and grouped its parts, I want you to try and give your house a door. After you draw it, it doesn't show up. In Flash, all vector drawings appear below groups. I'm not entirely sure why it's done this way, but it's important to know that your shape is there. It's just set behind the grouped triangle. Therefore I need to introduce you to the Timeline.

• Go to Window > Timeline. Your layers appear, as shown in Figure 20.

Figure 20. The Timeline and layers

Layers let you place new artwork on the Stage while preserving any and all artwork below or above it. Think of a layer as a transparency on an overhead projector. You can lay as many down as you want and still see whatever lies underneath. Each time you draw a new shape or a group of new shapes (such as a group of windows or a herd of sheep), you should add a new layer. Let me show you how this is done.

Click the button outlined in red below.

Figure 21. Creating a new layer

A new layer appears. To give this layer a name, double-click the layer and type over the default layer name. I suggest using very straightforward names such as "Windows" or "House". Note: I know this sounds pretty straight forward, but it needs to be said. The items on the topmost layer sit on top of others on the Stage. It's common to draw something and then not be able to find it. You might panic before realizing that your Window layer is lying below your House layer. The windows are there, but they might be hidden. Remember this while you're drawing.

This is what your Timeline should look like:

Figure 22. Naming and organizing your layers

If at any point, something goes wrong and things don't appear to be doing what you want them to do, use the Undo command by selecting Edit > Undo (Control+Z). Always remember that you can undo something. By default Flash allows 100 undo levels, however, you are able to change this number from 2 to 9999 using the Flash Preferences, but for this exercise, I'd like to just keep it at 100. I also recommend saving your work frequently. The last thing you want is for something to go wrong and you lose your work. File > Save (Control+S) should be considered your most valuable player when working in any program.

Time to draw the rest of your house!

Completing the Scene

Making sure you're on the Windows layer of your timeline, draw a few windows. Hold the Shift key down to make them perfect squares. At this point, since you're working on layers, you can change the colors of your graphics as much as you'd like. Layers, like grouping, preserve whatever lies below or above them.

I made my windows white (see Figure 23). If you're worried about affecting your House layer, you can lock it. That way you can select only your windows and preserve your house. You can lock and unlock a layer by clicking the padlock icon. The padlock icon is above each layer and below the word "Timeline." This is what your file should look like:

Figure 23. Drawing your windows

Now, I want you to add a new layer and put on a door. When you add a new layer, that layer appears above the layer you are on. That being said, make sure you're on your Windows layer so your Door layer appears above it.

Figure 24. Adding your Door layer

By now, you're probably getting the hang of it. Notice that I have locked all layers I am not using for now. This helps you edit only what you're expecting to edit; restricting you from editing content on other layers. Notice that when something is locked you can't move it or change its color. It's basically set in stone until you unlock it again. I can't stress how useful this is for an illustrator, especially when you start working with files that have many layers.

At this point, I'm getting tired of looking at this gray house. And since I have always enjoyed the Red House Painters, I'm going to paint my house red. How do I do this? Remember when you grouped the gray rectangle? Well, you need to ungroup it to change its color. First, however, you need to unlock your House layer. After unlocking your House layer, select your gray house. Then, select Modify > Break Apart.

I have highlighted the three areas to pay attention to in Figure 25. First, make sure you're on the right layer (the House layer); second, make sure your gray house is selected. Finally, I highlighted the Break Apart command.

Figure 25. Breaking apart a grouped object

After the gray house breaks apart, you can change its fill color to be any color you wish.

Now you're ready to finish your door. Using your Rectangle tool, draw a door. This time, if you just want a rectangle, pressing the Shift key is not necessary. After I have drawn my door, I'll use the Oval tool to draw a doorknob. This time, however, I want my doorknob to be black. So before proceeding, I am going to change the fill color to black. You can keep this all on the Door layer; using extra layers isn't necessary.

Your file should look something like this:

Figure 26. Drawing your door and changing your house color

Next, add some hills. For this part, I suggest using the Pen tool. The Pen tool takes a little getting used to, so don't get frustrated if you don't get the hang of it right away. Just practice a few times on a new layer called Hills—that way you can always delete the layer if you wish. I'm going to make my hills green because I live in San Francisco, and right now they're brown! I'm going to keep my stroke black. Remember, you need to move your Hill layer to the back behind your House layer, so that it doesn't cover up the house.

Figure 27. Using the Pen tool to draw your hills

Now the house has a landscape. You can add to it by drawing a tree. For this, I suggest using the Pencil tool.

Make the trunk first. Create a new layer called Trunk. Then, using your Pencil tool, draw a trunk. Using the Paint Bucket tool, fill the trunk to be any color you'd like. I made mine brown. Click inside the shape with the Paintbrush tool selected, and you're ready to fill it with whatever fill color you choose. I have identified the four things in red that you might pay attention to below in Figure 28.

Figure 28. Using the Paint Bucket to add color

After you have filled the tree trunk with color, you're ready to add some leaves to your tree. I'm going to use the Brush tool for this. Again, fill the shape using your Paint Bucket tool. Remember to pay attention to your options area in the Tools panel and the Property inspector. You can use these to adjust the size of your brush and the style. In the end, you should have something that looks like what you see in Figure 29.

Figure 29. Finishing the tree

Lastly, I am going to show you how to change your background color, so you can give your landscape a sky.

1. Select Modify > Document. The Document Properties dialog box pops up.
2. Notice the Background Color control box. (It's probably set to white.)
3. Click the white box and choose any color you'd like.

Figure 30. Changing the background color in the Document Properties dialog box

You background color is now the color you selected. I chose blue, as shown in Figure 30.

At this point, feel free to draw some clouds in the sky, maybe sun as well. If you're feeling really adventurous, I suggest trying to draw a walkway leading up to your door. You can use your Pen tool to do this. Just remember to use a new layer for each and lock whatever layers you're not currently using. This lets you easily update, delete, or change any artwork at anytime.

In the end, you might have something that looks like this:

Figure 31. Final drawing

Where To Go from Here

If you enjoyed this exercise, and you wish to draw some more, I suggest recreating an existing photograph or hand-rendered drawing. Sometimes tracing an image can give you a better grasp on how to use the tools. I have traced over photographs, and I've scanned in drawings of my own and traced those.

Remember, it's important to explore using any new program. So don't get discouraged and just keep at it. I promise, you won't be let down. You'll be able to get some great results in Flash.

About the author