Lesson #02 Difference Between Bitmap and Vector
Written By Paul M. Games

Because Macromedia’s Flash Studio is the leading vector based program, it is important to understand the differences between bitmap and vector based images before we start our journey into Flash itself. This is a simple and quick lesson to explain these differences, so let’s get started.

Here Is a Simple Explanation

To begin, first you must understand the difference between bitmaps and vector graphics. These examples show exactly how a bitmap acts in comparison to Vector based graphics. See the first example image below, it is a small perfectly round circle. It was drawn in Photoshop, a leading bitmap program, and is currently at 100% magnification and looks like a very smooth, perfect circle.

Now let’s take that small circle and magnify it to over 850% of its original size. Look what happens to the image. What once looked like a perfectly smooth, rounded circle now looks blurred and jagged. What is happening is very simple, Photoshop tells the computer that you need so many pixels of color to create an image. You can see this same effect if you take a magnifying glass to a newspaper or magazine. You will see all of the dots/pixels that make up the actual image.

Again, it looks perfect when it is it’s original size, but will become totally distorted when enlarged. Look at the image below. Do you see all of the blocks/squares? Each one represents one pixel on your computer screen. This is one of the biggest drawbacks to bitmap-based graphics and images.

Advantages of Vector Graphics

Vector graphics act a lot different. Instead of telling the computer to fill a specific number of pixels, the computer actually uses the true formula/equation that creates the circle on the screen or any other object created. This means that if the circle is only 10 pixels by 10 pixels it will look perfectly round, yet at the same time you could take it and resize it to any size, and it will not lose it’s perfectly smooth look and feel.

This is a great advantage for webmasters looking to create interactivity on their websites. This is where vector based programs like Macromedia’s Flash Studio come into play.

Below is an example of a simple small circle created in Flash that is enlarged over 800%. Because flash is also a totally interactive medium, you will be able to see the perfect transformation live, right in front of your eyes. Believe it or not, this effect below took less then 10 seconds to create. This is just the beginning of our journey into the world of making dynamic websites using Flash technology!

See you at the next lesson where we learn more about Flash itself!