Differences Between Vector and Bitmap Images

So let us close this Windows down and get back into Flash. So now, we are going to talk about some best practices for developing mobile content with Flash Lite. First, we are going to talk about Images and Vectors or as you might also know as Bitmap images. There are some differences between these two formats of images and I greatly impact on the performance of Flash Lite Mobile Applications. Let us go and open a new mobile template and see what kind of impact it can have.

So we have a mobile template as we have before. I am just going to close this Output Window and we are going to import some images into our Flash Applications just to see the differences between Vector and Bitmaps. For those of you who have not come from that background, a Vector Images is made up of shapes that you can edit while they are on the stage. These are normally made up of fills and outlines. So say for example a square that might have a red color on the inside and a black outline. You can edit each of those outlines and fill separately in a Vector Image. With the Bitmap, you can think of it like a photo. Something that you cannot come in and edit lines and fills with. That is something that is just as it appears as you have imported it. Let us import a Bitmap to start of with. If we choose the Import and Import to Stage option from Flash, that allows us to bring in extra and immediate into the Flash authoring environment. We are going to browse now to the Planet_background.png file which should appear in your Lesson 1 folder. You will get this PNG imports settings dialog box popping up and we just want to import as a single Flattened Bitmap. So if that check box is not already checked, check it now.

You can see now that we have got this Bitmap that is appearing on our stage. It is a background for spacing by this time. You will notice that when we click on it, our Properties Inspector shows us that we have got a Bitmap selected. We cannot double click on it and edit the blue or the red or any of the shapes that appear on the planet because it is coming just as a single Flattened Bitmap. Some best practices with Bitmaps is that you should not really try and scale or rotate one in the mobile application. You will lose quality and it certainly impacts on the performance of your application. You should also try and optimize your Bitmaps in an external software package such as Fireworks or PhotoShop before bringing it into Flash. This is so that you can use those software packages tools to do the best optimization job you can on the file before bringing it into Flash. Remember, we are always talking about trying to create really lean and fast performing mobile applications and large clunky Bitmaps are only going to slow things down later on.

Now, let us import a Vector graphic and see the difference. We go through the same file import process as we did before but this time, choose space_enemy.ai. This is an Illustrator File and we get a similar dialog box when we are trying to import this type of files as well except this is asking us to flatten all of the specific Vector shapes within this object into one shape. So if you have not got that ready, button check the Flatten, you can do that now and then click okay. You should be able to see the spacing by now appearing on your stage. Let us just drag and drop it over the top of our background. You will notice too in the Property Inspector that it now says we have got a group selected which means if we double click, we can go inside of that group and select the individual objects. We might need to double click a few more times to get down to the actual shape. Let us zoom in. We will choose a zoom tool and draw over the object and we can start to see the different shapes that are making up our Vector. If we go back and choose that point tool or our selection tool, we can see now that we can select some of these individual shapes on their own such as these top two squares and the body and the bottom two rectangles. These are individual Vector objects as well which have been grouped together to create these objects. You can see as we have drill down through those groupings that Flash has skipped the track of how deep we have gone and we can easily choose one of these options to get us back out to any layer we like.

I am just going to click on Scene 1 one to bring us back at to the main time one. Traditionally, Flash has been much better at handling Vector shapes than Bitmaps but when we are publishing Suite Files to the web, it has not really matter when it came to file size and performance. With mobile though, it is really important for the performance that we keep everything running as smoothly as possible. The rendering engine within the Flash Lite Player we will see a Vector shape made up of all of the different shapes grouped together. So in the example that we have just seen, all of those smallest squares as well as the larger body will all be joined individually. We can quickly see what Flash sees when it is rendering this by clicking the outline tool on a layer. So if we go up and click the square, it turns everything on that layer into an outline. And now, we can see that that space inverted shape is made up with a lot of lines. It also got fills as well.

So it is a lot there for Flash Lite to render when it comes to outputting it especially when it is animating. If we zoom out and I am going to click this Magnification Drop Down over here on the right. If we deselect everything, we cannot choose the Bitmap and you can see really that Flash only got four sides to draw. That compared to the Vector shape is a lot less lines and so Flash Lite is going to have a lot less rendering to do and that is going to improve the performance of the application. This is one of the major benefits of using Bitmaps over Vector for Flash Lite. With less line and no fills to render, Flash Lite has a much easier job of using Bitmaps. So if your Flash design is that big that have been used to using Vectors for so long, you are going to have to change the way you think when it comes to doing Flash Lite applications. We will be using a lot more Vector and Bitmap images in examples that are coming up later on the course.