Drawing in Flash CS6 - Flash Professional CS6 - Adobe Creative Suite 6 Design and Web Premium All-in-One For Dummies (2012)

Adobe Creative Suite 6 Design and Web Premium All-in-One For Dummies (2012)

Book VII

Flash Professional CS6

Chapter 2: Drawing in Flash CS6

In This Chapter

check.png Creating shapes and lines

check.png Editing and selecting shapes

check.png Tweaking and splicing shapes and lines

check.png Transforming shapes and artwork

check.png Creating and modifying text

check.png Working with colors and gradients

check.png Using the Brush tool

Many great creations start with the most basic shapes and build from there. In this chapter, you discover the secrets of drawing shapes and lines and working with colors in Flash. If you’re accustomed to drawing in other Adobe applications such as Illustrator, you’ll find a lot of the same tools and principles apply here.

Drawing Shapes and Lines

To get your creation started, become familiar with the Shape and Line tools on the Tools panel and use them as the starting point for everything from basic buttons to complex illustrations.

When you’re ready to create more complex artwork beyond the capabilities offered by the Shape and Line tools, the Pen and Pencil tools are standing by. These tools work quite differently, and for that reason should be chosen based on the kind of artwork you want to create.

The following sections show you how to get started creating basic shapes and lines.

Drawing basic shapes with the shape tools

imageOn the Tools panel, locate the Rectangle tool; also notice a small arrow in the lower-right corner of the icon, which means that more tools are hidden underneath. Click and hold the Rectangle tool to reveal the Oval and Polystar tools; select the shape tool you want to use.

Before you draw the shape, set some colors for it by using the two swatches at the bottom of the Tools panel. The Fill color swatch (indicated by the paint bucket icon) lets you specify a color to fill your shape. The Stroke Color swatch (indicated by the pencil icon) controls the outline color.

Flash lets you choose colors from the Swatches panel. You can add your own colors to this panel, but for now, choose one of the available colors for your shape’s fill and stroke.

tip.epsClick and drag on the stage to create a shape. Notice that shapes are drawn by default from the left corner outward. You can draw shapes from the center (which is sometimes easier) by holding down the Option (Mac) or Alt (Windows) key while drawing the shape.

To constrain a shape proportionally, hold down the Shift key while drawing or resizing.

Merging shapes

If you overlap two or more shapes in Flash, they automatically merge, or become one complete shape. You can take advantage of this behavior by using an overlapping shape to knock out another, or you can make more complex shapes by combining simpler ones.

You may also find that using overlapping strokes results in divided fill areas, which can be a desirable effect. Experiment by drawing and overlapping shapes and using the Selection tool to select parts of the resulting object.

Creating perfect lines with the Line tool

imageThe Line tool makes constructing perfect, straight lines quick and easy. To create a straight line, choose the Line tool from the Tools panel, click and drag on your stage where you want the line to start and release the mouse button where you want the line to end.

To modify your line’s color or appearance, select it with the Selection tool and use the Property inspector to change the stroke color and size. You also find a Style drop-down list, which lets you choose among straight, dotted, dashed, and artistic stroke styles.

tip.epsTo create perfectly vertical or horizontal lines, hold down the Shift key while using the Line tool. You can also create diagonal lines in 45-degree increments by using this same method.

Creating lines and curves with the Pen tool

Using the Pen tool may be a bit different from tools you’re used to, unless, of course, you’ve used the Pen tool in applications such as Illustrator or Photoshop. The Pen tool isn’t a freehand drawing tool; rather, you use it to create paths, or outlines, composed by connecting anchor points. When you click and create new points, lines are automatically drawn to connect those points. You can then either bend those lines into precise curves or leave them straight.

The best way to understand the Pen tool is to practice working with it. Visualize a shape you want to draw (for example, a leaf) and try to create it with the Pen tool.

To get started, follow these steps:

1. Select the Pen tool from the Tools panel.

2. Use the Color swatch on the bottom of the Tools panel to set a stroke color.

3. Click to set the first point on the stage and then construct a line by clicking again to set a second point where you want the line to end.

