Adobe Creative Cloud Design Tools All-in-One For Dummies (2013)

Book VII

Flash Professional CC

Chapter 2: Creating Artwork and Text

In This Chapter

Creating shapes and lines

Editing and selecting shapes

Tweaking and splicing shapes and lines

Transforming shapes and artwork

Creating and modifying text

Working with colors and gradients

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

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

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

Flash lets you choose colors from a pop-up window that contains swatches, the Color panel, or the Swatches panel. You can add your own swatches, but for now, choose one of the available colors for your shape’s fill and stroke.

Click and drag on the stage to create a shape. Notice that shapes are drawn by default from the left corner outward. You can set the width and height of the shape in pixels, Corner radius (for Rectangles), and whether to draw shapes from the center. Press the Alt (Windows) key or Option (Mac) key and click the stage with the Oval or Rectangle tools to access these options.

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

The 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.

To 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 control 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.

The 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 to temporarily access the Convert Anchor Point tool 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.

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

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

Smooth: Smoothes out lines or curves to the next closest perfect curve. You can set the amount of smoothing you prefer in the Property inspector (the default is 50, and the maximum is 100).

Ink: Lets you draw freehand with no smoothing modification applied.

The 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

After 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 controls.

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).

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:

Select the entire shape and change its fill and stroke colors from their color controls in the Property inspector. (See Figure 2-2.)

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

Select the entire shape and change the fill and/or stroke colors by using the Fill and Stroke color controls on the Tools panel.

Specify colors on the Tools panel and click the stroke using the Ink Bottle tool or click the fill using the Paint Bucket tool.

To apply a fill color to your shape, select it on the stage and choose a color from the Fill color control 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 color control at the bottom of the Tools panel. Alternatively, you can choose the Paint Bucket tool and click 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.

You 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.

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

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 CC 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.

You 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.

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 (after editing, click the arrow in the upper-left corner of the workspace to return to the stage).

Unlike 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 move part of a shape, use the Selection or Lasso tool to draw a marquee. Then you can move the selected artwork.

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.

You 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 Subselec-tion tool to modify specific points.

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.

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.

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

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.

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 Free Transform tool or by dialing in exact values on the Transform panel.

Using the Free Transform tool

Select 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.

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 skew your artwork, hover over any line between the handles until you see the skew icon (two arrows), then click and drag to skew your artwork on the x- or y-axis.

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.

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 Window⇒Transform.

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 the x- or y-axis and can add interesting 3D-like 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, or using the Free Transform tool.

Give it a try: Select your shape, and open the Transform panel. Select the Skew radio button, then type some values into the Skew Horizontal and Skew Vertical options to see the transformation applied. If you’re not happy, don’t fret; simply enter 0 values into the two Skew options, then click the Remove Transform button in the lower-right corner of the Transform panel to remove all transformations from the shape.

Working with Text

If 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.

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 Insert⇒Timeline⇒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. Using the Selection tool, click the text box to select the instance on the stage.

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

You can select some of the characters within the text field to modify only your selection. For example, you can mix Regular and Bold character styles.

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

Adding filters to text

You can add a filter to your text box to add interesting effects to the type you add to your Flash movie. Filters include standard visual effects you are probably used to in other programs, such as Drop Shadow and Glow.

Follow these steps to add a filter to your text box:

1. Select a text box on the stage.

2. Open the Property inspector, and click the Add Filter button (+) in the Filters section of the panel.

3. Select a filter from the drop-down list, such as Drop Shadow.

4. Adjust the Drop Shadow filter’s property values, such as Strength and Distance.

The appearance of your text automatically updates on the stage as you modify the property values.

Filters can be applied to text boxes on the stage, but not individual characters within them.

Transforming type

You can transform type just like shapes and artwork by using either the Free 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 Free 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 Modify⇒Break 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.

If 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 functionality of the Swatches panel in action if you used the fill and stroke colors from the Tools panel and Property inspector. Swatches are also found in its own panel, 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 the Swatches panel and in the pop-up window that opens when you use the Fill and Stroke color controls throughout the workspace.

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 left or the slider on the right, 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 color controls, 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 selector inside the color wheel until you find the desired 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 in the pop-up window that opens when you use the Fill and Stroke color controls throughout the workspace.

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 Window⇒Color 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 pop-up; pick a color and optionally set alpha transparency 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. Click and hold down your mouse pointer on the Free Transform tool to select the Gradient Transform tool. Select a shape with a linear 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

Tools, such as the Pen and Pencil, offer you different ways of creating 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 Options area of the Tools panel (at the bottom).

2. Choose a fill color from the Fill color control 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, also available in the Options area of the Tools panel, 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-11, the selected object was painted over with the Brush tool in Paint Selection mode. This mode affects only the area of the selected shape.

Figure 2-11: Painting in Paint Selection mode affects only 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.

To apply an outline to a painted area, set a color by using the Stroke color control 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.

If you draw using a Wacom tablet and have standard Wacom drivers installed, additional tool options are available for the Brush to recognize the pressure and tilt of your stylus when drawing. Enable them in the Options area of the toolbar, near the bottom of the bar.