Flash CS4 Professional in 24 Hours- P3 ppt

ptg Tools 51 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. Use the Pen Tool TRY IT YOURSELF ▼ 6. Finally, while still holding down the mouse button, you can increase or decrease the distance you’re dragging from the point you clicked. This 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. Create and Style Text TRY IT YOURSELF ▼ In this task, you explore using text in Flash. Follow these steps: 1. In a new file, select the Text tool, click the Stage, and then type a 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 square to indicate the margins are fixed. You can double-click the square margin control to restore the automatic margin adjustment (that is, to make it a circle again). FIGURE 2.17 The circle in the top-right corner indicates the margins adjust to fit what you type. Once you’ve set the margins by dragging any han- dle on the text, the circle turns to a square. From the Library of Lee Bogdanoff ptg 52 HOUR 2: Drawing and Painting Original Art in Flash TRY IT YOURSELF ▼ Create and Style Text 3. While editing the text block, you can set the margin. Make sure the I- 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 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 ahead, and type a couple lines of text. You should see the text wrap even though you didn’t press the Enter key. 4. Now that you have some text in the block and have set the margins, it’s time to modify some attributes of the text. Two ways to modify the text include: selecting all or some of the characters or adding more where you’re editing the contents of the text; or, selecting the entire block and picking it up, moving it, or modifying the attributes. This is not the same as simply selecting all the characters while editing the block. Click the Selection tool to stop editing the text. Your text block should be selected. If it isn’t, click it once, and a rectangle appears around it. 5. With the block selected, observe the Properties panel to make modifi- cations. For now, modify the text’s color, font, and font height, as shown in Figure 2.18. Any setting you make here applies to all charac- ters in the text because you’re editing the entire block. Most of the Properties are easy to learn. There’s an especially nice feature that al- ways displays a preview of the type face when you select a different NOTE Adjusting Text Margins By the way, if you had clicked and dragged with the Text tool to the right before typing (in- stead of clicking and then typ- ing), you would have created a margin in one step. You can always adjust the margins later, too. There are two ways: If you’re editing the actual text, you use the circle or square in the top-right corner; or, if you’re not actually editing the contents of a text block, you can still select it using the Selection tool. In this case, you can change the margins by dragging any of the square handles in the corners. FIGURE 2.18 The Properties panel enables you to change text attributes, such as font size and color. From the Library of Lee Bogdanoff ptg Create and Style Text TRY IT YOURSELF ▼ font. The preview displays the characters you have selected if you’re editing the contents of the text block. For example, if you double-click 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. Tools 53 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, FIGURE 2.19 When the block of text is selected, use the Properties panel to change the alignment (to Align Center, in this case). From the Library of Lee Bogdanoff ptg 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 From the Library of Lee Bogdanoff ptg 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 From the Library of Lee Bogdanoff ptg 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. From the Library of Lee Bogdanoff ptg 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. Use the Selection Tool to Select and Modify Shapes TRY IT YOURSELF ▼ In this task, you explore how the Selection tool’s cursor changes to inform you what happens when you click. Follow these steps: 1. Select the Oval tool, but before you draw, select a very thick stroke height (5 or so) in the Properties panel. Turn on Object Drawing via the 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 is selected by just clicking the white area of the Stage or pressing Esc. 4. Position the cursor over the circle you drew. If you click and drag you’ll 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 stroke independently, as it’s a shape, you’ll need to just click and drag—don’t click and then click and drag because that selects then moves the stroke portion. FIGURE 2.21 The Selection tool’s cursor changes when it is on top of a fill to indicate that clicking will start to move the fill. FIGURE 2.22 When the cursor is near a line, it changes to indicate that clicking will start to bend the line. From the Library of Lee Bogdanoff ptg TRY IT YOURSELF ▼ Use the Selection Tool to Select and Modify Shapes 6. Make sure nothing is selected and move the cursor so that it’s near another corner of the square. A corner shape is added to the cursor, which means that if you drag, you’ll be moving the corner point (see 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 remove that line portion. Do so now. 9. Deselect everything (by clicking a blank area onstage or pressing Esc) 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, you could simply double-click the fill of the square. How- ever, there’s another tool you can use to do this: the Lasso tool. 58 HOUR 2: Drawing and Painting Original Art in Flash FIGURE 2.23 When the Selection tool is near a corner, it shows yet another cur- sor, this time indicating that you can extend the corner. FIGURE 2.24 Sometimes using the marquee technique would select more than what you want. From the Library of Lee Bogdanoff ptg Selecting and Transforming Objects 59 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 Use the Selection Tool to Select and Modify Shapes TRY IT YOURSELF ▼ 13. Select the Lasso tool and then click and drag around a shape to se- lect it. The Polygon Mode option for the Lasso tool makes the tool act almost like the Pen tool, though the Polygon Mode behaves like a string or rubber band. Select the Polygon Mode option, as shown in 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 Lasso tool or the marquee technique with the Selection tool to select the portion desired (see Figure 2.26). If you want to select just part of the circle you need to first double-click (to enter the Drawing Object) 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.25 The Polygon Mode option for the Lasso tool lets you click for each corner of the selection you want to make. FIGURE 2.26 Using the Selection tool to marquee just part of a shape chops off the top of the circle in this case. From the Library of Lee Bogdanoff ptg 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. 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. FIGURE 2.27 The Dropper tool changes its cur- sor to indicate that it will sample a fill when you click. TRY IT YOURSELF ▼ Select Attributes with the Dropper Tool In this task, you’ll use the Dropper tool to select color and additional at- tributes. Here are the steps to follow: 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. From the Library of Lee Bogdanoff [...]... choose to place all imported layers into a single Flash layer, and you still get the visual stacking you’d expect Flash layers do more than just affect the visual stacking; they also let you maintain independent animations The point is that you don’t have to create a new Flash layer for each layer in the Illustrator file Finally, the option to turn Illustrator layers into Flash keyframes is useful if the... over how each bitmap item in your Library is treated during export Adjusting Bitmap Properties TIP Zooming Compression Preview When testing different compression settings, you can zoom in on the preview window on the Bitmap Properties dialog by right-clicking and choosing Zoom In Flash imports all kinds of raster formats, but uses only JPEG, GIF, or PNG in an exported movie In addition, any raster graphic... 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 From the Library of Lee Bogdanoff Importing Vector Graphics 71 you ask the graphics person to recreate the image in Flash, he might say... We discuss raster graphics in the section “Using Bitmaps (Also Known as Raster Graphics),” later in this hour, but first let’s look at importing vector graphics Importing Vector Graphics There might be times when you have an existing vector graphic that you need to include in a Flash movie In general, unless it’s complicated, you are able to import it into Flash Although Flash can import several vector... 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 From the Library of Lee Bogdanoff 66 ▼ TRY IT YOURSELF Use Snap to Objects to Draw Perfect Shapes and Connect Objects HOUR 2: Drawing and Painting Original Art in Flash move it You should be able to snap the end of the line to the... 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, rotation, 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. .. to do what he intended In that case, perhaps the solution lies in making the graphic simpler—not by squeezing it into Flash Having said all this, you probably still need to import graphics at some point—maybe you have a raster graphic, like a photograph, that you want to use, or perhaps you have a simple existing vector graphic, such as a company logo, that you don’t want to redraw in Flash We discuss... without changing any angles) The only tricky part of this step is that when the line is selected, if you don’t pick up and drag the line from the end point or the middle, you don’t see the 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... 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. .. drag the point of intersection to the right while remaining constrained 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 . 2: Drawing and Painting Original Art in Flash TRY IT YOURSELF ▼ Create and Style Text 3. While editing the text block, you can set the margin. Make sure the I- beam cursor is blinking in the. Drawing and Painting Original Art in Flash FIGURE 2.23 When the Selection tool is near a corner, it shows yet another cur- sor, this time indicating that you can extend the corner. FIGURE 2 .24 Sometimes. different NOTE Adjusting Text Margins By the way, if you had clicked and dragged with the Text tool to the right before typing (in- stead of clicking and then typ- ing), you would have created a margin in one