4. Click to set a new point and before releasing the mouse button, drag to the left or right to bend the new line into a curve.

The more you drag in a particular direction, the more extreme the curve you create.

5. Continue creating new points and experimenting with different curves.

6. Move your mouse pointer over the first point you created (a loop appears above the icon) and click to close the path and complete the shape.

tip.epsThe Pen tool attempts to continue a curve in the same direction even after a new point is set. To reset the last point drawn back to a straight line, hold down the Option (Mac) or Alt (Windows) key and click the last point created before setting a new one.

Drawing freehand with the Pencil tool

The precise nature of the Pen tool is great for certain situations, but if you prefer the intuitive feel of freehand drawing or want to create more natural or rough artwork, consider using the Pencil tool.

An attractive feature of the Pencil tool is that it has three different modes to choose from. Each mode provides a different level of smoothing, so even if your hand isn’t the steadiest, the Pencil tool compensates by automatically smoothing out lines or curves while you create them.

imageSelect the Pencil tool and choose the appropriate smoothing mode using the selector in the lower-right corner of the Tools panel:

check.png Straighten: Forces lines to the nearest straight line; perfect for drawing or tracing straight edges or boxy outlines.

check.png Smooth: Smoothes out lines or curves to the next closest perfect curve.

check.png Ink: Provides less smoothing and keeps lines and curves as natural as possible.

imageThe mode you select depends completely on what type of shapes and lines you’re trying to draw. If your shape is more diverse than one mode can handle, you can switch modes from line to line as needed.

Selecting and Editing Shapes

imageAfter you create a shape, you can select and move it by using the Selection tool at the top of the Tools panel. Flash shapes are easy to edit because you can select the stroke and fill independently to separate one from the other.

To select and move the stroke or fill only, follow these steps:

1. From the bottom of the Tools panel, choose a Stroke and Fill color using the color swatches.

2. Choose either the Rectangle or Oval tool, and click and drag on the stage to draw a new shape.

3. Select the Selection tool from the Tools panel.

4. Click either your shape’s stroke or fill once to activate it.

To select the entire shape, double-click the fill of your shape or use the Selection tool to drag around it on the stage. (See Figure 2-1.)

Figure 2-1: A selected fill (left) and stroke (right).

image

5. Click and drag the selected stroke or fill or use the arrow keys to separate it from the rest of the shape.

Modifying fill and stroke colors

You can choose your fill and stroke colors ahead of time before you start drawing, but if you change your mind, modifying colors is easy to do.

You can modify either the fill or stroke colors of a preexisting shape in these three ways:

check.png Select the entire shape and change its fill and stroke colors from the swatches in the Property inspector. (See Figure 2-2.)

Figure 2-2:Use the Property inspector to change the shape’s fill or stroke color.

image

check.png Select the entire shape and change the fill and/or stroke colors by using the Fill and Stroke swatches on the Tools panel.

check.png Specify colors on the Tools panel and use the Ink Bottle tool by clicking the stroke or use the Paint Bucket tool by clicking the fill.

To apply a fill color to your shape, select it on the stage and choose a color from the Fill swatch at the bottom of the Tools panel. To apply a stroke color, select the stroke on your shape and choose a color from the Stroke swatch at the bottom of the Tools panel. Alternately, you can choose the Paint Bucket tool and click on the fill of your shape to change the fill color, or select the Ink Bottle tool and click the edge of your shape once to set a stroke with the selected color.

tip.epsYou can also set Fill or Stroke colors from the Fill and Stroke section of the Property inspector when the Ink Bottle or Paint Bucket tools are selected.

imageTo remove a fill or stroke completely, select a shape and select None from either the Fill or Stroke color swatch.

Merge versus Object Drawing mode

Being able to freely tear apart shapes can be quite flexible and useful, though some people prefer to work with shapes as single objects (similar to how shapes in Illustrator CS6 behave). For this reason, Object Drawing mode was created; this optional mode automatically combines the stroke and fill of a shape into a single object, which you can move and resize as a whole. A shape drawn in Object Drawing mode has a bounding box around it; the stroke and fill are moved together as one object.

