Flash Design Tips: Precise Drawing In Flash

To create precise vector graphics in Flash, it's all about learning to use and control the tools.

The drawing tools in Macromedia Flash MS 2004 allow you to create precision vector graphics. Vector graphics are line-based graphics. In the world of mathematics, a vector is a line that has a defined starting point, a designated direction, and a specified distance. With vector graphics, vectors control the manner in which curved and straight lines are shaped between specific points. The picture is made up of these lines as well as the colors of areas enclosed by the lines.

Because of how they are created, vector graphics can be resized easily without reducing image quality. A vector graphic appears much smoother and more precise than a raster (or bitmap) image, which is made up of pixels (dots). Vector graphics also download faster than comparable raster images.

Tools

Flash offers several drawing tools for drawing vector graphics. The Tools palette should be open by default, but if you can't see it along the left side of the Flash window, select Tools from the Window menu to activate it. (Don't confuse the Toolbars submenu with the Tools command; they are two separate entries on the Window menu.)

With the Tools palette open, take a moment to hover the mouse pointer (without clicking) over each tool to view its name. Be sure to locate the following tools: Line, Pen, Oval, Rectangle, and Pencil, all of which will be discussed in this article.

Drawing Basic Geometric Shapes

The Oval and Rectangle tools allow you to create basic geometric shapes, such as squares, circles, rectangles, and ovals. To draw with one of these tools, select it and then click and drag in a diagonal manner on the stage. Hold down the Shift key while drawing with the Oval tool constrains the shape to a perfect circle. Likewise, hold down the Shift key while drawing with the Rectangle tool constrains the shape to a perfect square.

By default, the Rectangle tool produces rectangles with square corners. You can specify rounded corners instead by clicking the Round Rectangle Radius button at the bottom of the toolbar under Options. Specify a corner radius in the Rectangle Settings dialog box. (Zero specifies square corners.) A neat trick: tap the up or down arrow while you are drawing to increase or decrease the corner radius on the fly.



To change the fill (inside color) or stroke (line surrounding the shape), use the Fill Color and Stroke Color buttons in the Property Inspector at the bottom of the window. (If you cannot see the Property Inspector, choose Properties from the Window menu.) You can also alter the stroke height (thickness) and style (solid, doted, dashed, etc.) on the Property Inspector.

Drawing Precise Paths

The Pen tools can be used to draw straight or curved line segments (paths between two points). To draw straight lines with the Pen tool, select it and then click anywhere on the stage. Click elsewhere on the stage to create a straight line path from the first point to the second. Draw additional lines by clicking elsewhere on the stage. Double-click to stop drawing. To draw curved line segments, click and drag on the stage. You can tweak the line segments by adjusting points on the line as you draw. The Line tool can be a bit frustrating for new users - read about it thoroughly in the Help file to help ease the frustration.

Use the Editing tab on the Preferences dialog box (under the Edit menu on a PC, under the Flash menu on a Macintosh) to set Pen tool preferences such as Show Pen Preview, Show Solid Points, and Show Precise Cursors.

To modify the Pen tool's fill (inside color) and stroke (line surrounding the shape), use the Fill Color and Stroke Color buttons in the Property Inspector at the bottom of the window. (If you cannot see the Property Inspector, choose Properties from the Window menu.) You can also alter the stroke height (thickness) and style (solid, doted, dashed, etc.) on the Property Inspector.

Drawing Lines and Shapes

The Pencil tool allows you to draw freeform lines and shapes. To draw with this tool, select it and then click and drag on the stage. The Pencil Mode button (under Options at the bottom of the Tools palette) lets you choose between Straighten (to draw straight lines), Smooth (to draw curved lines), or Ink (to draw freehand lines with no modification). Add the Shift key while drawing to constrain lines vertically or horizontally.

The Line tool allows you to draw straight lines. Add the Shift key while drawing to constrain lines to multiples of 45-degree angles.

To change the stroke (line surrounding the shape) for either the Pencil or Line tools, use the Stroke Color button in the Property Inspector at the bottom of the window. (If you cannot see the Property Inspector, choose Properties from the Window menu.) You can also alter the stroke height (thickness) and style (solid, doted, dashed, etc.) on the Property Inspector.

© High Speed Ventures 2011