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

Adding Sound and Optimizing

One of the main concerns when you create frame-by-frame animation is the file size of the resulting SWF file. This is particularly true if you draw the character across many frames. Each frame contains new information, which is all data that add to the final SWF file size. When you hand-draw vector graphics, each hand-drawn line contains a certain number of points that require calculations to render (draw out when the SWF plays) curves in the line, which also adds to the file size. Therefore, if you reduce the number of points in the curved lines (or fill shapes) you create, the file size goes down and the animation also requires less power to render each frame.

You can also select Modify > Shape > Smooth or Modify > Shape > Straighten to remove points, depending on how you want the lines to modify.

To optimize lines or fill shapes, you need to select the raw lines on the Stage (not symbols) and then select Modify > Shape > Optimize. The Optimize curves dialog box opens where you can make selections to optimize the shape.

You can apply Modify > Shape > Optimize again to further optimize the graphic.

Select an amount of smoothing to apply in the Optimize Curves dialog box. Applying more smoothing (moving the slider toward Maximum) adds a greater amount of optimization to your lines. This changes the lines more; removing more detail and making the new graphic look quite different from the original graphic. If you select Use Multiple Passes, the shape optimizes as much as possible (similar to repeatedly selecting this option). You can also choose whether you want to display the totals message, which provides an overview of how much optimization applies to the graphic.

You cannot optimize some simple shapes further; in particular, lines without curves. For example, if you draw a perfect circle, square, or triangle, there are no points that can be reduced. Most optimizationChapter 5 on character animation, you learn how to create an optimized character that is optimal for longer animations on the web.

Sound and video are also assets that add a lot of file size to your SWF files. In the following exercise, you add sound to the animation and optimize it to reduce the file size in the exported SWF file.

Exercise 5: Adding sound

A dancing pirate needs some sound to dance to. In this exercise, you import and add a looping sound to the Timeline, and change the properties of the sound before you export the SWF file.

1.
Select all of the frames in the pirate animation. This includes the head, body, left arm, left arm - fade, legs, legs - fade, right arm, and right arm - fade layers. Click and drag over the frames using the Selection tool to select them (Figure 4.27). After you select the frames, right-click (Windows) or Control-click (Macintosh) and select Copy Frames from the context menu.

2.
Chapter 4 folder on the CD-ROM (04/start/disco.wav). Save the sound file onto your hard drive.

4.
Select File > Import > Import to Library. Find disco.wav on your hard drive, and click Open (Windows) or Import to Library (Macintosh). The file imports into your FLA file, and you can find it in the Library.

5.
Click Insert Layer to create a new layer, and rename it sound.

6.
Select frame 1 of the sound layer and open the Property inspector (Window > Properties). Click the Sound pop-up menu and select the name of the sound you just imported (Figure 4.28). Make sure that the Sync menu is set to Start, and that you select Loop from the pop-up menu next to Start. This is particularly important if you have the pirate animation on the main Timeline.

Synch options

You can select different sync options, such as the Start option you specify in step 6. Event syncs the sound to a specific event, such as when you click a button (the event), an event sound plays. The Start event is the same as an event, except it doesn''''''''t replay the sound if it''''''''s already playing. For example, if a playhead reaches a specific frame, it doesn''''''''t replay the sound of the playhead as it re-enters that frame. The Stop event mutes the specified sound. The Stream event synchs the sound to the Timeline, and the Timeline will play to keep up with the stream sound. Stream sounds download from the server each time the sound plays.

7.
Find the wav file you imported in Library (Window > Library). Select the sound file, right-click or Control-click the item, and select Properties from the context menu. The Sound Properties dialog box opens, in which you can select export settings for the sound. Select MP3 from the Compression pop-up menu. This means that the file uses the MP3 sound compression settings. Leave the Bit rate at the default value of 48 kbps, which is a lower quality than you find on recorded media, but it is optimal for playback on the Internet. If you want to hear the wav as a stereo sound, deselect the Convert stereo to mono check box. Finally, set Quality to Best. Click Test to listen to the sound file.

