Animation and Effects with Macromedia Flash MX 1002004 [Electronic resources] نسخه متنی

Using Vector and Bitmap Graphics

You should avoid animating partially transparent bit maps over another bitmap in Flash, which is very processor-intensive. Most transparency in Flash is processor-intensive, but you can successfully use it in small amounts in a SWF file without much of a negative impact.

When you create an animation, you can choose between vector and bitmap graphics, or use a combination of the two. Remember that vector drawings are the graphics you usually create in Flash, and bitmaps are imported images. You should consider whether you need a very small SWF file and optimal performance; or whether you need the detail that a bitmap image yields. Flash is a vector-based program, which means that the vector shapes you might draw in the program are remembered as mathematical calculations. Programs like Photoshop are bitmap-based, and bitmaps typically result in larger files than vector graphics. However, if you need realism or "painterly" effects, sometimes bitmap graphics are necessary.

The following image displays the difference between a bitmap image and a vector graphic. As you can see, vectors are best for line drawings, and bitmaps are best for images that require pixel detail.

You can turn a bitmap graphic into a vector graphic by using the trace bitmap feature in Flash. Select Modify > Bitmap > Trace Bitmap to change the bitmap into vectors, which results in a file that is similar to the original, as seen in the following figure.

Chapter 3, you discover how you can shape only tween raw vector graphics in Flash.

Chapter 5, you learn how to use the vector drawing tools in Flash to create graphics for animation. You also learn how to integrate external editors with Flash to do what's called round-trip editing.

Performance and Vectors

Although it is primarily a cosmetic choice when you choose between using vectors and bitmaps, you might also consider the performance and scalability between the two forms of graphics when choosing to animate them. You should always change any vector drawings that you make directly on the Stage (which is raw data) into symbols before publishing the FLA. Vectors that are raw data have a crosshatch pattern over them when they are selected. Raw data placed on the Stage has to be rendered out (drawn on the Stage using calculations when the SWF file plays) every time the playhead reaches that frame on the Timeline because the information is not stored in the Library. By changing the raw data into a symbol, you can reduce the SWF file size so the information has to be referenced only once in the Library instead of many times individually on the Timeline. It also makes the graphic easier to select on the Stage. However, you can shape only tween raw vector graphics, and certain other elements (such as motion guide paths) must be raw vectors as well.

Exercise 1: Importing graphics

The first step of creating the animation is to import the graphics to animate. These graphics were created for you already: The graphics for this project were drawn by hand in Photoshop using a graphics tablet (this could have just as easily been accomplished using Fireworks). Each graphic was created on separate layers and then exported as PNG files with transparency. Feel free to replace these graphics with your own. You can draw your own graphics, or you might even manipulate several photographs and use them instead.

Your images should be wider than the Stage dimensions of your FLA file. If you use the same dimensions as the file in this exercise, make sure that your images are approximately 550 pixels wide or more.

1. Select File > New; then select Flash Document and click OK to create a new FLA file. Then select File > Save As to save the file, and type panning.fla into the File name (Windows) or Save As (Mac) text field. Click OK to save the document.

2. Locate the 02/start/images folder on your hard drive. If you have not transferred the contents from the CD-ROM to your hard drive, copy over the 02 folder first before you import the PNG graphics for this exercise.

3. Select File > Import > Import to Library from the main menu. Select all the PNG files in the 02/start/images folder. To select all of the files simultaneously, hold down the Shift key while you click each file to select the entire directory, or select one file and hold Shift while you press your arrow keys. Click Open (Windows) or Import to Library (Macintosh) to import the files into the FLA document.

All the PNG files are now stored in the Library. Open the Library (Window > Library) to see that all seven PNG files imported successfully.

4. Select the Stage and open the Property inspector (Window > Properties) to change the dimensions and color of the Stage. Click the button next to Size to open the Document Properties dialog box. Change the dimensions of the Stage to 500 (width) by 400 (height). Then click the Background color control, and type #99CCFF into the text field at the top of the color pop-up menu, as shown in the following figure. This hexadecimal color specifies a light blue color for the background.

5. Create five new layers (one layer for of the movie clips you will create, and one layer for the tween) so that you have five layers total. Click the Insert Layer button (which is below Layer 1) until you have five layers. The Insert Layer button is a small square with a plus (+) icon on it.

It is always a good practice to rename your layers in a meaningful way. If the name of the layer represents the content placed on that layer, you will have an easier time editing your files. Otherwise, it is difficult to know what is specifically on that layer.

6. Rename each layer to represent the content that will be placed on that layer. Double-click each layer and type in a new name as follows (from top to bottom): clouds, grass, sun, bird, and mountains, as seen in the following figure:

Remember that each movie clip you intend to tween needs to be on its own layer without any other graphics or movie clips on that layer.

7. Select File > Save to save your changes.

Chapter 2. However, each subsequent chapter uses shortcut keys only.

In the next exercise, you will create movie clips that include each of the images you just imported.

Exercise 2: Creating movie clips

This exercise creates movie clips from each of the images that you imported. The three parts of the bird image (body, wing, and leg) are each converted into movie clips, and then the wing and leg are nested inside the body movie clip. You do this so the bird as a whole can be tweened, and then you can tween the wing and leg individually as well.

1. Open the Library in panning.fla, and drag the following PNG files to the following layers:

clouds.png to the clouds layer

grass.png to the grass layer

sun.png to the sun layer

bird-body.png to the bird layer

mountains.png to the mountains layer

The order of these layers is important because the layering adds a sense of depth. The mountains must be on the lowest layer because they are farthest in the background. The grass must be on the top layer because it is the closest to the viewer and creates the foreground.

2. Select each PNG image that you added to the Stage, and select Modify > Convert to Symbol (or press F8) to convert them into movie clips. Name each movie clip the same name as the PNG file (remove the .png extension). When you finish, you should have one movie clip on each layer.

You can rearrange the order of your layers by selecting and dragging the layer to a new location in the stack.

3. The following process adds the bird-wing and bird-leg PNG files inside the bird-body movie clip. Double-click the bird-body movie clip to open the instance in symbol-editing mode. Create two new layers inside the movie clip by clicking the Insert Layer button, and rename the two layers bird-wing and bird-leg, respectively. Rename Layer 1 to bird-body. Drag the two PNG files to their respective layers.

4. Inside the bird-body movie clip, select the bird-wing.png image and then select Modify > Convert to Symbol (or press F8) to convert it into a movie clip into a symbol. Then select the bird-leg.png image and convert it into a movie clip (select Modify > Convert to Symbol). Name each of these movie clips the same name as the PNG image (remove the .png extension).

You do not need to convert sun.png into a movie clip. This image is not animated, and therefore does not need to be converted into a movie clip symbol.

5. Arrange the wing and leg so they are correctly positioned in relation to the bird's body (as shown in the figure following step 7).

6. Click Scene 1 in the Edit Bar to return to the main Stage from symbol-editing mode. Notice that the bird-body instance now appears with a leg and wing on the Stage.

7. Select the movie clips and drag them so they are arranged properly in a layout. You will tween the clouds, mountains, and grass layers from right to left; and you will tween the bird from left to right. Therefore, you should align the clouds, mountains, and grass to the left side of the Stage; and also place the bird near the bottom left of the Stage. Try to lay out the movie clips similar to the following figure. Save your changes before moving on to the next exercise.

In the following exercises, you tween each of these movie clips so the scenery appears to be panning and the bird movie clip appears to be animating across the Stage.