Add Graphic Elements to Your Flash Movies

We will learn in this section how to. . .
■ Use the Toolbar
■ Make objects
■ Apply fill and stroke colors
■ Draw lines and curves
■ Create basic shapes
■ Sample and apply colors to objects

In previous Chapter, the Toolbar was explored as a major component of the Flash workspace. In this chapter, we return to the Toolbar, this time to learn to use the drawing tools. Drawing is a big part of the Flash interface, since many of the elements you’ll be animating and making interactive need to be drawn first. Flash sports a complete set of drawing tools, from a Brush to a Pen tool, with which you can make perfect curves. You’ll find that the variety of tools in Flash should address most of your drawing needs.

Designers accustomed to the drawing tools in their favorite vector-based, or drawing, program will be happy to know that graphics from programs like Adobe Illustrator and Macromedia Freehand can be imported into Flash too. What’s more, you can edit those drawings in Flash and then proceed to build your movie from there. Importing graphics from other applications is covered in chapter Add Images to Your Flash Movies.

For those who are accustomed to working in other drawing programs and are new to Flash, the drawing interface may seem a little strange. This is because some of the tools you’ll discover, such as the Lasso tool and even the Eraser, are not commonly associated with drawing programs.
You’ll find that once you get used to the feel of drawing in Flash, it’s not as strange as it looks. With that said, let’s first learn the basics of using tools in the Toolbar.

Locate the Right Tool in the Toolbar

Drawing in Flash always begins with selecting a tool in the Toolbar (see Figure below). This panel is home to all of the tools you use to create and modify objects you will use to make your Flash movie.

The Toolbar is made up of four sections:
■ Tools Houses the tools you use to create, select, and modify objects.
■ View Includes two tools that you use to zoom in or out on objects and pan your view of the stage.
■ Colors Includes two color wells, one that modifies the object’s stroke (outline) color and one that changes the fill color of the object.

■ Options Contains the modifiers for a selected tool. Many of the tools have multiple modifiers; some have none. For example, if you select the Oval tool, the Options section comes up blank. In contrast, if you select the Brush tool, you then can choose various options for the size and shape of the brush.

To select a tool from the Toolbar, simply click it. After you select a tool, Flash updates the Options section to display the tool’s modifiers, if any.

Create Objects for Your Movies

It’s quite easy to create a simple object in Flash. Once you travel beyond the simple rectangle or brushstroke, things appear to become a little more complicated. We suggest you begin with understanding simple drawing and then progressively build on your knowledge as you go along. Basically, creating a simple object involves selecting a tool from the Toolbar, sometimes setting properties related to a particular object, and specifying the fill and/or stroke color for the object you are creating. You adjust the tool’s modifiers to control the performance of the tool and modify the type of shape it creates. To draw the object, you simply position your cursor on the stage and draw. Let’s take a look at the various shapes you can create.

Create Basic Shapes

Flash gives you three basic shapes to work with: a rectangle, an oval, and a polygon/star. Although these are certainly rather basic shapes, they can be manipulated and combined with other shapes to create some dynamic images depending on your level of creativity. After you
create a basic shape, for example, you can modify it, move it, rotate it, skew it, or combine it with other shapes to create a new shape. In this chapter, you’ll learn how to create simple objects. In Chapter 5, you’ll learn how to change the shapes you make.

Create Shapes with the Oval, Rectangle, and Polystar Tools You use the Oval tool to create circles and ellipses for your Flash movies. The Rectangle tool is used to create rectangles and squares. The Polystar tool is used to create polygons and star shapes, which explains the origin of its name. The Polystar tool is located in a pop-up menu under the Rectangle tool, as shown in the illustration at right. To access this tool, click the little

arrow at the bottom right of the Rectangle tool and then select the icon that looks like a polygon. The tool displayed will now be the Polystar
tool. It’s called the Polystar tool because you can make a polygon or a star with this tool, depending on how you set the properties. You’ll learn more about this in the next section. Shapes can be filled with color, referred to as a fill in Flash, and/or they can have an outline, commonly referred to as a stroke. To draw a simple circle, rectangle, polygon, or star, simply click the appropriate icon in the Toolbar (see Figure 3-1), position your pointer on the stage, click and drag to draw the shape, and that’s it. This is a pretty easy task, as you can see. Of course, the shape will be more interesting if you jazz it up a little by using some of the following techniques.

Set the Properties of a Shape
If you’re making a stroke on an oval, rectangle, or polygon/star, you need to set the characteristics, or “properties,” of the stroke. You can do this most easily in the Properties Inspector, shown next.

Choose from Two Drawing Models in Flash

There are two different types of drawing models you can choose from to create shapes in Flash: the merge drawing model and the object drawing model. The merge drawing model merges overlapping shapes into one object. The default model in Flash is merge drawing. The object drawing model, on the other hand, treats shapes as separate objects and allows you to overlap them with other shapes. Object drawing shapes are created and manipulated as they would be in a typical drawing program. To activate object drawing, select a drawing tool such as the Rectangle or Ellipse, then click the Object Drawing icon in the Options section of the Toolbar, as shown at right. Drawing models are discussed more in Chapter Manipulate Graphics and Text. When object drawing is turned on and you draw a shape, a blue frame will appear around the shape, as shown here.

As with all other objects, you can set the properties of an oval, rectangle, or polygon either before you begin to draw or after you’ve made the object.

To set the stroke characteristics of a shape or the stroke of a line in the Properties Inspector, click the Stroke Style pop-up menu in the Properties Inspector. In this menu, you can select the style of the actual stroke. Styles available include solid, dashed, dotted, and textured. The height of the stroke is its thickness. To set the height, click the pop-up Stroke Height menu and select a number. You can also type in a number from 0.1 through 10 pixels, which represent the minimum and maximum values of a stroke for a shape. In the Properties Inspector you can also check Stroke Hinting. When stroke hinting is enabled, the line strokes will appear sharper in the Flash Player. Additionally, stroke properties also include caps and joins. The cap selections allow you to choose how the ends of a line are going to appear. Join refers to the corners of a stroked object, or the point where two strokes meet. Both cap and join options are available in a pop-up menu. On open-ended strokes with two or more sides, you can combine both cap and join options in any way that suits your project. Examples of the cap and join options on a single stroke and an object are shown next.

Caps and joins only apply to solid strokes. You cannot use caps and joins on fills.

If you apply a Square cap to a line, the line becomes longer according to the line’sheight because it squares the ends of the line with the sum of the height. If you choose aNormal cap, on the other hand, the beginning and the end of the line remain exactly theway they were when you drew them.

To further customize a stroke style for a shape, click the Custom button in the Properties Inspector. Then, in the Stroke Style dialog box (shown here), you can set the shape of the stroke, the thickness, the sharpness of the corners of the shape, and other properties.

To draw a symmetrical shape, hold down SHIFT while dragging. Remember to release SHIFT before releasing the mouse button; otherwise, the tool will revert to its unconstrained shape mode.