imageYou can enable Object Drawing mode when any drawing or shape tool is selected, as shown in Figure 2-3, by clicking the Object Drawing mode button at the bottom of the Tools panel. Try drawing a shape on the stage — notice that the shape appears with a bounding box around it and that the stroke and fill can no longer be individually selected and separated.

Figure 2-3: A shape drawn in Object Drawing mode.

image

To break apart a shape drawn in Object Drawing mode to a separate stroke and fill, select the shape and choose Modify⇒Break Apart. You can also double-click the shape to edit it within the Drawing Object itself.

imageUnlike shapes drawn in Standard mode, drawing objects can’t be merged simply by overlapping them; break apart any drawing objects first or choose Modify⇒Combine Objects⇒Union to merge them.

Splicing and Tweaking Shapes and Lines

You can easily dissect mergeable shapes (not drawing objects) by selecting only certain portions with the Selection or Lasso tools, as shown in Figure 2-4. Try drawing a marquee around only half the shape with the Selection or Subselection arrow; notice that only half the shape or line becomes selected, and you can then separate it.

Figure 2-4: To reshape, use the Selection tool to grab an edge or a corner.

image

Tweaking a shape with the Selection and Subselection tools

If you need to tweak the shape beyond its original form, you can use Selection or Subselection tools to tweak, distort, and reshape. To tweak or reshape with the Selection tool, move it outside and close to an edge or corner of your shape; notice that a small curved or angled line icon appears next to your pointer. Click and drag to bend, reshape, or distort the outline of your shape, as shown in Figure 2-5.

Figure 2-5: To modify a curve with the Selection tool, drag an edge.

image

tip.epsYou can use the Selection tool to bend straight edges into curves. Try it on a line or straight edge from a rectangle, and you’ll see that you can easily pull the line into a curve!

To tweak or reshape with the Subselection tool, click the outside edge or stroke of a shape to activate its path. Each point is represented by a hollow box. Click any point to activate it; click and drag it or move it using the arrow keys to reshape. (See Figure 2-6.)

Figure 2-6:Use the Subselection tool to modify specific points.

image

Editing a shape with the Lasso tool

When you need to create a selection with more precision than the Selection tool allows (for example, around an odd shape or a tricky area), use the Lasso tool. The Lasso tool draws freehand selections around specific areas of your artwork. To draw a selection with the Lasso tool, select it from the Tools panel and click and drag to draw a selection around the target area, as shown in Figure 2-7. Be sure to close the selection by overlapping the starting and ending points.

Figure 2-7:Select areas with the Lasso tool; close the path for best results.

image

You can perform partial selections only with raw (broken apart) shapes and lines. Artwork drawn in Object Drawing mode needs to be broken apart first (choose Modify⇒Break Apart) or modified in Edit mode. To enter a drawing object’s Edit mode, double-click it with the Selection tool.

Modifying artwork created by using the Pen and Pencil tools

Interestingly enough, although the Pen and Pencil tools behave in completely different ways, both ultimately create the same element: a path. A path can be filled (if closed) or modified on a point-by-point basis, or you can apply a stroke to it.

To fine-tune a path, choose the Subselection tool (the white arrow) from the Tools panel. Click the path; it becomes highlighted, and the points show up as hollow boxes. You can now select any individual point and selectively drag it or move it with the arrow keys to reshape the path.

To adjust a curve by using the Subselection tool, highlight the point adjacent to the curve you want to modify. A handle appears; you can grab and move this handle to adjust the curve.

To add or subtract points, click and hold down on the Pen tool to select the Add Anchor Point or Subtract Anchor Point tools. Click exactly on the path where you want to add an anchor point or click a point directly to remove it.

Transforming Artwork and Shapes

After you have some drawing done, you may want to adjust the width, height, or rotation of your artwork. Depending on the level of precision you’re looking for, you can do this in two ways: manually by using the Transform tool or by dialing in exact values on the Transform panel.

Using the Free Transform tool

