In Merge Drawing mode, overlapping fills or strokes of like color will be joined and differing colors can be used to destroy vector segments. When used properly, merge drawing is a powerful Flash feature. If you’re careless, however, it can ruin your artwork.

To understand Merge Drawing mode, it helps to understand how strokes and fills behave in Flash. You will learn more about this throughout the chapter, but for now you can see the difference between the two drawing modes with a few simple shapes. If you want to try things along with the text, start by selecting the Rectangle tool and turning Object Drawing mode off.

When you draw shapes in Merge Drawing mode, they are what you might call “unprotected” because there is nothing to prevent them from interacting with other shapes in the same layer. If you draw a rectangle on the stage using the Rectangle tool and then switch to the Selection tool, you will see that you can select each segment of the shape’s stroke and fill with a separate single click. You’ll learn more about selection techniques later, but for now just notice that the shape is vulnerable to your selecting and even editing specific areas without manipulating the underlining vector path directly.

If you use the Line tool to draw a line all the way through the middle of the shape, the shapes interact and the line divides the rectangle in two. At first, this is not immediately apparent. As you would expect, you can drag the Selection tool over all the artwork to select both the rectangle and the line, as shown at the top of Figure 2-2.

Figure 2-2. Selecting a square and line created with Merge Drawing mode (top) and selecting and moving a portion of the merged shapes (bottom).

When you click on either side of the shape fill, however, only that segment of the fill is selected. Furthermore, when you double-click the fill, the fill and the surrounding strokes, including the new dividing line, are selected. You can even drag with the mouse or use the arrow keys on your keyboard to move the selected area away from the original shape, as shown in the bottom of Figure 2-2.

If you consider the combined shape before pulling it apart, the strokes and fill are divided at every intersection. The fill can be isolated into two parts, and, perhaps less obviously, the stroke can be isolated into nine parts. The four sides of the rectangle result in six parts (because two sides are divided by the line passing through them), but the dividing line is also subject to interaction from another shape. Accordingly, it is divided into three parts: above, inside, and below the rectangle.

When Object Drawing mode is enabled, you are protecting shapes from interacting. This behavior is similar to drawing two discrete objects in Adobe Illustrator. Without intervention from you, those two objects won’t typically join or intersect each other.

When you draw a shape with Object Drawing mode on, Flash encapsulates the shape in a wrapper of sorts—hermetically sealed for your protection. You can still edit the shape, but the object wrapper prevents shapes from interacting the way they would if Merge Drawing mode were enabled.

Remember the Merge Drawing mode example of the line dividing a rectangle? This time, turn Object Drawing mode on, create a circle with the Oval tool and use the Pencil tool to draw a line over it. Because the object wrapper protects the two shapes from interacting, clicking on one half of the circle will select the entire circle, rather than a portion of it. Moving the selected shape to the right (as in the Merge Drawing mode example), both shapes remain intact and the line’s position is unchanged. This contrasting behavior can be seen in Figure 2-3.

Figure 2-3. Selecting a circle and line created with Object Drawing mode (top) and selecting and moving only the circle (bottom); shapes remain discrete and can be moved independently

The Drawing Mode toggle button in the Tools panel doesn’t change existing assets from Merge Drawing mode to Object Drawing mode, or the other way around. Changing the setting affects newly drawn assets only. Using the Modify menu’s Group and Break Apart options, however, you can achieve an effect similar to changing an asset’s drawing mode.

When you have an unprotected shape that was created using Merge Drawing mode, you can select and group the asset (Modify→Group) to protect it. Although it makes more sense to think of grouping as collecting more than one object into a single unit, you can also group a single shape to prevent it from interacting with other shapes.

When you have a Drawing Object (a shape created while Object Drawing mode was enabled), you can convert it to an unprotected shape by breaking it apart (Modify→Break Apart). This is handy when you want to join or cookie-cut two shapes that were previously created as Drawing Objects.

You will see this process appear more than once throughout this book, since you can use it to degrade a complex object into a less complex object. For example, you can break a text field into individual editable letters, and then break those letters again into vector shapes.

Alternatively, you can edit the contents of a group or Drawing Object without breaking it apart. To do this, double-click the object. The application will enter an editing mode without radically changing the interface. This allows you to edit groups and Drawing Objects in the context of any surrounding art. While in editing mode, double-clicking any unoccupied area of the Stage or Pasteboard will return you to the Stage.

