Chapter 22: Understanding Digital Audio in the Flash Environment

Overview

If you've ever spent time in a recording studio, radio station, or video-production facility, you've probably seen a mixing board. And if you were lucky, you had a chance to play with the mixer's faders and knobs and hear how the changes you made affected the overall sound. What was this experience like? Exhilarating, to be sure. It can be a real rush to move the controls around and change the mix of a song or soundtrack. You imagine yourself in the producer's seat at the recording session for your favorite band . It's fun to be in control and hear how the changes you make are reflected in the music.

By leveraging the power of ActionScript, you can bring this same experience to the visitors and audience of your Flash-based website. In this lesson, you will learn how to create a mixing board using ActionScript, sound files, and a few simple graphics. The steps involved are simple, but the concepts presented here are very important. This lesson will teach you about:

Sound object scope       Learn how the Sound object can be used to control individual sounds and sounds on separate Timelines.

Attached sounds and download time       By attaching sounds from the Library, you gain a lot of flexibility in controlling individual sound playback. Here you will learn how to work with these kinds of sounds and get them to load quickly in the Flash Player.

These concepts were addressed in Chapters 22 “25. Here you will see them presented in a more specific context. The techniques can be applied in a variety of situations. Once these ideas have been mastered, you will find a way to make them work in Flash creations of your own.

 On the CD      If you would like to see the final mixing board in action, navigate to the Hands On 6 folder of this book's companion CD and open mixer.swf . There you can manipulate the faders that control the pan and volume of a four-track drum groove. To see the source for this file, open mixer.fla . This is what your file will look like when you complete this lesson.

To begin the lesson, you will need the "starter" file, mixer_ho6.fla , which is also in the Hands On 6 folder. It has several components of the mixer in place and allows you to focus on the more important aspects of creating the mixer. Copy mixer_ho6.fla to your hard drive, open it with Flash MX 2004 or MX Professional 2004, and you're ready to go.

 

Phase 1: Creating a Channel Strip Movie Clip

A mixing board consists of several channel strips . In audio engineering lingo, a channel strip (as you might have guessed) represents one channel or track of audio. It controls one component of the mix while other channel strips in the mixing board control others. When you create the mixing board in Flash, each channel strip is a Movie Clip. This makes it easy to add extra channels to the mixer: When you need another channel, you simply drag another channel-strip clip instance to the Stage.

To create the channel-strip Movie Clip:

1.     The file mixer_ho6.fla should be open. Press Cmd/Ctrl+ L (or F11) to open the Library, press F9 to open the Actions panel, and press Cmd/Ctrl+F3 to open the Property Inspector. You will need these throughout the lesson, so it's good to make them available early on.

2.     Double-click the channel_strip Movie clip icon in the Library. This opens the clip in Symbol Editing mode. Click the knobs layer to select it, and drag an instance of the v_knob Movie Clip to the Stage.

3.     Use the Property Inspector to position the clip at X-Y coordinates (23, 206). This is the object you'll use to manipulate volume. Use the Property Inspector to give it the instance name vol_knob .

 

Note  

If the Movie Clip doesn't line up correctly, you can fix its position with the Info panel. Open the Info panel (Cmd/Ctrl+I) and click the small square in the upper-left corner of the Symbol position marker. This sets Flash to track the position of Symbols from their upper-left corner rather than their center. This is the default setting. If you had to change it in the past, you'll need to reset the option for this lesson.

4.     Now you can add a controller to manipulate the channel's panning. Drag an instance of the h_knob Movie Clip to the Stage. Use the Property Inspector to position the clip at X-Y coordinates (39, 53.5).

5.     The code that controls the volume and mute is in the first keyframe of the v_knob and h_knob Movie Clips. You can double-click each clip to open it in Symbol Editing mode and see its script. The ActionScript is almost identical to that which was covered in Chapter 25. There is one small difference. The ActionScript in frame 1 of the v_knob Movie Clip is as follows :

6. this.onMouseMove=function(){

7.     if (dragging&&_parent.mute==false){

8.           parent.channel.setVolume(B-vol_button._y);

9.     }

10.           updateAfterEvent();

11.     }

There is an additional condition that must be met to change the volume. According to these statements, the clip must be in the process of dragging and a variable called mute must be false . The logical AND operator ( && ) stipulates that both conditions must be met for the enclosed statements to execute. dragging is set when the clip is clicked. mute is a variable that will be created and discussed later in the lesson.

