Section 2.3. Creating Original Artwork

2.3. Creating Original Artwork

Before you can create an animation, you have to have some drawings to animate. You start with one drawing and then create a bunch more (often by altering the first drawing slightly). For example, if you want to create an animation showing a raccoon marching in place, you need to draw a picture of a raccoon standing still; another picture of the same raccoon lifting its left foot; and still more pictures showing the raccoon putting its left foot down, lifting its right foot, and so on. Put them all together using Flash's Timeline (as you learn in Chapter 3) and you've got yourself an animation.

Note: You're not limited to using your own drawings. Flash lets you import , or pull in, existing drawings and photosand even sound clips and video clips. Section 8.1 shows you how to import files.

Figure 2-9. Here you see the difference between strokes (lines and outlines) and fills. The strokes in this example appear black; the fills appear either light gray (Flash automatically adds your chosen fill color for closed shapes you create with the shape tools or the Pen tool) or white (Flash doesn't automatically add color to the fills you create by drawing outlines with the Line, Pencil, and Brush tool, so these fills stay the same color as the Stage). You can change the color of any fill by clicking the Paint Bucket tool (circled) and then clicking the fill you want to color.

This section shows you how to use basic Flash tools to create a simple drawing ( really simple; it's a stick person!). You see the Line, Pencil, Pen, Brush, and shape tools (Oval, Rectangle, and PolyStar) in action, and learn the differences among them (some are better for creating certain effects than others). You also find out how to add color to a Flash drawing and erase your mistakes.

2.3.1. Drawing and Painting with Tools

One of the true beauties of creating digital artworkbesides not having to clean up a mess of paint spatters and pencil shavingsis that you don't have to track down your art supplies : the one pen that feels good in your hand, the right kind of paper, the sable brush that still smells like paint thinner. Instead, all you need to do is display Flash's Tools panel.

In this section, you see Flash's drawing and painting tools in action: the Line, Pen, Pencil, Brush, and shape tools. You also see the tools Flash provides (Lasso, Selection, and Subselection) that allow you to select the your drawings so you can modify them. And finally, you get a quickie introduction to colorspecifically, you see how to change the colors of the strokes and fills you create.

2.3.1.1. Line tool

You use the Line tool in Flash to draw nice, straight linesperfect all by themselves or for creating fancy shapes like exploding suns and spiky fur.

DESIGN TIME
To Thine Own Self Be True

When asked about her artistic process, a celebrated 20th century painter said that in order to create, she had to toss aside everything she knew about matching colors, standard techniques, and even the way she held her pencil and her paintbrush. As a right-handed person with a strongly analytical mind, she discovered her ability to create only after she started drawing with her left hand. She learned to ignore what everyone else told her about how she should be working.

There's a moral to this story: Just because one person finds the Pencil or Brush the easiest tool to use so that she sticks to it almost exclusively doesn't mean you should do the same. Experiment and find what works best for you !

To help get your juices flowing , the stick figure you see in this chapter demonstrates several ways you can use Flash's painting and drawing tools. Each of these tools has its pros and cons, so try them all out for yourself. After all, the Flash police aren't going to arrest you if you sketch a beard and moustache on your stick figure using the Brush tool instead of the Pencil.

Here's how to start drawing your stick figure using the Line tool:

In the Tools panel, click the Line tool, as shown in Figure 2-10 .

Flash surrounds the Line tool with a white background to let you know you've successfully selected it; when you move your cursor over the Stage, you see it has turned into crosshairs.
Click anywhere on the Stage and drag to create a short horizontal line. To end your line, let go of the mouse .

Your line (technically called a stroke ) appears on the Stage.
Click above the horizontal line and drag down to create a vertical line .

The result is a cross. Next , you'll add legs by drawing diagonal lines.
Click the bottom of the vertical line and drag down and to the left; then click the bottom of the vertical line again and drag down and to the right .

You see the result in Figure 2-10. It doesn't look like much yet, but it's actually the basis for a stick figure you'll create as you experiment with Flash's drawing and painting tools in the following sections.

2.3.1.2. Pencil tool

The Pencil tool lets you draw freeform strokes on the Stage, similar to the way you draw using a regular pencil on a regular sheet of paper. Unlike the Line tool, the Pencil tool doesn't make you stick to the straight and narrow, so it lends itself to curving lines and fine details, like hands and face. To use the Pencil tool:

In the Tools panel, click the Pencil tool .

Flash surrounds the Pencil tool with a white background to let you know you've successfully selected it, and Pencil- related options appear in the Options section of the Tools panel. When you move your cursor over the Stage, you see it has turned into a miniature pencil.

Figure 2-10. The Line tool is the easiest, quickest way to create straight lines in Flash (like the four straight lines you see here). If you'd like to customize the way your lines look, head down to the Property Inspector. There you find options that let you make the line thicker, change it to a different coloreven turn it into a dashed or dotted line, instead of a plain solid line. (If you don't see the Property Inspector, choose Window Properties to display it.)
In the Options section of the Tools panel, click the down arrow .

A pop-up menu appears.
In the pop-up menu, turn on the checkbox next to Smooth .

The Smooth option gently corrects any jiggles you make as you draw with the pencilessential when you're trying to draw small lines, such as the face and hands you draw in this example.
Click the Stage and drag to draw a little face, hands, and feet similar to the ones you see in Figure 2-11 .

While you're on the Options section, there are other ways you can modify how the Pencil tool works: The Straighten option emphasizes the corners you draw with the Pencil (for example, turning squarish circles into squares or roundish squares into circlesdefinitely not what you want when you're trying to draw the feet you see in Figure 2-11), and the Ink option leaves your Pencil strokes just as they are, jiggles and all.