The Edit Bar just above the Stage shows a “breadcrumb trail” of buttons leading up to your current location in a chain of possible nested objects you are editing. For example, if you edit a Drawing Object placed on the Stage, the Edit Bar shows a button called Scene 1 (the default name for the main Timeline), followed by the text Drawing Object to mark your current location. Clicking the Scene 1 button will exit editing mode, and you can again access the Stage.

If you group two Drawing Objects together and want to edit one, you must first double-click the group to edit its contents and then double-click the Drawing Object to edit the shape therein. The Edit Bar ultimately includes buttons that say Scene 1 and Group, followed by the text Drawing Object—again showing where you are. In this case, you can click the Edit Bar’s Group button to back out one level in editing mode, or the Scene 1 button to again access the Stage.

Some users who are new to Flash go through a short period of adjustment when it comes to the drawing tools. In Flash, the traditional object-based model is not the primary drawing technique. Unlike Adobe Illustrator and others, Flash allows you to work with vectors in a very fluid, natural way. Instead of manipulating curves with vertices and control handles (common to object-based graphics), you can just grab hold of a line and drag it (Figure 2-4).

Figure 2-4. Manipulating strokes by dragging

Figure 2-4 shows just such a manipulation in progress. To accomplish this, start by placing your cursor over the shape you wish to manipulate. To help identify which object you might be clicking with the Selection tool, a small icon, often called a cursor badge, appears in the lower-right corner of the cursor. A curve appears when you roll over a line segment, and a corner appears when you roll over a corner point. In Figure 2-4, you can see a curve to the lower right of the cursor, reaffirming that the cursor is over a line, not a corner. If you click and immediately drag the mouse, you can manipulate the selected stroke or fill. By contrast, if you click and let go, you select the stroke or fill, and subsequent drags will move the selected element to a new location.

Further in the “natural drawing” vein, you can create vectors with a paintbrush or remove them with an eraser. Each time you paint with a brush, it may feel like you’re painting with pixels, but the resulting shape will be comprised of vectors.

Grabbing and dragging lines may eventually become your preferred method of finessing a curve. However, it is also possible to manipulate curves with the same precision afforded in other object-based drawing applications. Flash offers the same Pen and Subselection tools as Adobe Illustrator and allows you to create, add, subtract, and transform vertices.

To create the s-shaped Bézier curve shown in Figure 2-5, for example, you use the Pen tool. Starting at the upper-right corner of the S, you can drag a bit upward along a path tangential to the desired curve. Moving to the second point at the top of the S, you can drag to the left, again forming a tangent to the curve. To finish the curve, follow around the S, dragging tangentially for the four remaining vertices. Figure 2-5 shows two of these vertices selected (the solid points at the top-left and bottom of the curve) using the Subselection tool. The control handles jutting out of any point at tangents to the curve can be dragged to reshape the curve.

Figure 2-5. Manipulating strokes by dragging

As with drawing, selecting objects in Flash can be approached from both the “natural” and “precise” viewpoints. You’ll learn specific selection subtleties, as they apply to strokes and fills, in a moment. However, it’s worth mentioning in the context of drawing styles that you can select individual vertices if required or simply drag the Lasso tool over a shape, as shown in Figure 2-6. Despite the fact that you are dragging your Lasso tool over a vector shape, you can select a subset of that shape with the ease of surrounding pixels in a bitmap.

Figure 2-6. Selecting using the Lasso (top) and Subselection tools

You will quickly realize that some attention is required when selecting shapes if you don’t intend to leave fragments of your object behind. This is because you can select objects in Flash with a great deal of granularity. For example, it is not only possible, but even simple, to select a shape’s fill and stroke separately. It is even possible to select a fragment of a stroke very easily, even accidentally.

Figure 2-7 shows the visual feedback Flash provides upon various selection actions. Figure 2-7 is the result of a single click in the interior of the shape. Look carefully, and you’ll see that only the fill is selected. If you were to try to move this shape, you would leave behind, and possibly overwrite, its stroke.

Figure 2-7 shows the result of a single click on the shape’s stroke—the right side in this case. A single click on a stroke selects only the clicked-upon fragment between two corner or intersection points. Only for ellipses or circles will the entire stroke be selected, because these contain no corners.

