Flash CS4 Professional in 24 Hours- P3

Chia sẻ: Cong Thanh | Ngày: | Loại File: PDF | Số trang:30

lượt xem

Flash CS4 Professional in 24 Hours- P3

Mô tả tài liệu
  Download Vui lòng tải xuống để xem tài liệu đầy đủ

Flash CS4 Professional in 24 Hours- P3: The creation of this book could not have happened without the skill and patience of many, many people at Sams Publishing. Most of all, I want to thank Mark Taber for offering me this opportunity and Philip Kerman for writing such a great book. I also greatly appreciate the efforts of Songlin Qiu for keeping me on track and organized, not an easy task.

Chủ đề:

Nội dung Text: Flash CS4 Professional in 24 Hours- P3

  1. Tools 51 6. Finally, while still holding down the mouse button, you can increase or TRY IT YOURSELF ▼ decrease the distance you’re dragging from the point you clicked. This Use the Pen Tool changes the curve’s arc. Before your hand gets tired, move the mouse to the right. Then double-click down to the right at about the same height as the first point to make an arc. Even though this curve has three points, only the middle one needs a curve—that is, when you create the first and last points, you don’t click and drag. You can edit any drawn shape in the same manner in which you drew lines with the Pen tool in the preceding task. You just select a shape by using the Subselect tool (the white arrow at the top right of the Tools panel), and you see the same handles and anchor points as in the preceding task. Creating Text Now for a graphic element that involves neither line nor fill. In this section, you explore creating text. To create text, you simply select the Text tool, click, and start typing. When you first make the text, if you click and drag, you are setting the margins; otherwise, the margins adapt to what you’re typing. You can modify the font, color, and style of what you’ve typed after you create it. Modifying your text after it’s typed usually makes sense be- cause then you are able to best judge how it looks. Creating text in Flash has never been easier or more sophisticated. The fol- lowing task walks you through a couple quick maneuvers. In this task, you explore using text in Flash. Follow these steps: TRY IT YOURSELF ▼ 1. In a new file, select the Text tool, click the Stage, and then type a Create and Style Text word; we typed Hello. This click-and-type technique expands the mar- gin for the block of text to the exact width of whatever you type. The circle that appears at the top-right corner of the text block indicates the margin automatically adjusts in this way (see Figure 2.17). 2. When you click and drag this circle to adjust the width, it turns into a FIGURE 2.17 square to indicate the margins are fixed. You can double-click the The circle in the top-right corner square margin control to restore the automatic margin adjustment indicates the margins adjust to fit what you type. Once you’ve set (that is, to make it a circle again). the margins by dragging any han- dle on the text, the circle turns to a square.
  2. 52 HOUR 2: Drawing and Painting Original Art in Flash ▼ TRY IT YOURSELF 3. While editing the text block, you can set the margin. Make sure the I- Create and Style Text beam cursor is blinking in the block; click inside the block of text, if necessary. Grab the little circle at the top-right corner of the text block, and widen or narrow the block of text. The circle margin handle NOTE changes to a square, which indicates margins are set and any text you paste or type into this block wraps when it reaches this margin. Go Adjusting Text Margins ahead, and type a couple lines of text. You should see the text wrap By the way, if you had clicked even though you didn’t press the Enter key. and dragged with the Text tool to the right before typing (in- 4. Now that you have some text in the block and have set the margins, stead of clicking and then typ- it’s time to modify some attributes of the text. Two ways to modify the ing), you would have created a text include: selecting all or some of the characters or adding more margin in one step. You can where you’re editing the contents of the text; or, selecting the entire always adjust the margins block and picking it up, moving it, or modifying the attributes. This is later, too. There are two ways: not the same as simply selecting all the characters while editing the If you’re editing the actual block. Click the Selection tool to stop editing the text. Your text block text, you use the circle or should be selected. If it isn’t, click it once, and a rectangle appears square in the top-right corner; around it. or, if you’re not actually editing the contents of a text block, 5. With the block selected, observe the Properties panel to make modifi- you can still select it using the cations. For now, modify the text’s color, font, and font height, as Selection tool. In this case, shown in Figure 2.18. Any setting you make here applies to all charac- you can change the margins ters in the text because you’re editing the entire block. Most of the by dragging any of the square Properties are easy to learn. There’s an especially nice feature that al- handles in the corners. ways displays a preview of the type face when you select a different FIGURE 2.18 The Properties panel enables you to change text attributes, such as font size and color.
  3. Tools 53 font. The preview displays the characters you have selected if you’re TRY IT YOURSELF ▼ editing the contents of the text block. For example, if you double-click Create and Style Text and then select some of the characters, those characters appear in the preview. 6. Change the text style of part of your text block to bold or italic by first selecting the characters you want to change and then selecting bold or italic. Double-clicking the text block automatically selects the Text tool. You can select the characters as you would in any word processor by clicking and dragging. While some text is selected, use the Properties panel to change the selected text. If you want to change the font, the preview includes the text you have selected. You can use this method to change the properties of individual characters within any block of text. 7. Switch to the Selection tool, and select the block of text. Using the Properties panel, change the alignment to Align Center under the Para- graph section of the panel, as shown in Figure 2.19. Explore the other settings, which control attributes such as the margin padding and line spacing, by clicking the Format button. FIGURE 2.19 When the block of text is selected, use the Properties panel to change the alignment (to Align Center, in this case). A few options are shown in Figure 2.19 that we haven’t covered yet. Specifi- cally, the Text type options (Static, Dynamic, or Input) are explored in Hour 16,
  4. 54 HOUR 2: Drawing and Painting Original Art in Flash “Basic Interactivity.” For now, you should always leave the Text Type drop- down in the Properties panel set to Static Text. When you do this, the text you type never changes, and your audience sees the same font you’ve cho- sen. Dynamic is for text that needs to change while the movie runs, and In- put is for text you want to let the user change. The Selectable button gives your users the ability to select and copy the text. Another important option is the setting for Font rendering. This lets you control how the text aliases, which affects how it will appear—most notably, when the text is very small. Generally, you should select the rendering op- tion by eye—that is, simply select the option that looks best given your font, font size, and other layout conditions. For tiny text, like 8 or 10 point, Bitmap text is a good option—although you should always at least preview how Anti-alias for readability looks. The option for Use Device Fonts is ef- fectively no anti-alias (like Bitmap text); however, users have to have the same font installed on their machine or a substitute is used—so this is a risky option. There are two reasons to consider the Anti-alias for animation option: First, if the text is being moved for an animation, it looks smoother; second, this is the only version of anti-aliasing available when you plan to deliver your site to users with older Flash players, which we discuss book- ing Hours 20, “Linking a Movie to the Web,” and 24, “Publishing a Cre- ation.”. Finally, the Custom Anti-alias option lets you fine tune the thickness and sharpness for any look you prefer. Aliasing and Anti-Aliasing Anti-aliasing is a way of smoothing otherwise rough diagonals and curves with a blurry fuzz. If you zoom in on a diagonal line without anti-aliasing, you see a stair-case effect. Adding fuzz can make that diagonal line look better; albeit blurrier. Normally, anti-aliased text appears smoother and is much more pleasing. One problem arises when the anti-aliased text is small—it can be too blurry to read. In earlier versions of Flash, the only vi- able solution for small text was to turn off anti-aliasing completely, which is still sometimes the best option. In addition, anti-aliasing affects how fast animated text can fly across the screen. Selecting and Transforming Objects Now that you’ve seen how to create lines, fills, deco fills, shapes (with both lines and fills), and text, it’s time to explore how to modify them. The process seems simple. You select the object you want to modify by using
  5. Selecting and Transforming Objects 55 the Selection tool, and then you modify it. But, selecting exactly what you want to modify is often the most challenging part. The following section looks at some of the fundamentals, and you learn even more about this in Hour 5, “Controlling Color.” Object Draw Mode Versus Merge Mode Before we can discuss selecting objects, you need to understand the differ- ence between the two ways to create objects: Merge mode and Object Draw mode. By default, and any time you don’t have the Object Drawing option selected at the bottom of the Tools panel, you’re in what’s called Merge mode. In Merge mode, most of the drawing tools create shapes with the ex- ception of the Rectangle Primitive, Oval Primitive, and Text. These fills and lines are all drawn on the same plane—meaning that if you draw two shapes on top of each other, the one drawn second wipes away any part of the first shape that’s underneath the second. This behavior can actually be used to your advantage although it is disorienting to many at first. Object Draw mode makes everything you draw a Drawing Object. Unlike shapes, Drawing Objects can be stacked and don’t eat away at each other. Despite the fact we’ve taught hundreds of students how to draw in Merge mode in earlier versions of Flash, Object Draw mode is a more intuitive way to learn. Normally, the Draw mode you have selected affects what you draw. When you’re in Object Draw mode, each time you click to draw a line, fill, rectan- gle, or oval you create a new Drawing Object. Deep inside that Drawing Object is a shape. You can double-click to edit the contents, and you find a plain old shape inside. It’s mildly confusing because Rectangle Primitive and Oval Primitive objects behave similarly to Drawing Objects as they’re stackable, but you can’t double-click a primitive to edit its contents. You might need to access the shape inside a Drawing Object to select and change, move, or delete part of the object. You learn much more about se- lecting shapes later this hour, but selecting a Drawing Object means select- ing the whole object. When you’re done editing the shape inside a Drawing Object, you double-click the object or click the blue arrow button at the left of the address bar, as shown in Figure 2.20. Because Drawing Objects contain shapes that don’t modify any shapes un- derneath them, it shouldn’t be a surprise that Flash provides a way to con- vert a shape(s) into a Drawing Object. To convert a shape into a Drawing Object, select all the shapes you want, and then click Modify, Combine Ob- jects, Union. Similarly, if you want the contents of a Drawing Object to be a
  6. 56 HOUR 2: Drawing and Painting Original Art in Flash FIGURE 2.20 Use the address bar (officially called the Edit Bar) to return to your main stage when you’re finished ed- iting the contents of a Drawing ob- ject. shape, then select the Drawing Object, and click Modify, Break Apart. Real- ize those shapes now behave like any shape and can be erased by other shapes on the sole plane where all shapes reside. The whole concept of shape versus Drawing Object only applies to lines and fills. Text and primitives behave more like Drawing Objects (though, they’re really neither) because they don’t eat away at other things you draw. Another tidbit to know is you can always toggle between Object Draw mode by pressing J. This only affects things you’re about to draw, not things you’ve already drawn. (To do that, use the Modify menu as men- tioned previously.) Object Draw mode is more intuitive at first, but you can also learn to love Merge mode. The following is a quick review in order of importance: . Realize you can only select an entire Drawing Object, not just some or portions of the shapes contained. . To get to the shapes inside a Drawing Object, double-click. Be careful not to get lost while inside—remember to exit the object by clicking the left arrow in the address bar. . The setting in the Tools panel (for Object Draw mode or not) affects new things you draw; for example, to convert an existing shape(s) to a Drawing Object via Modify, Combine Objects, Union, or to turn a Drawing Object into a shape, click Modify, Break Apart.
  7. Selecting and Transforming Objects 57 Selection Tools The two basic selection tools are the Selection tool and the Lasso tool. The Subselect tool is the white arrow. It is for selecting and editing individual anchor points in the same way the Pen tool created them. If you’re familiar with controlling shapes by using the Pen tool, this section will be familiar to you. If you’re not familiar with using the Pen tool, you should master the basics before working with the Subselect tool. This section concentrates on just the Selection tool and the Lasso tool. The Selection tool can seem so simple that it’s not worth discussing, but it’s actually quite powerful. You’ve already used the Selection tool to select an object by clicking it once. The key to the Selection tool is the cursor changes to tell you what happens when you click. You can try this tool on a couple simple shapes in the following task. In this task, you explore how the Selection tool’s cursor changes to inform TRY IT YOURSELF ▼ you what happens when you click. Follow these steps: Use the Selection 1. Select the Oval tool, but before you draw, select a very thick stroke Tool to Select and height (5 or so) in the Properties panel. Turn on Object Drawing via the Modify Shapes button at the bottom of the Tools panel. Draw a circle, and then select the Rectangle tool. Turn off Object Drawing, and draw a square. 2. Choose the Selection tool. Move the cursor to the middle of your square. The cursor changes to include the move symbol, indicating that if you were to click and drag, you would start moving this fill (see Figure 2.21). 3. Click and drag. Notice that only the fill of the square moves. Select Edit, Undo (or press Ctrl+Z) to restore the fill. Also, make sure nothing FIGURE 2.21 is selected by just clicking the white area of the Stage or pressing Esc. The Selection tool’s cursor changes when it is on top of a fill 4. Position the cursor over the circle you drew. If you click and drag you’ll to indicate that clicking will start to move the fill. move the entire circle because it’s a Drawing Object. Its fill and stroke are contained in one object. 5. Move the cursor so that it is near the outside edge of the square. The cursor adds a curved tail, as shown in Figure 2.22. Now if you click and drag, you bend the line. Go ahead and click and drag to the left, and the line portion of the square bends. Notice that the fill bends with the line. This cursor behavior is consistent for Drawing Objects or shapes. However, because it’s possible to select the square’s fill and FIGURE 2.22 stroke independently, as it’s a shape, you’ll need to just click and When the cursor is near a line, it drag—don’t click and then click and drag because that selects then changes to indicate that clicking will start to bend the line. moves the stroke portion.
  8. 58 HOUR 2: Drawing and Painting Original Art in Flash ▼ TRY IT YOURSELF 6. Make sure nothing is selected and move the cursor so that it’s near Use the Selection another corner of the square. A corner shape is added to the cursor, Tool to Select and which means that if you drag, you’ll be moving the corner point (see Modify Shapes Figure 2.23). Try it. It’s like you’re bending the line, but instead you’re just moving the corner. 7. You’ve seen the cursor communicate what will happen when you click and drag. Now you can use the Selection tool to simply select some- thing. For instance, clicking anywhere on the circle (the line or the fill) selects the entire Drawing Object. However, you can select just the line portion of one side of the square by clicking it. 8. With part of the square’s stroke selected, notice that the cursor adds the “move” symbol when you’re near the selected line. Click and drag now, and you can move the stroke. You can also just press Delete to FIGURE 2.23 remove that line portion. Do so now. When the Selection tool is near a corner, it shows yet another cur- 9. Deselect everything (by clicking a blank area onstage or pressing Esc) sor, this time indicating that you can extend the corner. and this time double-click on what’s left of the square’s stroke. When you double-click a stroke, you select the entire stroke. At this point, you could move or delete the stroke. Just leave it for now. 10. The circle was easy to select because it is a Drawing Object. Because the square is just a regular shape, if you click the fill, you select just the fill. If you click the stroke, you select just one side. If you double- click the stroke, you select only the stroke portion. However, if you dou- ble-click the fill of the square you should find that the entire square is selected. Now you can move or delete the square. In fact, you could even select Modify, Combine Objects, Union to turn the square into a Drawing Object. Don’t bother, though. 11. Another way to select the square is to marquee it. With the Selection tool still selected, click outside the square and drag until you you’ve drawn an imaginary rectangle that surrounds the square entirely. When you let go, the square becomes selected. In the case of a Drawing Ob- ject, or primitive, your marquee need only touch the object to select it. 12. Sometimes the arrangement of other shapes onscreen makes the marquee technique difficult or impossible. Notice in Figure 2.24, you can’t marquee just the square without selecting part of the circle. In fact, there’s a preference (Edit, Preferences, General) called Contact- sensitive Selection and Lasso tools, but that setting doesn’t affect se- lecting shapes. To select the square in such a sticky situation as FIGURE 2.24 Figure 2.24, you could simply double-click the fill of the square. How- Sometimes using the marquee technique would select more than ever, there’s another tool you can use to do this: the Lasso tool. what you want.
  9. Selecting and Transforming Objects 59 13. Select the Lasso tool and then click and drag around a shape to se- TRY IT YOURSELF ▼ lect it. The Polygon Mode option for the Lasso tool makes the tool act Use the Selection almost like the Pen tool, though the Polygon Mode behaves like a Tool to Select and string or rubber band. Select the Polygon Mode option, as shown in Modify Shapes Figure 2.25, and click onscreen and let go. Then click and release in a new location to extend the selection. Continue to extend the selection and then double-click when you’re done. There’s also a spring-loaded way to access the Polygon Mode: hold down the Alt key while you click. In this case, double-clicking the fill would probably be easier, but often when you’re selecting several objects, you need to use this method. 14. Finally, you can decide to select just a portion of a shape. Suppose you want to chop off the top of the square. You can use either the FIGURE 2.25 Lasso tool or the marquee technique with the Selection tool to select The Polygon Mode option for the Lasso tool lets you click for each the portion desired (see Figure 2.26). If you want to select just part of corner of the selection you want to the circle you need to first double-click (to enter the Drawing Object) make. and then you can select the contained shapes as normal. Just remem- ber to get back to your main stage by clicking the left-arrow in the ad- dress bar. FIGURE 2.26 Using the Selection tool to marquee just part of a shape chops off the top of the circle in this case. You use the Selection tool to employ the marquee technique. If you click and drag an object, it moves or bends. However, when you click the Stage where there are no objects, you see a rectangle appear while you drag (this is the marquee). You can draw that rectangle around other objects, and they will be selected when you let go. Using this marquee technique to select ob- jects is often easier than clicking to select objects. You’ll learn how to modify what you’ve selected in the next section, but at this point, you have the fundamental selection techniques under your belt. More advanced techniques are discussed in Hour 5, but the best clue as to what will happen if you click is how the cursor changes. You’ll find many places in Flash where the cursor is communicating information to you. For
  10. 60 HOUR 2: Drawing and Painting Original Art in Flash example, you can draw a line and see the cursor changes discussed in the preceding task. The Dropper Tool One of the easiest ways to modify what you’ve drawn is to change the color. For example, the Paint Bucket tool can change a fill color, and the Ink Bottle tool can change a stroke color and other attributes. This works fine when you first select the fill color, for example, and then select the Paint Bucket tool and click a fill to change it. But suppose you want one fill to match the color of another. The Dropper tool lets you sample a color from an object that is already onscreen. The cool part is that it actually samples more than just color, as you’ll see in the following task. ▼ TRY IT YOURSELF In this task, you’ll use the Dropper tool to select color and additional at- Select Attributes tributes. Here are the steps to follow: with the Dropper Tool 1. Select the Oval tool, set the stroke height to 10, and draw a circle. Change the stroke height, the stroke color, and the fill color. Then draw another circle. Finally, change both the stroke and fill color settings and draw a third circle. 2. At this point, if you wanted the second circle to have the same fill color as the first circle, you would have to change the fill color. If you re- member the color, you’re in luck. Even better than relying on your mem- ory, you can select the Dropper tool. Notice how the cursor changes to include a brush when you’re over the fill of the first circle, as shown in Figure 2.27. This indicates that if you click, you’ll select the fill attrib- utes of this shape. FIGURE 2.27 The Dropper tool changes its cur- sor to indicate that it will sample a fill when you click. 3. With the Dropper tool, click the center of the first circle. Not only does the fill color change to the sampled fill color, but the Paint Bucket tool also becomes active. You can now fill the second circle with the color sampled by the Dropper tool.
  11. Selecting and Transforming Objects 61 4. If you want to match the strokes on both circles, you could use the Ink TRY IT YOURSELF ▼ Bottle tool, but you would have to set all the attributes manually. It’s far easier to use the Dropper tool to sample all the stroke’s attributes in the first circle. Select the Dropper tool and move it near the stroke of the first circle. Notice that the cursor changes to include a pencil (see Figure 2.28). This indicates that you’ll be sampling the stroke (or line portion) of that shape. FIGURE 2.28 The Dropper tool changes its cursor to indicate it samples a stroke when you click. 5. Click to sample the stroke, and you see the stroke attributes update in the Properties panel. Also, the Ink Bottle becomes active, so you can click the second circle to change its stroke. Remember the Drop- per tool samples all attributes, not just color. Transforming Scale, Rotation, Envelope, and Distortion You’ve seen how to bend, extend, and move shapes by using the Selection tool and how to change shapes that are already onscreen by using the Ink Bottle and Paint Bucket tools. There are still more ways to modify the objects you select. The Free Transform tool is your key to even more modifications. Basically, you select an object with the Free Transform tool active. Up to four options appear any time you use the Free Transform tool and have an object selected. You can also find these options by selecting Modify, Transform. In the following task, you experiment with these options.
  12. 62 HOUR 2: Drawing and Painting Original Art in Flash ▼ TRY IT YOURSELF In this task, you explore the four basic options for the Free Transform tool. Transform Drawn Follow these steps: Objects 1. Use the Rectangle tool and with Object Draw mode turned off, draw a square. Select the Free Transform tool. It shares a slot in the Tools panel, so you can click and hold the Gradient Transform tool to see it. You can always select Free Transform by pressing Q. With the Free Transform tool selected, double-click the center of the square to select it entirely. (Interestingly, the Free Transform tool can perform many se- lection tasks.) 2. At this point, none of the four options should be selected (see Figure 2.29). This means you’re in Free Transform mode, and if you have a steady hand, it’s possible to rotate, scale, or distort the shape. FIGURE 2.29 When an object is selected, you can choose the Free Transform tool’s Scale option. 3. Explore the possibilities by rolling your cursor over the square handles at the corners and sides of the shape, but don’t click yet. Depending on where you move your mouse, the cursor changes to two versions of the Scale option, as well as Rotate and Skew (as in Figure 2.30). If you hold down Ctrl, the corners make the cursor change to the Distort option. 4. Free Transform mode can be really touchy, so let’s go through the op- tions individually. The selected object shows square handles in the corners and on the sides. Notice the cursor changes when you roll
  13. Selecting and Transforming Objects 63 TRY IT YOURSELF ▼ Transform Drawn Objects FIGURE 2.30 Depending on which handle you Scale both dimensions (corner) Scale one dimension (side) grab and which option is selected, you can use both Scale and Rotate to modify the shape in multiple ways. Rotate (corner) Skew (side) over these handles. The corner handles let you scale both width and height equally and at the same time. The side handles let you change just width or just height. Click and drag a corner handle to change the scale. This version of Scale (compared to Scale in Free Transform mode) maintains your shape’s proportions horizontally and vertically. Now drag a side handle, and you change just the width. 5. Make sure the square is still selected, and choose the Rotate and Skew option. Now the corner handles rotate and side handles skew. Roll your cursor over the handles to see the cursor change. 6. Click and drag a corner handle and notice you can rotate the square. Actually, if the default Snap to Objects option is selected (that is, if the magnet button is pressed in, as shown in Figure 2.31), the object snaps into place at 15-degree increments. You learn more about this in the next section, “Using Snap to Objects to Connect Shapes.” 7. Select the Distort option. Drag the shape by the handles on the cor- ners to distort. The Selection tool can create the same effect as Dis- tort, but only when the shape itself has a corner to grab. Without this Distort option, you would find making a distorted ellipse nearly impos- sible. Finally, try holding down the Shift key and dragging a corner han- dle when you distort. This way, you can distort two sides evenly. 8. Finally, the wildest of transformation options is Envelope. To best un- derstand this option, draw a new square, select the Free Transform tool, and click the Envelope option. When your shape is selected, you see many handles. Move the square handles to influence the shape.
  14. 64 HOUR 2: Drawing and Painting Original Art in Flash ▼ TRY IT YOURSELF It’s as though the shape tries to touch all the squares, even if they’re Transform Drawn pulled out to one side. The circle handles are like the tangents created Objects when you draw using the Pen tool. They control the rate at which a shape bends to reach the square handles. FIGURE 2.31 If Snap to Objects is turned on, when you rotate an object, it snaps to logical positions, such as 45 degrees. Handles are little white squares that let you stretch, rotate, or otherwise trans- form a selected object. When you select an object, it is either highlighted or appears with a box around its edges. When you select the Free Transform tool’s Scale or Rotate and Skew options, for example, handles are added to the selection. Different handles often have different functions, but the cursor change is your best clue as to exactly what happens when you click. Don’t overlook the fact you can select more than one shape or object, and then transform everything that is selected at the same time. Also, you can find all the tools explored in the preceding task by selecting Modify, Transform. Another way to do all these things is in the Transform panel. The Transform panel lets you rotate or skew any selected shape. You can also remove transformations immediately after making them by clicking the Reset button in the Transform panel (or by using the keyboard shortcut Ctrl+Shift+Z). Finally, an interesting button is the Copy and Transform but- ton in the Transform panel. This button duplicates the selected object and applies the most recent transformation every time you click it. The result is a spirograph effect.
  15. Selecting and Transforming Objects 65 Using Snap to Objects to Connect Shapes One of the most helpful features in Flash is Snap to Objects. By selecting View, Snapping, Snap to Objects (or clicking the Magnet button at the bot- tom of the Tools panel when the Selection or Free Transform tools are ac- tive), you can draw perfectly round circles, horizontal or vertical lines, and much more. The visual cue that Snap to Objects is helping you is the dark ring that often appears next to your cursor while you drag. When you see that ring, you know Flash is trying to help you draw. You might already know from using other software that holding the Shift key constrains your cursor similarly to Snap to Objects, but Snap to Objects can do much more. In addition to helping you draw perfect shapes, Snap to Objects also enables you to connect two shapes. It’s more than simply mak- ing two shapes touch—they actually become bonded. In Flash, unless two shapes have been snapped together, they can look connected when they ac- tually aren’t. For example, you draw an arrow in the following task, but un- less the arrow head is snapped to the arrow’s body, it might not remain visually connected when you scale it to a larger size. After a shape is snapped to another, it’s forever connected. This task walks you through some of the amazing ways Snap to Objects TRY IT YOURSELF ▼ helps you draw. Follow these steps: Use Snap to Objects 1. Confirm that Snap to Objects is selected in the View, Snapping menu, to Draw Perfect and then click the Rectangle tool. While you click and drag, if you’re Shapes and Connect close to drawing a perfect square, you see the dark ring appear near Objects your cursor (see Figure 2.32). 2. Select the Line tool and draw a line at a 45-degree angle elsewhere on the Stage. This time you have to hold Shift as you draw the line to con- strain it to 45 degrees. 3. Connect the top of the line to a corner of the square. To do so, click the Selection tool; make sure before you click and drag the end of the line that the cursor changes to show the corner tail. You can then click and drag to extend the line, and you see it snap to the square. Keep FIGURE 2.32 dragging and notice how the line can snap to a corner or a side. Sev- If Snap to Objects is turned on while you’re dragging with the Rec- eral different logical locations exist on the square; snap the line to a tangle tool, a dark ring appears to corner. help you create a perfect square. 4. The last step probably changed the angle of your line, so click Edit, Undo (or press Ctrl+Z) and try again. This time, single-click the line to select the whole thing, let go, click the end of the line, and drag to
  16. 66 HOUR 2: Drawing and Painting Original Art in Flash ▼ TRY IT YOURSELF move it. You should be able to snap the end of the line to the corner Use Snap to Objects of the square (this time without changing any angles). The only tricky to Draw Perfect part of this step is that when the line is selected, if you don’t pick up Shapes and Connect and drag the line from the end point or the middle, you don’t see the Objects dark ring. If you don’t see the dark ring, you need to let go and try picking up the line again. 5. Now draw near the diagonal line two lines that are almost parallel to it. 6. Use the Selection tool to extend by dragging the end points of the two lines. Extend one end to connect to another corner of the square and extend the other end to the end of the 45-degree line, as shown in Figure 2.33. 7. To confirm that everything is truly snapped together, use the Selection tool to drag the corner point where all three lines merge. If everything FIGURE 2.33 You can extend lines to connect is snapped properly, all three lines move at once and don’t disconnect end points by dragging. from the object to which they’re snapped. The preceding task gives you just a taste of how you can create perfect shapes by using Snap to Objects. Consider, for example, vertical and hori- zontal lines. If you draw a vertical line, select it, and then pick it up from the center, you can snap it to the right end of the horizontal line. Then, you can just drag the point of intersection to the right while remaining con- strained to the same horizontal line, which the dark ring helps you do. You’ve created a perfect arrow. Another related snap feature is called Snap Align. Snap Align creates dashed vertical and horizontal lines that appear when you’re dragging an object (shown in Figure 2.34). When you select View, Snapping, you find settings to edit or disable Snap Align. If you select View Rulers, you can click in a ruler and drag it onto your Stage to create guides. If View, Guides, Snap to Guides is selected, you can draw objects that are lined up with and connected to the guides. The guides are just for your use—they’re invisible to your audience. Finally, if you ever find Snap to Objects or Snap to Guides distracting, re- member you can turn them off. Maybe you want to draw two lines really close together, but you don’t want them to snap together. In addition, you FIGURE 2.34 Snap Align helps you align objects can control the sensitivity of Snap to Objects or Snap to Guides (and other with intuitive and subtle dashed ways Flash tries to improve your drawings) by selecting Edit, Preferences lines. to open the Preferences dialog box, and then selecting the Drawing tab.
  17. Selecting and Transforming Objects 67 Summary This long hour looked at practically every drawing tool in Flash. You have learned how to create lines, fills, combination shapes, and text. After you created some objects, you found ways to modify their color, shape, size, ro- tation, and location. In addition, you have learned about the two drawing modes in Flash: Object Draw and Merge mode. You’ve learned how to snap two shapes together. Even if you don’t think you’ll be creating artwork in Flash or you’re working with someone else who’s the artist for your team, you should understand two important concepts: First, the simpler the shape, the smaller the file. Second, only shapes that are snapped together are truly connected. Of course, if you’re going to create the artwork, thanks to what you’ve learned in this hour, you now know how to use the funda- mental drawing capabilities in Flash. Q&A Q. What’s the purpose of the little white circle that appears in the center of a shape when the Free Transform tool is selected? It doesn’t seem to do anything. A. That circle is the transform center point about which the shape rotates when you rotate it. By editing the location of this circle, you can rotate an object around a point other than its visual center. Q. Why does my Brush tool appear to be working when I click and hold, but when I release, nothing has been painted? A. You probably have the Brush tool’s Brush Mode option set to Paint Se- lection, in which case only fills that were previously selected are painted. Other Brush Mode options can also cause unexpected results if they were set accidentally. Q. It looks like there are a bunch of other tools (and options that appear at the bottom of the Tools panel) that we haven’t looked at. Are we go- ing to go through each one in detail? A. Many of the rest of the tools and options are covered where applicable in Hour 5. However, given the foundation this chapter has provided, you should feel comfortable exploring some of the other tools. For example, the Eraser tool has a modifier called Eraser Mode that’s strikingly simi- lar to the Brush Mode and Pencil Mode of other tools. Try to apply the knowledge you’ve gathered in this hour, and we bet you can figure out most of the other tools on your own.
  18. 68 HOUR 2: Drawing and Painting Original Art in Flash Workshop The Workshop consists of quiz questions and answers to help you solidify your understanding of the material covered in this hour. You should try to answer the questions before checking the answers. Quiz 1. The quick key for the Selection tool is V, for the Pencil is Y, and for the Brush is B. What’s the best way to find the quick keys for the other tools? A. By looking at the front of this book where they’re all listed for your reference. B. By going to the Adobe website. C. By rolling your cursor over the tool and waiting for the answer to appear as a ToolTip. 2. Is there more than one way to set fill color? A. Yes. Anyplace you see a swatch, you can set the fill color. B. Yes. The fill color swatch appears in many places, and setting any of them affects all the others. C. No. You must set the fill color from the fill swatch in the drawing toolbar (the swatch with the Bucket icon). Quiz Answers 1. C. Although Answers A and B might be true, the simplest way is to use the ToolTips. Although the default is Show ToolTips, you can change this setting by selecting Edit, Preferences. 2. B. You don’t need to memorize all the places where the fill swatch ap- pears; any fill swatch will do. Of course, you can’t change the fill color by adjusting just any swatch—it must be a fill swatch, not a stroke swatch. Exercise The Exercise section consists of exercises to help you practice the material covered in this hour. 1. Try your hand at creating perfect geometric shapes, such as cubes. Use Snap to Objects to help you. 2. Another idea is to try to copy a logo from a familiar brand-name prod- uct. This forces you to break down the task into geometric shapes.
  19. HOUR 3 Importing Graphics into Flash In the last two hours, you’ve seen how you can create sophisticated custom WHAT YOU’LL LEARN IN graphics quickly in Flash. Despite how powerful Flash’s graphic creation THIS HOUR: tools are, eventually you might need to import graphics created elsewhere. . Differences between You might need to use photographic images or existing graphics created vector and raster from another graphics program. In this hour, you learn how to import ex- graphics ternal graphics into Flash. . Ways to avoid imported graphics Vector Graphics Versus Raster . How to import vector graphics Graphics . How to import bitmap Vector graphics have certain characteristics that are due to how they are (raster) graphics stored by a computer. A vector graphics file contains the math to redraw . How to optimize and the image onscreen. For example, a circle includes information such as the maintain the best quality radius, the line thickness, and the color. All the graphics you create inside possible when importing Flash are vector based. Vector graphics have two advantages: The file size tends to be small (therefore, it downloads fast), and the image can be scaled to any size without any degradation of the image quality (a circle is still a circle, even if it’s a large circle). Vector graphics are great, but it’s important to realize their disadvantages. Vector graphics require the user’s computer to work hard to display the im- age, so you may see slower performance if an animation contains compli- cated vector graphics. Also, vector graphics can look “computery” or antiseptic because they tend to involve geometric shapes. Both disadvan- tages can be overcome, but you should be aware of them. Vector graphics are predominately used in Flash movies because, as you see in later hours, you have more control over how they can be animated.
  20. 70 HOUR 3: Importing Graphics into Flash Bitmapped graphics (also called raster graphics) are fundamentally different from vector graphics. A raster graphics file contains the color information for each pixel. If the image is 100 pixels by 100 pixels, that’s 10,000 pixels, each of which has a color value. As a result, raster graphics are almost al- ways relatively large files. Raster graphics also can’t be scaled effectively. They tend to get grainy, similar to a photograph that has been enlarged. An advantage of raster graphics is they appear onscreen very quickly. It might seem that vector graphics are obviously the better choice. How- ever, the decision of whether to use vector graphics or raster graphics should be based on the nature of the image. If the image is geometric, with clear delineations of color, a vector graphic is the best choice. If the image is a photograph of a person or a geographic location, nothing but a bitmap will do. Selecting which format to use is pretty easy when you know the considerations of each type. Reasons to Avoid Importing Graphics Flash’s capability to create nice vector graphics can be the best justification for this warning: Don’t import graphics into Flash unless you have to! In this section, you learn how to import graphics—but that doesn’t mean it’s always a good idea. If there’s one way to make your Flash movie download or play more slowly, it’s importing graphics unnecessarily. You need to find ways to avoid importing graphics. Wanting to import graphics is a natural tendency. If you show a graphics professional who’s an expert with Adobe Illustrator or Adobe Photoshop how to draw in Flash, his first question is how to bring his Illustrator or Photoshop files into Flash. We will show you how in the next section. Designers can create amazing and complicated vector graphics with other drawing tools. Some of the ways graphics files get more complicated in- clude the use of gradients, intricate text, and lots of individual objects. Us- ing such complicated graphics in Flash causes two problems. First, Flash can’t always handle all the intricacies in a complicated file, so sometimes the imported file doesn’t look as it was designed. Second, a complicated file downloads and plays more slowly than one that isn’t as complicated—so consider why you would want such a file in a Flash movie. The number one consideration when deciding whether to import a graphic into Flash should be whether a simpler version can be recreated in Flash or whether the graphic can at least be simplified before being imported into Flash. If
Đồng bộ tài khoản