STEP 03 video to vectors: converting a bitmap to a vector GRAPHIC IN FLASH


Flash includes a key feature that makes converting video into vectors possible: Trace Bitmap. This tool turns a bitmap image into a vector graphic with discrete areas of color that are editable. It's great for creating stylized illustrations with a posterized look. More importantly, it can save you a tremendous amount of file size when used correctly.

An animation made of bitmaps can be quite heavy, even with a good amount of jpg compression applied. Converting the bitmaps to vectors gives you a smaller overall file and the chance to add more frames to the animation, resulting in a more fluid motion.

To convert a series of bitmap video images into vectors, follow these steps.

  1. Open a new movie in Flash (use the keyboard shortcut Ctrl-N / Cmd-N).

  2. Create a new symbol (use the keyboard shortcut Ctrl-F8 / Cmd-F8) and label it actionThrow or something similar. This symbol will hold the frames of your "virtual puppet."

  3. In the Symbol Editor, choose File > Import (or use the keyboard shortcut Ctrl-R / Cmd-R) and select the first of the sequentially named files that you just created from your video editor. When prompted, confirm that you would like all the files imported as a sequence.

  4. Select the bitmap in the first keyframe and choose Modify > Trace Bitmap.

  5. Modify the Trace Bitmap settings to get the clearest vector image.

    I've set the Color Threshold to 100 (see figure 06:02). The Color Threshold helps Flash determine how to "replace" the bitmap image's pixels with vector shapes . It does this by comparing the colorby the RGB valuesof each pixel. If the difference of the RGB values between pixels is less than the Color Threshold value you've entered, then Flash will consider the two to be the same color. The rule to remember is this: The higher the Color Threshold, the fewer the number of colors in the resulting image.


    Figure 06:02.

    graphics/06fig02.jpg


    Modifying the other options within Trace Bitmap (Minimum Area, Curve Fit, and Corner Threshold) also greatly affects the resulting image. Because the possibilities are limitless and depend on the bitmap that you're tracing, I recommend starting with Color Threshold and then going from there. A couple of options, such as Pixels within Curve Fit and Many Corners within Corner Threshold, are generally not recommended and should be tested for file size before being included in your movie (the results often defeat the purpose of the whole Trace Bitmap processto keep file size down).

  6. Set the Minimum Area to a low number as well (see figure 06:03); the example bitmaps were traced with a Minimum Area of 2 pixels. Changing the Minimum Area sets the size of the pixel block that Flash looks at when tracing. The lower the number, the finer the trace.


    Figure 06:03.

    graphics/06fig03.jpg


  7. From the Curve Fit drop-down list, select the Very Tight option.

    This choice gives you a more detailed vector shape than Normal, Smooth, or Very Smooth. The Pixel option is, in most cases, overkill and ends up giving you a very heavy vector graphic (in terms of file size).

  8. In the Corner Threshold drop-down list, select Many Corners. Again, this is a good choice when you want a vector shape with detail.

    After you've clicked OK to confirm your choices, Flash displays a progress bar as it traces the bitmap.

  9. When the tracing is finished, deselect the image. Figure 06:04 shows the image after it has been deselected.


    Figure 06:04.

    graphics/06fig04.gif


    Now, we'll begin eliminating the unnecessary portions of the vector graphic. At this stage, the wisdom of preplanning will become abundantly clear. When a foreground image contrasts sharply with the background, it's much easier to isolate the foreground.

    Initially, you'll use the Pointer tool to draw a marquee around large sections of the image you don't want and delete them as shown in figure 06:05.


    Figure 06:05.

    graphics/06fig05.jpg


  10. Use the Pointer tool to drag a rectangle around unwanted sections of the traced bitmap.

  11. After you've removed the large, unwanted sections of the traced bitmap, use the Zoom tool to magnify areas close to the foreground figure and select other objects to delete.

    Be sure to select the background area behind the foreground object, especially if it is white. It's likely that there is another unwanted vector object there. To check for unwanted objects, go into Outline Mode for that layer (the third option located to the right of the layer name ). When you're finished, the figure should be clearly delineated.

    Note

    Depending on the video imagery, you may be able to use an alternative technique to clean up each frame. Rather than selecting and deleting those objects you don't want, select all those that you do want. Choose Edit > Cut (or use the keyboard shortcut Ctrl-X / Cmd-X). Choose Edit > Select All (or use the keyboard shortcut Ctrl-A / Cmd-A) and delete everything selected. Then, choose Edit > Paste in Place (or use the keyboard shortcut Ctrl-Shift-V / Cmd-Shift-V). This replaces what was cut from the page (what you wanted to keep) and puts it back exactly where it was. Now, your vector graphic is clearly defined on the stage (figure 06:06 shows the graphic enlarged for detail).


    Figure 06:06.

    graphics/06fig06.gif


  12. The graphic looks clean, but it is still made of many individual vector objects. Now, you need to consolidate them into one object by using Select All and adding a fillin this case, black (see figure 06:07). Flash automatically merges the filled objects into a single one. Deselect the graphic.


    Figure 06:07.

    graphics/06fig07.gif


  13. Select the graphic once more and smooth it out with the Smooth tool (see figure 06:08). This refines the image a bit further and saves on file size (the Smooth tool reduces the number of points that define the shape of a graphiceffectively "smoothing it out"; by doing so, the computer has less to keep track of and process).


    Figure 06:08.

    graphics/06fig08.jpg


  14. Select the next keyframe and repeat steps 513 until all keyframes are converted and optimized.



Flash Web Design The Art Of Motion Graphics
Flash Web Design oder: the art of motion graphics
ISBN: 3827256623
EAN: 2147483647
Year: 2005
Pages: 192

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