Figure 2-7. Selecting fill only (a), stroke segment only (b), complete stroke only (c), and fill and stroke (d)

Figure 2-7 shows the result of double-clicking the stroke. A double-click selects all contiguous parts of the stroke. In the example, all four sides of the square are selected, despite the intervening corner points.

Finally, Figure 2-7 shows the result of double-clicking the fill of the shape. This has the effect of selecting not only the entire contiguous fill, but also the entire surrounding stroke. If you want to be sure to grab all parts of the shape, use this method. Alternately, you can drag over the object with the Selection or Lasso tools to achieve the same result.

The Properties panel (Window→Properties) is among the most often used Flash panels. It is context-sensitive and provides access to most properties that are editable within the Flash interface. Fill and stroke properties (Figure 2-8) can be found in the Fill and Stroke section of the panel when a shape is selected and are itemized in the following list:

Figure 2-8. Fill and stroke properties

Although the Properties panel is typically the go-to way of assigning most properties in the Flash interface, three tools are available to make this assignment process quick and easy for strokes and fills. The Eyedropper tool in Flash is unique among similar tools in other applications. It not only retrieves color values, but also retrieves all stroke or fill properties and automatically switches to a tool useful for assigning these properties to another stroke or fill.

After using the Eyedropper, Flash automatically switches to either the Paint Bucket or Ink Well tool, depending on whether you clicked on a fill or stroke, respectively. Both tools work in a similar fashion, applying properties to the object on which you click, but the Paint Bucket affects only fills, and the Ink Well affects only strokes.

When hovering over an object, the Eyedropper shows a cursor badge icon in the lower-right corner of the cursor. When over a line, a small line appears; when over a fill, a small paintbrush appears. Although the Eyedropper prepares only properties relevant to the element on which you clicked (prepping stroke color only when clicking on a stroke, for example), it is possible to query color from a stroke and apply it to a fill, and vice versa. If you hold down the Shift key when using the Eyedropper, Flash will populate both stroke and fill colors for your subsequent use of the Paint Bucket or Ink Well tools. For instance, this allows you to pull a color from a stroke and then apply it to a fill without an interim trip to the color tools.

Perhaps the quickest way to access or create a color is by using the pop-up color palette. This palette is available in the Tools, Properties, and Color panels, and anywhere a color chip is available. Figure 2-10 shows the palette accessed from the Fill color chip in the Tools panel.

Figure 2-10. Pop-up color palette, accessed from the Tools panel

Using the panel is quite simple. You can select from any precreated solid colors (found in the middle of the palette) or gradients (found at the bottom of the palette). You’ll learn how to add swatches in the next section.

You can also create custom colors on the fly using the tools along the top of the palette. The first item is a preview of the color you’re selecting. The second item serves two functions. It is a preview of the hexadecimal value of the color you’re selecting and allows you to change the value on the fly.

The next item in the row is the alpha value, or percent of transparency in any color. A maximum value of 100 is opaque, while a minimum value of 0 is transparent. The red line button indicates no value, allowing you to remove color from an object. Finally, the color wheel opens the operating system color picker as an alternate color-selection tool.

The Swatches panel is the repository of color swatches that appear in the pop-up palette. You can leave the Swatches panel open and select from it if you prefer not to use the pop-up palette, and anytime you create a custom color (solid or gradient), you can add it to the swatches in this panel. With the color active, the cursor will change to a Paint Bucket when rolling over an empty area of the appropriate section (solids or gradients) of this panel. Clicking will add the color to the end of that area of the palette. Thereafter, the color will become available to any interface element that uses the pop-up palette. Using the panel-specific menu (the button for which can be seen in the upper-right corner of the panel in Figure 2-11), you can also load color swatches from, or save to, an external source.

Figure 2-11. Swatches panel

The Color panel is where you are most likely to create or edit custom colors. As in the Tools panel, here you can choose to edit stroke or fill colors, but the feature set of the Color panel is more complete. In addition to offering input for hexadecimal color values and percentage alpha values, you can also edit standard 0–255 range RGB color values—both by pop-up slider and text input. You can also use a built-in color picker and lighten or darken any color. While editing, the color appears in a large horizontal stripe at the very bottom of the panel for easy preview. In Figure 2-12, for example, the panel is configured to edit a linear gradient.