12.     One feature that is part of every mixing board is a mute button. It allows you to mute (silence) the audio track that is controlled by the channel strip. The mute button for this mixer also includes a label (see Figure H6.1) so that you know the name of the channel you mute when you press it. In the Library, double-click the mute_button_label Movie Clip icon to open the clip in Symbol Editing mode.

Figure H6.1: The mute button is used to silence the audio controlled by the channel. It shows each channel's current playing status. Click it to toggle the sound off or on. There's also a label for each channel beside the mute button.

13.     The text that will serve as the label for each channel will be added later via ActionScript. To facilitate this, the text field inside the mute button needs to have an instance name. Click the text field to select it, and assign the instance name name in the Property Inspector.

14.     Select frame 1 of the code layer and enter the following statements in the Actions panel:

15.     stop();

16.     play_btn.onRelease=function(){

17.           nextFrame();

}

18.     Select frame 2 of the code layer and enter these statements in the Actions panel:

19.     _parent.channel.setVolume(0);

20.     _parent.mute=true;

21.     stop_btn.onRelease=function(){

22.           nextFrame();

}

23.     Select frame 3 of the code layer and enter these final statements in the Actions panel:

24.     _parent.channel.setVolume(_parent.vol_knob.B -

25.             parent.vol_knob.vol_button._y);

26.     _parent.mute=false;

27.     play_btn.onRelease=function(){

28.           prevFrame();

}

Each frame has a different set of ActionScript commands, and each is responsible for managing the mute functionality of the mixing board:

§                               Frame 1 stops the clip to keep it from advancing into the other frames . It also assigns a function to the mute button ( play_btn ) that advances it one frame (to frame 2).

§                               Frame 2 sets the volume of the Sound object channel to 0, silencing it. It also updates the variable mute to true; this tells the host Movie Clip the sound is muted. Note that when the clip is in frame 2, the mute button changes appearance. This is to visually reinforce that the button was pressed.

§                               Frame 3 un-mutes the channel. The volume of the Sound object channel is reset. This script evaluates the position of the vol_knob instance and uses this value to set the channel's volume when the mute is turned off. The mute variable is updated again to reflect that the mute is off. The button functions in frames 2 and 3 will send the Timeline back and forth. When it reaches frame 2, the sound is muted; when it is sent to frame 3, the volume is turned on again.

At this point, you might ask why you need to have a variable that monitors when a sound is muted and when it isn't. The reason is this: If someone pressed a channel's mute button and then moved the volume slider, the slider's script would overrule the mute and you would hear the channel at the volume level set by the slider. This bug creates unwanted results in the mixer because it is impossible to mute a channel, change the channel's volume, then un-mute it later and be able to hear the new volume level. To work around this, you use the mute variable. By tracking when a channel is muted and when it isn't, you can prevent the slider from changing the volume when a channel should be muted. This condition is checked in the code described in step 4.

29.     With the code for all three keyframes in place, you can finalize this portion of the channel strip. Double-click the channel_strip Movie clip icon in the Library. This opens the clip in Symbol Editing mode.

30.     Click the mute label layer to select it, and drag an instance of the mute_button_label Movie Clip to the Stage.

31.     Use the Property Inspector to position the clip at X-Y coordinates (6, 12). Use the Property Inspector to give it the instance name title . The finished channel_strip Movie Clip should look like Figure H6.2.

Figure H6.2: The channel_strip clip in its final form

 

Phase 2: Adding the Audio Files

Phase 1 was the hard part and offered little reward: Nothing is working yet! Don't worry, we'll get there. Let's move on to some easier and more fruitful aspects of this lesson. To add the audio files:

1.     Because we're such good guys, we've included audio files that you can use for this lesson. If you want to use these, skip ahead to step 2.

You might prefer to use sounds of your own. If that's the case, you'll need to import four audio files. To make them work in this context, the clips need to have the same tempo so that they can be heard together and make musical sense. To review the steps involved in importing sounds, see Chapter 23.

2.     Each sound needs to have a Linkage ID so that it can be exported from the Library and cued via ActionScript when the mixing board is loaded. In the Library, there is a Sounds folder. Inside this folder there are four WAV files: imbira.wav , log.wav , shak.wav , and yang.wav . Ctrl+click (Mac) or right-click (Win) on imbira.wav and select Linkage from the context menu. The Linkage Properties dialog box opens.

3.     Check the Export For Actionscript box and uncheck the Export In First Frame box. In the Identifier field, enter imbira (see Figure H6.3). Click OK.