Tip: You can also straighten or smooth a line you've already drawn. To do so, select the line you want to modify using the Lasso tool (Section 2.2.3), then select Modify

Shape

Straighten or Modify

Shape

Smooth.

UP TO SPEED
Mouse vs. Graphics Tablet

If you expect to do a lot of Flash work, do yourself a favor: ditch your mouse and get yourself a graphics tablet (sometimes referred to as a digitizing tablet, graphics pad , or drawing tablet ). A graphics tablet is basically an electronic sketch board with a stylus that doubles as a pen, pencil, and brush. Today's graphics tablets connect through the Universal Serial Bus (USB) typically located at the front or back of your computer, so they're a snap to connect and remove.

With a graphics tablet, drawing and painting feels a whole lot more natural. Your results will look a lot better, too.

When you use a graphics tablet, Flash recognizes and records subtle changes, such as when you change the pressure or slant of the stylussomething you don't get with a plain old mouse. (In fact, if you install your graphics tablet correctly, Flash displays extra icons on the Tools panel that relate only to graphics tablets.)

Expect to spend anywhere from $100 to $500 on a good graphics tablet.

2.3.1.3. Pen tool

If you want to create a complex shape consisting of a lot of perfect arcs and a lot of perfectly straight lines, the Pen tool is your best choice.

To create straight lines with the Pen tool, click on the Stage to create anchor points , which Flash automatically connects using perfectly straight segments . The more times you click, the more segments Flash createsand the more precisely you can modify the shape you draw, since you can change each point and segment individually (see Chapter 5).

If you click and drag the Pen tool (instead of just clicking), the Pen lets you create perfectly curved arcs.

Tip: Working with the Pen tool is a lot (a whole lot) less intuitive than working with the other Flash drawing tools. Because you can easily whip out a triangle with the Line tool or a perfect circle with the Oval tool, save the Pen tool for when you're trying to draw a more complex shapesuch as a baby grand pianoand need more control and precision than you can get free-handing it with the Pencil or the Brush.

As you can see in the Tools panel shown in Figure 2-12, the Pen tool icon looks like the old-fashioned nib of a fountain pen.

To draw a straight line with the Pen tool:

Select the Pen tool .

Your cursor changes into a miniature pen nib.
Click the Stage, move your cursor an inch or so to the right, and click again .

Two anchor points appear, connected by a straight segment.
Move the cursor again, stopping where you want to anchor the line and change direction again .

Figure 2-12 shows the results of several clicks. Flash keeps connecting each anchor point every time you click the Stage. To break a line and start a new one, double-click the Stage where you want to end the first line.

To draw a curve with the Pen tool:

Select the Pen tool .

Your cursor changes into a miniature pen nib.
Click the Stage once and then move your cursor an inch or so to the right .

A single anchor point appears.

Note: Flash lets you change the way it displays anchor points as well as the way your cursor appears when you're using the Pen tool. You can even tell Flash to preview line segments for you, much as it previews curves. To change any of these preferences, select Edit Preferences. Then, in the Preferences window, select the Drawing category. The Pen tool preferences appear at the top of the Preferences window.

Click again; but this time, without letting go of the mouse button , drag the cursor around .

Your cursor turns into an arrow, and Flash displays a preview curve and a temporary (straight) line to show you the angle of the curve you'll create if you let go of the mouse button. You can see an example in Figure 2-13 (top).

Figure 2-12. Top: After you select the Pen tool (circled), click once on the Stage, move your mouse a couple of inches, and then click again. Each time you click, Flash displays a little hollow circle (called an anchor point); as soon as you have two or more anchor points, Flash automatically connects them with straight-line segments.
Bottom: Here's an example of a finished shape drawn with the Pen tool. The dress contains both straight lines and curves, as described in this section.
Release the mouse button .

Your curve appears on the Stage, as shown in the umbrella curve in Figure 2-13 (bottom).

