Vector vs. Bitmap

As discussed in the introduction, Flash was created specifically for internet deployment and based on vactor graphics. Standard Internet graphics are based on bitmap images. Shockwave (and Flash) have the ability to handle bitmap images, however, since bitmap images are not as flexible as vector images and the fact that they are comparibly larger in file size , Shockwave gets bogged down when displaying bitmaps.

In order to explain the reason for this we must understand the differences between bitmap and vector.

	Image 1   Image 2

The Bitmap Image

Bitmap images are primarily used to for photographic material, sometimes bitmaps are refered to as "raster graphics" the two terms mean the same thing. For the web, there are basically three types of file formats that are used to store bitmap images:

JPG - Joint Photographic Experts Group
GIF - Graphic Interchange Format
PNG - Portable Network Graphic

Each bitmap or raster image is comprised of hundreds of little "squares" or pixels. All of the pixels are neatly lined up next to each other in a grid formation.

The first image (Image 1) is 100 pixels by 100 pixels, which means that it has a grand total of 10,000 pixels - that's alot of information for a little picture! Have you ever heard the term "mega-pixel" for describing a digital cameras capacity? Basically what "mega-pixel" means is that the camera can capture an image that is comprised of one million pixels - or an image that is 1,000 pixels by 1,000 pixels.

Image 2 is an 800% enlargement of Image 1, you can clearly see each pixel.

Obviously, information about each pixel must be stored. Witn a traditional RGB image, three values are stored, the value for the amount of Red, the amount of Green and the amount of Blue. So for image 1, there are 30,000 pieces of information contained in the file.

Each of the bitmap file formats use some kind of compression technique to compact the information, to help reduce the file size... but there is a limit to how much the information can be compressed.The more compresstion that is used, the lower the quality will be.

The Vector Image

Vector images are comprised of simple shapes and basic gradients. Cartoons are prime examples for the "look" which vector images can emulate -- flat, simple 2-d images.

	Image 1 Image 2 Movie A Vectors in Illustrator Movie B Vectors in Flash

Vectors use Bezier curves to present form. Bezier curves use mathamatical formulas to represent line and curve. The simplest vector image is comprised of two points connected by a line. (See image 1)

A circle is comprised of 4 points connected by 4 curves. (See image 2). Each point has two control points (or "handles") which visually aid the designer in controlling the shape of the curve between the points. By extending, shortening or moving a control handle, you can reshape the circle. (See Movie A)

In Flash you can change the shape of the curves by grabbing the edge of the curve directly (See Movie B). Or using the white arrow tool, you can manipulate the curve through control handles. With the black arrow tool, no control points are visible.

We will discuss the construction of images in Flash later. For now the important idea is to understand how they work and what they are used for.

The only information required for vector images is the

compared with a bitmap image, tnot nearly as much information is required to construct an image. The only information that needs to be stored is the information about the control points and the color used to "fill" the shape.

Since vector graphics use math to generate the shape of the graphic, we are not restricted by size. A vector image can be scaled. In other words, the vector image viewed at 100% (original size) will hold it's visual integrity even if it's size were increaded to 800% or reduced to 50% of it's original size.

Whereas, if you enlarged or reduced a bitmap image, the image would loose it's integrity because bitmap images are saved with a set number of pixels. By stretching or shrinking a bitmap image through HTML, pixels are neither added, nor removed. If you wanted to resize a bitmap image, you would have to do so using a program such as Adobe Photoshop.

De-mystification:
However, keep in mind that reducing or enlarging a bitmap image is a "destructive" operation. For example, if you decide to reduce the size of the image, you will be removing pixels. If you decide to enlarge the image, you will be adding pixels. Since tools such as Photoshop are not cameras, nor magical techno artists, they can only add pixels based on the existing pixels in the image. That is why when you enlarge a photo in Photoshop the image becomes blurry. Photoshop is simply taking the existing pixels and "doubling" them up.

Click here for an interactive example of what i'm talking about.

Bitmaps Make Everything Slow

The reason why Shockwave files seem to start to play so quickly is due to their relatively small file size, which is due to the use of vector files. However, when you start to incorporate bitmap images into your animations, the file size quickly goes up which causes the appartent speedyness to dwindle away.So try to avoid incorporating large bitmaps into our animation.

Additionally, since Shockwave streams when the animation gets to a point where it is required to display the bitmap image. The animation freezes until the bitmap portion of the Shockwave file has loaded, once the entire bitmap embedded in the Shockwave file is fully loaded, the anmation continues. This problem can be corrected by "hidding" the bitmap in the beginning of the animation or at a static period during the animation. This proceedure is commonly refered to as preloading which is discussed in In Chapter 11: Advanced Techniques.

NEXT ->