For more information on sound export settings and optimization see [www.FLAnimation.com/chapters/04/soundexport].

Try changing and testing different settings to see what they sound like. If you want to reduce the file size, compress the file further. Select MP3 and choose a lower bit rate in the Sound Properties dialog box.

For information on loading sound using ActionScript, see the following web page: [www.FLAnimation.com/chapters/04/loadsound].

8.
Select Control > Test Movie to see the current status of the project. The music now loops in the background while the pirate movie clip animates.

Exercise 6: Optimizing and publishing

When you test the file, there are several things you can watch for and make better before you finalize and upload the project.

1.
Select File > Publish to publish the SWF file. Look at the file size of pirate.swf (which is in the same directory as your FLA by default). Depending on the file size, you might want to optimize the pirate graphics. Your SWF file is probably around 200 KB, which isn''''''''t horrible for a frame-by-frame animation with this amount of detail and sound; but you could make it smaller.

2.
Open the pirate pieces folder inside the Library (Window > Library) and double click each pirate movie clip symbol. Select the raw graphic drawings inside each symbol (click and drag around the drawings using the Selection tool) and then select Modify > Shape > Optimize. Follow the directions at the beginning of this section for optimizing the raw graphics.

Many Flash forums (such as [www.flashmx2004.com]) have areas devoted to site checks, with other people ready and willing to check your sites for you. Thanks to these forums, it''''''''s easier to get by in life without Internet-savvy friends.

3.
Right-click (Windows) or Control-click (Macintosh) discopirate.png in the Library and select Properties from the context menu to open the Bitmap Properties dialog box. Make sure that you select Allow smoothing in the dialog box. Choose JPEG in the Compression pop-up menu. Click the Test button to see how much compression applies to the PNG graphic and the file size of the graphic. Then select Lossless (PNG/GIF) from the Compression menu and click Test again. Determine which compression setting affords the best results, select that option, and then click OK.

If you are syncing sound in your FLA file, then it''''''''s unlikely you''''''''ll be able to change the frame rate at this point because the animation is tied into the sound. Therefore, if you change the frame rate it will change the synchronization. Because the sound file in this document is a loop and doesn''''''''t synch, changing the frame rate does not harm the FLA.

4.
You can also change the frame rate of the document if you want, if it''''''''s possible. In general, high frame rates with frame-by-frame animation can be processor-intensive. To test the frame rate of the SWF file, you should play it on computers with varying amounts processing power. If you know someone with an old computer, ask her to play your animation and see whether it''''''''s choppy or erratic when it displays (speeding up and slowing down). If so, you might want to reduce the frame rate so the playback is not as erratic. You can also optimize the graphics further (from step 2) to speed the animation up.

5.
Select File > Publish to publish the project. This command generates SWF an101 file in the directory you saved the FLA file in. You need to upload these two files onto the web to view the page online.

Chapter 2 for a comparison of vector and bitmap graphics.

You might want to make the SWF file as large as the browser window the user views it in. Some animators prefer this, but you should make sure the graphics you use are vector-based. If you try resizing bitmap graphics, the images might appear blurry and distorted. Vector graphics are scalable, so they appear nice and smooth when enlarged.

To make the SWF file the same size as the browser window, you need to make some changes to the default settings in Flash. Select File > Publish Settings to open the Publish Settings dialog box. Click th102 tab, which contains settings about how the code that embeds the SWF file in th102 page generates. Select Percent from the Dimensions pop-up menu.

The SWF file fills the entire browser window regardless of how big or small it is, and changes size if the user changes the size of the window.

Save and publish the document, and double-click th102 page that Flash generates to view your project in a browser. You just created a file that primarily uses frame-by-frame animation to produce a finished cartoon. As you now know, there are other ways to create a frame-by-frame animation: You can draw each frame or modify instances on the Stage in any way you see fit.