| Flash enables you to import and transform bitmaps and use them as fills. You can also trace bitmaps, converting them to vectors. Finally, you can break bitmaps apart, which permits you to edit portions of the bitmap, rather than just transform the whole bitmap. Importing Bitmaps Flash can import files in a variety of formats. Many depend on having QuickTime 4 or higher installed; you can download it free at www.apple.com.  | With QuickTime 4, both Windows and Macintosh can import the following vector or bitmap formats: BMP, EPS, GIF and Animated GIF, JPEG, PDF, PNG, Adobe Illustrator (AI, versions 6.0 to 10.0), AutoCAD DXF (DXF), FreeHand (FH7, FH8, FH9, FH10, FH11), FutureSplash Player (SPL), MacPaint (PNTG), PhotoShop, PICT, QuickTime Image, Silicon Graphics Image, SWF files (for Flash Player 6 or 7), TGA, TIFF, and Windows Metafile (WMF). Windows can also import Enhanced Windows Metafile (EMF). (PDF and EPS import are new in Flash MX 2004.) |
NOTE Although you can import Photoshop files via QuickTime, the layers are flattened upon import.
Flash stores imported assets in the Library. You can import multiple assets into the Library (File, Import, Import to Library) and then place them individually on the Stage. Alternatively, you can import directly to the Stage (File, Import, Import to Stage). This approach places an instance on the Stage and the imported file in the Library. With either approach, the Import dialog box is just like an ordinary File Open dialog, allowing you to navigate to the file that you want to import. Preparing Bitmaps for Import Flash is not designed for editing bitmaps. Therefore, bitmaps should be prepared prior to import. Most importantly, bitmaps should be cropped and resized to the desired dimensions. Avoid resizing bitmaps in Flash. If you scale a bitmap down in Flash, even if it looks fine, you won't have eliminated any bytes in your SWF. Scale the bitmap down in Fireworks or another graphics editor, and the graphics file becomes smaller, making your SWF smaller, too. In addition, image quality decreases if you resize bitmaps, especially if you attempt to enlarge them. Bitmaps contain a finite number of pixels. When you enlarge them, they lack the color information necessary to fill the added pixels, so new pixels are created in tones that are halfway between existing pixels. This produces the strange artifacts that appear in many poorly created bitmaps on the Web. Plan for the inclusion of bitmaps in your movies, and import them at the correct size , so that you don't have to resize them in Flash. Flash provides an Edit button in the Property inspector that can launch an external image-editing program to edit your imported bitmap. With an imported bitmap selected, click the Edit button to open the bitmap in the application that edited it. You can then edit the bitmap and save it, and your image in Flash is updated. The more thoroughly you know an image-editing program, the better your results will be using bitmaps in Flash. For instance, you can decrease the size of imported bitmaps by taking advantage of alpha channels in programs such as Fireworks and PhotoShop. Alpha channels are layers that are added to bitmaps to create transparency. By exporting with an alpha channel, you may be able create smaller PNG (or GIF) files to import into Flash, resulting in a smaller SWF. Any bitmap can be assigned as a fill. Because they tile (repeat multiple times to cover the entire fill area of an object), bitmaps produce unusual fills and are used infrequently. To create a bitmap fill, click the Fill Color box (the one with the Paint Bucket icon) at the top of the Color Mixer. Then select Bitmap from the Fill Style drop-down menu (just to the right of the Fill Color box). The Import to Library dialog box appears, as shown in Figure 16.5, prompting you to select a bitmap. Figure 16.5. The Import to Library dialog box appears when you select Bitmap as the Fill Style. 
The bitmap is displayed as your current color in the Fill Color box at the top left of the Color Mixer and is applied as a fill to selected shapes (see Figure 16.6). Figure 16.6. Apply bitmap fills using the Color Mixer. 
Tracing Bitmaps Bitmaps can be traced (converted to vector graphics), which reduces file size for suitable bitmaps. Not all bitmaps are good candidates for tracing, though. Precise tracing of any highly detailed photographic image results in a vector graphic with a larger file size than the original bitmap. In addition, the user's computer has to perform all those complex vector calculations. The original bitmap would not only have a smaller file size but would put much less stress on the user 's processor. Figure 16.7 offers an example of a good candidate for tracing. The best candidates are simple shapes with large blocks of color. Figure 16.7. The simple shape of this flower and its few color gradations make it a good candidate to trace. 
Images with complicated patterns, such as the one in Figure 16.8, or many color gradations are best left as bitmaps. Figure 16.8. This image, with its complex patterns and shadows, is best left as a bitmap. 
TIP Although simple shapes are most easily converted to vectors, you can simplify complex bitmaps and create abstract, stylized vector graphics by using less precise tracing settings.
To trace a bitmap, select the bitmap instance on the Stage and then choose Modify, Bitmap, Trace Bitmap. The Trace Bitmap dialog box opens, as shown in Figure 16.9. Figure 16.9. The Trace Bitmap dialog box offers control over how a bitmap is traced. 
There are four settings for tracing. The Color Threshold, a number ranging from 1 to 500, determines how much color detail will be preserved in the traced bitmap. The Minimum Area option specifies the number of surrounding pixels, from 1 to 1000, that will be considered when assigning color to an individual pixel. The lower these numbers, the larger the file, and the longer tracing takes. On the other hand, very high numbers result in blurred, muddy images. The goal is to find the highest numbers that still yield acceptable color gradation and image detail. These are often fairly low numbers , not too far from the defaults of 10 (Threshold) and 8 (Area). The Curve Fit option determines how closely arcs in curves are adhered to during tracing. The options range from Pixels, the tightest and most intricate tracing, down through Very Tight, Tight, Normal (the default), Smooth, and finally Very Smooth, the least detailed. The Corner Threshold option similarly determines how precisely corners are traced ”Many Corners, Normal (the default), or Few Corners. Start with the default settings and click OK to get a baseline trace for your bitmap. If you want to adjust the results, choose Edit, Undo, or press Cmd-Z (Mac) or Ctrl+Z (Windows). Trace the bitmap again and experiment with the different settings. Less precise settings produce smaller file sizes and more impressionistic images, as shown in Figure 16.10. Figure 16.10. Traced bitmaps can produce impressionistic effects. 
More precise settings create larger files, but the image can appear very similar to the original bitmap, as shown in Figure 16.11. Figure 16.11. Lower tolerance settings produce more detailed tracings that more closely resemble the original bitmaps. 
Optimizing Traced Bitmaps If you have to wait more than a couple of seconds while Flash traces a bitmap ”and you're not on a slow computer ”check your file size. Most likely your settings are too precise. To see how complicated a tracing is, select a traced bitmap and choose View, Preview Mode, Outlines to display the tracing outlines. (See Figure 16.12.) To return to Normal view, choose View, Preview Mode, Fast. Figure 16.12. You can view tracing outlines to evaluate the complexity of a traced bitmap. 
The extreme detail of the tracing on the right is probably too much to deliver over the Internet. One way to reduce the detail in a tracing is to optimize curves. To do so, choose Modify, Shape, Optimize to access the Optimize Curves dialog box, as shown in Figure 16.13. Figure 16.13. By adjusting the settings in the Optimize Curves dialog box, you can simplify a traced bitmap. 
Drag the Smoothing slider and experiment with different settings. Select Show Totals Message to monitor the number of curves that are removed and click OK. The Totals message appears, as shown in Figure 16.14. Figure 16.14. The Totals message details the overall reduction in curves. 
The Optimize Curves feature is powerful, but if optimization exceeds 40% to 50%, image quality will probably be excessively degraded. In that case, undo and trace again. Breaking Apart Bitmaps Breaking apart a bitmap (Modify, Break Apart) separates a bitmap into its component pixels, which can then be selected and modified individually. Unless a bitmap is broken apart, it can only be selected and manipulated globally, as a whole. After a bitmap is broken apart, you can use the drawing and painting tools to edit individual pixels. You can use the Lasso tool with the Magic Wand modifier to select portions of a broken-apart bitmap according to color range. Click on a pixel and all surrounding pixels of the same or similar color are selected. The Threshold option in the Magic Wand Settings dialog box, as shown in Figure 16.15, determines how closely a color must match the pixel that is clicked to be included in the selection. The range is from 0 to 200. The higher the number, the greater the range of included colors. Entering 0 selects only pixels of exactly the same color. The Smoothing option determines how accurate the edges of selections are. From most to least accurate, the choices are Pixels, Rough, Normal, and Smooth. Clicking on different parts of the image with the Magic Wand adds to the selection; you don't have to hold the Shift key down, as you do when selecting multiple objects with the Selection tool, for example. When a selection has been made, you can use the Fill controls and Paint Bucket tool to change colors. Figure 16.15. The Magic Wand Settings dialog box allows you to refine the way selections are made. 
Compressing Bitmaps Because bitmaps can significantly increase file size, it's vital to compress them as much as possible. By default, the original compression settings of a bitmap are used when a movie is published. However, you may be able to improve upon the original compression by tweaking a bitmap's properties, especially if a bitmap has been traced. To access the Bitmap Properties dialog box, select a bitmap in the Library and either click the Properties button, as shown in Figure 16.16, or Ctrl-click (Mac) or right-click (Windows) and choose Properties. Figure 16.16. With a bitmap selected in the Library panel, click the Properties button at the bottom of the Library panel and choose Properties to access the Bitmap Properties dialog box. 
The Bitmap Properties dialog box appears, as shown in Figure 16.17. Choose Photo (JPEG) in the Compression drop-down menu to compress the bitmap in the JPEG format, which will discard pixel information during compression. To maintain the original compression settings of the imported bitmap, check Use Imported JPEG Data. Each time a JPEG is compressed, data is discarded, so image quality becomes progressively worse . Typically, it is best to use the imported JPEG data to prevent image deterioration. You can specify a new JPEG quality setting, but you cannot increase the quality of an imported JPEG and will instead reduce the quality further. To specify a new JPEG quality setting, uncheck Use Imported JPEG Data and enter a number between 1 and 100 in the Quality field. If you specify a new JPEG setting, be sure to check the image quality to ensure that it does not noticeably degrade. Use JPEG with bitmaps that have photographic detail and wide tonal variations. Figure 16.17. In the Bitmap Properties dialog box, you can specify compression settings for imported bitmaps. 
To compress without discarding pixel information, choose Lossless (PNG/GIF) in the Compression drop-down menu. Use Lossless with traced bitmaps that have simple shapes and fewer colors. Click Test to compare the compressed file size to that of the original, as shown in Figure 16.18. Then click the Update button to preview the effects of your settings on the image preview in the upper left of the dialog box. Take the time to experiment with different settings to find the best compromise between image quality and file size. When you're satisfied with your compression settings, click OK. Figure 16.18. Clicking Test compares the resulting file size after compression with the original. 
Bitmaps can greatly enhance Flash movies. When used in combination with native vector art, bitmaps help to create textured, engaging designs and are indispensable for conveying photographic detail. Use bitmaps carefully to manage file size. Animating Bitmaps Flash does not interpolate bitmap information as easily or as well as it does vector information. Remember, bitmaps map each pixel in an image, so there is much more information to interpolate . Bitmap tweens can dramatically increase file size and can produce unwanted effects such as slight stuttering during playback. Use bitmap animation sparingly and keep the animation simple for best results. Faster, shorter bitmap tweens such as quick zooms are best, and can disguise stuttering. Smaller bitmaps affect file size less, as will confining animation to as small an area of the Stage as possible. Also, try to confine file-size “ intensive effects such as bitmap animation to frames where there are few other effects, or users will have to wait even longer for content to download as movie elements compete for scarce bandwidth. If bitmap animation is crucial, you can experiment with setting a higher frame rate for better quality, but this also increases file size. As always, test several frame rates to make the best compromise between image quality and file size. |
