Animation and Effects with Macromedia Flash MX 1002004 [Electronic resources] نسخه متنی

Using the Drawing Tools

The drawing tools in Flash let you create a variety of simple to complex vector lines, shapes, and brush strokes. There are many properties available that you can manipulate to construct original and creative designs without leaving Flash. For example, you can skew objects to create depth or use brush modifiers with a graphics tablet that respond to the pressure you apply with a stylus.

As discussed in Chapter 2, vectors are mathematical calculations of curves, lines, color, and position. Vectors are resolution-independent, which means that you can scale the vector graphic up or down (larger or smaller) without losing quality. When you scale a bitmap, you typically see jagged edges caused by the scaling. However, vectors remain clear, smooth, and accurate regardless of scale. This is why vector graphics in Flash are a great medium for animation: you can tween shapes larger and smaller, yet retain a high level of quality and small file size. Therefore, vectors are great for the web.

About strokes and fills

When you draw a shape in Flash, it has two parts: a stroke and a fill. The stroke defines the outline around the fill shape or a line, and the fill is the color (or lack thereof) that is inside a closed or open shape. An example of a closed shape is a circle, whereas an open shape might be a curved line. A shape might only have a stroke or a fill.

The stroke can be of varying thickness and color, and might also have a style (such as dashes or waves). You can set properties using the Property inspector.

Remember that using line styles consumes a lot of processor power to render the line on the Stage. For this reason, use special line styles sparingly.

You can use lines to create closed or open shapes. Some tools (such as the Oval, Rectangle, and Paint Bucket) help you create filled shapes. When you create a shape with a fill and stroke, the two elements are not grouped together.

When you have multiple drawings on the same layer, you can use a fill to cut away another fill or use a stroke to divide a fill into two separate regions. For example, create a shape with a fill on the Stage and then draw a differently colored stroke across that shape on the same layer. You can select the fill on either side of the stroke and separate it from the shape, as shown in the following figure.

To use a hairline stroke, set the thickness in the Property inspector to hairline. A hairline stroke is a very thin line that does not grow in thickness when you scale or zoom it in. Other strokes appear larger if you zoom them in (this includes scaling a shape using animation).

All fills or strokes that touch that have the same color are selected as a single element on the Stage; however, if you draw two shapes that are different colors on the same layer and then move one over top of the other, the fill underneath is lost. You can use this feature to "cut away" parts of a shape. For example, you might have a red and blue circle on a layer, and then overlap the red circle over the blue circle. If you select and move the red circle, you are left with a blue crescent similar to the one in the following figure.

Using the Selection Tools

There are several tools in Flash that you can use to make selections. You have used the Selection tool already. You can also use the Lasso tool to draw lines around objects to select them, and the Lasso has modifiers that let you select objects by drawing lines freehand, or by clicking points to make a straight edge shape around objects in "polygon" mode. The Lasso also has a Magic Wand modifier that lets you select a single color or similar adjoining colors from vector drawings or bitmap images that have been broken apart. When you have the Lasso selected, you can set the tolerance properties for the magic wand by clicking the Magic Wand Properties button in the Options area of the Tools panel.

A gradient is a gradual transition between colors, and you can create gradients as a fill. Gradients add more file size to your documents than solid colors do, and they also take more computer processing power to render. If you use gradients in your files, you should create them in Flash to reduce the file size.

If you don't want to change the shapes you draw using these techniques, separate your graphics onto their own layers. If you do this, shapes don't join or they separate when they overlap or intersect.

Changing drawing settings

When you set up Flash, you can make specific settings to control how the drawing tools work. These settings can change how the drawing tools make strokes, and how objects snap to each other or guides. Some of these tolerance settings depend on how zoomed in the Stage is or the monitor's resolution. Settings can be turned on or off as well. To access the preferences for drawing tools, select Edit > Preferences (Windows) or Flash/Flash Professional > Preferences (Macintosh). When the Preferences dialog box opens, select the Editing tab to access the drawing settings.

Connect lines:
Controls three functionalities in Flash. The preference sets how close a line end has to be drawn to another line before they snap together. The setting also controls how vertical or horizontal a line has to be before it's drawn exactly vertical or horizontal when you create it. Finally, the setting controls how close objects must be before they snap to each other when you have Snap to Objects enabled.

Smooth curves:
Controls the amount of smoothing that is applied to curved lines when you have the Straighten or Smooth modifiers enabled for the Pencil tool. When you set this option to "rough," curves are more accurately rendered to those you draw.

