You probably have heard phrases like "vector graphics" or "bitmap graphics". You also might have heard they are the two most popular types of graphics in the World. Flash is, of course, capable of rendering both of them, however, since the two types are in many ways each other's opposites, they should be used in different situations.
In this short tutorial, I will try to explain why the two types of graphics are so different and what each of them can be used for.
Bitmaps
Example of bitmap graphic
This small icon comprises hundreds of pixels
Storing and scaling
These are often big flaws to bitmaps. Consider this: an image 1000 by 1000 pixels has 1000 000 pixels (one mega-pixel), apart from the RGB (Red Green Blue) value must be stored for each pixel. That means there are 3000 000 pieces of information contained in the image. That's quite a lot, isn't it?
Now, scaling. It is problematic, too. If you decide to scale up an image, additional pixels are added, thus decreasing the quality of the bitmap. So, you should always keep a copy of your original image.
Vectors
Vectors graphics are what Flash users love about Flash! :-)
One thing that makes this type of image so distinctive is it is composed of lines and shapes and other geometrical primitives. The position, scale, width and other properties are based on mathematical formulas, which means vector graphics are usually smaller in size and have better quality than bitmaps. Moreover, scaling doesn't effect their quality.
To understand just how powerful vector graphics are, look at the SWF file below.
What you can see in the image above are 8 copies of QuickTime logo, arranged in an increasing order. The logos in the first row are, of course, vectors and the remaining logos are just bitmaps. You can easily see that the logos in the first row - although not exactly identical to the original QT logo - have much better quality, and I'll tell you more: they are also much smaller in file size!
If you liked this tutorial, be sure to check my other tutorials about Flash!