imageSelect a shape or some artwork on your stage and then choose the Free Transform tool from the Tools panel. A bounding box with handles at all four sides and corners appears, as shown in Figure 2-8. You can drag any of the side handles to resize the width and height.

Figure 2-8:Using the Free Transform tool to rotate and resize.

image

To rotate your artwork, hover over any corner handle until you see the rotation icon (a circular arrow) and then click and drag to rotate the artwork freely.

To resize your art proportionally, hold down the Shift key while dragging a handle. If you hold down the Shift key while in Rotation mode, it limits your movements to precise 45-degree increments.

Using the Transform panel

For those times when you need to dial in exact transformation values, you can use the Transform panel (shown in Figure 2-9); choose Window⇒Transform to open it. The Transform panel displays text boxes you can use to enter exact transformation values for width and height or a specific rotation angle in degrees.

Figure 2-9:Enter precise amounts of scaling, rotation, and skewing.

image

Follow these steps to transform artwork by using the Transform panel:

1. Select the object you want to transform on the stage and open the Transform panel by choosing WindowTransform.

2. To increase the size of the artwork, enter width and height percentage values higher than 100 percent; to decrease the size, enter values less than 100 percent. To keep the sizes proportional, select the Constrain icon.

3. To rotate your artwork, select the Rotate radio button, click the number to activate the text box, type a value higher than 0 degrees, and press Enter.

Rotation is performed clockwise; to rotate counterclockwise, enter a negative number.

Skewing your artwork

Skewing transforms your artwork on a 3D plane and can add interesting perspective to shapes. You can perform skewing from the Transform panel by selecting the Skew radio button and entering values for horizontal and vertical skew amounts.

Give it a try: Select your shape, type some skew values, and press Enter to see the transformation applied. If you’re not happy, don’t fret; simply click the Remove Transform button in the lower-right corner of the Transform panel to restore your normal settings.

Working with Type

imageIf you’re looking to display important information in your Flash movie or you simply want to add creative text elements to your design, the flexible Text tool in Flash can create attractive type for design elements, buttons, titles, and informational text areas.

TLF versus classic text

Flash CS6 features several new typesetting improvements in the new TLF (Text Layout Framework) text engine, bringing to the table many abilities already found in applications such as Illustrator and InDesign.

Here are the new Flash TLF text features:

check.png Vertical and Vertical Left-to-Right orientation

check.png Multicolumn text areas

check.png Threaded text across several type areas

Though TLF text is the default when you work with the Text tool, you still have the option to set text areas as classic text, providing support for older movies and projects.

Follow these steps to create basic type on the stage:

1. In a new or existing file, add a new layer to the Timeline by choosing InsertTimeline Layer.

2. Choose the Text tool from the Tools panel.

3. Click anywhere on the stage to create a text box and then enter some text.

4. Click and drag within the text box to select all the text you just entered, as shown in Figure 2-10.

5. Fine-tune the appearance of your text by selecting character, color, size, and other options in the Character section of the Property inspector.

Figure 2-10:Use the Property inspector to modify typeface, style, size, and color.

image

Creating multicolumn and threaded text

Like many existing Adobe applications, Flash now lets you split single text areas into multiple columns as well as thread text across several individual text boxes at once. This capability is especially handy if the amount of text in a box is too large for that area alone; using threaded text, you can make text that originates in one box flow into a different box elsewhere in your movie.

To create multicolumn text, follow these steps:

1. In a new or existing file, add a new layer to the timeline by choosing InsertTimelineLayer.

2. Select the Text tool from the Tools panel. Make sure that the text drop-down list at the top of the Property Inspector (below the <Instance Name> field) is set to TLF Text.

3. Click and drag on the stage to create a text box that has a fixed width and height.

The text box appears with a bounding box and handles on all four sides and corners, as shown in Figure 2-11.

4. To adjust the size of the box, hover the mouse pointer over a handle on any corner or side until a double arrow appears. Click and drag the handle to resize the box.

5. Click within the box and either type or paste some text into the box.

For best results, enter enough text until you eventually see a red plus sign appear on the out port (see Figure 2-11) of the box.