Recognize lines:
Sets how straight a line has to be drawn before Flash renders it perfectly straight.

Recognize shapes:
Controls the amount of precision that's necessary before a common shape (circle, rectangle, oval and square) is rendered perfectly when you draw shapes on the Stage using the Brush or Pencil. This setting controls the level of accuracy that is necessary before this happens. If you draw a shape that's similar to a rectangle, Flash changes it into a perfect rectangle.

Click accuracy:
Sets how close the mouse pointer must be before you select the object.

You can also modify the drawings you make by choosing Modify > Shape > Optimize. This will smooth curved segments and also reduce vector points. Doing this helps optimize the SWF file by removing data that lowers file size and improves performance.

Changing drawing modifiers

The options for drawing tools also extend to the Tools panel and Property inspector. After you make settings in the Preferences dialog box, you can set modifiers after you select a tool. Modifiers are usually buttons and values that you set each time you draw with a particular tool. You find many of these modifiers in the Options area of the Tools panel.

Rectangle:
Use the modifier in the Tools panel Options area to toggle rounded edges on and off. When the modifier is turned on, the four corners round to the number of pixels that you specify.

Pencil:
Select from several different drawing modes in the Options area of the Tools panel. Choose Straighten to draw straight lines and convert approximate shapes to perfect ovals, circles, rectangles, squares and triangles. Select Smooth to draw smooth lines, and choose Ink to draw lines only with minor smoothing applied.

Brush:
Modifiers let you choose a brush size and shape from two pop-up menus in the Options area of the Tools panel. If you use a graphics tablet that is compatible with Flash (for example, Wacom tablets), you can also apply the pressure and tilt modifiers. The Pressure modifier varies the width of the brush stroke depending on the pressure you apply to the tablet, and the Tilt modifier changes the angle of the brush stroke. The Brush Mode modifier lets you select among several different ways in which the brush fills objects on the canvas. For information on the Lock Fill modifier, see the description for Paint Bucket.

PolyStar:
If you select this tool, click the Options button in the Property inspector. Select Polygon or Start to choose a shape the tool will create and a number of sides for the shape. For Star Point Size, you can enter a value between 0 and 1 for the star's depth.

Paint Bucket:
The gap size modifier lets you choose Don't Close Gaps to close gaps manually before you fill the shape. Or, you can select a close option so Flash fills shapes even if they have small gaps in the drawing. Large gaps usually have to be closed or made smaller before the shape can be filled. If you select the Lock Fill modifier, all the objects you paint on the Stage share the same fill. This means if you select this modifier and use a gradient or bitmap fill, the same gradient spans across all of the objects as shown in the following figure.

Free Transform:
Select the Rotate and Skew or Scale modifiers to modify the object's appearance after you select an object using the Free Transform tool. If you select a raw graphic, you can additionally use the Distort and Envelope modifiers to change the graphic.

Using colors in your graphics

You already chose colors to use in earlier exercisesspecifically for the background of your documents. When you select colors, you choose them from a palette, or you enter a hexadecimal value. You also select colors for fills and strokes. There are different kinds of palettes you can use, or you can create your own. There are several different parts of the Flash workspace in which you can select colors to use. You can select different palettes from the Color Mixer panel (Window > Design panels > Color Mixer), and you can add custom colors to a palette or remove colors using the Color Mixer panel. To add a color to a palette, choose a color in your work or on the desktop by using the Eyedropper tool, and select Add Swatch from the panel's Options menu (the button in the upper right corner of the panel opens this menu).

You can define colors in several different ways, which are called color modes. A color mode is a way of defining a colorso you can describe or represent a single color in several different ways, depending on the color mode you use. You can switch between the modes using the Color Mixer panel's Options menu. You can use these color modes in Flash:

RGB (Red, Green, Blue):
Adds three double-digit numerical values to define a color.

If you select a fill color using the Eyedropper tool, you can apply that new color only to other fills. If you select a stroke color, the selected color can only be applied to other strokes.

HSB (Hue, Saturation, Brightness):
Uses a value for the degree of rotation on the color wheel, and percentages for saturation and brightness.

Hexadecimal:
Uses a base-16 system, which is a combination of six numbers and letters.

You might be familiar with the hexadecimal color mode if you have writte111 because it is the standard color mode used on the Web. It is the color mode you will use in this book as well.

The Eyedropper Tool

