Learning the drawing tools

Adobe Flash CS4 offers several drawing tools for creating cool characters and designs. Each tool differs from the others and yields different stylistic results. Some tools create larger file sizes while other tools result in smaller files.

As you become more familiar with these tools, you'll learn to choose the best tool to achieve the artistic style you want while adhereing to any file size requirements you may have. It's a tradeoff to balance between file size and download times and playback performance. In this section, I take a look at each of the drawing tools in Flash and discuss the pros and cons of each.

Using the Brush tool

The Brush tool is probably the most versatile of all the tools, especially when combined with a pressure-sensitive tablet.

Drawing with the Brush tool is the same as drawing with shapes. It's the tool that feels the most natural when used due to the support of pressure sensitivity and tilt features. Wacom makes a series of popular tablets that differ in size, include a cordless, battery-free pen called a stylus, and work great with Flash. Since a Wacom tablet can work in conjunction with your existing mouse, or replace your mouse completely, its use goes far beyond that of Flash alone. Many digital designers use a tablet with any number of image editing and animation programs, including Adobe Photoshop and Adobe Illustrator. But fear not: If you do not currently own a tablet, you can still use the Brush tool (see Figure 1) with one exception—both the tilt and pressure sensitivity features will not be available.

Figure 1. Select the Brush tool icon in the Tools panel to start drawing.

If you do have a pressure-sensitive tablet, however, you can choose from some subselection options for the Brush tool that will affect the line quality. At the very bottom of the Tools panel, you will notice the pressure sensitivity and tilt options. With one or both of these options selected, you can achieve various results when you use the Brush tool to draw in Flash (see Figure 2).

Figure 2. Use the icons in the Tools panel to choose the pressure sensitivity and tilt settings.

This next example shows what happens when you draw with the Brush tool. The result on the left is a shape, which means it has vector points on all sides. The more points an object contains, the bigger the file size of the project. I drew this particular shape using a pressure-sensitive tablet (see Figure 3). Notice the tapered ends and inconsistent line weight that result with varied amounts of pressure applied to the stroke. I also drew the shape on the right with the Brush tool; in this case, however, I turned off the pressure sensitivity setting.

Figure 3. Compare the shape drawn using the pressure-sensitivity setting turned on (left) and turned off (right).

At first glance, the Brush tool may seem like a very basic tool to draw shapes, and it is very easy to use. However, there are many settings you can use to create unique and interesting designs.

The Brush tool offers several tool effects to help you draw in different ways (see Figure 4). Here's a description of each of these effects:

• Paint Normal: Paints over lines and fills on the same layer
• Paint Fills: Paints inside a fill color and outside a shape (on the Stage)
• Paint Behind: Paints behind existing fills and strokes
• Paint Selection: Paints inside a selected fill only
• Paint Inside: Prevents you from painting outside the lines when you begin painting inside a fill

Figure 4. Examples of different types of Brush tool effects.

Object Drawing

Object Drawing enables you to draw shapes as individual objects that remain independent of one another. Gone are the days when you had to draw each shape on a separate layer to avoid one shape "cutting" into the other. With Flash CS4 you can simply turn Object Drawing on or off as a subselection of any of the drawing tools (Brush, Pencil, Pen, Oval, and Rectangle) by choosing the desired option. For those of you familiar with Adobe Illustrator, this feature will be familiar territory (see Figure 5).

Figure 5. Object Drawing subselection button.

When Object Drawing is turned off, drawing a shape on top of another causes the second shape to cut into the first. This is called Merge Drawing mode. This mode can be useful for cutting into shapes to create other complex shapes (see Figure 6).

Figure 6. In Merge Drawing mode, shapes drawn on top of other shapes will "merge," which means if you select one of the shapes and move it, the underneath shape is cut away.

By contrast, when you draw a shape in Object Drawing mode, it automatically becomes an Object Drawing and cannot be merged with other shapes. You can overlay Object Drawings without fear of cutting into them (see Figure 7). This is useful in situations where you may want to reposition objects or simply need to keep them independent.

Figure 7. Shapes drawn in Object Drawing mode do not merge.

I created my trademark boy character entirely with the mouse and the rectangle and oval tools. I never had to use my Wacom tablet in combination with the Brush tool. I could have easily chosen the Brush tool, but using the shape tools resulted in the ultra-clean line quality I was trying to achieve.

Often times the Brush tool can create several unnecessary points that bloat file sizes and create headaches when trying to edit the shapes later on. As I was creating the boy graphic (see Figure 8), my goal was to use simple shapes and generate a character with as small a file size as possible.

Figure 8. Boy character created using the shape tools.

