Join Kelly McCathran for an in-depth discussion in this video Raster vs. vector, part of Introduction to Flash Animation.
In this video, I'm going to go over the two main categories of all computer based graphics. The two terms you'll hear is raster or vector, and there are other terms that we'll cover. Raster, by Flash, is called bitmap, and that's the other acceptable term. Vector is also called Bezier curve, and for some useless trivia, Bezier curve was created by a car designer for Renault in the 1920's. Back then, US car makers were the leaders in the world, in car design. And Pierre Bezier went to his boss and said, well, instead of plotting everything out to the millimeter, how about we just put a point in and then adjust the arc around that point.
As his boss (FOREIGN) said, well, Pierre if that were true the Americans would already be doing it. It is the fundamental of all vector-based drawing that we use today, and it was originated by him. But to give you a little bit more background between the two I'm going to start by hiding all of my panels. I'll use my function key, the F1 through F12 or F1 through F15 on the top of your keyboard. The function key F4 hides all my panels, and now I'll choose View magnification > Fit in window, so you could see them side by side.
You'll notice I've assigned a keyboard shortcut for that. Command zero on the Mac, or control zero on the PC, because that works in a lot of the Adobe programs. But as you can see, a raster image is a photograph. So something that originated on your digital camera or scanner, something that was worked on in Photoshop possibly. A vector image typically looks like a drawing, although I do know people that can create bugs or objects that you'd have a hard time differentiating from a photo of those.
They are very skilled Adobe Illustrator artists who can just make things look photo-realistic with their drawing tools. So, to go over the difference between these two, raster is made up of pixels. Vector is made up of points, that's what gives it it's scalability. Raster has a certin resolution and a certain size where it looks the best. Vector can be printed. In the high end publishing world, on a business card or a billboard, and it will always stay sharp and crisp and never lose any quality.
When you blow up a raster image or a bitmap image you'll see the pixels. Pixel being short for picture element, pixel, you'll notice it with very jagged edges. Typically, most web graphics are 72 pixels per inch. Magazine photo quality is 300 pixels per inch. The good news is, Flash was created from scratch as a vector drawing program. So with the exception of placed photos or movies, everything you build in Flash is scalable to any screen size, and that's a large movement today.
The screen sizes almost become irrelevant because we never know what they're looking at your page on. It might be a smart phone. It might be a computer, it could be any number of devices. Let's take a closer look at these 2. If I select this photo, the raster bitmap image, and choose Modify > Transform > Scale and rotate. The reason I'm using this is so that I can get a dialog and type in an exact percentage, so we can get a side by side comparison.
So let me blow this up to 400%, and as soon as I do, there you can make out almost every pixel that this image is composed of. If I select the vector bananas and go to Modify > Transform > Scale and rotate, do the same percentage and hit Okay, you'll notice very clean, very smooth edges. And let's take a look out at your operating system. So I will jump over to my operating system, and you'll notice that the file size between the raster is 266k. I have a document in your project folder with just the scan of the bananas placed in Flash.
The vector, the drawing of the bananas is 143k. Now that file size is negligible. You may not notice a big difference but it depends on how complex the illustration is and what resolution the photo is. For example a 2 by 2 photo at 200 pixels per inch is 250k, 254. An 8 by 8 photo at magazine quality is 5.7 megabytes. The beauty of vector or Bezier curve typically isn't always, is smaller. So I'll jump back to flash and I'll revert to save so I haven't harmed any of the bananas on the making of this movie.
I'll press my F4 key again to show all my panels, and in summary, when you're building any graphics, you'll have either a raster or a vector. Any objects you build in Flash like ovals or rectangles, or little characters that you may draw, cartoons you may create, are all vector and all scalable. Good luck, and just let that marinate for a little bit.
- Understanding the Timeline
- Working with Timeline effects
- Adding keyframes
- Creating slideshows
- Incorporating other media into your movies
- Distributing your work effectively
- Organizing your assets
- Developing efficient workflows