Figure 2-11:Anatomy of a text box (left). The new text box ruler guide (right).

image

imageTyping too much text in a fixed-size text box creates an overrun, indicated by a red plus sign in the out port of the text box.

6. With the Text tool still active, locate and expand the Container and Flow options in the Property inspector.

You should see a Columns option, already set to 1.

7. Click and drag over the 1 to set it to 2, or double-click the 1 and enter 2 instead.

This step creates two columns in the text box and reformats your text appropriately, as shown in Figure 2-12.

Next, you add a second text box and thread it to the first so that any text that overruns the first box automatically appears in the second.

8. On the same layer and with the Text tool selected, click the stage to deselect the first text box and then click and drag to draw a second text box somewhere next to it.

9. Use the bounding box handles to adjust the size of this new box on the stage.

10. Click the first text box on the stage to make it active, and click the out port directly (where the red plus sign appears).

imageThe icon changes to indicate that you’re carrying overrun text from that box.

11. Hover the mouse pointer over the new box you created, and click it to make it active.

A line appears between the two boxes, and the overrun text from the first box continues into the second, as shown in Figure 2-13. The two boxes are now threaded.

Figure 2-12:Set multiple columns for a text box in the Property inspector’s Container and Flow section.

image

Figure 2-13:Two text areas threaded together on the stage.

image

Transforming type

You can transform type just like shapes and artwork by using either the Transform tool or the Transform panel. Regardless of any transformations your type undergoes, it remains editable.

To transform a line of type, make sure that it’s active by first selecting it using the Selection or Text tools. To transform, choose the Transform tool or open the Transform panel.

Distorting and modifying character shapes

You can distort and modify type outlines just like any other shape or path. However, type is created on a special type path so that it can be edited at any point. You need to break your type characters off a path first in order to tweak any of their outlines.

To modify or distort type outlines, follow these steps:

1. Select the type you want to modify and choose ModifyBreak Apart.

2. If your type is longer than a single character, repeat Step 1 until the bounding box disappears from around the characters, and you see the stippled fill pattern within each character.

3. Use the Selection or Subselection tool to modify the outlines (as we demonstrate with shapes earlier in this chapter).

4. (Optional) Use the Ink Bottle tool to apply a stroke to the type.

tip.epsIf you’re familiar with Adobe Illustrator, think of Break Apart as the Flash equivalent of the Create Outlines command.

Creating Colors and Gradients

You’ve undoubtedly (or not) seen and made use of the built-in color swatches in Flash, but suppose that you want to use colors that are not included in the Swatches panel. Here’s where the Color panel comes into play. From this panel, you can mix and create your own color swatches, make gradients, and even apply transparency effects to existing colors on the stage.

You may have already seen the Swatches panel in action if you used it to select fill and stroke colors from the Tools panel and Property inspector. The Swatches panel exists on its own free-floating panel as well, which you can open by choosing Window⇒Swatches.

The 256 colors on this panel represent the web-safe color spectrum, which is optimized to ensure that all users, even those with monitors using lower color depth settings, can enjoy your creations.

You can add colors to the Swatches panel from the Color panel, which means that you have access to your own, custom colors from anywhere the Swatches panel appears.

Creating and adding colors from the Color panel

The Color panel features two ways to select a precise color, and can be opened by choosing Window ⇒ Color. Select a color using the color wheel on the right or the sliders on the left, or combine the two methods to hone in on just the right shade. After you choose the color you want, you can easily add it as a swatch to the Swatches panel by choosing Add Swatch from the panel menu.

To apply a color choice automatically to the stroke or fill swatches, click either the Fill or Stroke color swatch in the upper-left corner of the Color panel. Any changes made using the color wheel or sliders are applied automatically to the selected swatch.

To select a color on the color wheel, click and drag the cross hair inside the color wheel until you find the right hue (for example, greens). Use the slider to the right to select the exact shade of that color. You may also select a specific color channel (RGB or HSB) and affect only the selected channel.