Figure H6.3: The option to export in first frame is left unchecked. This allows the non-audio portions of the movie to load first.

4.     Repeat steps 2 and 3 for the remaining three sounds and set identifiers as follows: log , shak , and yang . If you're using your own audio files, write down the identifier names so that you can refer to them later.

When the Export In First Frame box is checked, the sounds are added to frame 1 of your movie and loaded into the Flash Player along with everything else in frame 1. This doesn't add to the download time of a movie, but it prevents your audience from seeing anything in frame 1 until all the sounds have loaded. If you use a lot of sounds, the wait can be considerable before your audience sees or hears something. When this happens, it looks as if your movie doesn't work. One way to overcome this delay is to deselect the Export In First Frame option. However, when you do this, the sounds will not be loaded into your movie at all. You have to incorporate the sounds manually so that they are available when you need them. We'll do this next .

5.     Select Edit Edit Document to return to the Main Timeline. Press Cmd/Ctrl+F8 to create a new symbol. Give it the name linkage_sounds , select Movie Clip as its Behavior, and click OK.

6.     Flash jumps into Symbol Editing mode. Add four new layers to the Timeline of the linkage_sounds Movie Clip. Name the top layer code . Name the remaining four layers as follows: imbira , log , shak , and yang .

7.     Click frame 2 of the imbira layer, then hold down Shift and click frame 2 of the yang layer. Press F7 to convert these frames to blank keyframes. The Timeline should look like Figure H6.4.

Figure H6.4: The linkage_sounds Movie Clip Timeline has five layers. Layers imbira “yang require two keyframes.

8.     Select the first keyframe of the code layer. Enter the following statement in the Actions panel:

stop();

9.     Select the second keyframe of the imbira layer. Use the Property Inspector to attach the sound imbira.wav to this keyframe. Do the same for the remaining three keyframes and attach log.wav , shak.wav , and yang.wav to the second keyframe of the layer with the same name.

10.     For each sound, use the Property Inspector to set the Sync option to Event.

11.     Press Cmd/Ctrl+ E to return to the Main Timeline. Click to select the linkage IDs layer. Drag an instance of the linkage_sounds Movie Clip to the Stage.

Now that the steps involving this clip are complete, we can discuss what it does. Its purpose goes back to the fact that the sounds in the Library were marked to not export in the first frame. Because they will not be automatically added to your movie, they have to be included through another means. This Movie Clip does that. The first keyframe has a stop() function, so frame 2 (the frame that holds the sounds) is never reached. However, because frame 2 is part of a Movie Clip Timeline and that clip has been placed on the Stage, the sounds will be loaded into the Flash Player as part of the linkage_sounds Movie Clip. This accomplishes the same task as exporting the sounds in the first frame, it's just done in a different order, which allows the elements in frame 1 to load more quickly.

 

Phase 3: Finalizing the Mixer with ActionScript

You've done it! All the elements are prepared and it's time to put the finishing touches on your audio mixer. To complete the project:

1.     Click to select the channels layer. Drag an instance of the channel_strip Movie Clip to the stage. Position it at X-Y coordinates (0, 0).

2.     Drag another instance of the clip and put it at (100, 0). Because the clip is 100 pixels wide, the clips will appear side by side.

3.     The movie is 400 pixels wide, which leaves room for three additional clip instances. Position the third at (200, 0), the fourth at (300, 0), and the fifth at (400, 0). The five clips should fill the entire stage.

4.     The channel_strip instances need to have instance names. From left to right, use the Property Inspector and assign the instance names one , two , three , four , and master .

5.     The final steps of this lesson include adding the ActionScript that will pair a sound with each channel strip. Select instance one and enter the following statements in the Actions panel.

 

Note  

Don't enter the line numbers into the Actions panel; they are included here only so that you can easily follow the line-by-line explanation.

6. 1. onClipEvent(load){

7. 2.     title.name.text="imbira";

8. 3.     channel = new Sound(this);

9. 4.     channel.attachSound("imbira");

10.     5.     channel.setPan(0);

11.     6.     channel.setVolume(0);

12.     7.     channel.start(0,9999);

13.     8.     mute = false;

14.     9. }

15.     The code works as follows:

§                               Line 1 uses the handler onClipEvent() to execute these statements as the clip is loaded onto the Stage.

§                               Line 2 assigns the name imbira to the text field name inside the mute button clip instance (title) .

§                               Line 3 creates a Sound object named channel . This object belongs to, or is "scoped to," the current Timeline. When you use onClipEvent(load) , the current Timeline is the Movie Clip where this script is attached.