Pencil tool

The Pencil tool is the perfect tool if you want a consistent line weight throughout your image. It allows you to keep the file size of the project as small as possible (see Figure 9).

Figure 9. Select the Pencil tool from the Tools panel.

Lines drawn with the Pencil tool consist of fewer vector points. A perfectly straight line has only two points, one on either end. A curved line has three points or more depending on the number of curves (see Figure 10).

Figure 10. Lines drawn with the Pencil tool.

The Pencil tool also offers several line quality modes (see Figure 11):

• Straighten: This is a great option if you want to draw very straight lines by freehand. Even with a shaky hand, your lines will "snap" straight after you finish drawing your stroke.
• Smooth: If you use this option, your lines will automatically be smoothed while retaining the basic shape you intended to create.
• Ink: This option leaves your line quality unaffected. This is great for freehand or loose-style drawings.

Figure 11. Quality modes of the Pencil tool.

Shape tools

The shape tools (Oval and Rectangle) create primitive fills and strokes. Adobe Flash CS4 also provides the Rectangle Primitive, Oval Primitive, and Polystar tools (see Figure 12). Holding down the Shift key while drawing with a shape tool creates a perfect circle or square.

Figure 12. Shape tools accessed from the Tools panel.

The Rectangle Primitive tool, when selected, is easily customizable by adjusting the settings in the Property inspector. Use the slider to create rounded or inverted corners with ease (see Figure 13).

Figure 13. Set the Rectangle Primitive options in the Property inspector.

The Oval Primitive options make it possible to achieve some interesting shape manipulations. While the primitive is selected, the Property inspector provides you with three different sliders to adjust the start and end angles of your oval, as well as an inner radius slider (see Figure 14).

Figure 14. Update the properties of the Oval Primitive tool to achieve different effects.

The Polystar tool makes quick work of creating polygon and star shapes with any number of sides and points (see Figure 15). You can even specify the weight of the stroke if a stroke color was previously defined in the stroke color swatch of the Property inspector.

Figure 15. Use the Tool settings to adjust the shapes drawn with the Polystar tool.

You can select the fill and stroke color through the Property inspector. Clicking either swatch opens the color panel and enables you to edit the stroke or fill color (see Figure 16).

Figure 16. Change the color of a selected shape in the Property inspector.

You can even specify no color for the stroke or fill by selecting the square with the red diagonal line through it (see Figure 17).

Figure 17. Select the square in the upper right corner to draw without color.

Pen tool

To draw precise paths as straight lines or smooth, flowing curves, you can use the Pen tool. Create straight or curved line segments and adjust the angle and length of straight segments and slope of curved segments (see Figure 18).

Figure 18. Select the Pen tool from the Tools panel.

With the Pen tool, you click to create points between straight line segments, and click and drag to create points between curved line segments. You can adjust straight and curved line segments by adjusting points on the line. You can also convert curves to straight lines and the reverse.

When creating curved lines, you'll notice that Flash creates tangent handles for each anchor point. The lines can be edited later with the Subselection tool (white arrow) by selecting an anchor point and dragging the tangent handles. Moving the handles in relation to the anchor point reshapes the curve (see Figure 19).

Figure 19. Line segment drawn with the Pen tool that is in the process of being edited with the Subselection tool.

Onion Skin tool

The Onion Skin tool is located at the bottom of the Timeline panel (see Figure 20).

Figure 20. Click the icon below the Timeline to access the Onion Skin tool.

When you select the Onion Skin tool, the application adds Onion Skin markers to the playhead indicator of the Timeline. You can drag these markers to expand the number of frames before and after the current frame (see Figure 21).

Figure 21. Markers in the frames of the Timeline allow you to define which frames will be shown in the Onion skinning effect.

Flash provides two flavors of onion skinning:

• Normal onion skinning: The current frame is shown in full color while the previous and future frames are dimmed progressively. This gives an impression of a series of drawings created on semi-transparent paper and then stacked on top of each other (see Figure 22).

  

  Figure 22. The object in the current frame is prominent while the other frames shown in the Onion skinning effect help you decide how to adjust the objects.

• Onion skinning in outline mode: The current frame is shown in full color while previous and future frames are shown as outlines (see Figure 22). This may be easier on the eyes when working with several different keyframes before and after the current frame (see Figure 23).

  

  Figure 23. Onion skinning in outline mode.

Now that you have a good understanding of the drawing tools and working with onion skinning, let's move on to another important concept—converting the artwork you've created into symbols. The next section describes how to create and edit symbols, and discusses how they are used to create animations in Flash.

Page 2 of 4

Previous Page

Next Page