Learning Flash CS4 Professional phần 9 pps

Timeline Use Chapter 12, Audio 293 The Sound Settings dialog (Figure 12-3) offers access to the same compres- sion algorithms available on a per-file basis. The Default per-sound option, which specifies that these global settings should be used for a specific sound, has been replaced in Publish Settings with Disable. This option disables all sound in the SWF and is useful for testing or creating alternate versions of your file with no audio. Compression options for internal sounds applied file-wideFigure 12-3. At the bottom of the Publish Settings section (refer back to Figure 12-2), you can choose to override the sound settings. When you enable the Override sound settings option, Flash will override the per-asset sound settings and apply the global Publish Settings instead. This is useful for creating a low- quality alternate version of your file. You can also use this option to speed up SWF compilation during testing by switching to a Fast quality setting. When you’re finished with development and ready to publish your final file, you can disable the override option, and the per-sound settings will be reapplied. Finally, you can enable the Export device sounds option to support Flash Lite development, not covered in this book. Timeline Use Adding sounds to the Timeline is very easy. Select the frame in the Timeline in which you want the sound to play, and choose any imported sound from the Name property in the Sound section of the Properties panel (Figure 12-4). A waveform representation of the sound will appear in that frame or span of frames. During playback, anytime the playhead is in contact with a frame with sound in it, that sound will be played. The Sync property in the Properties inspector (described in the next section) controls how the sound is played and when it stops. Because the normal layer height makes this waveform difficult to see, you can increase the height of specific layers. Double-click the layer icon to open the NOTE For more information about Flash Lite, visit http://www.adobe.com/products/ flashlite/. The Sound section of the Figure 12-4. Properties panel Learning Flash CS4 Professional 294 Timeline Use Layer Properties dialog and increase the Layer height to 200 or 300% (Figure 12-5). The result is a taller layer and a larger visual of the sound wave, shown in Figure 12-6. A single untreated sound in the TimelineFigure 12-6. Sync Types The Sync type you set in the Properties panel for a Timeline-based sound will have a dramatic effect on how the sound plays. With the sound frame in the Timeline panel selected, the Properties panel shows the following four sync types. Stream Stream sounds begin playing after just a few frames of data have been downloaded. They are best for long sounds and are well suited for anima- tion soundtracks because Flash attempts to keep the Timeline and sound synchronized. You can also scrub through a stream sound and hear pieces of it in authoring mode. Event Event sounds must be fully downloaded and play through to completion no matter what. For example, if a one-second sound ordinarily requires 24 frames to play through to completion, an Event sync type will cause that sound to play until complete, even if only allocated one frame. This is important because this sync type is used to play sound effects that often occur in very short frame spans, and the sound must be allowed to finish. A sound effect in the Down state of a button, for example, would likely only occupy one frame, leaving only 1/24th of a second to play a sound. Sound effects also usually need to play every time they are requested, making the prospect of waiting for the sound to finish problematic. For this reason, the Event sync type will play a new instance of the sound even if the prior instance is still playing. If not used carefully, this can result in a chaotic din of sound and eat up memory quickly, as in the case of placing an Event sound in a frame loop. Increasing layer height to Figure 12-5. increase the scale of a displayed sound wave WARNING The large variance in computer proces- sor power, quantity of RAM, bus speeds, video card performance, and connection speeds (among other contributing fac- tors) makes synchronizing audio with animation in Flash as much an art as a science. When planning synchro- nized sound, aim for the lowest common denominator among minimum system requirements, and test early and often. NOTE If you accidentally play a long sound set to the Event sync type, press the Escape key on your keyboard to stop the sound from playing. Editing a Sound Chapter 12, Audio 295 Start The Start sync type is similar to Event in every respect but one. If the play- head returns to the frame before a prior instance of the sound is finished playing, it will not play another instance of the sound. Stop The Stop sync type silences the specified sound. This will even work on Event sounds that are designed not to stop until they are finished playing. Repeating and Looping With a sound frame selected in the Timeline panel, you can loop a sound or repeat it a finite number of times by using the menu and repeat count input below the Sync menu (Figure 12-7). Loop will show no visual change in the Timeline, but will loop the sound as long as the playhead is in contact with the frames in which the sound resides. Repeat will play the sound again as many times as you specify using the repeat count. It will also repeat the wave- form in the Timeline a corresponding number of times (Figure 12-8). A repeating sound displayed in the TimelineFigure 12-8. Editing a Sound Flash lets you do some basic volume and pan editing without having to use an external editor. The Effect menu in the Properties panel contains a list of preset effects, including confining the sound to the Left channel or Right channel, channel panning options (Fade to left and Fade to right), and multi- channel volume fades (Fade in and Fade out). You can also edit any of these options or assign a custom option to edit an effect from scratch. Setting Volume and Pan When you choose Custom from the Effect menu or edit a preset, the Edit Envelope dialog opens. Figure 12-9 shows the dialog with the Fade Out pre- set. To edit the volume or pan of the sound, first click on the horizontal line that runs across the waveform to add a handle. In stereo sounds, a handle will be created in both the left (top) and right (bottom) channels. In any chan- nel, you can then drag the handles down or up to reduce or increase volume, respectively. NOTE The companion website for this book includes sample source files that demon- strate all four sync types. Repeating a soundFigure 12-7. WARNING Looping a stream sound is not recom- mended because the file size will increase based on the number of times the sound is looped. Learning Flash CS4 Professional 296 Editing a Sound Figure 12-9. Fading a sound in the Edit Envelope dialog Figure 12-9 shows a reduction in volume at the end of the sound, as both channels fade to 0. Figure 12-10 shows a change in pan as the sound moves from the left to right channels. The volume is decreased in the left channel and simultaneously increased in the right channel. Figure 12-10. Panning a sound from left to right During editing, you can test your work without leaving the dialog or testing your movie. Simply use the stop and play buttons in the lower-left corner of the dialog to audition your effect. No changes are made to the original file, so you can experiment to your liking. ActionScript Use Chapter 12, Audio 297 In the lower-right corner of the dialog, you can zoom in and out of the wave- form (clicking the magnifying glass icons) and switch between a time-based (watch icon) or frame-based (movie icon) display. The latter two options change the horizontal numbered strip between the channels to show either frames or seconds. In Figure 12-9, for example, the sound starts to fade at three seconds, and is muted by the fourth second. Using an External Editor Flash even provides a convenient workflow for editing your sounds in an external sound editor. Control+clicking (Mac) or right-clicking (Windows) on a sound asset in the Library displays a context-sensitive menu that reveals editing options. Figure 12-11 illustrates your editing choices: the cross- platform, open source editor Audacity; an editor you select on the fly; or Adobe Soundbooth, an entry-level sound editor targeted at Flash users. When you select one of these options, the sound opens in the selected exter- nal editor so you can then edit the file. When you save the file, it will auto- matically be updated in Flash. ActionScript Use Using ActionScript, you can exert much greater control over sound than you could if it were a part of the Timeline. For example, you can mix 32 discrete audio channels, set the volume and pan of each sound, and query the ampli- tude of the left and right stereo channel of every sound. Playing a Library Sound Playing an embedded sound from the Library is very similar to adding a symbol instance to the display list. The process begins by assigning the sound a Linkage class (Figure 12-12). Assigning a sound’s Linkage classFigure 12-12. Create a new file using File1. →New. You won’t be using this file in the proj- ect, so the book template is not needed. Import 2. beep.wav from the companion source files. Editing a sound in an Figure 12-11. external application Learning Flash CS4 Professional 298 ActionScript Use Select the 3. beep.wav sound in the Library and click the Properties but- ton (the i icon at the bottom of the Library panel) to open the Sound Properties dialog. If the Linkage section of the dialog (Figure 12-12) is not already visible, 4. click the Advanced button to view it. Enable the 5. Export for ActionScript option and enter Beep in the Class field. Note that the class you are creating extends the Sound class, so the Beep class will behave like a sound in many respects. Add the following script to the first frame of the Timeline and test your 6. movie: var beepAlert:Beep = new Beep(); beepAlert.play(); Your file should play a short beep sound from the embedded beep.wav file. If needed, compare your file with the furnished play_embedded_sound.fla file. Playing an External Sound In addition to playing embedded sounds, you can load external audio files to play at runtime. This is advantageous for many reasons, including reducing SWF file size and making it easier to edit, update, or replace the external file. The following exercise will span the next three sections of this chapter, add- ing functionality to your script as the chapter progresses: Create a new file using File1. →New. You won’t be using this file in the proj- ect, so the book template is not needed. Save the file as 2. sound_scripting.fla in a directory of your choice, and copy the companion source file song.mp3 into the same directory. Type the following script into frame 1 of the FLA:3. var1 snd:Sound = new Sound(); var2 sndURL:URLRequest = new URLRequest("song.mp3"); snd.3 load(sndURL); 4 var5 channel:SoundChannel = new SoundChannel(); channel = snd.6 play(); Lines 1 through 3 load the external sound. First, an instance of the Sound 4. class is created in line 1. In line 2, a URLRequest instance is created using the path to the sound file. Lines 5 and 6 play the sound into a unique sound channel. Save and test your movie. It will play the external audio file.5. Optionally, you can play the sound only after it fully loads. This is helpful 6. for slow connections where the sound playback speed may surpass the download speed. If desired, replace line 6 of your script with the following four lines of code: ActionScript Use Chapter 12, Audio 299 snd.addEventListener(Event.COMPLETE, onSoundLoaded); function onSoundLoaded(evt:Event):void { channel = snd.play(); } Now when the sound finishes loading, the complete event will be dispatched. When the event is received, the sound will play again from the beginning, into the same channel. With regard to line numbering, the next two sections of this exercise assume this option was not added. If you chose to play the sound upon loading, adjust your file’s line numbers accordingly. Setting Volume and Pan You set the volume of a sound using a range of 0 to 1. A value of 0 mutes a sound and a value of 1 sets the sound to full volume. The pan of a sound is set using a slightly different scale, from –1 to 1. The sound pan can be centered (0), entirely in the left channel (–1), or entirely in the right channel (1). Continue with the previous example and add the following code to the 1. script in frame 1: var7 trans:SoundTransform = new SoundTransform(); trans.8 volume = 0.5; trans.9 pan = -1; channel.10 soundTransform = trans; Both2. volume and pan are properties of the SoundTransform class. To change either value, you must first create an instance of the class. One way to accomplish this is by using the new keyword, shown in line 7. This cre- ates a neutral instance with default values of full volume and center pan. After altering these values (to half volume in line 8 and full-left pan in line 9) you must then apply the transformation to the sound channel’s soundTransform property (line 10). Without this final step, you are only adjusting the SoundTransform instance, not the sound channel itself. Save and test your movie. This time, the sound will play at half volume, in 3. the left stereo speaker only. Visualizing Volume The final topic covered in this chapter lets you visually represent the volume of an audio file during playback. Two properties of the SoundChannel instance, leftPeak and rightPeak, contain the volume of the left stereo channel and right stereo channel, respectively (when analyzing monaural sounds, both values are equal). NOTE An alternative approach to creating a SoundTransform instance is to query the soundTransform property of a sound, as in this example: var trans:SoundTransform = channel.soundTransform; This starts the transform values with the existing volume and pan of the sound. This is useful for relative transforma- tions, such as reducing the current vol- ume (no matter what that value is) by 25%. Learning Flash CS4 Professional 300 Project Progress In this example, two circles that represent left and right stereo speakers will expand and contract with the sound channel’s volume during sound playback: Continue with the previous example. Using the Oval tool, draw a circle 1. on the Stage. Select the circle with the Selection tool and convert it to a movie clip 2. (Modify→Convert to Symbol). Name the movie clip speaker and choose a center registration point. Copy and paste the on-Stage instance of the 3. speaker symbol and give one speaker an instance name of leftSpeaker and the other an instance name of rightSpeaker. Add the following code to the script in frame 1, save your work, and test 4. your movie: this11 .addEventListener(Event.ENTER_FRAME, onLoop); 12 function13 onLoop(evt:Event):void { leftSpeaker.14 scaleX = 1 + channel.leftPeak; leftSpeaker.15 scaleY = 1 + channel.leftPeak; rightSpeaker.16 scaleX = 1 + channel.rightPeak; rightSpeaker.17 scaleY = 1 + channel.rightPeak; }18 This script creates an event listener that listens for an enter frame event (lines 11 and 13) and adjusts the scaleX and scaleY of each speaker based on the volume of the sound channel’s left and right stereo channels, respectively. Instead of setting these properties to the leftPeak and rightPeak values directly, they are added to a value of 1. This prevents the speakers from shrinking, possibly to a scale of 0, during quiet portions of the audio. That is, rather than displaying scales that correspond with volumes of 0, 0.5, and 1, the resulting scales are 1, 1.5, and 2. When the volume is muted, the speaker size is 100%, and at full volume the speaker size is 200%, or double the original dimensions. Project Progress In this chapter you will add the ActionScript required to activate the sound controller widget of the portfolio project. Scripting the Sound Controller In prior chapters, you created the sound controller and integrated it into the master project file. The following script will load an external MP3 file, toggle between playing and disabled states, and visualize the amplitude of the left and right stereo channels. NOTE The term “channel” is necessarily used in two contexts in the discussions in this chapter. First, stereo playback is achieved by dividing the sound data into left and right channels, while monaural sounds have no such separation. Second, every sound, whether stereo or mono, is played into its own discrete sound channel for mixing purposes. Each file can have 32 individual sound channels, and one mas- ter mixing channel, similar to a mixing desk that you might see in a recording studio. These two uses of the word “channel” are not the same. For example, your file can have 32 channels of sound, all of which are in stereo. This does not create 64 channels of sound because you can’t manipulate the left and right stereo divi- sions of an audio file independently. NOTE This book’s companion volume, Learning ActionScript 3.0: A Beginner’s Guide (O’Reilly), includes an example that visualizes the entire frequency spectrum of a sound, drawing waveforms during playback. Project Progress Chapter 12, Audio 301 Open your master portfolio FLA and add the following script to the frame 99 of the actions layer. Frame 99 is the last intro frame (prior to the Home screen) and initializes both the navigation and sound controls: var1 snd:Sound = new Sound(); snd.2 load(new URLRequest("assets/song.mp3")); 3 var4 channel:SoundChannel = new SoundChannel(); channel = snd.5 play(); 6 this7 .addEventListener(Event.ENTER_FRAME, onSoundPlayback); function8 onSoundPlayback(evt:Event):void { soundControl.lPeak.barMask.9 scaleX = channel.leftPeak * 4; soundControl.rPeak.barMask.10 scaleX = channel.rightPeak * 4; }11 12 soundControl.13 addEventListener(MouseEvent.CLICK, onSoundToggle); function14 onSoundToggle(evt:MouseEvent):void { 15 if (channel.leftPeak > 0) { channel.16 stop(); } 17 else { channel = snd.18 play(); }19 }20 Lines 1 through 5 load and play a sound, as described in the “Playing an External Sound” section, earlier in this chapter. The only difference here is that, for the portfolio project, you are placing the sound file in your external assets directory, with the other external assets used throughout the book. Lines 7 through 11 visualize the volume of the sound’s left and right stereo channels. To understand how this script works, it helps to recall the structure of the sound controller movie clip from Chapter 3. It has an instance name of soundControl and contains two child instances of a volume meter, one for each channel, named lPeak and rPeak. Within the meter is another movie clip named barMask that sits in a mask layer. By manipulating the scaleX property of the mask movie clip (lines 9 and 10), you expose different widths of the meter, and therefore different temperatures of color, during sound playback. Every enter frame (lines 7 and 8), the leftPeak and rightPeak properties return a percentage value, between 0 and 1, of the full volume of each channel. When playing relatively quiet sounds, your visualization meter may appear a bit listless. If you want to liven things up a bit, you can increase the effect the actual peak values have on your artwork. Simply multiply the values of the leftPeak and rightPeak properties by an adjustment factor, as seen in lines 9 and 10. For example, these lines multiply low-level settings of 0.1 by 4 to become 0.4. The larger values increase the widths of the masks, showing larger meters. Lines 13 through 20 toggle the sound playback states. With every mouse click (lines 13 and 14), a simple test is performed. If there is any volume in the left channel, the sound is stopped. If the left channel is silent, the sound is played again from the beginning. This basic script lets you turn the sound on and off. NOTE The conditional test in the function onSoundToggle() relies on the volume in the left channel for simplicity, so it’s not well suited to sounds with lots of quiet passages. The companion website demonstrates other techniques for turn- ing sound on and off. Learning Flash CS4 Professional 302 Project Progress The Project Continues In the next chapter, you will encode video, review its use in the project’s Gallery screen, and learn ActionScript alternatives for displaying and control- ling video in your own files. [...]... and other filters; CBR and one- and two-pass VBR encoding; highdefinition (HD) output (including Blu-Ray); and more 306 Learning Flash CS4 Professional Encoding Software Figure 13-2 The Sorenson Squeeze main interface Adobe Media Encoder The Adobe Media Encoder ships with Flash CS4 Professional and is both feature-rich and simple to use It supports encoding to a wide variety of video formats including... "SkinUnderPlaySeekMute.swf"; vid.skinBackgroundColor = 0x 996 600; vid.skinBackgroundAlpha = 0.5; vid.autoPlay = false; Line 1 of this script tells the compiler where to find the FLVPlayback classes required when compiling your SWF Unlike classes that are part of the flash packages, component classes in the fl packages must be imported, even in the Timeline 316 Learning Flash CS4 Professional Full-Screen Video Lines 3... your movie The movie will load instantly because everything is local 2 When you test a movie in Flash, you run a copy of Flash Player launched from within the Flash application interface The application menus have changed so that you can use player features designed to simulate online 328 Learning Flash CS4 Professional ... powerful computers F4V The latest versions of Flash Player, beginning with version 9 update 3 and later, can also use the H.264 codec for video and the AAC codec for audio These are the codecs used for MPEG4 video—commonly used by later generation iPods and most other recent hardware and software vendors for audio and video playback 304 Learning Flash CS4 Professional Encoding Software Although these... book template) and give it a black Stage color 2 Select the Rectangle tool in the Tools panel 3 Make sure Object Drawing mode is off 4 Using the Tool panel’s color chips, select a gray stroke color ( #99 999 9) and white fill (#FFFFFF) 5 Draw a rectangle anywhere on the Stage 6 Switch to the Selection tool and double-click the fill of the rectangle, or click outside the rectangle and drag over the entire... Depending on which version of Flash Player you’re considering, up to 99 % of all online users have Flash Player already installed on their systems It is also operating system–neutral, making development for the platform much simpler and more economical A particularly good reason, however, for the popularity of Flash video is that it’s easy for everyone—not just experienced video professionals—to create and... preferred method for adding Flash video to your projects, there is an alternate approach You can also embed a video directly into a SWF so that even the video asset is internal N ote Although not commonplace, using small, embedded videos for special effects is analogous to creating a movie clip from an imported image sequence, as discussed in Chapter 3 320 Learning Flash CS4 Professional When to Embed... you’ll package your portfolio for desktop distribution using the Adobe Integrated Runtime (AIR) engine 324 Learning Flash CS4 Professional Chapter 14 Publishing and Deploying Introduction Welcome! It’s the final chapter of the book, and you’re almost home You worked hard, you know your way around Flash, and you created a portfolio that ties together everything you’ve learned All that remains now is getting... time, and Good falls somewhere in the middle Continuing the example exercise, change the following video settings: 9 For Basic Video Settings, choose the On2 VP6 Codec, do not enable Encode Alpha Channel or Resize Video, and select Same as source for the Frame Rate 310 Learning Flash CS4 Professional Encoding Software 10 For Bitrate Settings, select VBR for Bitrate Encoding, Two Encoding Passes, and... feature within Flash If there is only one instance of the FLVPlayback component on the Stage, the FLVPlayback Captioning component will automatically link to it All you have to do is use the Component Inspector (Figure 13-16) to specify the path to the external caption XML file, and you’re in business Figure 13-16 Configuring the FLVPlayback Captioning component 318 Learning Flash CS4 Professional Creating . more information about Flash Lite, visit http://www.adobe.com/products/ flashlite/. The Sound section of the Figure 12-4. Properties panel Learning Flash CS4 Professional 294 Timeline Use Layer. number of times the sound is looped. Learning Flash CS4 Professional 296 Editing a Sound Figure 12 -9. Fading a sound in the Edit Envelope dialog Figure 12 -9 shows a reduction in volume at the. companion source files. Editing a sound in an Figure 12-11. external application Learning Flash CS4 Professional 298 ActionScript Use Select the 3. beep.wav sound in the Library and click the Properties