Tip: Trying to draw a curve with the Pen tool the first few times can drive you nuts; you can't just start a new curve every time you feel like it, because each time you click the Stage, Flash appends the new curve to your old one. To start a new curve, click the Selection tool (or any other tool on the Tools panel) and then click the Pen tool again. Then move your cursor back to the Stage and begin your new curve.

Figure 2-13. Top: To create a curve using the Pen, click the Stage to begin the curve. Then move your cursor an inch or so, click again, and drag. While you're dragging, Flash displays a temporary line (a slope guide, or tangent line) to help you gauge the angle of your curve.
Bottom: As soon as you let up on your mouse button to finish the curve, the temporary line disappears.

2.3.1.4. Brush tool

You use the Brush tool to create freeform drawings, much like the Pencil tool described on Section 2.3.1.2. The differences between the two are:

You can change the shape and size of the Brush tool . You can choose a brush tip that's fat, skinny, round, rectangular, or even slanted . (You can't change either the size or the shape of the Pencil.)
You create fills using the Brush tool . You create strokes using the Pencil. This distinction becomes important when it comes time to change the color of your drawings (see Section 2.5).

To use the Brush tool:

On the Tools panel, click the Brush tool (the little paintbrush icon ).

Flash displays your Brush options, including Brush size and shape, in the Options section of the Tools panel.
From the Brush Size drop-down menu (Figure 2-14), select the smallest brush size .

The larger brushes let you paint great sweeping strokes on the Stage. But in this example, you'll be drawing tiny little hairs on your stick figure, so a modest brush size is more appropriate. Your cursor changes to reflect your choice (you see this change if you mouse over the Stage).

Figure 2-14. Here you get an idea of how the different brush modes work. The same circle (a fill surrounded by a stroke) is scribbled on using the Brush tool; the only difference is that a different mode (Paint Normal, Paint Fills, and so on) was applied before brushing each circle.

Tip: Whenever you make a mistake, or simply want to wipe out the very last thing you did in Flash, select Edit Undo.

From the Brush Shape drop-down menu, choose the round brush shape .

Each brush shape gives you a dramatically different look. To draw hair, as you do in this example, you choose round because it most closely approximates the results you get with a real brush. Once again, your cursor changes to reflect your choice.
Click the down arrow next to Brush Mode and then, from the pop-up menu that appears, make sure the checkbox next to Paint Normal is turned on .

Here's a rundown of all the brush modes you can choose from:

Paint Normal . Flash uses this mode unless you tell it otherwise . If you brush over an existing object on the Stage using Paint Normal, your brush stroke appears on top of the shape.

Paint Fill . If you brush over an existing object on the Stage using Paint Fill, your brush stroke appears on top of the fill portion of the object, behind the stroke, and on the Stage.

Paint Behind . If you brush over an existing object on the Stage using Paint Behind, your brush stroke always appears behind the object.

Paint Selection . If you brush over an existing object on the Stage using Paint Selection, your brush stroke only appears on the parts of the shape that are both fills and that you've previously selected (using one of the selection tools described on Section 2.2.3).

Paint Inside . If you brush over an existing object on the Stage using Paint Inside and begin inside the stroke outline, your brush stroke only appears inside the lines of an object (even if you color outside the lines). If you begin outside the lines, your brush stroke only appears outside (even if you try to color inside them).
Click on the Stage just about where your stick person's hair should be and drag your mouse upward; release the mouse button when the "hair" is the length you want it .

Your paintbrush stroke appears on the Stage.
Repeat to create additional hairs .

You should see a result similar to the one shown in Figure 2-15.

2.3.1.5. Shape tools: Oval, Rectangle, and PolyStar

Flash gives you three quick ways to create basic shapes: the Oval tool, which lets you draw everything from a narrow cigar shape to a perfect circle; the Rectangle tool, which lets you draw (you guessed it) rectangles, from long and skinny to perfectly square; and the PolyStar tool, which you can use to create multisided polygons (the standard five-sided polygon, angled correctly, creates a not-too-horrible side view of a house) and star shapes.

Figure 2-15. Ms. Stick Person again, this time sporting hair applied using the Brush tool. Notice the flowing curves of the brush strokes, in contrast to the straight no- nonsense lines of the body and dress (which were produced using the Line and Pen tools, respectively).

You see the Oval, Rectangle, and PolyStar tools in Figure 2-16; Figure 2-17 shows you how to configure the PolyStar tool.

Note: You can always create a circle or a square or a star using one of the other drawing tools, such as the Pencil or the Line tool. But most people find the shape tools quicker and easier.

To create a shape:

Click the shape tool you want (choose from Oval, Rectangle, or PolyStar, as shown in Figure 2-16 ).

Your cursor changes into a cross.
Click on the Stage where you want to start your shape and then drag your cursor to form the shape. When you're satisfied with the way your shape looks, release your mouse button .

Flash displays your shape on the Stage.