Figure 2-12. Color panel

Shown in Figure 2-13, the Kuler panel can be found in the Windows→Extensions submenu and offers access to an online repository of user-defined color families. This panel requires an Internet connection and connects to Adobe’s Kuler service. You can browse, search, and submit families of up to five colors for use in your work. Unlike the Color panel, this extension allows you to use several color theories when creating families in which colors affect one another in a variety of ways. When you’ve found a family you like, you can automatically add it to your Swatches panel. For more information, visit the Kuler site, http://kuler.adobe.com/.

Figure 2-13. Kuler panel

When working with a brush, you can choose a paint mode that will affect what is colored by that brush. You can access these modes by the first context-sensitive option, shown in Figure 2-14.

Figure 2-14. Brush paint modes

The modes are fairly self-explanatory and apply primarily to unprotected shapes (created in Merge Drawing mode or broken apart). Some work with Drawing Objects and some have a few subtleties worth mentioning. Paint Normal offers no special effect and allows you to return to this setting after using another option. Paint Fills paints only fills, leaving strokes untouched. Paint Behind affects only areas around the shape, leaving fill and strokes intact. Paint Selection affects only selected fills and strokes. Paint Inside paints only within a shape, as long as you originate your painting within the same shape.

Erase modes (available as an option of the Eraser tool) control how the eraser affects shape strokes and fills, and are similar to Paint modes. Erase Normal, Erase Fills, and Erase Inside behave the same way as their painting counterparts. Erase Lines affects only strokes, and Erase Selected Fills erases only selected fills, but not selected strokes (differing slightly from Paint Selection). A related context-sensitive tool is also available—the Faucet tool automatically erases any contiguous stroke or fill.

The Free Transform tool applies a series of handles and a transformation point on any selected object. Depending on which handle you grab with your mouse, you can alter the appearance of the object in different ways. To help you with this process, the cursor changes to a shape that is specific to each available task.

Figure 2-15 shows all the possible cursors when using the Free Transform tool. Moving clockwise from the lower left, the cursors represent move, skew vertically, skew horizontally, rotate, scale horizontally, scale vertically and horizontally, and scale vertically. Finally, the cursor in the center of the shape is for moving the point around which transformations occur.

Figure 2-15. Free Transform tool cursor feedback

Figure 2-16 shows the effect of moving the transformation point. The top graphic shows the process of moving the transformation point from the default center of the object to the upper-left corner. The bottom graphic shows that, when rotating, the object is rotated around the new transformation point rather than the center of the object as before.

Figure 2-16. Changing the transformation point

The Transform panel (Figure 2-17) offers options to scale horizontally and vertically (independently or proportionally), rotate, and skew an object. If the object is an instance of a symbol, such as a movie clip, you can also rotate on any 3D axis and move the 3D center point of the instance along any 3D axis, both of which you’ll learn more about in Chapter 8.

Figure 2-17. Transform panel

There are three compelling reasons to use the Transform panel. First, numeric entry for property values allows for greater precision. Reasons two and three are the unsung heroes in the lower-right corner of the panel. The first of these two buttons duplicates your most recently completed selection and transformation, akin to step and repeat in other applications. For example, you could create a series of copies of a movie clip that are progressively larger in size. The second button removes all transformations and returns the instance to its original state.

The final transform tool, called the Gradient Transform tool, is used to edit gradients. It can be found in the same transform tool menu as the Free Transform tool. To more easily understand how this tool works, create a rectangle shape with a radial gradient fill. Figure 2-18 shows a rectangle with a red stroke and red-to-white radial gradient so that you can easily differentiate it from the black interface elements of the Gradient Transform tool.

Figure 2-18. Transforming a gradient

With the Gradient Transform tool active, click the radial gradient fill you created. A circle with a line across its diameter and a handful of icons will appear, as shown in Figure 2-18.

If you can’t see the tool’s interface, it probably means that the scale of the gradient is too big to fit in your view. Look for this symptom when you see what looks like a solid color instead of your expected gradient (if you zoom in closely to a gradient, it will look like a single color). Use the Zoom tool (or Zoom menu in the Edit Bar) to zoom out until you see the Gradient Transform tool interface and scale the gradient down. In this case, use the middle of the three icons on the circumference of the circle. This scales the gradient proportionally.

