Flash CS4 Professional in 24 Hours- P15 pot

ptg File Size Considerations 411 graphics don’t matter, but sounds and bitmaps are more significant. Any- thing you can do to reduce their size results in major savings in the file size of a movie. Sounds Flash provides several ways to compress audio and bitmaps. You saw that these compression settings are specified individually via the Library item properties for each imported bitmap or sound in Hour 3, “Importing Graphics into Flash,” and Hour 13, “Including Sound in Animations.” You also see in Hour 24, “Publishing a Creation,” how you can set compression settings for all imported bitmaps and sounds at once via the Publish Set- tings dialog box. Although you know where to set the compression set- tings, you might not fully understand how this affects your movies. Different types of compression exist. For audio, you should always use MP3 or Voice. Although Flash supports Adaptive Differential Pulse Code Modulation, or ADPCM, you should only use this if you are publishing your movie as Flash 3 or lower—that is, you want the audio in your movie to work for people who have only the Flash 3 player. If you happen to be delivering your movie to run only on your hard drive, you can specify no compression and use Raw. Barring those two situations, MP3 is the best choice. A simple relationship exists between quality and file size. You learned how to set the compression settings individually for just one sound in Hour 1, “Basics.” Basically, you try one setting and listen to how it sounds. As you try greater levels of compression, you both hear the difference and see the file size change. It’s just a matter of balancing these two priorities—good quality and small file size. There are a couple additional ways to optimize sounds. The easiest one to remember is that stereo sounds are twice as big as mono sounds. There- fore, you should enable Flash to always convert stereo to mono, unless you truly need stereo. Keep in mind you can still use stereo panning effects on sounds that are mono. When a frame with sound is selected, you can use the Effect feature, you can use preset effects (such as Fade Right to Left), or you can make your own effects to give a mono sound stereo-like effects (see Figure 22.4). From the Library of Lee Bogdanoff ptg 412 HOUR 22: Minimizing File Size Another great way to reduce the impact of sounds on file size is to trim ex- cessive silence from the beginning and end of every sound. It’s customary for audio engineers to pad every sound file with a little silence. Sounds take up the same file space for every second they’re played, regardless of whether they’re audible (although compression tends to compensate for this). Ideally, sounds should be trimmed before they are imported, but you can trim them inside Flash through the Edit Envelope dialog box. You can review this technique in Hour 12, “Reusing Your Animations with Motion Presets.”. By trimming excessive silence in a particular sound, we cut the sound by 10 percent in a recent project. That might not seem like a lot, but because sounds can be very large, 10 percent of a large file can be signifi- cant. What’s more, because we just trimmed out the silence, we didn’t lose anything. Consider, too, that a long fading-out sound could be trimmed, and you might not notice the difference because the volume is so low. Bitmaps You can reduce the file size impact of bitmaps in several ways. First of all, consider not using bitmaps at all. Although this might seem like a flippant tip, it’s worth thinking about. Of course, you should avoid any unnecessary raster graphics ( .jpg, .gif, .bmp, and so on) because each pixel’s color is saved in the file (unlike with vector graphics, which store only the math necessary to redraw the shapes). However, certain types of images, such as photographs, only work as bitmaps. It’s not always a matter of choice. In addition, if you want a bitmap with transparency (also called an alpha chan- nel), .png is the only alternative. One big warning: Using Modify, Bitmap, Trace Bitmap does convert a bitmap into all-vector shapes. However, you should use this feature only FIGURE 22.4 The Edit Envelope dialog box (ac- cessed from the Proper ties panel) enables you to create panning ef- fects using mono sounds. From the Library of Lee Bogdanoff ptg File Size Considerations 413 when the bitmap contains clear and bold sections. If you find it necessary to set the Trace Bitmap dialog box to draw lots of tiny vector shapes instead of large, bold areas, as shown in Figure 22.5, you probably end up creating a vector version that’s larger than the original bitmap. People tend to think that vector graphics are small and bitmaps are large, but taken to an ex- treme, vectors can be quite large, too. Therefore, use Trace Bitmap only when the content of your image file is better served as a vector—that is, it contains bold geometric shapes. Of course if you’re trying to achieve a par- ticular special effect, Trace Bitmap can be used—if you keep in mind the potential file size impact. FIGURE 22.5 Using Trace Bitmap on a photo- graph would require such small val- ues for Threshold and Minimum Area that the image would increase in size. Importing High-Quality Media and Then Compressing Them Let’s review the difference between the bitmap export options. Although it might seem counterintuitive, it’s best to start by importing the highest-qual- ity sound, video, and bitmapped graphics possible. This certainly adds to the file size of your source .fla, but you can enable Flash to do the com- pression before publishing your movie. Either through the properties for in- dividual sound and bitmap items in the Library or through the Publish Settings dialog box, you can control how much Flash compresses your me- dia. For example, instead of converting an image into a compressed .jpg before importing it into Flash, try to start with the best-quality uncom- pressed .bmp or .png file. After it’s imported, you can specify how Flash is From the Library of Lee Bogdanoff ptg 414 HOUR 22: Minimizing File Size to compress it upon export. This way, you can always decide how much to compress it. If you start with something that’s already compressed (and therefore lower quality), you can’t make it any better inside Flash. High- quality sounds should start as .wav or .aif format. (MP3s are already com- pressed.) Raster graphics should be .bmp, .png, or .pct format. Note that .jpg files are always compressed at least a little bit, and .gif files always have 256 or fewer colors. However, if you have a sound or an image that’s already compressed (such as an .mp3 or .jpg file) and either you don’t have access to a better-quality original or you’re confident that the current compression is ideal, you don’t need to first convert it to another format. For example, you might have used the Selective JPEG Quality feature in Fireworks to make a great-look- ing and small JPG. In these cases, import the image as is, but make sure that Flash doesn’t recompress it. For imported compressed images, you see the option Use Imported JPEG Data in the Library item’s properties. Using this option prevents Flash from recompressing the file. The only time to recom- press an image that’s already compressed is when you have no access to the original. Compressing a compressed image brings the file size down, but the quality is lower than if you had simply compressed it to the same level once by starting with a high-quality original. Using the Bandwidth Profiler Now that you understand how to manage file size by compressing audio and bitmaps and using certain drawing techniques, you need to measure the impact of each. Even if you know audio adds to file size, you still might want to use it. Your decision needs to be based on how much file size the audio adds. If it means the user waits a couple extra seconds, adding audio might be worth it. However, if adding a piece of music means the user waits 10 minutes, you probably shouldn’t use the music. To decide whether a particular media element is worthwhile, you need to know how much it affects file size. The Bandwidth Profiler helps you assess exactly how much each media element adds to a file’s size. Basically, you try out a file size-re- duction technique such as compression, and then use the Bandwidth Pro- filer to judge how much the change helped. If you make another change, you use the Bandwidth Profiler again to measure the improvement. Previ- ous sections taught you how to identify ways file sizes grow; this section teaches you how to measure the impact. Turning on the Bandwidth Profiler is easy, but deciphering the data it pro- vides is a bit tricky. The following task introduces you to the basic features of the Bandwidth Profiler. From the Library of Lee Bogdanoff ptg File Size Considerations 415 Use the Bandwidth Profiler to Judge Download Times TRY IT YOURSELF ▼ In this task, you learn how the Bandwidth Profiler can help you assess how a movie might play over the Internet. Follow these steps: 1. Download the file keyframing.fla from the publisher’s website. Use Test Movie by pressing Ctrl+Enter. 2. As the exported .swf plays, select View, Bandwidth Profiler (or press Ctrl+B). This is an option in the Test Movie Flash Player, not the au- thoring tool, so you only see it while you’re testing. 3. The Bandwidth Profiler provides information in the top section while the movie plays below, as shown in Figure 22.6. You see data on the left, and a graph on the right. FIGURE 22.6 Vital statistics for an exported .swf are shown in the upper-left area of the Bandwidth Profiler. 4. Look at the first section of data called Movie. Most of this information is simply a recap of the settings you can change in your source movie such as dimensions and frame rate. In addition, you see two values whose numbers vary: Size (or file size) and Preload. When we tested the movie keyframing.fla, we got a file size of 9KB (or exactly 9,292 bytes). Later, when you attempt to optimize this file, you see whether the size is reduced. Preload displays how many frames must preload and how long that takes before the movie starts playing. Of course, this depends on your user’s Internet connection. The Band- width Profiler can make estimates based on different connection speeds, such as the preload time based for a modem settings (found under the menu View, Download Settings). From the Library of Lee Bogdanoff ptg 416 HOUR 22: Minimizing File Size TRY IT YOURSELF ▼ Use the Bandwidth Profiler to Judge Download Times 5. Select View, Download Settings. Notice one of the modem types has a check mark, 56K by default. Change this to 14.4 for 14.4Kbps modems and you see the Preload setting change from less than 1 second to about 4 seconds! 6. Select View, Download Settings, Customize, which opens the Custom Download Settings dialog box, as shown in Figure 22.7. Here, you can modify the presets or create your own. Add an option for the common cable modem bit rate of 1.5Mbps. In the sixth field, change User Set- ting 6 to read 1.5Mbps (Cable), and the number in the bit rate col- umn to 187000. Click OK. FIGURE 22.7 The Custom Down- load Settings dialog box enables you to simulate any Inter- net connection speed. 7. Select your new setting from the menu View, Download Settings. You should see the preload time reduce to nearly nothing. 8. The Bandwidth Profiler enables you to simulate how long a movie takes to download at the selected bit rate. Select View, Simulate Download. The movie starts over, and you see a green progress bar move across the top of the graph. Change the bit rate to 14.4 by selecting View, Download Settings, and try Show Streaming again. Even with this rela- tively basic movie, the current-frame marker in the graph catches up to the green progress bar and must occasionally wait for the content to download. This isn’t desirable, but it’s an accurate representation of how this movie looks on a slow connection. You learn ways to address this in the next task, “Reduce a File’s Size with the Bandwidth Profiler’s Help,” but for now you’re just learning how to identify problems. 9. In the View menu, select Frame by choosing Frame Graph (or press Ctrl+F). The graph shows a vertical bar for the file size of each frame’s contents. A tall bar means a frame has more data. The red horizontal line represents the sustained data transfer rate the current bit rate can maintain. In other words, if a frame’s bar is higher than the red line, Flash might need to pause at that frame while it down- loads. For example, in the keyframing.fla file, you notice relatively From the Library of Lee Bogdanoff ptg Use the Bandwidth Profiler to Judge Download Times TRY IT YOURSELF ▼ high bars at the beginning and through Frame 15. This makes sense. Close the test movie, and look at the source file. After Frame 15, little new content is introduced. The lack of new data means less to download (see Figure 22.8). File Size Considerations 417 FIGURE 22.8 After Frame 15, little new content appears onscreen until Frame 26. This means most data is downloaded by then, as you see in the Bandwidth Profiler. NOTE Deciphering Bits, Bytes, and Kilos In the preceding task, you specified 187,000 bytes per second for a 1.5Mbps cable modem. This was calculated based on modem speeds listed as “kilobits per sec- ond” (or, in the case of 1.5Mb cable connection, that’s 1,500,000 bits per second). Computer file sizes are often displayed in kilobytes or megabytes, not bits. Because 1 bit is one-eighth the size of a byte, you can convert bits to bytes by dividing by 8. Therefore, 1,500,000 bits per second is the same as 167,000 bytes per second. A 320KB image downloads in 2 seconds on a 1.5Mbps connection (1500Kbps / 8 = 167KBps; therefore, a 320KB file downloads in about 2 seconds at that rate). Another issue, however, is the fact that an Internet connection might not download at a consistent rate. Note the presets in the View, Download Settings menu for 28.8Kbps modem and 56Kbps modem are lower than what you would expect (2,400 and 4,700 instead of 3,600 and 7,000). That’s because the Flash presets are padded to more accurately represent an actual modem download speed. Gener- ally, you don’t have to do a lot of math. In this case, however, doing the math might be interesting. Use the Bandwidth Profiler’s Simulate Download option to watch how the movie plays. Analyze the movie frame-by-frame by scrubbing to view which frames are exceeding the red streaming limit. Just because a vertical From the Library of Lee Bogdanoff ptg 418 HOUR 22: Minimizing File Size line is above the red line doesn’t necessarily mean playback pauses at that frame. When possible, Flash starts to download frames before they are en- countered. For example, several frames might not involve any onscreen changes, but Flash is still downloading. While displaying these frames, Flash can start to download frames from later in the movie. Frames that have no visual changes don’t take long to download; therefore, Flash can concentrate on downloading future frames. This behavior is called advance streaming, but you can think of it as buffering. The Bandwidth Profiler has an option to show such streaming behavior in a graph that is similar to the Frame by Frame Graph view. When you select View, Streaming Graph, you still see each frame’s vertical box. Each frame is shown as alternating light and dark gray boxes. The red horizontal line rep- resents the maximum data that can be transmitted in the time one frame takes to play (that is, 1/12 second if you have a frame rate of 12 fps). If the first frame (dark gray,) can download in less than 1/12 second, you see Frame 2’s bar in dark gray stacked on top of Frame 1’s light gray bar. For example, open the keyframing.fla file again, and use Test Movie, select View, Streaming Graph, and select View, Download Settings, 56K. As you click on any of the first several gray or black rectangles, each of the first 13 frames takes 1/12 second or longer to download. Then in the time it takes to play Frame 28 or 29, Flash can download more than two frames (see Figure 22.9). As a result, the entire 60-frame movie is completely down- loaded in the time it takes 25 frames to display. Select View, Show Stream- ing for a view of this effect in real time. FIGURE 22.9 The Streaming Graph view (not Frame by Frame Graph view) dis- plays how quickly Flash preloads upcoming frames. From the Library of Lee Bogdanoff ptg File Size Considerations 419 Reduce a File’s Size with the Bandwidth Profiler’s Help TRY IT YOURSELF ▼ In this task, you use the Bandwidth Profiler to help improve a file’s size. Follow these steps: 1. Open the same movie, keyframing.fla, you downloaded for the last task. Immediately determine the total size of the exported movie. Run Test Movie, and look at the data at the top-left area of the Bandwidth Profiler (press Ctrl+B if it’s not visible). For example, we get 10,746 bytes for the total size. Write down the number you get as a reference for later. 2. Close the movie you’re previewing. Select File, Publish Settings, and then select the Flash tab. Notice the JPEG Quality slider. Move that all the way to the left (the lowest quality), and click OK. 3. Test the movie again to see the change in file size that results from using compression. You shouldn’t see any change because JPEG com- pression is applied only to raster graphics, and this file has none. If this file had raster graphics, you would likely see this change made the file smaller but lowered its quality. 4. The change you make in this step causes a difference—you’re going to optimize the curves in every drawn shape. Unlock all the layers. Click the Edit Multiple Frames Onion Skin option, which enables you to select multiple frames. Now select the Modify Onion Markers menu, and pick Onion All, as shown in Figure 22.10. Finally, click the Stage, and then use Select All by pressing Ctrl+A. Choose Modify, Shape, Optimize, slide the Smoothing scale all the way up or type in 100, and select both option check boxes, as shown in Figure 22.11. Click OK, and you should eventually see a message concerning how much optimizing took place. When we tried this, we saw a 39% reduc- tion in the number of curves. 5. Use Test Movie, and notice the improvement in the file size. We get 6,730 bytes, which means the file is about 2,500 bytes smaller. It’s not a whole lot, but it’s something. What’s more, the image looks no worse. Notice the s in Flash, and the sparkles have changed. The Bandwidth Profiler is very useful. However, it doesn’t fix problems; it only helps you discover problem areas. Ideally, you should avoid making your file too large in the first place. The Bandwidth Profiler is worth learn- ing to use, but it’s only for identifying problems that could be avoided. The following task steps you through a scenario of using the Bandwidth Profiler to help identify a problem and solve it. From the Library of Lee Bogdanoff ptg 420 HOUR 22: Minimizing File Size Although the big lesson from this task might be that using Modify, Optimize can often reduce the file size by simplifying shapes, you’re still in the stage of finding problems. The Bandwidth Profiler helps find the problems, not necessarily fix them. You can find a related feature by selecting File, Publish Settings to open the Publish Settings dialog box, selecting the Flash tab, and clicking the option Generate Size Report, as shown in Figure 22.12. The next time you export the movie by using Test Movie, you see an all-text version of the data from the Bandwidth Profiler appear in the output window. In addition, you find a text file with the same prefix as your movie’s name and in the same folder with the same contents. This provides a permanent record of the data you find in the Bandwidth Profiler. TRY IT YOURSELF ▼ Reduce a File’s Size with the Bandwidth Profiler’s Help FIGURE 22.11 Using Optimize reduces the file size by simplifying the shapes. FIGURE 22.10 To select every frame, choose Onion All after the Edit Multiple Frame option is set. From the Library of Lee Bogdanoff [...]... when you might consider using this feature is when you’re only exporting a static image (that is if you’re using Flash as a drawing tool) You’re much better off using the Blur filter—both for file size savings and performance From the Library of Lee Bogdanoff Summary 433 Avoiding Line Styles You saw in Hour 2, “Drawing and Painting Original Art in Flash, ” that when you draw a line, the Properties panel... “Using Video,” that publishing is as easy as selecting File, Publish In practice, however, you want to first save your files in a known folder, and then step through all the publishing settings before finally publishing The following task steps you through a scenario using Publish How metadata can make your projects easier for people to find when searching the web This task walks you through using... distracting, increase file size, and slow down performance These are all good reasons to avoid using them 2 B The opposite of A is true Animating raster graphics requires less work than animating vector graphics But you can’t do as much with raster graphics and they increase the file size From the Library of Lee Bogdanoff HOUR 24 Publishing a Creation The final step in any Flash production is publishing In. .. in any Flash production is publishing In Hour 20, “Linking a Movie to the Web,” you learned the minimum steps required for publishing, but that was to quickly get your movies to play in a browser In this hour, you learn the fine details involved in publishing exactly how you want WHAT YOU’LL LEARN IN THIS HOUR: How to use the various publish settings How to Publish How to use templates to publish... enabled or the Flash player Then, in the JavaScript portion of your page, you use two lines of code to first configure a SWFObject() instance, and then overwrite that div That is, the div normally gets replaced with the Flash content, but in rare cases when Flash doesn’t automatically install, the users see the backup content where you can include a link to the Flash player download page Use Flash to attempt... click here to install Flash, ” and then send those users to www.macromedia.com/go/getflash That’s a surefire approach, albeit a bit clunky In reality, many projects end up living inside other people’s HTML structure, and they often have their own preference for handling Flash detection so you might be using whatever they have in place From the Library of Lee Bogdanoff 440 HOUR 24: Publishing a Creation... preloader you created in the preceding task However, this was a good opportunity to use the Bandwidth Profiler Improving the Download Experience You never hear someone say they enjoy waiting for Flash movies to download, so anything you can do to improve the experience is worth considering For example, in the previous example, a user might find something else to do while the movie preloads In that case, he... Settings and Then Publish a Movie FIGURE 24. 2 You can ensure that your movie work with older versions of the Flash Player by changing the Player setting in the Flash tab 8 When you’ve gone through both tabs for the two formats you selected, click OK The publish settings are saved Save your Flash file now, too Select File, Publish It might not seem like anything happens, but a swf and the corresponding... that links to an archive of the older Flash Player versions that you can install Type tn_14266 into the search field at www.adobe.com The preceding task walked you through each tab of the Publish Settings dialog box, and you made changes as you went The options chosen are not necessarily the ones you always want to use Ensuring Users Have the Flash Player In the preceding task, you selected Detect Flash. .. right in time Perhaps a better design would be to insert a third frame in the Preloader scene (where the user won’t reach until it’s fully loaded), and a stop() script plus a button labeled Begin When the user clicks it, then he proceeds to the main animation Another idea is to modularize your movie by using the Loader and Sound classes (introduced in Hour 21) Sometimes it’s fine to keep everything in . compression settings are specified individually via the Library item properties for each imported bitmap or sound in Hour 3, “Importing Graphics into Flash, ” and Hour 13, “Including Sound in Animations.”. them. You can find a related feature by selecting File, Publish Settings to open the Publish Settings dialog box, selecting the Flash tab, and clicking the option Generate Size Report, as shown in Figure. to the main anima- tion. Another idea is to modularize your movie by using the Loader and Sound classes (introduced in Hour 21). Sometimes it’s fine to keep every- thing in your main movie and