364 F CS: T M M Incorporating Sound Adding an Imported Sound to a Frame (or Series of Frames) You can tell Flash to play an animated sound beginning with any frame of your ani- mation. Depending on the settings you choose, Flash keeps playing the sound file either until it finishes (regardless of whether your animation is still playing) or until you tell it to stop. The example below shows you how to use the stream option to synchronize a short sound clip of a fly buzzing with an animated sequence showing—what else?—a buzzing fly. Then you’ll learn how to start and stop a second sound (the sound of the fly becoming a frog’s lunch). To add an imported sound to a series of frames: 1. Open the file 11-1_Add_Sound.fla. This file includes a simple animated sequence with a frog and a fly. The library already includes a couple of previously imported sounds. You can find this file on the Missing CD page at www.missingmanuals.com/cds. (To see a working version, check out 11-2_Add_Sound_done.fla.) 2. In the Layers window, click to select the topmost layer (fly). Flash highlights the layer name, as well as all the frames in that layer. 3. Select Insert➝Timeline➝Layer. Flash creates a new layer and places it above the selected layer. Double-click the new layer name, and then type in sounds, as shown in Figure 11-2. Figure 11-2: Technically speaking, you can add a sound clip to any layer you like. But if you’re smart, you’ll create a separate layer for your sounds (some folks even create a separate layer for each sound). Creating separate layers helps keep your keyframes from becoming so cluttered that you can’t see everything you’ve added to them. It also helps you find your sounds quickly in case you want to make a change down the road. New layer for sounds Sound in library Sound wave pattern 365 C : I S  V Incorporating Sound Tip: You add a sound to a button the same way you see shown here, but with two exceptions: You typi- cally add a sound file for a button to the button’s third, or Down, frame (so that the sound plays when your audience clicks down on the button) and you leave the synchronization option set to Event. To see an example, check out the file 11-3_Button_Sound.fla on the Missing CD page. deSiGn TiMe Using Sound Effectively If you’ve ever watched a movie that had a breathtakingly beautiful (or laughably cheesy) musical score, you’ve ex- perienced the power of sound firsthand. Effective sound can elevate a decent visual experience into the realm of art. Ineffective sound can turn that same visual experience into a nerve-shredding mess. If you’re thinking about adding sound to your animation, consider these points: • Why do you want to add sound? If your answer is to add emotional punch; to cue your audience au- rally to the interactive features you’ve added to your animation, like buttons that click or draggable objects that whoosh; or to deliver information you can’t de- liver any other way (like a voice-over explaining an animated sequence or realistic sounds to accompany the sequence); then by all means go for it. But if your answer is “Because I can,” then you need to re- think your decision. Sound—as much as any graphic element—needs to add to the overall message you’re trying to deliver or it’ll end up detracting from that message. • Are you sure your audience will be able to hear your sound? Sound files are big. They take time to down- load. If you’re planning to put your animation on a website, Flash gives you a couple of different options for managing download time—but keep in mind that not everyone in your audience may have a fast con- nection or the volume knob on her speaker turned up. (For that matter, some folks can’t hear. Check out the box on page 32 for tips on providing hearing- impaired folks with an alternate way of getting your information.) • How important is it that your soundtrack matches your animation precisely? Flash gives you options to help you synchronize your sound clips with your frames. But you can’t match a 2-second sound clip to a 10-second animated sequence without either slow- ing down the sound or speeding up the animation. If you want to match a specific sound clip to a specific series of frames, you may need to edit one (or both) to get the balance right before you begin synchroniz- ing them in Flash. 4. Click the first keyframe in the newly created sounds layer. In the Properties panel, Flash activates the Frame properties. With a sound file in the Library, the Sound subpanel appears in the Properties panel. 5. In the Sound subpanel, click the Name drop-down menu, and then choose the imported sound file fly_buzz.wav. Alternatively, you can drag the sound file symbol from the Library to the stage. Either way, the sound properties for the file appear at the bottom of the Proper- ties panel, and the waveform for the buzzing fly sound appears in the sound- track layer (Figure 11-3). 366 F CS: T M M Incorporating Sound Figure 11-3: It’s rare that the length of a sound clip precisely matches the length of the animated clip to which you want to assign it. Here, the sound clip stretches only to Frame 14—but the layer showing the buzzing fly stretches further. You could cut and paste the sound to fill those last frames so that the fly doesn’t become uncharacteristically silent all of a sudden, but Flash gives you much easier ways to match a sound clip to a frame span: streaming, repeating, and looping. Expanded layer Sound file details 6. In the Properties panel, click the Sync field, and then, from the first drop- down list that appears, choose Stream. Your synchronization choices include these: • Event. Tells Flash to give the sound its very own timeline. In other words, Flash keeps playing the sound until the sound finishes, regardless of wheth- er or not the animation has ended. If you repeat (or loop) the animation in the Controller, Flash begins playing a new sound clip every time the anima- tion begins again—with the result that, after a dozen or so loops, you hear a dozen flies buzzing! Flash assumes you want your sound to behave this way unless you tell it otherwise. • Start. Similar to Event, but tells Flash not to begin playing a new sound if the animation repeats. • Stop. Tells Flash to stop playing the sound. • Stream. Tells Flash to match the animation to the sound clip as best it can, ei- ther by speeding up or slowing down the frames-per-second that it plays the animation. This option is the one you want for lip-synching, when you’re try- ing to match a voice-over to an animated sequence featuring a talking head. Because choosing this option also tells Flash to stream the sound file (play it 367 C : I S  V Incorporating Sound before it’s fully downloaded in those cases where you’ve put your animation on a website), someone with a slow connection can get a herky-jerky animation. Tip: With your sound set to stream, you can preview your newly added sound on the stage, drag (scrub) the playhead along the timeline. You can scrub forward or backward. To hear just the sound in a specific frame, Shift-click the playhead over that frame. Flash keeps playing the sound until you let up on either the Shift key or the mouse. 7. From the second drop-down menu next to the Sync field, choose Loop. Loop tells Flash to repeat the sound clip until the timeline ends. Repeat lets you tell Flash how many times you want it to play the sound clip (regardless of the length of the frame span). 8. Test the soundtracked animation by choosing Control➝Test Movie. You hear a buzzing sound as the fly loops its way across the test movie. Add a second, short sound clip to your animation to make the scene more realistic. To do so: 1. In the “sound” layer, click Frame 20. On the stage, you see the frog’s tongue appear (Figure 11-4). Figure 11-4: Beginning sound clips in individual keyframes lets you change the soundtrack at the exact moment your visuals change. Here, you see the frog’s tongue appear in Frame 20 of the frog layer, and it doesn’t change until Frame 22 (which contains the final keyframe of the animation). So to match the “zot!” sound to the tongue action, you want to tell Flash to start playing the zot.wav file on Frame 20 and stop playing it on Frame 22. 368 F CS: T M M Incorporating Sound 2. Select Insert➝Timeline➝Blank Keyframe, or press F6. Flash places a blank keyframe (a hollow circle) in Frame 20. 3. With Frame 20 selected, in the Sound subpanel, click the arrow next to Name, and then, from the drop-down list that appears, choose zot.wav. Flash places the waveform for the sound file into the timeline, beginning with Frame 20. Tip: If you need a better view of the sound’s waveform in your timeline, right-click the layer with the sound, and then choose Properties. The Properties panel opens. At the bottom, set the layer height to either 200% or 300%, as shown in Figure 11-3. 4. In the Properties panel, click the arrow next to Sync, and then, from the drop- down list that appears, choose Start. Then, in the soundtrack layer, click to select Frame 22. On the stage, you see a very satisfied frog (Figure 11-5). 5. Select Insert➝Timeline➝Blank Keyframe or press F6. Flash places a blank keyframe (a hollow circle) in Frame 22. Figure 11-5: Because the synchronization option for the “zot!” sound was set to start in Frame 20, Flash automatically stops playing the zot.wav sound file when the animation ends. Still, it’s good practice to tell Flash specifically when you want it to stop playing a sound file. You’ll be glad you did when you come back to the animation a week or two later, because you won’t have any cleanup to do before you add additional sounds to the timeline. 369 C : I S  V Incorporating Sound 6. In the Sound subpanel, click the Name drop-down menu, and then choose zot.wav. Click the arrow next to Sync, and then, from the drop-down list that appears, choose Stop. You’re done! 7. Test the new sound by choosing Control➝Test Movie. You hear a buzzing sound as the fly loops its way across the test movie. But as the frog’s tongue appears, the buzzing stops and you hear a satisfying “zot!” Tip: If you don’t hear any sounds, select Control and see whether the checkbox next to Mute Sounds is turned on. If it is, click it to turn it off. deSiGn TiMe Stock Images, Sounds, and Video Clips If you’re using Flash to create stuff for work—presentations, tutorials, web advertisements, marketing materials, or what have you—then you or someone else on your team is prob- ably going to be creating all your content from scratch. But there’s a place in every Flash fan’s toolkit for stock media: generic images, sound clips, and video clips that you pur- chase (or, more rarely, get for free) from companies whose job it is to produce such items. Typically, you pay a modest fee to use stock images, sounds, and video clips. Sometimes, you also pay a royalty fee based on the number of times you use a stock element in your animation. If you’re using Flash to jazz up your personal website, you may find that stock media is just what the doctor or- dered: You get something cool that you can use for a rela- tively low price without having to invest time and money buying audio and video equipment or taking drawing lessons. But even professional animators have been known to rely on stock media occasionally because it lets them test out a concept quickly and cheaply. Places to find stock images, sound clips, and video clips abound on the Web. Here are a few you might want to check out: www.freestockfootage.com www.bigshotmedia.com www.wildform.com/videolibrary www.flashkit.com/soundfx www.a1freesoundeffects.com/household.html www.findsounds.com www.gettyimages.com Editing Sound Clips in Flash You can change the way your imported sound clips play in Flash. You can’t do any- thing super-fancy, like mix down multiple audio channels or add reverb—Flash isn’t a sound-editing program, after all—but you can crop the clips, add simple fade-in/ fade-out effects, and even choose which speaker (right or left) your sounds play out of. 370 F CS: T M M Incorporating Video First, import the sound clip you want to edit, as described on page 362. To edit it, follow these steps: 1. In the timeline, click any frame that contains a portion of the sound clip’s waveform. Flash activates the sound options you see in the Properties panel. 2. In the Properties panel, click the drop-down box next to Effect, and then choose from the following menu options: • Left channel. Tells Flash to play the sound through the left speaker. • Right channel. Tells Flash to play the sound through the right speaker. • Fade left to right. Tells Flash to begin playing the sound through the left speaker, and then switch midway through the clip to the right speaker. • Fade right to left. Tells Flash to begin playing the sound through the right speaker, and then switch midway through the clip to the left speaker. • Fade in. Tells Flash to start playing the sound softly, and then build to full volume. • Fade out. Tells Flash to start playing the sound at full volume, and then taper off toward the end. • Custom. Tells Flash to display the Edit Envelope window you see in Figure11-6, which lets you choose the in point (the point where you want Flash to begin playing the sound) and the out point (where you want the sound clip to end). You can also choose a custom fading effect; for example, you can fade in, then out, then in again. If you want to do more extensive sound editing, you need a separate program like Soundbooth. (If you’ve installed one of Adobe’s Creative Suites, then you may already have it on your computer.) Note: Clicking the Property panel’s Edit button displays the same Edit Envelope window you see when you choose the Custom option. Incorporating Video In the past few years, Flash has become the video champion of the Internet. You find Flash video on sites from YouTube to Hulu to CNET. It wasn’t long ago that a battle royale raged among Microsoft, Apple, and RealMedia for web video bragging rights. Flash was seldom mentioned in the contest; after all, it was just for making little animations. But, like the Trojans with their famous horse, Flash Player man- aged to sneak onto about 90 percent of today’s computers. And guess what? Flash does video, too. It’s easy for you to add video to a web page or any other project by adding it to a Flash animation. It’s easy for your audience, too, since they don’t 371 C : I S  V Incorporating Video have to download and install a special plug-in to watch your masterpiece. Flash is also fueling the recent surge in video blogging, or vlogging—adding video clips to plain-vanilla blogs. You can find out more at sites like www.vidblogs.com or http:// mashable.com/2009/10/09/video-blogging. Figure 11-6: The sound file you see here is a two- channel (stereo) sound, so you see two separate waveforms, one per channel. To crop the sound clip, drag the time in and time out control bars left and right. Flash ignores the gray area during playback and plays only the portion of the waveform that appears with a white background, so here Flash plays only the second half of the waveform. To create a custom fading effect, you can drag the en- velope handles sepa- rately. These settings tell Flash to fade out on the left channel while simultaneously fading in on the right channel. To preview your custom effect, click the Play icon. Time in Time out Envelope handles Click to edit sound Show seconds Show frames Play Tip: If you’re watching a video on the web and wondering whether the site uses Flash to publish it, right-click (Control-click) the video. If you see “About Flash Player” in the shortcut menu, you know Flash is working behind the scenes. May as well face it: Sometimes video footage is more effective than even the most well-crafted animation. For example, video footage showing a live product demon- stration, a kid blowing out the candles on his birthday cake, or an interview with a CEO can get the point across quickly and directly. There are two basic steps to creating Flash video: • Convert your video to the Flash video file format: .flv or .f4v. Before you can add video to your Flash animation, you have to convert it to a special file format. 372 F CS: T M M Incorporating Video The process, which video techies call encoding, creates small files that can travel quickly over the Internet. Flash comes with the Adobe Media Encoder, which lets you convert most types of video into Flash video format. The next section describes the encoding process. Note: Adobe is working hard to keep Flash at the forefront of the Internet video revolution. With version 9.0.124 of the Flash Player (code named Moviestar), Adobe added capabilities for HD (high definition) video and audio. As of this writing, the current version of Flash Player was 10.1.15.95, but you can expect Adobe to release new versions with added features and capabilities. • Import your video into a Flash animation. Once your video clip is in Flash video format, you can import it into your project. Flash stores a copy of the vid- eo in the Library, and you can drag the video to the stage like any other graphic. It’s remarkably easy to add video playback controls to your Flash video. If you have a video that’s already in the Flash video format (.flv or .f4v), you can jump ahead to page 385 to learn how to import it into your Flash file. Tip: Neither Flash nor the Adobe Media Encoder let you do extensive editing. At best, they let you crop a segment out of a larger video clip. If you’re interested in piecing together different video segments to create a movie or a scene, turn to a specialized video editing program like Adobe Premiere or Apple Final Cut Pro. If your needs are more modest, you can probably get by with Premiere Elements, Apple’s iMovie or Microsoft’s MovieMaker. When using those programs, it’s best to save or export your video as a Flash video (.flv or .f4v). The next best choice is to save your video as uncompressed .mov or .avi. Why? Because you only want to compress your video once. Otherwise, the quality of the image and sound will suffer. Encoding: Making Flash Video Files Video files are notoriously huge, which means standard video files take a long time to travel the Internet. To solve this problem, Flash uses special video formats that shrink or compress video into smaller files. The quality might not be what you’d ex- pect from your 50-inch plasma HDTV, but it’s certainly acceptable for web delivery. The process of converting a video from its original format to Flash video (.flv or .f4v) is called encoding. If you already have a file in the Flash video format, or if someone else is responsible for this part of the job, you can jump ahead to page 385. Using the Adobe Media Encoder, you can encode any of the common video files listed in Table 11-2. As explained in the box on page 376, it’s best to start off with a high-quality, uncompressed video. You can add prebuilt controls that let your audi- ence control the playback and adjust the volume. You can even apply effects to a video clip in Flash: for example, skewing and tinting. 373 C : I S  V Incorporating Video Table 11-2. Video file formats you can convert to Flash Video with Adobe Media Encoder File Type Extension Note QuickTime movie .mov, .m4v, .m4a The audio/video format. Apple’s video player uses. A free version of QuickTime player is available for both Macs and PCs. Audio Video Interleaved .avi Microsoft audio/video format. Motion Picture Experts Group .mpg, .mpeg MPEG-1 is an early standard for compressed audio and video media. MPEG-2 is what standard DVDs use. .mp4 MPEG-4 Part 2 is used by the DivX and Xvid codecs. .264 MPEG Part 10 is used by QuickTime 7 and the H.264 codec. Digital video .dv Many camcorders use this digital video format. Windows Media .asf, .wmv These Microsoft formats are for compressed audio/video files. Flash video .flv, .f4v Flash’s video format employs a lossy compression technique to produce very small files suitable for broadcast over the Internet. The hardest part of encoding video files is the wait. It takes time to encode large video files, but it’s getting better with today’s faster computers. Flash CS5’s installer automatically puts Adobe Media Encoder on your computer. Fire it up, and it looks like Figure 11-7. There are two basic things you need to do: Locate the file you want to encode, and give Adobe Media Encoder instructions about how to process it. Here are the steps: 1. In Adobe Media Encoder, click Add. Flash displays a standard Open window similar to the one you use to open a Flash document. 2. Navigate to the file on your computer that you want to encode, and then click Open. The name of the video file appears under Source Name. 3. Under Format, choose the Flash video format: FLV/F4V. Flash video files automatically determine whether your file is encoded in the FLV or the F4V format. That determination depends on the preset you choose in the next step. Flash gives you these presets (predetermined settings) because choosing all the settings to encode video can be ridiculously complicated. Even when you choose a file format like FLV or F4V, there are still dozens of settings you can choose based on how the video is to be distributed and viewed. Adobe helps you wade through the swamp of video settings by providing presets for common video needs. [...]... file to size Here’s a guide to the Flash Players that work with different codecs (the year the Flash Player was released is shown in parentheses): • Sorenson Spark: Flash Player 6 (2002) and above It’s the safest choice; if your audience’s Flash Player is video-capable, this codec will work Chapter 11: Incorporating Sound and Video 381 Incorporating Video • On2 VP6: Flash Player 8 (2005) and above This... bit rates from 16 to 2 56 A bit rate of 64 works for many Flash videos You can go even lower if the sound track is primarily voice, with no music Preparing to Import Video Files Before you can import a video clip into Flash, it’s good to know up front how you expect to link the video file to your finished Flash animation file at runtime: by embedding the video file directly into your Flash timeline,... controls, you can start and stop the playback Note: One of Flash Professional CS5 s new tricks is the ability to test video within the Flash workspace If you want, you can press Enter (Return) to watch your video instead of Ctrl+Enter (c-Return) 390 Flash CS5: The Missing Manual Importing Video Files Deploying your Flash video on the web Most of the time, Flash projects that incorporate videos end up on the... Flash, ActionScript, JavaScript, PDF (Adobe Acrobat), and HTML You can build AIR programs using Flash, Dreamweaver, Flash Builder and other tools Depending on your program’s version, it may require either an upgrade or an extension In the earliest versions, ActionScript was sort of tacked on to the Flash animation machine, the way macro programming was added to early word processors and 3 96 Flash CS5: ... Note: If you need to convert a video to one of the Flash video formats (.flv or f4v), see page 372 When you add video to your Flash project using this method, Flash creates a link between the Flash file and your project Even after you publish a Flash swf file for Chapter 11: Incorporating Sound and Video 385 Importing Video Files final distribution, the Flash file and your video file remain separate If... website, you need to place both the Flash swf file and the video file (.flv or f4v) on the website, ideally in the same folder To make things easy for yourself, it’s best to put your Flash video in same folder where you save your Flash work file (.fla) and publish your Flash animation (.swf) 1 Create a new Flash document, and then save it It’s always good to name and save your Flash projects at the beginning... a web server with Flash Media Server software Figure 11-15:  The large Import Video dialog box walks you through adding video to your Flash project In the first step, shown here, you answer questions about the location of the video file and how you want to use it in your project 3 86 Flash CS5: The Missing Manual Importing Video Files 4 Click the radio button for “On your computer” Flash wants to know... your video as it converts it to the Flash video format Over its short history, Flash video has used three different codecs The makers of Flash have updated the Flash Player to use new codecs as they’ve become available The new codecs provide new features and produce better quality video using smaller file sizes As a Flash designer, you need to guess which version of the Flash Player your audience is likely... that you don’t usually want to embed them directly into your Flash document the way you embed graphics (page 339) and sound files (page 362 ) The process of setting up your Flash animation and Flash video files for the public to view them is called deploying Note: Chapter 20 tells you all you need to know about publishing Flash files, including Flash files containing video clips Your deployment options... appropriate for this one 2 Place the Flash video 11-4_Building_Implode.flv in the same folder where you save your Flash file (.fla) and your published Flash file (.swf) This step makes it easier for Flash to create a link to the video file After publishing the swf, as long as both files are located in the same folder, the link between the two will continue to work 3 In Flash, select File➝Import➝Import . video as it converts it to the Flash video format. Over its short history, Flash video has used three different codecs. The makers of Flash have updat- ed the Flash Player to use new codecs. Here’s a guide to the Flash Players that work with different codecs (the year the Flash Player was released is shown in parentheses): • Sorenson Spark: Flash Player 6 (2002) and above. It’s. (H. 264 ): Flash Player 9.2 (2008) and above. This choice produces the best-quality video using smaller file sizes. If you choose the F4V Flash video format, it automatically uses the same H. 264