Once you have the interface in view, look at the three grouped icons at the lower right. The first icon, an arrow inside a square, scales the gradient in only one direction, always along the diameter line. Try this first so your radial gradient is no longer a perfect circle.

You can use the diameter scaling option in conjunction with the bottom of the three icons (a rotation arrow), which rotates the gradient. Using these two tools, you can scale a gradient along any angle. As mentioned previously, you can scale the gradient proportionally by using the middle of the three icons, an arrow inside a circle.

Finally, the center of the interface contains two icons. Dragging the circle icon drags the location of the gradient within the fill. Dragging the triangle above the circle skews the gradient in either direction along the diameter line. Figure 2-18 shows the arrow all the way to the left of the fill, skewing the gradient to the left. This can create an illusion of movement. As with scaling, rotating the gradient first allows you to skew the gradient in any direction.

Now consider the idea that you can spray a symbol of your choosing instead of the default small square. You learned a bit about symbols in Chapter 1 and you will learn much more about them in the next chapter. Take a quick moment now, however, to review how to create a movie clip symbol. For this exercise, you’ll use a star.

In the Primitives menu of the Tools panel, where the tried-and-true Rectangle and Oval tools reside, you’ll also see the PolyStar tool. This tool can create multisided shapes (polygons) and multipointed shapes (stars, starbursts, and so on). To specify the shape you want to use, deselect any active selection by switching to the Selection tool and clicking on any unoccupied location of the Stage or Pasteboard. With nothing selected, choose the PolyStar tool. A Tool Settings section with an Options button appears in the Properties panel.

Clicking this button brings up a straightforward dialog, shown in Figure 2-21. Using this dialog, you can switch between polygon and star, and dictate the number of sides or size of the star points accordingly.

Figure 2-21. The PolyStar tool

After you’ve configured the PolyStar tool, drag your mouse on the stage to draw a small star, approximately 20 pixels × 20 pixels. Remember, this is going to be sprayed many times from a virtual spray can, so it needs to be small enough to look good in numbers, but big enough to see.

Next, switch to the Selection tool and drag over the entire star to select everything. As you did in Chapter 1, use the Modify→Convert to Symbol menu command. When the resulting dialog appears, choose Movie Clip for the Type property, a center registration point, and name the symbol Star.

Now that you have a symbol in your Library, you can use it instead of the Spray Brush’s default shape. Do so by clicking the Edit button at the top of the Symbol section of the Properties panel while the Spray Brush Tool is active. Figure 2-22 shows the result of spraying with the setting shown in Figure 2-21.

Figure 2-22. Spray Brush results

Knowing that the final project dimensions are 750×500 (as described in Chapter 1), it’s helpful to work from your template file. This not only allows you to preview your work in an appropriate setting, but it also contains a correctly positioned movie clip within which you can add your content. You will soon see that this will make it much easier to transfer your work from one file to another.

Most prominent on the home page is a title announcing the purpose of the project: an artist’s portfolio. As such, it needs a bold treatment to draw the viewer’s eye. A title will give way to falling shapes leading the user’s focus directly to the project navigation.

Before moving on to the primary graphical element of the page, you need to repeat the text exercise to add a small list of skills professed by the portfolio owner. Because the process is nearly identical to what you’ve just accomplished, this segment stresses only variances in the tasks outlined previously. From a practical standpoint this is more concise, but, more importantly, it’s also good practice because not every step is described.

With the page’s text elements behind you, it’s time to move on to the graphic centerpiece.

To reduce the weight of the cascade but still draw the viewer’s eye all the way to the navigation panel, change the fill from solid black to a linear gradient ending in an alpha value of 0. This fade out to transparency will soften the transition to the bottom of the screen.

Tying the stippled underlines in with the overall distressed look of the portfolio, it’s time for grime. Use the Spray Brush tool to quickly and easily add black shapes of random size along the bottom of the screen:

In the next chapter, you’ll practice with the Deco tool and get an early taste of ActionScript (just for fun). The example will provide an entrée into the use of Flash symbols, the topic of the next chapter.

You’ll also practice editing vectors using both the Selection and Subselection tools, and you’ll create your first mask—a layer that will only make parts of specific underlying content visible to the user.