Flash CS4 Professional in 24 Hours- P4 pot

ptg Using Bitmaps (Also Known as Raster Graphics) 81 Figure 3.11 shows the results of using several different compression levels on the same image. Notice JPEG 80 and JPEG 100 are almost identical in quality, but JPEG 80 has a much smaller file size. You get the ultimate quality by using the compression option Lossless (GIF/PNG). It is selected by default when you import .png and .gif files, but you can select it any other time you want to use it. When this option is selected, Flash leaves the image in its original state. This option always pro- vides the best quality—but not without a price. File size is highest when this option is selected. This is a suitable alternative if you’re making a movie that doesn’t need to download from the web—for example, if you’re making a presentation that you are delivering on your hard drive or CD- ROM. Otherwise, you should use this option only on images where you want to retain the best quality possible. If your imported image is a .gif that already has a small file size, selecting Lossless is perfectly suitable. Be- cause even 100% JPEG compression causes some image degradation, the Lossless option is suitable for images that are particularly important. Fi- nally, the only way Flash supports 32-bit graphics (that is, raster images with varying degrees of transparency) is through .png items that you set to Lossless. The fact that PNG is the only format that supports transparency is another perfectly legitimate reason to use PNG. FIGURE 3.11 The results of different compres- sion settings on the same image shows how quality degrades and file size shrinks. From the Library of Lee Bogdanoff ptg 82 HOUR 3: Importing Graphics into Flash Smoothing Regardless of which compression option you use for your imported bitmaps, Allow Smoothing (as shown earlier in Figure 3.10) is another op- tion in the Bitmap Properties dialog. If you plan to scale or rotate the raster graphic, you want to click that check mark. Normally, a bitmap with its ex- plicit number of pixels looks fine without smoothing. However, smoothing lets Flash apply a tiny bit of blur when the image’s pixels don’t align per- fectly with the screen’s pixels, which is the case when you rotate or scale an image. You can see the effect of smoothing in a side-by-side comparison in Figure 3.12. The downside of smoothing is images can look a bit fuzzy, so don’t use it if you’re not rotating or scaling the image. If you’re using the image in a de- tailed animation, you want to opt for smoothing. Compared to how raspy a modified image looks without smoothing, you probably want to click the check mark to enable smoothing when appropriate. Importing Layered Raster Graphics Flash CS4 can import Photoshop .psd files. The value is that artists can work in Photoshop, and you can conveniently import the graphics they cre- ate. Compared to having the artist individually export each element and then you import it and place it in the correct position, this is a huge work- flow improvement. What’s doubly great about this new feature is that it’s so intuitive there’s not a whole lot to learn. FIGURE 3.12 Applying smoothing to the image on the left improves it when rotated, but the same effect makes the im- age look soft. From the Library of Lee Bogdanoff ptg Using Bitmaps (Also Known as Raster Graphics) 83 Like the Illustrator Import dialog, when you select File, Import, Import to Stage and point to a Photoshop file, you see all the layers and folders con- tained in the source Photoshop file, as shown in Figure 3.13. There are some striking similarities between the Photoshop import dialog and the Illustrator one discussed earlier—though this one is more ad- vanced. You can see similar global options at the bottom left as to whether to keep objects in position and or to convert layers into Flash layers or keyframes. Also similar is the way you can include or exclude layers by clicking check marks. A particularly handy feature in Photoshop, called layer comps, lets you save multiple arrangements of your layers and their contents. Artists can include tons of layers with all the graphics for an entire project in a single Photo- shop file. Then, they can make multiple compositions—for example, one where only the layers related to the home screen in your project are visible and another where the layers for a video section are visible. With layer comps, artists can quickly view different arrangements without going through and turning layers on and off. When you import a Photoshop doc- ument with layer comps, you see them listed at the top left, as shown in Figure 3.14. This gives you a quick way to select all the layers related to a particular layout. FIGURE 3.13 Importing a Photoshop document allows you to select how to import each layer. From the Library of Lee Bogdanoff ptg 84 HOUR 3: Importing Graphics into Flash After you’ve selected the layers you want to import, you can set the options for how each layer gets imported on the right side of the import dialog. Provided you don’t want to accept the defaults, you individually select each layer and make adjustments to the options on the right. All layer types can be imported as a flattened bitmap, which is the best way to retain the exact look created by the artist. You see slightly different options in text lay- ers and shape layers, but the big difference from the Illustrator importer discussed earlier is that for each layer you import as a flattened bitmap, you can individually set the publish settings. The publish settings for each imported layer affect the Bitmap properties for the contained objects when they appear in the Library. These settings are the same ones you learned about in the previous section “Adjusting Bitmap Properties.” This way, you can make the decision between JPEG and PNG/GIF and whether to use Flash document’s publish settings for compression or set them individually for each item. The odd thing is that the terms are slightly different than the ones you just learned. Where the Photoshop importer says Lossy Compression, it means JPEG in the Bitmap Properties dialog (accessible by double-clicking an item after it’s in the Li- brary). Where the Photoshop importer says Lossless, it means PNG. Although you always see the best quality by importing layers as flattened bitmaps, other options also have some value. In the case of text layers, you can opt to import as editable text. You can make edits to the actual wording FIGURE 3.14 You can use the Layer Comp drop- down to quickly select the layers re- lated to a particular layout. From the Library of Lee Bogdanoff ptg 85 Summary later, but realize you immediately lose any layer effects applied to the text. Photoshop supports very detailed text effects that are unmatched in Flash. For both shape and text layers, you can choose to keep paths and layer styles editable. Not only does this mean you see subtle differences in the image after it’s inside Flash, but a complex Photoshop document translates to a complex Flash document. Be prepared to test any import process if you’re not importing as flattened bitmaps. To summarize the suggested workflow, select the layers you want to im- port, either by clicking the check marks or by selecting a layer comp, which effectively selects the layers for you. Then, go through each layer to adjust the publish settings or do this later via the Library item’s bitmap properties. Summary When possible, you should create graphics inside Flash. But sometimes you can’t. There are times when you need to import graphics, such as when you have an existing graphic that would be impossible or difficult to recreate in Flash or when a graphic requires a raster file type, such as a photograph. When you’re certain you want to import, Flash provides you with mecha- nisms to do so. Q&A Q. Importing Photoshop and Illustrator files looks pretty cool, but I don’t have those programs. How can I test out some of what I learned this hour? A. You can find some sample .ai and .psd files in the downloads section of the publisher’s website. Q. I’m having trouble importing images from a digital camera. I have some great shots of my potato chip collection, but they’re huge after I import them. How can I resize them? A. Because multi-megapixel cameras produce originals that can be thou- sands of pixels wide, you don’t want to import these directly. First use an image editing program, such as Fireworks, to resize the image to fit comfortably on a normal screen size—that is, less than 1024×768 or 800×600. Taking a megapixel image and scaling it down inside Flash does not improve the sharpness and actually does the opposite if you don’t select the Allow Smoothing option. Worse still, the file size will be huge. Don’t do that; instead resize and optimize the image before importing! From the Library of Lee Bogdanoff ptg 86 HOUR 3: Importing Graphics into Flash Q. I have a photograph that I use as a raster graphic in my Flash movie. After I scan it into the computer and touch it up, what file format should I choose? There are so many. A. Generally, you want to keep all your raster graphics in the highest-quality format possible before importing into Flash. One exception is when you use a tool, such as Fireworks, to produce an optimally compressed im- age. If you use an outside program to compress the image, make sure you don’t recompress in Flash; leave the default setting Use Imported JPEG Quality. Alternatively, if you import a high-quality .pct, .bmp, or .png, you can compress it in Flash until you’re satisfied with the com- pression level. JPEGs are all right, but they always have some compres- sion that could result in artifacts. GIFs are not a good alternative because they can’t have more than 256 explicit colors. Changing the file format of an existing image never makes a graphic better andpotentially makes it worse. You should start with the best quality possible, and then reduce it as the very last step. Q. How do you determine how much one graphic is contributing to the fi- nal movie’s file size? A. If it’s a raster graphic, you can explore the Bitmap Properties dialog box, which tells you exactly how big a graphic is. With vector graphics, deter- mining the size is more difficult. Ultimately, you should copy the graphic into a new file and export a .swf of that file by selecting File, Export. You can look at the file size. Sometimes it’s not so important how much one graphic is contributing, especially if it’s an important graphic; your concern should always be to not add to the file size unnecessarily. Q. I have a fairly simple Illustrator file graphic that I would like to import into Flash. It’s impossible to redraw in Flash, so I have to import it, right? A. If the file is simple, it should be possible to create it in Flash. Make sure you’re fully exploiting the potential of Flash. Read Hour 2, “Drawing and Painting Original Art in Flash,” again, if necessary. Of course, if you have to import the image, do so. You might still have luck if you first ex- port it from Illustrator as a .swf before importing. From the Library of Lee Bogdanoff ptg 87 Workshop 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. What’s the most appropriate image file format to import into Flash? A. Raster. B. Vector. C. It depends on the nature or content of the image. 2. If you import a .gif image into Flash, what kind of compression does Flash use on the image when it exports the entire movie? A. It depends on the Compression setting in the Bitmap Properties dialog box. B. Flash always uses JPEG compression, but it’s up to you to specify what quality level to use. C. GIFs are exported as GIFs. 3. How do you import photographs created with a digital camera? A. You can’t; you must use conventional film. B. It’s simple; click File, Import. C. Be sure to resize the image in an outside program first, then click File, Import. From the Library of Lee Bogdanoff ptg 88 HOUR 3: Importing Graphics into Flash Quiz Answers 1. C. Although a vector graphic has benefits over a raster graphic, the most appropriate image file format to import into Flash depends on the graphic. Photographs usually have to stay as raster graphics. 2. A. Each image imported can have a unique compression setting that is not dependent on its original format. By default, however, im- ported .gifs get exported as .gifs. 3. C. Maybe we’re being tricky including a question whose explanation is only found in the Q&A section, but be sure to read the second question in that section if you didn’t get this answer right because it’s important. From the Library of Lee Bogdanoff ptg WHAT YOU’LL LEARN IN THIS HOUR: . How to create symbols . How to use the Library to minimize work . How to identify clues in the Flash interface to help keep your bearings . How to use multiple symbol instances with- out increasing a movie’s size Flash’s Library is so fundamental that creating a Flash movie without it is al- most impossible. If you don’t use the Library, it’s fair to say you’re doing something wrong. The Library is where master versions of graphics are kept. Editing a graphic in the library changes all instances of that graphic throughout a movie. Also, graphics stored in the Library—despite how many times they’re used in a movie—are stored and downloaded only once, making your movie more efficient. This hour explores organization of your movie using the Library. Symbols are things, usually graphics, that you put in the Library. Anything created in Flash and placed onstage, such as shapes, groups, other symbols, even animations, can be converted into a symbol and placed in the Library. You can choose from three symbol types, and each has unique characteris- tics. We get to these in a moment. Item is the term used for each media element imported into your movie, and thereby resides in the Library. Items can be bitmaps, audio files, and digital videos. However, symbols created in Flash are the Library items with which you become most familiar. Instance is the term given to a symbol anytime it’s used outside the Library. As you see, only one master of any symbol exists—the one saved in the Li- brary. However, you can drag as many instances of a master symbol out of the Library as you like. Each instance is like a copy of the original. The Concept of the Library The process of using the Library involves creating symbols and then using instances of those symbols throughout a movie. You always have one master HOUR 4 Staying Organized with the Library and Layers From the Library of Lee Bogdanoff ptg TRY IT YOURSELF ▼ Create a Symbol by Converting Selected Objects 90 HOUR 4: Staying Organized with the Library and Layers version of a symbol stored in the Library. You can drag multiple instances of that symbol from the Library to any other part of the movie—even inside other symbols. The ability to create instances of a master symbol offers two important benefits. First, this means file size remains small because only the master symbol adds to the file size, and each instance just points to the master, (similar to how a shortcut in Windows or an alias on the Macintosh points to a master file). Second, you can make a visual change to the master symbol, and that change is then reflected in each instance. This is like using styles in a word processing document: You make a change to the style, and each instance where you use that style reflects the change. You learn more about these benefits in a minute, but let’s first go over the basics of how to create and use symbols. How to Create and Use Symbols Two ways to create symbols are to convert any selected object onstage into a symbol or make a symbol from scratch. The following task looks at the first method. In this task, you create symbols using the Convert to Symbol feature. Follow these steps: 1. In a new file, use the Oval tool to draw a circle. Click the Selection tool and make sure the circle is entirely selected. You can double-click the center if it’s not a Drawing object, marquee the whole thing, or simply click Edit, Select All. 2. Click Modify, Convert to Symbol or press F8. Flash forces you to spec- ify the name and type for this symbol (as shown in Figure 4.1). 3. You should always name symbols logically. The default Symbol 1 might seem logical, but having 35 symbols all named in this manner can be- come unwieldy. (You learn more about naming symbols later in this hour, in the section “Managing the Library by Using Names, Sorting, and Fold- ers.”) Name this one Circle. We look at all three types of symbols FIGURE 4.1 When you convert to a symbol, you must specify a name and type. From the Library of Lee Bogdanoff [...]... want to tint the instance by selecting the swatch (as in Figure 4.11) Notice the 50% in the Tint Amount field If the original symbol contains several colors, the entire instance changes to the color in which you tint it However, tinting less than 100% causes the colors to mix For example, if the original symbol is yellow and white, tinting it 100% cyan causes everything to turn cyan However, tinting it... negatively In Figure 4.14, the House was created from one line recycled many times Earlier, we said that Flash stores the original data in the Library, plus information concerning how each instance varies Usually the original data is the big portion, and instance information is insignificant However, if you take the instance information to an extreme, it can actually work against you To prove this point,... brightness) Hue is the base color Moving from left to right in the Flash Color panel, you see the hue change from red to yellow to green to blue and to red again (with every shade of color in between) Brightness is how much white is included in a color Imagine a paint store with many hues of paint The store could mix in white paint to create more colors In the Flash Color panel, the brightness is shown... another instance Modifying Instances of Symbols By dragging two instances of the same symbol onto the Stage, you create two instances with different properties because they vary in position In other words, each instance is in a different location on the Stage Each instance can be made different in other ways, too For example, you can transform the scale of any instance on the Stage—without adding to... happened, but now you’re inside the Circle symbol where you can edit its contents The best indication is the Edit Bar, covered in Hour 2, “Drawing and Painting Original Art in Flash (also see Figure 4.3) In addition, you should see only one copy of your circle, the original, in the center of the Stage The Stage appears to have no borders These clues tell you that you are currently inside the master version... object while authoring Registration is an arbitrary reference point inside a symbol If you open the Info panel, you find the X and Y coordinates shown reflect either the Transformation point’s location or the symbol’s registration point, depending on which option you have selected in the toggle button (in the middle of the Info panel) However, when you use ActionScript to move a symbol instance or you... Converting Selected Objects 4 Open your Library window by clicking Window, Library (or Ctrl+L), and you should notice one symbol, Circle, in the Library When you selected Convert to Symbol, you did two things: You stored your new symbol in the Library, and you caused the object that remained on the Stage to become an instance of the Circle symbol If you drag more instances from the Library window (by single-clicking... select an instance onstage The main thing to remember is you can always go inside and move the contents of a symbol relative to its registration point In addition to seeing the plus sign while editing a symbol, you never see edges to the Stage because there isn’t a Stage when you’re inside a symbol editing it When you drag instances onto the Stage, you are placing them within the Stage borders when you... single-clicking and dragging the picture of the circle from the Library window onto the Stage), each new instance is equivalent to the instance already on the Stage If you double-click by accident, you see Scene 1: Circle in your Edit Bar, indicating you’re editing the master version of the symbol In this case, you can simply click Scene 1 or press Ctrl+E to get back to editing the document 5 Try dragging... master symbol in the Library can be dragged on the Stage as an instance Let’s review a couple of points If you copy and paste an instance that is already on the Stage, you are simply creating another instance Not only is this okay, but it’s sometimes easier to the alternative of dragging an instance from the Library because all the properties of the instance being copied are in the new instance Remember . Bar, cov- ered in Hour 2, “Drawing and Painting Original Art in Flash (also see Figure 4.3). In addition, you should see only one copy of your circle, the original, in the center of the Stage alter- native of dragging an instance from the Library because all the properties of the instance being copied are in the new instance. Remember the copy is just another instance. Modifying Instances of. remained on the Stage to become an instance of the Circle symbol. If you drag more instances from the Library window (by single-clicking and dragging the picture of the circle from the Library window