Tip: To create a perfectly round circle or a perfectly square square, simply hold down the Shift key while you drag to create your shape.

2.3.2. Aligning Objects with the Align Tools

Sometimes dragging stuff around the stage and eyeballing it works just fine; other times, you want to position your graphic elements with pinpoint precision. Using the Align panel, you can align graphic elements based on their edges (top, bottom, right, left) or by their centers. And you can base this alignment on the objects themselves (for example, you can line up the tops of all your objects) or on the Stage (useful if you want to position, say, the feet of several stick people precisely at the bottom of the Stage, as shown in Figure 2-18). You can even distribute objects evenly with respect to each other.

Figure 2-16. The Oval, Rectangle, and PolyStar tools offer quick ways to create basic shapes. Because normal people don't draw polygons as often as circles or squares, Flash tucks the PolyStar tool out of the way until you need it. To display it, click the down arrow you see next to the Square tool.

Figure 2-17. Because the PolyStar tool does double-duty, if you want to create anything besides the five-sided polygon that Flash assumes you wantif, for example, you want to create a 15-point star to serve as the sun in your stick-figure drawingyou need to change the PolyStar tool settings. To do so, select the PolyStar tool; then head to the Property Inspector and click Options. In the Tool Settings window that appears, you can choose a style (polygon or star) and tell Flash how many sides you want your shape to have.

To display the Align panel, select Window Align or press Ctrl+K (Windows) or -K (Mac).

Figure 2-18. The Align panel gives you the opportunity to align a single object (or whole groups of selected objects) along the left side of the Stage, the right side, the top, the bottom, and more. Make sure you select the objects you want to align first; then click the alignment icon from the Align panel.

2.3.3. Erasing Mistakes with the Erase Tool

Only in the digital realm does an eraser work so effectively. Try erasing a goof on paper or canvas, and you not only have shredded eraser everywhere, you're also left with ghostly streaks of paint, lead, or charcoal.

No so in Flash. Using the Eraser tool (Figure 2-19), you can effectively wipe anything off the Stage, from a little speck to your entire drawing.

Figure 2-19. Here the Eraser tool is rubbing out the PolyStar shape. Erasing in Flash isn't useful just for fixing mistakes; you can create cool effects (like patterns) by erasing, too. If you happen to start erasing the wrong thing, no problem; just click Edit Undo Erase.

Note: Using the Eraser tool is similar to selecting Edit

Undo, but not identical. The difference: Edit

Undo tells Flash to work sequentially backward to undo your last actions or changes, last one first. The Erase tool, on the other hand, lets you wipe stuff off the Stage regardless of the order in which you added it.

In the Tools section of the Tools panel, click the Eraser tool to select it .

Your cursor changes to the size and shape of eraser Flash assumes you want. To make your eraser larger or smaller, head to the Options section of the Tools panel and, from the Eraser Shape pop-up menu (Figure 2-20), select the eraser size and shape you want. (You want a nice fat eraser if you have a lot to erase, or a skinny one if you're just touching up the edges of a drawing.)

Figure 2-20. How your Eraser works depends on which Eraser mode you've selected. Here, you see the effects of each of the modes on the same fill-and-stroke-containing shape.
On the Stage, click where you want to begin erasing and drag your cursor back and forth .

Flash erases everything your cursor touches (or not, depending on the erase mode you've chosensee the following section for details).

Tip: To erase a line or a fill in one fell swoop, click the Faucet tool (shown in Figure 2-20). Then click the line or fill you want to erase.

2.3.3.1. Configuring the Eraser

Flash offers a ton of Eraser modes you can use to control how the Eraser tool works (and what it erases). To see them, click the down arrow next to the Options icon (Figure 2-20) and then, from the pop-up menu that appears, select one of the following modes:

Note: The Eraser tool works only on editable objects. It doesn't work on grouped objects or symbols.

Erase Normal . Flash uses this mode unless you tell it otherwise. If you erase over an existing object on the Stage using Erase Normal, Flash erases everything, fill and stroke included.
Erase Fill . If you erase over an existing object on the Stage using Erase Fill, only the fill portion of the object disappears.
Erase Lines . If you erase over an existing object on the Stage using Erase Lines only the stroke portion of the object disappears.
Erase Selected Fills . If you erase over an existing object on the Stage using Erase Selected Fills, you erase only those parts of the object that are both fills and that you've previously selected (using one of the selection tools described on Section 2.2.3).

Note: Oddly enough, if you configure your erase to Erase Selected Fills and then rub your virtual eraser over non -selected fills, Flash pretends to erase themuntil you let up on your mouse, when they pop right back onto the Stage.
Erase Inside . If you erase over an existing object on the Stage using Erase Inside, Flash erases the inside (fill) of the object as long as you begin erasing inside the stroke outline; if you begin erasing outside the line, it only erases outside the line.