Flash CS4 Professional in 24 Hours- P5

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

lượt xem

Flash CS4 Professional in 24 Hours- P5

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- P5: 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- P5

  1. Workshop 111 Q. Okay, I moved the contents, so the registration point aligns with the ex- act axis of rotation, but when I rotate the instance onstage it’s still us- ing the center point. I know for a fact this used to work in an older version of Flash. What gives? A. You need to edit the transformation point. That’s the white circle that appears when you use the Free Transform tool and select the symbol in- stance. If the transform point seems to be in an odd location, remember it’s always the visual center at the time the object was created. If you’ve edited the contents of the master symbol, it could get all out of whack. Not to worry, you can always edit it by hand. 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. If you don’t see a symbol that you know you’ve created listed in the Li- brary window, what is the likely cause? A. You have an outdated version of Flash and should get the up- grade. B. You’re either not looking at the Library window for the current file or the symbol is hiding in a folder. C. You forgot to name the symbol; therefore, it isn’t listed. 2. Which of the following are clues you are currently editing the master version of a particular symbol? A. The Edit Bar contains the symbol’s name, and a big plus sign ap- pears in the middle of the screen. B. The Properties panel is grayed out. C. The symbol is highlighted in the Library window.
  2. 112 HOUR 4: Staying Organized with the Library and Layers 3. Should you consider using another color style setting instead of alpha when you simply want an instance to be faded back? A. No, nothing beats alpha. B. Yes, you should never use alpha. C. If the instance is not on top of anything else, then, yes, you should consider using brightness or tint instead. Quiz Answers 1. B. A Library from another file can fool you, and putting symbols in folders can effectively hide them from your view. The drop-down list in the Library enables you to view the library for any other currently open Flash file. Consider, too, that Answer C can’t be correct because every symbol must have a name. 2. A. The Edit Bar is the main clue you’re in the Library. By all means, don’t let the Library window fool you—Answer C is absolutely wrong. 3. C. If the alpha color effect is used, it’s only effective, and therefore worthwhile, when it’s on top of something that can show through it. Brightness and tint can be used to get the same effect, and both perform better than alpha on slower machines.
  3. HOUR 5 Controlling Color You’ve spent the last few hours acquiring basic drawing and graphic-im- WHAT YOU’LL LEARN IN porting skills. This hour, you’re going to concentrate on gaining fine control THIS HOUR: of the features involved with these skills. . Practical ways to use On the one hand, this hour could be called “Advanced Drawing,” but the Blends and Filters techniques you learn have just as much to do with accurately presenting . How to create custom graphics with the right color and alignment as it does with creating graph- color swatches and gra- ics from scratch. Everything you learn in this hour should help you create dients perfect layouts, which is a different matter than the subjective topic of cre- ating nice-looking graphics. Using Blends and Filters Last hour you learned many ways to customize instances from the Library—such as scaling, rotating, and tinting them. Two additional ways you can tweak instances is by using Blend modes and applying Filters. Blends define how overlapping instances blend with each other. The alpha effect controls the transparency of an object. Blends, however, are much fancier than changing the RGB or Alpha values, and allow you to achieve such effects as Invert, which looks like a photographic negative, and Darken, which shows only the darker of two colors. If you’re familiar with Photoshop, you will find Blends very much like the Blend Modes in Photoshop. Filters are like special effects filters found in imaging programs such as Adobe Photoshop. The Drop Shadow Filter, for example, is a powerful and easy way to make an instance appear to float off the screen. Filters are non- destructive, meaning they don’t permanently change the symbol. You can apply different Filters on several instances of the same symbol, and, if you choose, later adjust or remove the Filter effect. In this hour, you see how
  4. 114 HOUR 5: Controlling Color Blends and Filters work; in the next hour, you see practical ways they can be applied to your projects. Blends Applying a Blend is nearly identical to applying a color effect. Select an in- stance, and choose one of the Blend options from the Properties panel un- der the Display section, as shown in Figure 5.1. FIGURE 5.1 The Blend you select from the Prop- erties panel affects how a symbol composites with what is under- neath it. Many blend options are provided by Flash. Here are the options and de- scriptions of what they do. . Normal—The default or no blend. . Layer—Analyzes everything inside the overlay and ensures it ap- pears as expected. This Blend is subtle, but jumps out when you change the alpha color style on a symbol containing multiple overlap- ping objects. For example, if you draw an ice cream cone Movie Clip using a triangle under a circle, and then set the clip’s alpha to 50%, you see through the ice cream scoop to the cone underneath—unless you also use the Layer blend. Simply put, the Layer blend makes al- pha transitions accurate. Layer is also required when a nested clip is set to Alpha or Erase. . Darken—Shows the darkest color. That is, you see the overlay except where the base is darker.
  5. Using Blends and Filters 115 . Multiply—Mixes the two colors. The effect is least when base and overlay are similar colors and greatest when the base and overlay are different colors. . Lighten—Shows the lightest color. That is, you see the overlay except where the base is lighter. . Screen—Similar to Multiply, but it uses the inverse of the overlay to make a result that appears washed out. . Overlay—Applies the Screen blend on pixels where the base is dark and applies Multiply where the base has light pixels. . Hard Light—The exact opposite of Overlay. Hard light applies the Screen blend on pixels where the base is light and applies Multiply where the base has dark pixels. . Add—Adds the base and overlay, with the maximum being white. . Subtract—Subtracts base and overlay with the minimum being black. . Difference—Subtracts the darker color from the lighter color regard- less of whether that color came from the base or the overlay. . Invert—Inverts the base only. This makes it look like a negative. . Alpha—Like Erase, Alpha requires more than a base color and the overlaying clip on which you apply the blend. You apply the Alpha blend to a clip that’s nested inside another clip, and that parent clip must have its blend set to Layer. The clip on which you set the Alpha blend should contain graphics that contain some level of trans- parency. The amount of transparency determines how much of the parent clip is revealed or see-through. That is, where the nested clip is 100% alpha, you see just the parent clip. Where the nested clip is 0% alpha, you won’t see the parent clip, but rather see through to what- ever is underneath. If you’re familiar with masking, the Alpha blend lets you create a gradient alpha mask. . Erase—Requires that the clip on which the Erase blend is applied is nested inside another clip that is set to Layer. Primarily, the nested clip set to Erase clears away its parent clip and shows through to whatever is underneath. It’s the opposite of Alpha because where the nested clip is 100% alpha you see through the parent to what’s un- derneath and where the nested clip is 0% alpha you only see the par- ent clip. Notice the base is just as important as the overlay—sometimes it’s more im- portant. This list doesn’t give you practical uses for each option. One per- fectly legitimate way to use blends is by exploring. However, you see several practical uses later this hour.
  6. 116 HOUR 5: Controlling Color Using Filters You can apply filters to any symbol instance or text object onstage. First, open the Filters panel, select an object, and then select the filter you want to apply. Take a look at Figure 5.2. FIGURE 5.2 You can apply advanced special ef- fects to symbol instances using the Filters panel. Properties for selected filter Enable or disable filter Clipboard Presets Add filter Reset filter Delete filter To start, select an instance, and then click the Add Filter button (on the bot- tom left of the Properties panel) to select a filter. The menu that appears en- ables you to remove, enable, or disable all filters already applied to the instance. You can individually remove filters by clicking the Delete filter button, but don’t press Delete on your keyboard because it removes the symbol instance. You can also click the button with an eye icon to tem- porarily disable individual filters. After you’ve added a filter, the properties for that filter appear on the right side of the panel, like adjusting the strength or blur of a filter. The Filters panel supports adding multiple filters to get a layered effect. For example, you can use the Adjust Color filter to turn a color image into black and white, and then also add a Drop Shadow filter. Because multiple filters are cumulative, the order in which they’re applied makes a differ- ence. If you apply a Drop Shadow and then a colored Glow, the Glow is ap- plied to the instance as well as its Drop Shadow, and you see color all
  7. Using Blends and Filters 117 around the shadow. If you put a colored Glow and then a Drop Shadow, CAUTION the object and its Glow are given a Drop Shadow, and the color only sur- Applying Presets rounds the instance. Because the order matters, you can click and drag to Removes Existing Filters reorganize the filter order listed in the Filters panel. The filters listed on top When you select one of the pre- are applied first. set filters you’ve saved, it wipes away any filters already applied After you’ve spent time setting all the properties the way you want for one to an object. If you want to sup- or more filters, you can save the settings as a preset. Click Presets, Save As. plement a preset, start by apply- ing the preset, and then make The properties available for each filter vary, although there are some consis- adjustments or add more filters. tencies. For example, all except the Adjust Color Filter include an option for Quality. This affects how smooth or choppy the gradations appear. Interest- ingly, Quality affects performance but has almost no impact on file size. You notice the visual impact of the Quality setting most when the blur is greatest. The good news about all the filters is you see their visual effects immediately, so it’s worth exploring the various options. The blends tend to require a little more foresight because many blends don’t have any visible effect under certain conditions. Like blends, we list the filters and let you explore on your own. Later this hour. you get plenty of exercise applying them to real tasks. . Drop Shadow—Creates a single-color duplicate of your instance’s shape, slips it underneath your instance, and offsets the location. There are options to control the strength or alpha, blur, angle, and off- set distance. Used conservatively, the Drop Shadow can add depth to an image. Interestingly, if you simply make the shadow very blurry and the same color as your symbol instance, it looks a lot like a mo- tion blur. . Blur—Blurs the entire content of your instance. Besides the out-of-fo- cus look, you can blur the X or the Y more than the other to get a mo- tion blur effect. That is, lots of Y blur makes something look like it’s moving up or down. . Glow—Makes a duplicate of your instance’s shape and blurs it. It’s like having a blur with your original layered on top. There are many specific reasons to use Glow, but a common one is to make text stand out when the text is too similar to the background color. . Bevel—Gives the instance an embossed look, almost like raised print- ing. The reason your instance looks raised is the upper left is light- ened or highlighted. It’s like there’s a light up to the left, so the bottom right is darkened as if that part is in the shadow of the object. You can change the highlight and shadow colors as well as the angle where the imaginary light is positioned.
  8. 118 HOUR 5: Controlling Color . Gradient Glow—Is just like Glow except the color of the glow is a gradation, that is it ranges from one color to another. . Gradient Bevel—Is just like Bevel except the colors for the highlight and shadow are gradated. . Adjust Color—Works best on instances that contain a raster graphic. It’s an intuitive filter for adjusting the contained color. Drag the Satu- ration slider all the way to the left (–100) to make a color photograph appear black and white. As a summary of color styles, blends, and filters, consider the normal process you follow to create a graphic. Start by making symbols based on a foundation of building blocks—basically, the graphics you can import or draw in Flash. Place them onstage, and then apply color styles or filters. Blends enable you to define how layered objects appear. When you want the same effect applied to multiple objects, you can nest symbols inside symbols. Although in Hour 2, “Drawing and Painting Original Art in Flash,” and Hour 3, “Importing Graphics into Flash,” you learn ways to either create or import graphics, the color styles, blends, and filters give you ways to create even more advanced effects. Plus, compared to importing raster graphics with the same visual effect, applying effects to instances in this manner is more bandwidth friendly. You’re being efficient by storing graphics in the Library, but because all these effects are applied at runtime, they are almost always smaller than raster alternatives. Of course, they’re also better be- cause you can make edits right inside Flash. It’s worth noting that even though such runtime effects don’t add much to file size, they do tend to re- duce your movie’s performance by making it play slower. Don’t worry, though, because the impact is not an issue unless you overdo it. Plus, you learn ways to optimize performance in Hour 23, “Optimizing Performance.” Creating and Saving Color Swatches In the following sections, you learn how to create and save color swatches to easily produce customized color palettes for movies. This helps you en- sure a color theme is maintained throughout a Flash Movie or an entire site. You also see how to create and control gradients.
  9. Creating and Saving Color Swatches 119 Creating Solid and Gradient Swatches In Hour 2, anytime you want to color a line or fill, you select the swatch of your choice from the Fill Color or Stroke controls in the Tools panel or Properties panel. Clicking the fill color exposes all the swatches that are currently available. Creating a custom color swatch involves two basic steps: using the Color panel to pick a color, and then saving it as a swatch. This process is easy, but it’s still worth stepping through carefully the first time. In the following task, you create a custom color by using both the Color panel and the Swatches panel. In this task, you look at several ways to create colors, and then save TRY IT YOURSELF ▼ them as swatches for use later. Follow these steps: Create a Custom 1. Make sure both the Color panel and the Swatches panel are visible. Color and Swatch 2. In the Color panel, click the color picker, shown in Figure 5.3, and drag as you move through all the colors. Although the choice of colors isn’t infinite, there are more than 216 variations. 3. You should notice as you move through the color picker that the num- bers in the RGB (red, green, blue) fields change. Colors are mixed from 256 shades of red, green, and blue with numeric values 0 to 255. These numeric values can be particularly useful. For example, a com- pany that wants its logo colors to remain consistent can provide spe- cific RGB values. 4. Another way to select a color is to sample it from somewhere else, even from outside Flash. For example, to use a color from a web page, open the page in a browser, and resize the Flash application so you Color picker can see both the web page and the Flash program at the same time. FIGURE 5.3 5. In the Color panel or Tools panel, click and hold the fill color. As you Selecting a color from the Color drag, move to the website in the background (see Figure 5.4). The cur- Mixer panel requires that you click the color picker square. rent fill color changes to the color from the web page when you release the mouse button. 6. Now that you’ve created a new color, you could use it immediately by selecting the Brush tool. Instead of trying it now, save it as a swatch, so you can easily select it later without using the Color panel. In the Color panel’s options menu, select Add Swatch. This adds the current color to the bottom of the Swatches panel. Another way to add a swatch is by enlarging the Swatches panel, and then clicking underneath all the existing swatches.
  10. 120 HOUR 5: Controlling Color ▼ TRY IT YOURSELF Create a Custom Color and Swatch NOTE Panel Options Menu Remember that each panel has a subtle options menu available at the top right of its title bar. FIGURE 5.4 Sampling a color from outside Flash is possible. A web page is positioned on the left for sampling. 7. Scroll to the last color in the Swatches panel to find the new color. You can also find the color anytime you click to select a color for your fill color or stroke color (see Figure 5.5). FIGURE 5.5 After a swatch is added, it ap- pears almost everywhere—as a fill color, a stroke color, or a text color.
  11. Creating and Saving Color Swatches 121 NOTE Color Systems You’ve seen how to select colors and save a swatch. Even though we added There are several ways to describe a swatch for a custom color selected from the Web, it’s also convenient to color. Your monitor has three color save any color, even one that already has a swatch. For example, if you’re guns that project red, green, and blue, using the same orange color repeatedly, you don’t have to remember it’s respectively. Using RGB to describe a color tells each gun how much of its the one in the eighteenth column and seventh row of the Color Swatches color to project. With 256 shades of panel. Just save a swatch, and it becomes one of the few swatches in the last color for each gun (0–255), practically row. You can even create a whole row of black swatches (21 across), so you any color (16.7 million or so) can be created by mixing the three guns. Even can easily see where your custom swatches begin. though RGB may be the most intuitive color system, other systems exist. In the preceding task, you sampled a color and added it to the swatches. Consider that the range of 0–255 used You can also enter the exact RGB if you know it. Alternatively, you can use in RGB means nine characters are nec- HSB (hue, saturation, brightness) if you change the setting in the Color essary (three for each color because panel’s options menu. The Hex value always appears under the color the number 255 has three digits). The Hex system was developed to de- picker. In addition, that same editable Hex field appears in the color scribe RGB by using only six charac- swatches that pop up next to the fill color or stroke color in the Tools panel ters. Hex uses only six characters by or Properties panel. extending the 10-base numbering sys- tem (which has only 10 characters, Finally, for any color setting, there’s an option for the percentage of alpha. 0–9) to a 16-base system (0–9 plus A, The lower this percentage, the more transparent the color is. This is conven- B, C, D, E, and F). The result is that red, green, and blue each get two char- ient; however recall from Hour 4, “Staying Organized with the Library and acters. For example, FF0000 is pure Layers,” that you can also apply the Alpha color effect on a symbol in- red (the highest value for red, FF, and stance. That’s not the same thing unless the symbol is all one color, but the no green or blue). Magenta is FF00FF (a mix of red and blue). In Flash, you exact appearance of a color changes when you modify the alpha. If the see two designations of a value that is color is in your client’s corporate logo, you probably don’t want to change presented in Hex: the prefix 0x, as in its alpha. 0xFF000, and the more standard prefix #, as in #FF0000. HTML also uses the Even though the process for creating swatches is time-consuming at first, it Hex system to describe colors. can really help you down the line. For instance, although swatches are Still another system HSB uses is the three factors: Hue (think angle in a saved only with the current Flash file, after you’ve taken the time to create color wheel), Saturation (how much custom swatches, you can save them as a Flash Color Set file. From the chroma the color has or how rich it is), Swatches panel’s options menu, you select Save Colors. The file you save and Brightness (the amount of white— as if you’re adding white to a paint can be used with other files or by other team members. To load colors that color). have been saved this way, you select Replace Colors from the Swatches There’s no difference in the resulting panel’s options menu. Notice the feature is called Replace not Add—so it color when you use any system: RGB, replaces any custom colors you’ve already created. Hex, or HSB. For example, in the previ- ous example, the reddish color we No doubt you’ve noticed the fill color can be a gradient. You see both radial sampled had 238,59,65 when ex- pressed in RGB, which is identical to and linear gradients in the default color swatches any time you click to saying #EE3B41in Hex. It’s almost specify the fill color. In the following task, you learn how to create your like the difference between English own custom gradient. and Spanish: You can say “red” or “rojo,” and the result is the same. Flash’s Color panel is a nice way to get a feel for the differences. You can select a color, use the options menu to change the setting from RGB to HSB, and then view the results.
  12. 122 HOUR 5: Controlling Color ▼ TRY IT YOURSELF In this task, you create a custom gradient. This task requires that the Color panel be fully expanded and the Swatches panel be present. Follow these Create a Custom steps: Gradient 1. Expand the Color panel and arrange the Swatches panel so the two panels are not docked to each other. Click the bucket icon in the Color panel to define a gradient for the fill portion. You can set a gradient for both the fill and the stroke separately. Extend 2. Select Linear from the Type drop-down list. Notice the Color panel Reflect changes in several ways. A sample gradient appears in the color picker Repeat area; two little triangle arrows appear at each end of the gradient sam- ple, which enables you to edit the color at either end; and the Overflow FIGURE 5.6 drop-down menu appears. You can set the gradient to appear once or Gradient overflow options are extend, reflect, (meaning it goes from the first color to the last color, shown visually in the drop-down then back to the first, and so on), or repeat, (meaning it goes from the menu in the Color panel. first color to the last, then first to last again, and so on). (See Figure 5.6.) 3. Either arrow (indicating the end of a gradient range) can be edited. The one with a black triangle indicates it’s the one being edited currently. Click the one on the left, and the pointer head changes to black, as shown in Figure 5.7. Now edit this starting color by double-clicking to select a color of your choice in the swatch fly-out menu that opens. Choose a yellow color. 4. Select Radial Gradient from the Fill Style drop-down list, and you see the Color panel change again—but only in that the gradient sample is oval. 5. Double-click the pointer on the right side of the gradient and then select a bright blue color. You should now have a radial blend that goes from yellow to blue. 6. To add more colors to the gradient, click under the gradient definition FIGURE 5.7 bar in the Color panel, the short wide sample gradient. New pointers With the left side of the gradient appear, and you can move them and edit their colors. To remove a selected, you can double-click to change the color. color, drag the pointer straight down. 7. To save this gradient in your Swatches panel, either select Add Swatch in the Color panel’s options menu or click in the Swatches panel to the right of the gradients that are already saved. This simply creates a new swatch based on the currently selected color. Now that you have a custom gradient, you learn how it can be used in a movie.
  13. Creating and Saving Color Swatches 123 Using and Transforming Gradients Whether you use the default gradients or create your own as you did in the previous task, there’s more to using gradients than selecting one of your choice for the fill or stroke colors. The Gradient Transform tool gives you some powerful ways to edit the precise look of your gradients. The Gradi- ent Transform tool shares a slot in the Tools panel with the Free Transform tool. That means you have to click and hold the button for the Free Trans- form tool to access the Gradient Transform tool (or press F). The Gradient Transform tool only edits gradients already applied to a fill or stroke onstage. It doesn’t create anything. If you select the Gradient Trans- form tool and then select an existing gradient, you’re given handles that en- able you to adjust the attributes of a gradation. You can adjust the falloff rate, center point, rotation, and, in the case of radial gradients, the shape and focal point. When you create fills that use a gradation, such as when you use the Bucket tool, you have an option called Lock Fill. While Lock Fill is selected, all the shapes you fill are part of the same gradient. If that gradient goes from black to white, the transition is spread out through all the objects. If Lock Fill is not selected, each shape repeats a single gradient from black to white. In the following task, you practice using the Gradient Transform tool and the Lock Fill option. In this task, you explore using the Lock Fill option and the Gradient Trans- TRY IT YOURSELF ▼ form tool to gain full control of gradients. Follow these steps: Transform Attributes 1. Select the Rectangle tool; make sure Object Drawing is deselected in of Gradients Used the options area; select a solid fill color; and draw two squares close in a Movie together. Deselect everything by pressing Esc. 2. Select the Paint Bucket tool and a radial gradient from the fill color swatch. (The white-to-black default is fine.) 3. Make sure the Lock Fill option is not selected. The Lock Fill is con- trolled by a button at the bottom of the Tools panel when the Paint Bucket tool is selected, as shown in Figure 5.8. Click once in each square to fill it with the radial fill. Both squares have the entire radial effect—from white to black. This is the normal mode. Notice the radial gradient centers around where you clicked. Continue to click in differ- ent locations within each square to see that the center of the gradient appears where you click.
  14. 124 HOUR 5: Controlling Color ▼ TRY IT YOURSELF Transform Attributes of Gradients Used in a Movie FIGURE 5.8 Lock Fill is at the bottom of the Tools panel when the Paint Bucket is selected. 4. Click once near the edge of a square that borders the other square. Click Lock Fill. Now the last fill you made defines the start of all subse- quent fills because Lock Fill has been turned on. Although it’s not re- quired, you might encounter fewer problems if you first fill one shape, and then turn on Lock Fill before continuing. 5. Click the other square. You should notice the gradient continues from where it started in the first square; that’s the result of Lock Fill being selected. If you click the first square again, the center point of the gradi- ent remains locked. 6. Press F to select the Gradient Transform tool. You can edit the fills you’ve made. With this tool selected, you can edit fills that are already on the Stage. 7. Click the fill of one of the squares, and several handles appear, as shown in Figure 5.9. You can now move the gradient’s center. The han- dles on the edge enable you to change the shape of the radial gradient, falloff rate, focal point, and rotation. 8. You probably find these handles to be very intuitive, but you should experi- ment with them a bit. Click and drag the Move handle to change the center point of the fill. (Figure 5.10 shows six handles that all change your cursor.) 9. Click and drag the Reshape handle to make the gradient an ellipse rather than a perfect circle. Notice in Figure 5.10 that the Reshape cur- sor is similar to the cursor you see when you scale an object.
  15. Controlling Color 125 TRY IT YOURSELF ▼ Reshape handle Transform Attributes of Gradients Used in a Movie Move focal point handle (only for radial gradients) Falloff handle Move center point handle Rotation handle FIGURE 5.9 You can use the Gradient Transform tool on this gradient, which spans multiple shapes because Lock Fill was selected. 10. The Focal Point handle lets you change the symmetry of the radial gra- dient. The effect is similar to the Reshape handle; however, the Focal Point identifies the hot spot within the entire shape. The Focal Point handle adjusts how oblong the gradient should appear. 11. Use the Falloff handle to change the rate at which the gradient changes from white to black. A custom Falloff cursor is shown in Figure 5.10. FIGURE 5.10 The different features of the Gradi- ent Transform tool have different cursors. Move Falloff Focal point Reshape Rotation Gradient Transform tool active 12. Adjust the rotation of the reshaped gradient. You see the same Rotation cursor that is shown with the traditional rotation tool in Figure 5.10. With radial gradients, you have to reshape the fill before the rotation handle provides any results.
  16. 126 HOUR 5: Controlling Color You might think that we’ve spent an inordinate amount of time with grada- tions. However, it’s really a powerful effect—sort of the poor-man’s 3D. Figures 5.11 and 5.12 show two simple examples (including a pseudo- sphere) that are created using gradients. FIGURE 5.11 A simple filled circle becomes a sphere when you tweak a radial gra- dient. FIGURE 5.12 A subtle gradient with Overflow set to reflect adds a subtle touch to this picture frame. Summary You’ve acquired a lot of skills in these first five hours. Refining those skills and applying them to whatever challenges you encounter is a matter of practice. In this hour, you have created and used swatches and custom gradients. You also got plenty of practice using the Gradient Transform tool. Perhaps the most valuable aspect of this hour was how some of the later tasks had practical and specific applications. It’s relatively easy to learn all the tools, but much harder to apply them. There are too many applications for Blends and Filters to cover during this hour, but you should have gotten a good sense of the potential of these tools.
  17. Summary 127 Q&A Q. I turned on the Lock Fill option of the Paint Bucket tool, but when I fill a shape with a gradient, I see a solid color. What’s going on? A. If you think you’re looking at a solid color, it’s possible you’re seeing one end of the gradation. The best way to use the Lock Fill feature is to first fill a shape with Lock Fill turned off; then, turn it on and continue to fill other shapes. Otherwise, what often happens is the gradient’s Fill Transform handles are set so the falloff is extremely large. If this hap- pens, you can try setting the Stage zoom level to 25% and selecting the Fill Transform tool. You might then see the handles for the gradation way off the Stage. Q. I set the blend of an instance to Invert and expected to see a negative version of that symbol. Instead, it made my symbol black. How do I get that inverse look? A. Remember that blends almost always require both an overlaying in- stance that has the blend applied as well as the objects (such as shapes, Drawing objects, or other symbols) that are underneath. To see the inverse of an instance’s contents, create a solid shape (like a rec- tangle the same dimensions as the instance you want to invert) and put it underneath the instance with the blend applied. You can play around with the color of that shape for different effects. Alternatively, put the in- stance’s blend back to Normal, convert the shape to a symbol, and ap- ply a blend to that solid instance. Make sure the solid is on top of your original instance. Q. What is the best color specification system to use: RGB, HSB, or Hex? A. Whichever one you prefer. No one system is better than the other. For every color onscreen, there’s a corresponding color value in any of the systems. If your client provides its trademark colors in RGB, you can use RGB. If someone provides you with the hexadecimal values for color, you can use that system. The three systems are essentially the same.
  18. 128 HOUR 5: Controlling Color 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. When you create a gradient swatch, which panel(s) do you use? A. The Swatch panel and the Gradient panel B. The Properties panel C. The Color panel 2. Before Flash included Filters and Blends, it was pretty much impossible to use it for graphics. A. True. B. No. You could still create graphics; it was just a bit less advanced. C. No. Filters and Blends only apply to raster graphics, so you’re fine if you don’t plan on using those. Quiz Answers 1. C. The Color panel is where you create and edit a custom gradient. There is no Gradient panel, so Answer A is definitely incorrect. 2. B. Filters and Blends are just tools. There is usually more than one way to create an effect.
  19. HOUR 6 Applied Layout Techniques Before moving on to animation next hour, you get one more hour to polish WHAT YOU’LL LEARN IN the skills you’ve acquired so far. Whether you’re creating a graphic that ani- THIS HOUR: mates or remains stationary, making it look polished requires both an eye . How to fine-tune text for detail and Flash skills. In this hour, you learn the skills to create great display looking graphics with minimal effort. . Additional tricks for creating perfectly aligned graphics Setting Text . Practical uses for Blends Back in Hour 2, “Drawing and Painting Original Art in Flash,” you learned and Filters the basics of placing text in your movies. In this hour, you gain skill in mak- ing your text appear exactly as you intend, including when the text changes at runtime or when it includes special effects. You also learn a few inciden- tal tricks to help make text appear exactly how you want. Static Text Layout Any time you need text that isn’t changing throughout the movie, you should use the Static Text option from the Text Type dropdown in the Prop- erties panel. If you need text that changes (like if you want to display the time the user visits), you need to use Dynamic Text. If you want a text field into which the user can type his name, you must use Input Text. Both Dy- namic and Input can change at runtime; Input can be entered or changed by the user. Most of the time your text does not need to change, so you use Static text. We get to Dynamic and Input text in a minute, but for now let’s look at ways to control Static text. One of the main benefits of Static text is the user doesn’t need a copy of the font you used. However, you or anyone else changing the text in the source (.fla) file needs the font used in the movie
  20. 130 HOUR 6: Applied Layout Techniques to change the Adobe Flash SWF (.swf) files. This is important when work- ing on a team. For example, when your colleague sends you a .fla that uses a font you don’t have installed, you can make changes to any part of the file, except the text. As long as you send the file back to be published, the fonts used in the file will not be changed and will look as they should in the final movie. When you open a .fla that contains fonts you don’t have installed, Flash displays the Font Mapping dialog shown in Figure 6.1. Unless you want to globally substitute a particular font, select System Default. FIGURE 6.1 Select Use Default on the Font Mapping dialog, and you can send a .fla back to a colleague to pub- lish with the necessary fonts. TIP Using Find and Replace to Replace Fonts You might want to globally re- place every instance where you used a particular font, but you don’t like the idea of removing the font from your system, re- launching Flash, and using the Substitute Font option in Font There are a few more points you should know about using Static text. First, Mapping. To avoid this, you can be conscious of the Selectable option located in the Properties panel when a use Flash’s advanced Find-and- text block is selected. The Selectable text is what it sounds like—text that a Replace panel. Press Ctrl+F and user can select with their cursor. Only enable Selectable text when it makes what looks like a standard dia- log appears. You can also do sense. Users don’t need to select things like headlines or text that appear more advanced things such as only briefly during an animation. limiting your search to a particu- lar font. From the second drop- Here’s a tip for making any color text look good on any background. Some- down, select Font, then select times in foreign films you see white subtitles. That works great on a dark the font you’re looking for in the background, but the same white is impossible to read on a white back- third dropdown. Also, if you acci- ground. If you want to ensure text stands out on any color background, you dentally set one block of text to can use the Glow Filter. For example, if your text is light, you can create a 12 point instead of 11, you can glow-in-the-dark color as shown in Figure 6.2. Set the blur factors to some- find it immediately using this tool. thing low, like 2. Interestingly, the low quality setting makes the text stand out more. The blur isn’t as smooth, but that makes the text sharper.
Đồng bộ tài khoản