Use the Eyedropper tool to select colors in your document or on the desktop to use in your workselect the tool and then click a color. You can use the Eyedropper to select colors in a palette, on the Stage, or on the desktop; and, you might use it to replace the currently selected color. You can use the Eyedropper to help match colors with one another or quickly pick up a color from a layout you designed in Photoshop or Fireworks. To select colors using the Eyedropper outside of the Flash authoring environment, click a color control square in the Tools panel, but do not release the mouse button when you drag the cursor. Move the Eyedropper anywhere on the desktop. When you find the color you want, release the mouse button, and the Eyedropper selects the color you released the mouse button over.

Editing shapes

You can set and modify the color of the stroke and fill using the color controls in the Tools panel, and several properties of a shape using the Property inspector. For example, you can use the Eyedropper to select a new color and replace a fill. Or, you can use the Ink Bottle tool to apply a new stroke or a new stroke color to a fill on the Stage.

When adding a fill to a shape, you can use the Options area in the Tools panel to make settings about how large the gaps in an open or closed shape can be.

To change the properties of a vector graphic, you need to select it so there is a cross-hatch over the shape. Click the Selection tool in the Tools panel, and then click the fill or stroke to select it. Double-click the shape's fill to select both the fill and stroke. Double-click a stroke to select all sides of a stroke that has multiple sides.

If you select an object and see a bounding box around the selection, you need to double-click the object to edit the symbol directly. You can then move the object around the Stage or change its properties in the Property inspector.

When you want to change the shape of an object, such as bending a line or moving a point, you then need to deselect the object and move the cursor near a corner of the shape until a special cursor appears, as shown in the following figures.

When you see the special cursor, you can click and drag the point or line to change the drawing's shape and dimensions, or change a straight line into a curved one. Move the cursor over an edge (not a corner) to change it into a curved line.

Grouping Drawings

If you want to change several objects or drawings as a single entity, or move them around the Stage as such, you need to group them. To group objects, you need to select them on the Stage and then select Modify > Group. Grouped objects do not behave like a symbol, so they are not added to the Library. Therefore, if you need to reuse these grouped items in your document you should change them into a graphic or movie clip symbol instead.

Using guides, snapping, and alignment

When you lay out an interface, it is particularly important to be able to align objects to each other or at specific locations on the Stage. One of the most important tools is snapping. In Chapter 2, you made sure that snapping was turned on so you could add an object to a motion guide. This meant that the object could easily attach to the path. Flash has several tools available to help you accurately place objects on the Stage, as well as snap them to each other.

If you do not want to accidentally move guides on the Stage, make sure that you lock them (View > Guides > Lock Guides).

First, you should make sure that you enable snapping in the authoring environment. Select one or more options from the View > Snapping submenu or click the Snap to Objects button in the Tools panel. As you can see, there are several options for different kinds of snapping in the authoring environment.

To add guides to the Stage, you need to view rulers (View > Rulers) and then click and drag from the horizontal or vertical rulers. Green lines represent guides on the Stage, and objects can snap to these lines. Guides are useful for tasks such as aligning objects and measuring. You can hide/view, clear, lock/unlock, or edit guides by selecting an option from the View > Guides submenu.

When you enable Snap Alignment (View > Snapping > Snap Align), you see dotted lines on the Stage when you drag an object. The lines appear to show you the object's relation to other objects on the Stage. You can set the number of pixels where this line appears. If you set the feature to Horizontal Center alignment, the dotted line appears when the objects have their center vertices aligned. Otherwise, the lines appear when the edges are aligned and a specified number of pixels apart. You can make these settings by selecting View > Snapping > Edit Snap Align.

You can align objects with each other using object snapping, which lets you snap an object directly to another object's edge. Or, you can snap objects to a guide or the grid. When you have the Snap to Objects modifier selected in the Tools panel, you see a snap ring change to a larger ring when the object will snap to another object. (This occurred in Chapter 2 when you snapped an object to a motion guide.)

Finally, you can use pixel snapping to snap objects to actual pixels or lines on the Stage. Objects snap to a pixel grid on the Stage, which is visible if you magnify the Stage by 400% or greater. Select View > Snapping > Snap to Pixels to enable this option.

The Align panel (Window > Design Panels > Align) helps you align, distribute, or resize objects with each other or with the Stage. If you want to align several buttons with each other, select all the buttons you want to align and then click one of the Align buttons in the top row of the Align panel. You can also distribute and space objects in relation to each other by using the many buttons in this panel.

Aligning objects and layout is important when you are creating interfaces and graphics. Practice using these tools in Flash to help you gain the precision that is often necessary when animating and laying out an interface.