To save your new color as a swatch, find the color you want and choose Add Swatch from the panel menu. Your new color appears as a new swatch on the Swatches panel, and you can select the color anywhere that the Swatches panel appears.

Creating gradients

Gradients are blends between two or more colors that you can use to fill any area or shape, just like a solid color. If you look at the Swatches panel, you see some gradient presets you can use right away. You can also use the Color panel to create your own gradients and add them to the Swatches panel.

Follow these steps to create a gradient:

1. Open the Color panel by choosing WindowColor and choose Linear Gradient from the Color Type drop-down list.

Linear is one of two gradient types you can create.

2. Double-click one of the horizontal sliders that appears below the gradient ramp at the bottom to see the Swatches panel; pick a color to apply to that slider.

To add more colors to your gradient, click anywhere on the gradient ramp to add a slider. You can then double-click this slider to set the color.

3. Adjust the color blends of the gradient by moving the sliders closer together or farther apart.

To remove colors or sliders, click the slider you want to remove and drag it off the panel to the left or right.

4. Choose Add Swatch from the panel menu to save your new gradient.

The gradient swatch is added to the Swatches panel alongside the existing gradients.

In addition to being able to create linear gradients, which blend colors evenly in a straight line, you can create radial gradients, a special type of gradient shape where colors blend from the center outward in a circular motion. To set a gradient as a radial gradient, choose Radial Gradient from the Type drop-down list on the Color panel.

Both gradient types are created and added to the Swatches panel in the exact same manner, as described in the preceding step list.

Applying and transforming gradients

After you create a gradient, you can use it to fill a shape the same way you set a solid fill color. After you apply a gradient to a shape on the stage, you can use the Gradient tool to modify the gradient’s direction, size, and intensity.

To modify a Linear gradient fill, follow these steps:

1. Create a shape and fill it with a linear gradient from the Swatches panel or Fill color selector on the Tools panel.

2.image Click and hold down your mouse pointer on the Free Transform tool to select the Gradient Transform tool. Select a shape with a gradient fill.

Handles appear on the right and left sides of the shape.

3. Use the bounding box’s center point to move the transition point of the gradient.

4. Use the handle on the right side to modify the intensity of the gradient.

5. Change the direction of the gradient by using the rotating arrow icon in the upper-right corner of the selection area.

If you’re working with a radial gradient, notice that the Gradient Transform tool behaves slightly differently. An extra round handle appears and lets you scale the gradient, and the rotating-arrow icon (which rotates the gradient area) is located in the lower-right corner. Experiment with both linear and radial gradients to see their differences.

Working with the Brush Tool

imageTools, such as the Pen and Pencil, offer you different ways of creating stroked paths. In contrast, the Brush tool paints with fills. Much like a good old-fashioned paintbrush, this tool can create thick, broad strokes with solid colors or gradients for excellent artistic effects.

The Brush tool features several brush sizes and tips as well as five modes for controlling how (and where) the Brush tool works its magic.

Follow these steps to use the Brush tool:

1. With the Brush tool selected, choose a brush size and tip shape from the bottom of the Tools panel.

2. Choose a fill color from the Fill color swatch on the Tools panel, Property inspector, or Color panel.

3. Freely paint on the stage to see the Brush tool in action.

The different Brush modes change where and how the tool works against different objects on the stage. A good way to see these modes in action is to draw a shape on the stage and make sure that the shape has both a stroke and fill set. Experiment by changing modes and trying to paint over the shape. In Figure 2-14, the selected object was painted over with the Brush tool in Paint Selection mode. This mode affects only the area of the selected shape.

Because the strokes left behind by the Brush tool are simply filled shapes, you can apply a stroke to this tool, change its fill color, or use it to create interesting shapes that you can tweak by using the same methods we demonstrate in the earlier section “Transforming Artwork and Shapes.”

Figure 2-14:Painting in Paint Selection mode affects only the selected shape.

image

To apply an outline to a painted area, set a color by using the Stroke color swatch on the Tools panel, select the Ink Bottle tool, and click the outer edge of the fill. You can now use the Property inspector to change the width, color, and style of the stroke as well.