§                               Line 4 attaches the sound with the Linkage ID imbira to the object.

§                               Lines 5 “6 set the volume and pan of the sound to 0. This reflects the positions of the volume and pan sliders for each channel.

§                               Line 7 cues the sound and repeats it 9,999 times.

§                               Line 8 initializes the mute variable to false because the sounds are not muted when the channel strip is loaded. This variable is used to monitor the status of each channel's mute button.

16.     Click the text box area of the Actions panel. Select (Cmd/Ctrl+ A ) and copy (Cmd/Ctrl+ C ) these statements.

17.     Select the second channel strip (instance two ), click the text box area of the Actions panel, and paste (Cmd/Ctrl+ V ) the code you copied from the other instance. For every occurrence of the word imbira , substitute the word log .

18.     Repeat the process described in steps 6 and 7 and replace the word log with shak for instance three .

19.     Do steps 6 and 7 one last time for instance four and replace shak with yang . You should now have ActionScript statements attached to each channel_strip instance. When each instance loads, it should specify a label for the channel, create a Sound object, attach a sound to it, set pan and volume, and cue the sound.

 

Note  

In line 2, for instances three and four , you can enter the name label text as shakere (instance three ) and yangtze (instance four ). These are the real names of the instruments, which were shortened to accommodate the names of the WAV files.

20.     One thing that might seem strange is that with all four instances, each has an identically named Sound object ( channel ). At first glance, you might think that this would create conflicts between the various Sound objects in the movie. Up to this point, we've been fairly insistent that all objects and variables have unique names. The reason you can get away with identical names here lies in the way you created each Sound object. When you created the objects, you stated:

21.     channel=new Sound (this);

22.     By specifying the parameter this , you are telling Flash that the Sound object belongs to (or is "scoped to") the current Timeline. It will therefore control all the sounds that reside on that Timeline. Your mixing-board application recognizes the channel object belonging to instance one as distinctly different from the channel objects that belongs to instances two , three , and four . Though they all have the same names, they belong to different Timelines. This difference of scope maintains their individuality and renders each instance of channel_strip and each channel Sound object contained within as unique. Because each channel strip is treated as an individual instance that contains its own objects, Flash will allow you to have many instances of the channel_strip clip. The only limitation is that up to eight sounds can play simultaneously : one for each channel of audio supported by the Flash Player.

23.     Every mixing board also includes a channel known as the Master Fader. This is the master volume control that sets the overall volume output of the mixer. The fifth channel_strip instance will serve as your master fader. Select the master instance and enter the following statements in the Actions panel:

24.       onClipEvent(load){

25.           title.name.text="master";

26.           channel=new Sound();

27.           channel.setVolume(0);

28.           mute=false;

29.     }

These statements are nearly identical to those attached to the other channels; however, there is one very important difference. Notice the line that creates the Sound object; it reads channel=new Sound() . The parentheses in the Sound object constructor function are empty. This creates a global Sound object, meaning a Sound object that controls all the sounds in the entire movie. Before, your sound objects were scoped to the Timeline where they were created using this inside the parentheses. The empty parentheses give this object reign over every sound in the mixer. No matter what the volume or pan of an individual channel strip, this new master channel strip (Master Fader) will set the overall volume of the mix.

30.     The mixing-board application is finally complete. Save your movie and select Control Test Movie to hear how it works. First move the master fader up so that you have an overall volume level.

31.     Move the volume knobs up and down to hear changes of volume, and move the pan sliders left-to-right to hear changes in pan position.

32.     Click the mute button to silence a track, then click mute again to bring the track back to its original volume. Mute also works on the master fader to silence the entire mix.

 

Note  

Flash does a great job of maintaining the synchronization of the audio files. Even with eight sounds playing simultaneously, Flash is able to keep their rhythms locked together.

 

Phase 4: Moving On ”Next Steps and Ideas for the Future

There are so many things that you could do with this mixing-board application. As mentioned earlier, Flash supports up to eight simultaneous sounds, so feel free to add up to four more channels and fill up the components of your mix.

Because Flash does such a good job of maintaining sync with the sound files, this movie could be used as part of a live performance with a DJ, solo performer, or larger ensemble (see Figure H6.5). To do this, we recommend that you publish your mixer as a stand-alone Flash projector. To learn more about stand-alone files, see Chapter 32.

Figure H6.5: This version of the mixer was produced for a live performance. It required eight separate channels for a composition entitled "Contemplation."