Optimizing Bitmaps for Use in Flash


Even though Flash 5 is a vector-based graphics program, that doesn't mean you can't use bitmapped (raster) graphics inside it. You just need to be aware that if you use many or large bitmaps, you're going to increase the size of your Flash movie and decrease its efficiency. After all, Flash is most efficient when used for its original intentgenerating vector-based graphics. That being said, you can get some very interesting effects by using bitmapped art in Flash.

Importing bitmapped or raster graphics as either individual elements or as a series of images is simple. For a single image, all you have to do is select File > Import and browse to the image you want to use. When you click OK, the image is placed on the Stage. For a series of images (images that have been exported as a series of images from a QuickTime movie or animated GIF, for example) you'll get this pop-up message: "This file appears to be part of a sequence of images. Do you want to import all of the images in the sequence?"

When you click Yes, each image in the sequence is imported onto its own keyframe. You work more with this option in Chapter 11, "Faking Video in Flash."

Before you go crazy and start importing every bitmap in sight, however, there are a number of issues you need to consider:

  • Do you really need it? This is the first question you should ask yourself. If the bitmap isn't essential to the overall movie, don't use it. Remember that bitmaps are not processed as efficiently as vector graphics.

  • Can it be converted to a vector graphic? If you absolutely need the bitmap to get a particular effect, that's fine. If it doesn't need to be photo-realistic , however, you might be able to optimize it by converting it to a vector image. You take a more detailed look at this option a little later in this chapter.

  • Let Flash handle the image compression for you. Flash does a very good job of compression. When you are importing bitmaps, you want to start with a relatively uncompressed file and let Flash compress it for you. You learn more about global versus individual image compression schemes later in this chapter.

  • Crop your image before you import it. Before you even think about importing a bitmap into Flash, do all your scaling and cropping in your image editing software of choice. The goal is to import the image into Flash at the same size you plan to use it in your movie. If you import a large image and crop or scale it inside Flash, you pay a hefty price in file size.

Theory is fine, but seeing is believing. To see how the size of an imported file and the export quality affects a final movie's file, work through Exercise 5.1.

Exercise 5.1 How Imported Bitmaps Affect File Size

The file you'll be working with already has several different versions of a photo of Times Square imported into it. You can use these images to create Flash Player movies and observe the differences in file size.

  1. Open nyc.fla in the Chapter_05/Assets folder.

  2. Open the Library and drag a copy of the nyc.jpg onto the Stage.

  3. Before you do anything else, test your movie (Control > Test Movie). Make sure the Bandwidth Profiler is open (View > Bandwidth Profiler) and use the Profiler to check your file size. (See Figure 5.1.)

    Figure 5.1. When you test your movie, you can use the Bandwidth Profiler to check the size of the SWF file. This saves you from having to browse to the file directory to check file size every time you make a change. Here, nyc.swf is about 61KB.

    graphics/05fig01.gif

    The file size should be about 61KB.

  4. Back in your movie, select the image on the Stage and use the Scale tool to scale it to just fit the Stage. Test your movie again and check the file size.

    There is no change in file size, even though the image is smaller.

  5. Change the instance on the Stage again by breaking it apart (Modify > Break Apart), and use the Arrow tool to crop the image so that it focuses on the central street scene (see Figure 5.2). Test your movie.

    Figure 5.2. Crop out the top and bottom portions of the image so that just the central street scene shows.

    graphics/05fig02.gif

There still is no change in file size. No matter what you do to resize that image, you are not saving any file size.

  1. Delete the instance of nyc.jpg from the Stage and drag a copy of nyc_cropped.jpg onto the Stage. This is the same image of Times Square, but it was cropped and reduced inside Macromedia's FreeHand before it was imported into Flash.

  2. Test the movie and check the file size.

    The file should have dropped to about 17KBthat's a saving of 44KB. Despite the fact that this looks just like the movie you created in Step 5, you're saving a substantial amount in file size because the cropping was done outside Flash. Lesson learned?

  3. Up until now you've been using the default compression setting for JPEGs, which, in Flash, is 80 percent. Override that setting by double-clicking nyc_cropped.jpg in the Library.

  4. Clear the Use Document Default Quality check box in the Bitmap Properties dialog box. Change the Compression Quality setting to 30. (See Figure 5.3.)

    Figure 5.3. You can control the compression rate for each individual bitmap in your Flash file by using the Bitmap Properties dialog box. Just double-click any bitmap in the Library to access this dialog.

    graphics/05fig03.gif

  5. Test the movie and check the file size.

    You now have a movie with a file size of only 10KB. The background image is a little blurry, but that's okayit's only a background.

Now that you've seen how to import bitmaps and the impact of handling the cropping and transformations outside Flash before importing, take a look at how and when you can convert imported bitmaps to vector graphics.



Inside Flash
Inside Flash MX (2nd Edition) (Inside (New Riders))
ISBN: 0735712549
EAN: 2147483647
Year: 2005
Pages: 257
Authors: Jody Keating

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net