Lab 02: Integrating Sound and Audio Controls

Demo: Instructor will show students how to import and play simple audio files. Instructor will also show how to create simple controls for those sounds.

Description: This lab consists of three parts. Exercise 1 involves incorporating sinple sounds into an animation. Exercise 2 involves using simple ActionScript to control sounds. Exercise 3 involves lip syncing a character. Note: All resource files needed to complete these exercises are on the G drive.

Exercise 1: Boing

1. Download the ex_1.fla and boing.wav files from the website.
2. Open up the .fla file.
3. Click file->import->import to library, select the boing.wav file, and click open
4. Create a new layer called "SFX"
5. Create a keyframe on frame 20 of the SFX layer.
6. While in the new keyframe, drag an instance of the sound onto the stage from the library
7. You won’t see anything different on the stage, but the SFX layer now displays the sound.
8. Select frame 20, in the properties panel, set sync: to event, then click the edit button to the right.
9. In between the two wave images is the sound timeline, it has dashes and numbers in seconds on it.
10. There are two bars on the timeline, one at the beginning and one at the end of the sound.
11. Move the first bar to the right to cut out the short “quiet space” at the beginning of the sound, taking the empty space off.
12. Save your file as LastName_Firstname_L2Ex1

Exercise 2: Radio Timeline Scripting

1. Download Ex_2.fla and open the file.
2. On the buttons layer, drag an instance of the btnStart symbol onto the radio (yes, that is a radio); you don’t need to name the instance yet.
   Edit the btnStart symbol in the library; add a keyframe to the “down” state in the SFX layer.
   Select the newly created keyframe, drag rockin1.wav from the library onto the stage; it will appear on the timeline.
   Change the sync of the sound to “Event”.
3. Test the movie and press the green button, the sound is 14 seconds long. As you press the button multiple times, you will notice it plays multiple instances of the sound on top of one another. Sync:Event tells Flash to play the sound every time it reaches that frame.
4. Edit the btnStart symbol again, changing the sync of the sound to “Start”
5. Test the movie again. This time, only one instance of the sound plays, no matter how many times you press the button. Sync:Start tells Flash to start the sound, if it is already playing, it ignores this command.
6. Edit the btnStart symbol one more time; change the sound from “repeat” to “loop”. Obviously, this tells the sound to continue looping itself. Rockin1.wav is a sound intended to loop so there will be no break in the music when it loops.
7. Go back to the main timeline and drag an instance of the btnStop symbol onto the radio.
8. Edit the btnStop symbol, adding a keyframe on the “down” state in the SFX layer.
9. With this keyframe selected, select “rockin1.wav” from the “sound” dropdown in the properties bar. This does the same thing as dragging sounds from the library, but can be a timesaver if you end up with a lot of sounds.
10. Change the Sync of the sound to “Stop”.
11. Test the movie. After pressing the green button, the sound will loop until you press the red button
12. Also included is a movieclip titled Thump with an instance already on the main timeline named “thump1”. If you click on the speaker (yes, it’s a speaker), you can see its instance name in the properties bar.
13. Click on the btn_start instance you created, the green button. Give it the instance name “btn_start” without quotes. Likewise, give the red button the instance name “btn_stop”.
14. In the main timeline, click on the first frame of the actions layer, then open the actions panel. There should be one line of code, “thump1.stop();” this tells the movieclip instance “thump1” to stop playing immediately as the movie starts. This prevents the speaker from thumping when there is no music playing.
15. Add the following code below the existing line of code.

this.btn_start.addEventListener( MouseEvent.CLICK, playThump );

this.btn_start.addEventListener( MouseEvent.CLICK, stopThump );

// When the start button is pressed, play the thump1 movieclip

function playThump( e:MouseEvent ):void {

thump1.play();

}

// When the stop button is pressed, stop the thump1 movieclip

function stopThump( e:MouseEvent ):void {

thump1.stop();

}

(The lines with forward slashes are comments and don’t affect the code.)

• Test the movie, as the music comes on, the speaker should “thump” in a cheesy manner.
• Navigate to window->other panels->scene
• In the scene panel, click the + button to create a new scene, and drag the new scene above the previous one
• Double click on the new scene's name and when the text become editable, type "opening". Name the old scene "radio" in the same fashion.
• Click on the new scene in the scene panel, this brings it up in Flash, with its own timeline.
• Drag an instance of stopBtn to the stage, name it btnStart
• Drag the title_graphic to the stage, position it above the buttons.
• Create a new layer in this scene, and name it 'actions'
• Select the first keyframe in the actions panel, and press F9 to open up the actions panel if it is not already open.
• In the actions panel, type this:

//stay on this screen until the play button is pressed

stop();

//Will be used to name your radio in the next scene

var myName:String = "your_name";

//event listener for our button
this.btnStart.addEventListener( MouseEvent.CLICK, startMovie );

//when the button is clicked, go to the 'radio' scene

function startMovie( e:MouseEvent ):void {

this.gotoAndPlay( 1, "radio" );

}

• Open up the scene panel again, and return to the radio scene.
• Select the text tool, and create a text box beneath the radio.
• With the text box selected, go to the properties panel at the bottom of flash. In the upper lefthand corner of the panel, select 'dynamic text' from the dropdown menu. Name the textfield "radioName".
• Open up panel with the first keyframe of the actions layer selected and type this text:
  this.radioName.text = myName + "'s radio";
• Test your movie; upon pressing the play button, you should be taken to the radio you created earlier, with the text beneath it saying "Youname's radio".

• Save your file as LastName_Firstname_L2Ex2.
• Submit both exercise files in a single folder named Lastname_FirstName_L2