Working with Vector Graphics


You can create original vector graphics with the drawing tools included in the Flash authoring environment. Remember that vector graphics use lines and curves to define areas of color? Well, in the Flash authoring environment, you can draw those lines and curves directly on the stage. The drawing tools let you set the properties of the lines (strokes) and the color areas (fills).

Drawing Lines

If you haven't done so already, open Flash and create a new Flash document. Start drawing on the stage with the Pencil tool, which enables you to draw free-form lines. The pencil tool has three options that control how many line segments and curves your line has:

  • Straighten Use this option if you want to draw a straight line.

  • Smooth Use this option if you want to draw a curving line.

  • Ink Use this option if you want to draw a curving line, but keep in mind that the Ink option follows the movement of your mouse more exactly than the Smooth option and produces more segments and curves. This leads to a larger file size.

Figure 9.9 compares lines drawn with each of the three options selected.

Figure 9.9. Comparing lines drawn with Straighten, Smooth, and Ink options.


Notice that when you draw an oval with the Pencil tool with the Straighten option selected, the shape snaps into a smooth oval when you complete the oval. This can help you quickly draw ovals. When the pencil options are set to Smooth or Ink, this snapping does not occur (see Figure 9.10).

Figure 9.10. Ovals drawn with Straighten, Smooth, and Ink options.


In Flash, lines are often called strokes. You can control certain properties of the lines you draw with Flash such as stroke thickness and color. Flash gives you many options for drawing strokes, whether they are drawn with the Pencil tool or as an outline with a Shape tool (oval or square).

Depending on what stroke style you select, you get access to different properties with the Stroke Style Panel, which you can access by clicking on the Custom button in the Property inspector when using a tool with strokes (see Figures 9.11 and 9.12).

Figure 9.11. Property inspector with Stroke properties.


Figure 9.12. Custom stroke styles.


Although stroke styles can enhance the look of your design and save you time, be sure to use them carefully because they can increase the file size. A complex stroke style requires more information to describe the line to which it's applied. In addition to stroke styles, lines also have options for line color and thickness, as well as cap and miter styles. You can set all of these options with the Property inspector.

Note

This is where terminology could be a little confusing: When you draw with the Paintbrush tool, you are drawing a shape, not a stroke. In the Flash authoring environment, the terms line and stroke are used interchangeably. For example, the Modify, Shape menu has an option to convert a Line to Fill, and yet there is a Stroke Style panel.


Drawing Fills

You can create a fill with the Paint Bucket tool by selecting the tool and a fill color and then clicking on the area you want to fill. For the Paint Bucket tool to work, the area must be a closed shape. Figure 9.13 shows a closed shape as well as a shape that is not closed.

Figure 9.13. Only closed shapes can have fills applied to them.


When you draw a shape freehand with one of the drawing tools, you might accidentally leave a gap between curves. If you want to apply a fill with the Paint Bucket tool, you need to close the shape by drawing or stretching a line connecting the two ends on either side of the gap. If you still cannot fill the shape, look for additional gaps. You can use the drawing tool you started with, such as the Pencil tool, or another drawing tool.

When the shapes you are drawing are simple, you can avoid problems with open shapes by using the Shape Tools (Oval, Rectangle, and Polygon). To use these tools, click and drag the mouse across the stage. The point where you initially click becomes the registration point for the bounding box of the shape. The farther you drag the mouse, the larger the shape becomes. The shape tools combine lines and fills, but you can set either the line or fill color to be empty. For example, the oval in Figure 9.14 was set to have the fill color be empty.

Figure 9.14. Oval drawn with the Oval Shape tool and with an empty fill specified.


Try out the Brush tool. Whereas drawing with the Pencil tool creates lines, drawing with the Brush tool creates a fill (a shape). You need to use the Fill Color option to set the fill's color. In addition to color, the Brush tool has Fill options and additional tool-specific options, including brush size and shape (see Figure 9.15). Brush shapes range from round and oval to square and slanted.

Figure 9.15. Available brush shapes.


