This chapter is from the book
This chapter is from the book
This chapter is from the book
Task: Import a Raster Graphic
In a new file, select File, Import and select a .bmp, .pct, .png, .jpg, or .gif file (c:\Windows\ is a good place to look).
Click the graphic onstage and delete. Because it's a raster graphic, it's safe in the library.
Open your library with Window, Library (Ctrl+L).
Click the line in your library with the tree icon and the name of the file you imported.
-
From the library's Options menu, select Properties. The Options menu is inside the Library window at the top right. You should see the Bitmap Properties dialog box shown in Figure 3.8. (This dialog box may look slightly different depending on what type of file you imported.)
The Bitmap Properties dialog box is where you can decide on the export settings for this graphic. Leave this dialog box onscreen while you walk through the next few paragraphs.
){kind=link}
Figure 3.8 This dialog box offers individual control over how bitmap items in your library will be treated during export.
Adjusting Bitmap Properties
Flash imports all kinds of raster formats but only uses JPG, GIF, or PNG in the exported movie. Additionally, any raster graphic is called a "bitmap" item once inside Flash's library. This means that, no matter what file type you import, you must use the Bitmap Properties dialog box to choose between JPEG (and its compressing level) and lossless GIF/PNG for exporting. You can experiment with the Bitmap Properties dialog box, clicking the Test button after each change to see the effects on both image quality (in the little picture at the top left) and file size (in the text information at the bottom of the dialog box). See Figure 3.9. The process is one of experimentation where you make adjustments and view the corresponding results.
){kind=link}
JPEG compression is usually the most efficient option. Unless you import a .png or .gif, Flash will set the bitmap properties to JPEG by default. It's slightly confusing because if you import a .jpg file, Flash will "Use imported JPEG data" by default, as shown in Figure 3.10. This option tells Flash to maintain the imported file's original compression. Leaving this option selected is generally desirable because it's a bad idea to recompress (which will happen if you deselect this option).
){kind=link}
Figure 3.9 Selecting a low JPEG compression (10) and clicking Test will provide a preview of the resulting image and its file size.
Figure 3.10 Only imported .jpg files will provide the option to use the JPEG compression contained in the original file.
CAUTION
There are three suitable approaches to using raster graphics in Flash. One, start with the highest quality image you can (for instance, .png, .bmp, or .pct) and then experiment with Flash's JPEG compression to find the best compromise. Or, two, import a .bmp, .png, or .pct and leave the image uncompressed (this will give you the highest quality but also the largest file size). Finally, the third way is to use an image editing software—like Fireworks—to create a .jpg file with the best compromise (of file size and quality) that gets imported into Flash. This way you can take advantage of Fireworks' "Selective JPG" feature. If you use this option, simply remember to leave the Use Imported JPEG Data option selected. If your image has already been compressed (using JPEG compression), you shouldn't allow Flash to recompress. The result will be a poor quality image.
Importing other popular formats such as .bmp and .pct will also cause Flash to opt for JPEG compression by default. However, the Bitmap Properties dialog box will display a different option: Use document default quality, as shown in Figure 3.11. Although this looks similar to the Use imported JPEG data option we saw earlier, it's a different option entirely. Leaving this selected will use a global setting to compress this file. The global settings are made when you publish your movie. These topics are discussed in more detail in Hour 20, "Optimizing Your Flash Site," and Hour 24, "Publishing Your Creation."
){kind=link}
Figure 3.11 Importing non–.jpg files provides the option to use the global (default) quality settings for the whole Flash file.
You can control the compression used on individual imported images by simply deselecting Use document default quality (or deselecting Use imported JPEG data for that matter—but understand the earlier caution). When this option is deselected, a field appears where you can type the JPEG compression level you desire. Instead of guessing what compression level is best, you can use the Bitmap Properties dialog box to experiment. A lower number results in a smaller file, but also lowers the quality. Click Test after each change and you'll see a drastic difference between 100 and 1. After each change, click the Test button and you can review the effect on file size and quality, as shown in Figure 3.12. Experiment until you get the best compromise of image quality and file size.
){kind=link}
Additionally, the image portion shown in the image window at the top left of the Bitmap Properties dialog box will show exactly how the image will look when exported. You can zoom into this window with a right-click and pan around to get a better view.
Figure 3.12 Setting the quality to 8 cuts this image size to less than 1/100 of its original, but the quality is visually affected.
Figure 3.13 shows the results of several different compression levels on the same image. Notice that JPG 80 and JPG 100 are almost identical in quality, but the 80 is a much smaller file size.
){kind=link}
Figure 3.13 The results of different compression settings on the same image.
Finally, the ultimate quality is the Compression option called Lossless (GIF/PNG). It is selected by default when you import .pngs and .gifs, but you can select this any time you want. The result is that Flash will leave the image in its original state. It's always going to provide the best quality—but not without a price. File size will always be highest with this option. This is a suitable alternative if you're making a movie that doesn't need to download from the Web—maybe you're just making a presentation you'll deliver on your hard drive or CD-ROM. Otherwise, only use this option on images that you want to retain the best quality possible. If your imported image is a .gif that's already a small file size, selecting Lossless is perfectly suitable. And because even 100% JPEG compression causes some image degradation, Lossless is suitable for images that are particularly important. Finally, the only way Flash supports 32-bit graphics (raster images with varying degrees of transparency) is through .png items that you set to Lossless.
Converting a Bitmap to a Vector Graphic
Two common situations call for converting a bitmap into a vector graphic. The first is when you have a raster file that is more suitable as a vector graphic (so you would like to take advantage of what vectors offer). The second is when you want to create a special effect such as a "posterized" look or an outlined effect.
Let's convert a raster graphic to a vector. In Windows, import the pinstripe image that is provided as a desktop pattern.