Flash CS4 Professional in 24 Hours- P5 docx

ptg 111 Workshop 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. From the Library of Lee Bogdanoff ptg 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. From the Library of Lee Bogdanoff ptg WHAT YOU’LL LEARN IN THIS HOUR: . Practical ways to use Blends and Filters . How to create custom color swatches and gra- dients You’ve spent the last few hours acquiring basic drawing and graphic-im- porting skills. This hour, you’re going to concentrate on gaining fine control of the features involved with these skills. On the one hand, this hour could be called “Advanced Drawing,” but the techniques you learn have just as much to do with accurately presenting graphics with the right color and alignment as it does with creating graph- ics from scratch. Everything you learn in this hour should help you create 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 HOUR 5 Controlling Color From the Library of Lee Bogdanoff ptg 114 HOUR 5: Controlling Color FIGURE 5.1 The Blend you select from the Prop- erties panel affects how a symbol composites with what is under- neath it. 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. 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. From the Library of Lee Bogdanoff ptg 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. From the Library of Lee Bogdanoff ptg 116 HOUR 5: Controlling Color Presets Add filter Clipboard Reset filter Delete filter Enable or disable filter Properties for selected filter FIGURE 5.2 You can apply advanced special ef- fects to symbol instances using the Filters panel. 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. 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 From the Library of Lee Bogdanoff ptg Using Blends and Filters 117 around the shadow. If you put a colored Glow and then a Drop Shadow, the object and its Glow are given a Drop Shadow, and the color only sur- rounds the instance. Because the order matters, you can click and drag to reorganize the filter order listed in the Filters panel. The filters listed on top are applied first. After you’ve spent time setting all the properties the way you want for one or more filters, you can save the settings as a preset. Click Presets, Save As. The properties available for each filter vary, although there are some consis- 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. CAUTION Applying Presets Removes Existing Filters When you select one of the pre- set filters you’ve saved, it wipes away any filters already applied to an object. If you want to sup- plement a preset, start by apply- ing the preset, and then make adjustments or add more filters. From the Library of Lee Bogdanoff ptg 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. From the Library of Lee Bogdanoff ptg 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. Create a Custom Color and Swatch TRY IT YOURSELF ▼ In this task, you look at several ways to create colors, and then save them as swatches for use later. Follow these steps: 1. Make sure both the Color panel and the Swatches panel are visible. 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 can see both the web page and the Flash program at the same time. 5. In the Color panel or Tools panel, click and hold the fill color. As you drag, move to the website in the background (see Figure 5.4). The cur- 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. Color picker FIGURE 5.3 Selecting a color from the Color Mixer panel requires that you click the color picker square. From the Library of Lee Bogdanoff ptg TRY IT YOURSELF ▼ Create a Custom Color and Swatch 120 HOUR 5: Controlling Color FIGURE 5.4 Sampling a color from outside Flash is possible. A web page is positioned on the left for sampling. FIGURE 5.5 After a swatch is added, it ap- pears almost everywhere—as a fill color, a stroke color, or a text color. NOTE Panel Options Menu Remember that each panel has a subtle options menu available at the top right of its title bar. 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). From the Library of Lee Bogdanoff [...]... you’re creating a graphic that animates or remains stationary, making it look polished requires both an eye for detail and Flash skills In this hour, you learn the skills to create great looking graphics with minimal effort Setting Text Back in Hour 2, “Drawing and Painting Original Art in Flash, ” you learned the basics of placing text in your movies In this hour, you gain skill in making your text... the same font installed 2 Where can you find the 3D effect in Flash? A The 3D filter in the Filters panel B There is no way to make something look 3D in Flash C There isn’t anything built in, but you can fake it by using simple effects such as the Drop Shadow filter Quiz Answers 1 C First, you should only use Dynamic or Input text if you have to When you do and you’re not completely certain users have... still selecting the text block and use the Properties panel to give the text an Instance Name To do this, enter clock_txt (as shown in Figure 6.4) into the Properties panel where it currently reads 4 Click any cell in the Timeline, and then select Window, Actions (You select the Timeline because the following ActionScript can’t be placed on the text.) 5 Type the following code into the... change the Line Type to Multiline Q The Blend mode called Invert causes everything underneath to invert, but I want my clip to look like a photographic negative The only way I can make it work is by placing a clip containing a solid on top of my clip containing the photo, but that seems like an unnecessary extra step Is it? A Yes You can simply apply the Subtract blend mode on the clip containing a photo... removing the font from your system, relaunching Flash, and using the Substitute Font option in Font Mapping To avoid this, you can use Flash s advanced Find-andReplace panel Press Ctrl+F and what looks like a standard dialog appears You can also do more advanced things such as limiting your search to a particular font From the second dropdown, select Font, then select the font you’re looking for in the... ribbon-like sheen Instead of the radial gradient, make a multistep gradient or one that repeats This technique works best for something like the picture frame shown during the last hour in Figure 5.12 from Hour 5, “Controlling Color.” The highlight effect in the previous task is more interesting when you add a little bit of motion—that is, when you animate it The following practical use for the Invert blend... you have to wait until Hour 16, “Basic Interactivity,” before learning how to use ActionScript Fonts become an issue with Dynamic or Input text when you consider the fact Flash can’t guess which characters it needs to include when publishing a swf (the way it does with Static text) When the movie runs on your user’s machine, Flash finds a substitute for any missing fonts This only happens with Static... stand out on a light background We’re going to move on to Dynamic and Input text, which are everything Static text is plus more The tricks you’ve seen for Static text apply to Dynamic and Input text Embedding Fonts for Dynamic Text We’ve explained that Dynamic and Input text can change at runtime The user can change Input text by typing But to see how to write the instructions to change Dynamic text at... groups you’ve selected in the top box FIGURE 6.3 You can selectively embed specific characters (glyphs) to ensure users see text with a font installed on your machine Embedding fonts enables you to include any font in Dynamic or Input text There are additional reasons why you might need to embed font characters Embedding is also required when you want to: Rotate the text (or put text inside a Movie Clip... Odd-shaped masks don’t work on Dynamic or Input text unless you embed the characters Finally, if you plan on applying Filters to Dynamic or Input text, you need to embed the font If you’re getting the feeling that it’s easier to always embed fonts when using Dynamic or Input text, you’re right—however, don’t embed unless you have to! It adds significantly to the final file size for your swf, (around 50K . with minimal effort. Setting Text Back in Hour 2, “Drawing and Painting Original Art in Flash, ” you learned the basics of placing text in your movies. In this hour, you gain skill in mak- ing your. 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, ”. 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