The Fill options let you paint inside of previously drawn shapes without worrying about precision. For example, if you want to fill a shape without going outside its outline, you can select the Paint Inside option. Begin drawing inside the shape, and your strokes will fill only the inside of the shape. If your mouse goes outside the shape, that area is not rendered on the screen when you release your mouse. Figure 9.16 shows a shape being filled with the Paint Inside Option selected. Note that while you are drawing, the color does show up outside the shape's outlines, but when the mouse button is released, only the color inside of the shape remains on the stage. This technique can be used when you want to fill a shape with gaps.

Figure 9.16. The Paint Inside option allows precise filling of a shape with the brush tool.


The Paint Behind option lets you color outside of existing lines and shapes without covering them. You can start at any point on the stage, and the color is rendered automatically behind everything else already on the stage. Figure 9.17 shows an example of painting behind another shape.

Figure 9.17. The Paint Behind option lets you apply color behind an existing shape without overwriting it.


Object Drawing Model

In Flash, overlapping shapes and outlines merge and overwrite each other. This can be very useful when you want to chop up parts of an image or you want to sculpt a shape.

New to Flash 8 is the Object Drawing Model. When the Object Drawing option is turned on, the shape outlines do not affect each other. The main benefit of this is that you can select and move shapes and lines around without them getting chopped up in the process. Flash enables you to toggle Object Drawing mode on and off in the Options for a drawing tool (as shown in Figure 9.18) so you can go back and forth between the default and the Object Drawing mode. The button for toggling Object Drawing mode is located at the bottom left of the Tools panel.

Figure 9.18. You can toggle the Object Drawing mode on and off in the Options of drawing tools.


Gradients and Bitmap Fills

A fill doesn't have to be a solid color. It can be a gradient or even a bitmap. The Color Mixer panel gives you access to several methods of selecting a fill, as described in Chapter 8, "Introducing Flash 8."

A gradient is a fill that transitions from one color to another, or through several colors, and can be either linear or radial. A linear gradient transitions from color to color in a single direction, whereas a radial gradient transitions out from a central point in all directions.

The Gradient Transform tool enables you to edit gradients. To access the Gradient Transform tool, select it from the Tools panel and then click on a shape or line filled with a gradient. Figure 9.19 shows the points of manipulation for a gradient. By dragging the manipulation points, you can control the center, focal point, width, size, and rotation of a gradient fill.

Figure 9.19. Gradient Transform tool.


Bitmap fills are used to fill shapes with a bitmap image. The image can be used once, or tiled repeatedly inside of the shape. Used sparingly, bitmap fills can add depth and texture to your projects. To set a bitmap for a fill, select the Bitmap option for Fill Type in the Color Mixer panel, as shown in Figure 9.20, where the bitmap option is selected and highlighted in blue in the drop-down menu. A dialog box opens up where you can select a bitmap to import. Another method for setting a bitmap as fill is to select the Paint Bucket tool, click on a bitmap in your library, and then fill the shape with the selected bitmap.

Figure 9.20. Setting fill type to Bitmap in the Color Mixer panel.


In previous versions of Flash, lines had to be converted to fills before they could have gradients or bitmaps applied to them. In Version 8, you can apply a gradient or bitmap to a line and still have access to its stroke properties.

Importing Vector Graphics

In addition to creating new vector graphics from scratch in Flash, you can import .swf and other vector graphics file formats that have been prepared in another program. For example, you can import a Freehand file and continue manipulating the curves in the Flash environment. To import an external image file, go to File, Import and select either Import to Stage or Import to Library. If you import a Fireworks PNG file that contains vector graphics, the Fireworks PNG Import Settings dialog box opens and enables you to select settings for how much information the file will bring into Flash about its vector shapes and layers (see Figure 9.21). Be sure to preserve layers and not flatten the image on import.

Figure 9.21. Import Settings dialog box.


Caution

You should avoid importing vector graphics with gradients. Instead, add the gradients within Flash. This helps reduce the file size.




Special Edition Using Macromedia Studio 8
Special Edition Using Macromedia Studio 8
ISBN: 0789733854
EAN: 2147483647
Year: 2003
Pages: 337

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net