Vector vs Bitmap

Hey, in this video were going to look at Vector vs Bitmap and why do we learning about this because its image time and images are probably the biggest use of file size that were going to find in adobe animate. Why is file size important its because if I send this out to Google ad words, they're going to say it cant be the whole thing, everything included, the code and the images and the sounds and everything included needs to be no more than 150 KB and that’s 0.1MB so its quite small so we need to make sure we get the most out of everything and vector is great and small and bitmaps are big but necessary essentially.

So essentially the differences, so illustrator is a vector drawing program, it draws shapes very similar to adobe animate, it’s a vector drawing program as well, and then Photoshop, which everybody knows is a photo editing. That is what is considered a bitmap program or a pixel program or a raster program. And ill show you the difference. So lets bring in a graphic from illustrator like one of our aliens. I'm going to bring in this guy, he's not an alien he's a frog and I'm going to bring in something from Photoshop, so I'm going to import to stage and I'm going to bring in something from my exercise files from animated cars. I’ll bring in one of our cars here. So I've got a car and I've got our little animated creature over here. Now one of the differences is, stylistically they're very different., these vector files have to be these simple shapes, they're reasonably complex, but they look more like clipart. The reason is, is they're made up of, command plus and I move across, what you'll notice is that if I go into this guy, he's actually made up of all these little lines, can you see these little blue lines that appear around the outside. It just means that it’s more of a mathematical equation that draws that line. There's an x and y’s and co-ordinates, where as this guy over here if I move across, I'm holding space bar to move across. If I zoom in, can you see there are actually pixels, zoom out again, try and find him. If I zoom in on you, I'm going to use the zoom tool in this case, where’s my zoom tool, there it is there, click, click. And eventually you start seeing these little cubes, these little cubes are what makes up this image and that’s a bitmap, all these little bits of colours go together to make an image. This is necessary, why? Because you cant get this full spectrum of millions of colours out of Vector. You need them out of these pixel ones. So if you need real life images, it has to be brought in as bitmap and if you're doing illustrations and logos, they should come through as Vector and essentially that’s the difference between illustrator here on the left and Photoshop documents that have come in over the right.

Before we go, lets talk about file sizes. So let’s export it, so I'm going to go file publish and I've called this one 27 Vector vs Bitmap. So lets go and find him, there he is there and what you'll notice is when you hit publish you get these two files, these were going to go through later on. You'll see them quite a bit through your files because we've done a preview in a browser so what it does is it coughs up these two. They're not ready to go out to be delivered to the ad network but they just get made, so these are the one that we made, these are the two that get spat out when you're doing a preview. We need to keep these around just to see the preview.

So I've published these two and lets have a look. So can you see this whole document these two guys here are about 16 KB and that includes the frog, includes any animation, the background colour, all of that and this little car png here is 88 KB and he's all by himself, so images always trump vector by good multiples. So if you can keep things vector, awesome, if they have to be images, great, were going to look at keeping files size down in a later episode. But next well go through and show you how to bring stuff in from Illustrator vs Photoshop.