Join Anastasia McCune for an in-depth discussion in this video Understanding and importing bitmaps and vector files, part of Learning Flash Professional.
While Flash provides you a number of drawing tools, using imagery that's been created outside of Flash is likely going to be something you'll want to do often. You can import both bitmap and vector graphics into Flash. So let's talk about the differences between vector and bitmap and take a look at the import process. Here we'll perform the first steps to create the finished project you previewed earlier at the start of the course with the lady driving the car. As a refresher of what this looks like, double-click on fastCar.swf in the Exercise Files for this chapter. Right now we'll be working with the background image and the image of the lady in the car.
(video playing) I am going to start by creating a new blank ActionScript 3.0 file and save it as fastCar.fla. In the Property Inspector, notice the default document settings that have the stage dimensions as 550x400, the frames per second at 24, and a white background color. Let's import a background graphic which is a bitmap. Go to the File menu and choose Import, then Import to Stage. In the Exercise Files for this movie, find the file called background.jpg and click Open to import.
Flash thinks about it for just a moment and the import process is done. Because the image is on the stage, it also appears in the library. Click on the Library tab to see it, and there it is. Click on the image on the stage to make sure it's selected and then open your Property Inspector and notice that it shows the width of our image is 550 and the height is 400. It's great that this image is already the same size as our stage because it's a bitmap. Bitmap images don't scale up and down easily. You can think of image information for bitmaps kind of like a grid.
For instance, one pixel is green, then the pixel next to it is red, then the pixel next to it is blue, and so on. If you need to scale a bitmap image so it's bigger, your image program has to guess what color to use to fill in the extra space you've added to the grid. Likewise, scaling a bitmap image down also requires some guesswork as to what color to make each pixel since you're essentially making the area of the grid smaller. You can see this behavior by clicking on the image to make sure it's still selected and then over in the toolbar selecting the Free Transform Tool.
Transformation handles appear on your image and you can then resize it. I am going to approach the upper right-hand corner of the image and you'll see a double-headed arrow appear. This allows me to change the width and the height of the image at the same time. If you hold down the Shift key while clicking and dragging with the double-headed arrow, the width and height stay in proportion to each other as the image is made bigger or smaller. Go ahead and make your image really big. See how the image quality kind of degrades as the image gets bigger? The trees, leaves, and other items in the image start looking blocky or pixelated.
This is because as the bitmap scales, there's not defined information to fill in the extra pixels you're asking the image to include. Pictures you take with a camera are a great example of imagery captured as a bitmap, and you'd use a program like Adobe Photoshop to be able to resize bitmaps without getting that pixelation. So the conclusion to take away about bitmap images is that it's best to have them sized at the correct dimension you need before importing them into Flash. So now that we've sufficiently messed up our image, let's change back to our Arrow Selection Tool and click on the image to make sure it's still selected.
In the Property Inspector, I am going to restore it to its correct dimensions by typing 550 for the width and 400 for the height. I actually didn't have to type in the 400 because the little chain for linkage is here. It's locking the width and height values together. To place it so it sits squarely in the middle of the screen, I am going to type 0 for the X position and 0 for the Y. So we're back to where we started and the pixelation we saw, when we stretched the image out, has gone away. Let's move on and import a vector file. I am going to go to the File menu again, scroll down to Import, and this time select Import to Library.
Navigate to the start folder for this movie's Exercise Files and choose the file called CarWithDriver.ai. This is an Adobe Illustrator file. We're presented with some options before we import our file. Down in the left-hand side, you can select or deselect which layers from the Illustrator file you want to include in the import. We want them all, so I am just going to leave them all checked. In the Convert to layers dropdown, you can choose to have Flash preserve the layers by choosing Flash Layers. You can also have Flash squish all the layers into one by choosing Single Flash Layer or you could have it convert all layers to keyframes.
We haven't discussed keyframes yet, but that's okay because we want to go ahead and preserve the layer set up in Illustrator, so let's just leave this at Flash Layers. Leaving these other checkboxes at their defaults is fine as well, so let's click OK. It doesn't look like much has happened because we imported the stage into the library, not to the stage. Click to open your library and indeed the car image is there as a graphic symbol. We'll cover symbols in detail later, but for now, think of symbols as a reusable blueprint. Having the items in our library named something that describes what the item actually is, is a good practice.
CarWithDriver.ai is pretty intuitive, but let's double-click on the current name and change it to just plain CarWithDriver. So you've probably noticed that importing something to the library does not automatically place it on the stage. If it's in the library but not on the stage, it's not included in the final SWF. Well, we need our car image on the stage, so I am going to scroll down a little bit and drag it out from the library onto the stage. It's a little too big, so I am going to head over to the toolbar and grab my Free Transform tool or you could just hit Q on your keyboard.
Notice that you can change the dimensions as much as you want and the image always stays looking sharp and non-pixelated. That's because this is a vector graphic. Instead of storing information about the image like a grid, like bitmaps do, vectors instead use mathematical equations to describe the shapes and curves. As you change the image, the shapes of the image are simply recalculated, so it always appears crisp. While it's a good idea to have that vector imagery already sized correctly before you import it into Flash, you can see that adjusting the size after the fact works just fine.
So I am going to change my car and driver by opening the Property Inspector and making sure that the icon of the chain here still looks like a linked chain. This way we're locking the width and height values together. I am going to type in 345 for the width and the height should automatically update to 140. I am also going to reposition the driver by giving here an X position of 114 and a Y of 216. Now using my Arrow tool, I am going to double click on the image of the car. You'll notice that the screen has changed. The top left of the screen says Scene 1 and then CarWithDriver and the background image is grayed out.
What we've done is stepped into the car image itself. Notice how you can click on each one of the wheels individually as well as the body of the car. Now double-click on the body of the car and see now how the wheels are grayed out since we've stepped into the group of shapes that make up the body. Notice also how the upper left of the screen now says Scene 1, CarWithDriver, and then Group. You can drill down even further by double- clicking on part of the car such as the door. What we're seeing here is all the individual layers from the original Illustrator file that have been preserved.
This is going to prove useful down the line since we're going to animate the wheels. But for now, I am going to click on Scene 1 on the upper left to return to the main timeline and save my file. There's one last vector image that we'll use later on in our fast car movie, so one last time, I am going to go to the File menu, Import to Library, and from the start folder for this movie choose face.ai. In the Import dialog box, I am just going to leave all the defaults as they are and click OK. In the Library, you can now click face.ai to see a preview.
It's the face for the sun that we'll draw later on, so for now we'll just leave it here. Let's change the name of it however from face.ai to just plain face. So you can see that importing imagery into Flash whether it's vector or bitmap requires only the simple steps of going to File and then Import and then choosing if you want to import to the library or the stage. Both types of images are okay to use, but remember as a best practice to have your imagery, especially bitmaps, sized correctly before bringing them into Flash.
- Choosing the type of document to work with
- Changing document settings and orientation
- Importing bitmaps and vector files
- Organizing layers
- Understanding the timeline, frames, and keyframes
- Creating shapes
- Understanding the three symbol types (graphics, buttons, and movie clips)
- Defining motion and shape tweens
- Nesting timelines
- Using effects and masks
- Working with text
- Importing and adding audio and video
- Publishing your project