Macromedia Flash 8 - Comparing Vectors and Bitmaps

We are working a flash; we are going to be working with a lot of vectors. So, I figured we take some time to talk about just what a vector is and how to make them and do that, I brought up a file, should be on your lesson three folder call bitmap versus vector and it has just got a little graphic and some nice text here that we can work with.

Talking about vectors is pretty important with flash because it is fairly unique; it is one of the only animation environments that actually use vectors. Traditionally, most programs use bitmaps.

Now, when we say flash is a vector base environment, what we are really talking about is that all the tools in the tool pallet over in here are going to make vectors. Okay, so we are not going to be making any bitmap graphics with this program. We are going to be making bitmap graphics with other paint programs and just imploring them for years.

Now, it does not mean that flash should not or could not use bitmap. I have got one right here. I wanted to take a closer look at this just to compare the two so we got a good feel for what vectors are where they are going.

Now, play the best places to start with the bitmap graphic and we have all seen this, probably take it in my digital cameras or scanned them in and really, all the bitmap graphic is, is just a collection of pixels, different colors, stack next to each other. I am sure you have done this before, but if I zoom in on that, you can see those pixels reveal themselves for us.

I have got little squares of different colors, just stack next to each other, and you probably might have worked with the paint program for modifying, editing, painting this pictures, really, all those paint programs are doing is just two things, they are just selecting pixels and changing their colors.

Now, typically, most animation programs use bitmaps because they are a little bit easier to work with, not necessarily easier for us but a lot easier for the computer and this was important back when our computers were a lot slower. If you look at a file with just a big list of pixels in it, all it has to is read of the pixels and point them to the screen and that is pretty simple operation procedure for that to happen.

What is going to be different in our vector files is that we are not going to save the pixels off. Now, that is the main difference between our bitmaps and our vector objects is that bitmap files themselves are really just a big list of pixels and that impacts us mostly because if we want a larger picture, that means more pixels and it means more file size.

Now, let us compare that with vectors. I have got a vector object right over here. Let us do the same thing. I am going to zoom in on it. Now, vectors do use pixels of course, everything on the screen is going to pixels but you will notice as I zoom in on this one, it does not seem to break apart. In fact, it reconfigures itself and it smooth it out right as it goes long so I got a clean crisp line on that vector even if I go all the way up to really extreme values there.

So, how is that going to work? Well, vectors instead of saving the pixels, save the description of the shape. Instead of thinking of it like math, we could think of it like a recipe. We have got a description of what the shape is going to be, some other description about perhaps what color is going to be or anything like that and we save that in the file.

Now, what is happening? When I do zoom in on this object, we are seeing the pixels regenerate as needed. One other way to see this is to take a look at this view menu. We looked at this before under preview mode. When we are talking about the different settings for rendering this, what we are basically talking about is how much work should we do to regenerate the pixels.

Anti aliasing text, we can go over that a little bit later but it is talking about making those edge lines looks smooth for us. If I drop this down to a fast mode, you can see that you start seeing the pixel edges a little bit more, a little stair steeply, a little edgy in there. The computer is doing a little bit less work so this kind of graphic would be generated a lot faster.

Our machines are pretty fast, so, these kinds of things might affect how you run your animations later, when you drop it back up to anti alias again, we get that smooth text and let us talk a little bit more about the math thing. Now, that is a great place to start in understanding vectors. Really, we can kind of go back to fifth grade geometry in order to understand this back when our teachers were telling us two points makes a line.

Now, I would like to do a little demonstration. I am going to use the traditional vector drawing tool and that is the pen tool, looks like a little pen over in here. We are going to do two points makes a line. That is pretty simple but I would like to even talk about this as a file so we can understand what we are getting out of vectors.

Literally, the recipe for this file is one point with a little location coordinate x and y on the screen. Another point with a little location coordinate, x and y on the screen and a little description about what kind of color is going to be black and how thick it is going to be. Now, that recipe is very small, 1, 2, 3, 4 numbers and a couple of little text descriptions.

Now, If we have done the same graphic, I realize this would be easy graphic on a bitmap file, I would have a lot of white pixels and a view block pixels in that file. Now, also comparing this to bitmap, if I took this image and made it larger, I would need a lot more pixels, but if I took the vector and made it larger, I would not need a single thing more, I would use the same recipe and just build it bigger. So, you can see that vectors have a potential of being very small files compared to bitmaps.

Now, it does not mean all vector files are going to be smaller but it means most of them well and that is going to impact us very greatly with our new media for distributing animations now, we are doing a lot of stuff over the web, where file size is important. If we went back just a little bit, we were delivering a lot of this types of presentation animations on CD ROMs where we had 600 megabytes we could fill up.

So, this type of vector drawing is going to make our file sizes a lot smaller and a lot more deliverable. Now, of course all of our drawings are not going to be little straight lines, you could see down here we have got all kinds of gentle elegant curves, that is going to come to us with the math courtesy of an old French mathematician named Besia who came over the idea, he expanded on the old two points makes a line and he said four points makes a curve.

Okay, I want to give that a try and I am going to go over and recycle pen tool here. We will draw another line and I said four points, right? So, I am going to click make one, drag, make another, that is two, I do not see if a lot is going on but I am going to click and drag and that is four and we get curves courtesy of Mr. Besia.