Instruction: 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 lip syncing a character. Exercise 3 involves using simple ActionScript to control sounds.

1. Create a new flash document, set the frame rate to 24 fps (Modify > Document).
2. Create a circle, making sure to select both the fill and the stroke of the circle, convert it to a graphic symbol named "Ball." (it now appears in your library)
• Delete the ball from the stage; you should still have the symbol in the library.
3. Go to Insert>New Symbol to create a new movieclip symbol named "Bouncing Ball"
4. Make sure you are editing your newly made "Bouncing Ball" symbol;
• Drag an instance of "Ball" onto the stage. Set it off to the left
• Click on frame 80 and add a new keyframe
• Right click between 1 and 80 and create motion tween
• Insert new layer (we'll delete it later)
• Use the pen tool to draw a bounce path (click drag for handles at the top of the bounce path, but only click and release for bounce points at the bottom of the path)
• Use the selection tool to select the entire path, ctrl+x to cut it.
• Delete the new layer.
• Make sure the motion tween is selected in the timeline
• Paste the path onto the screen - the ball should be bound to the path now.
5. Above the timeline, click the "Scene 1" tab to go back to editing the main timeline.
6. Drag an instance of the "Bouncing Ball" symbol to the stage. Position the ball to the left of the stage.
7. Press ctrl-enter to test the animation. The ball bounces, but it is very chunky and unrealistic.
8. Double click the "Bouncing Ball" symbol in the library to edit it.
• Click anywhere along the first tween, then change its X and Y to have a Simple(slow) ease and set the ease property to 100, this makes the tween start quickly and slow down near its end; it’s known as easing out. It also makes the ball look as though it was thrown fast and slows down as it bounces.
9. Play the animation again; hopefully it looks smoother now.
10. Make sure you are still editing the Bouncing Ball symbol
    • Make the ball squish:
      • Find the frame of the first point where the ball bounces
        • Use free transform to squish the ball on that frame
        • On the very next frame, use free transform to return the ball to regular shape
        • You may have to set the ball to normal size on the frame immediately before the squish as well.
      • Repeat the ball squish for the second point where the ball bounces
      • Note: you have to do this after setting the ease because the ease changes the trajectory of the ball as well as the frame in which the ball bounces.
    • Add sound effects:
      • Add a new layer called "SFX."
      • Download the sound file "boing_2.wav" (you can search and find this file online). You will use this sound file in this exercise.
      • Import the sound file "boing_2.wav" by selecting file>import>import to library, or drag the file directly into the library from outside of flash.
      • Find the frame in which the ball is at its lowest point and create a keyframe on that frame ofthe SFX layer. Do this again for the second lowest point (the second bounce).
      • While in the new keyframe, drag an instance of the sound onto the stage from the library.
      • You won’t see anything different on the stage, but the SFX layer now displays the sound.
      • Select that frame, in the properties panel, set sync: to event, then click the edit button to the right.
      • In between the two wave images is the sound timeline, it has dashes and numbers in seconds on it. There are two bars on the timeline, one at the beginning and one at the end of the sound.
      • 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.
11. Add play button and ActionScript
    • In scene 1, select the ball, in properties, give it instance name: theBall
    • Create a play button and place it on the stage. Instance name: btnPlay
    • On the main timeline, insert a new layer and call it ActionScript. Copy and paste this code into the first frame of that layer:
      
      theBall.stop();
      btnPlay.addEventListener( MouseEvent.CLICK, playThis );
      btnStop.addEventListener( MouseEvent.CLICK, stopThis );
      function playThis( e:MouseEvent ):void
      {
              theBall.play();
      }
      function stopThis( e:MouseEvent ):void
      {
              theBall.stop();
      }

1. Start a new file that uses AS3
2. Modify > Document. 400px wide x 600px tall. 24 fps.
3. Download oldRadio.gif and speakerMesh.gif and import them into your library
4. Create a new symbol. Name: Radio. Type: Graphic. Drag an instance of oldRadio onto it.
5. Create a new symbol. Name: Speaker. Type: MovieClip. Drag an instance of speakerMesh onto it.
6. On the main timeline, rename layer1 to: Radio. Drag an instance of Radio onto the stage.
7. On the main timeline, insert a layer: Speaker. Drag an instance of Speaker onto the stage.
8. Create a new symbol. Name: StartButton. Type: Button. Create a green oval with a radial gradient. Create the 4 states of the button.
9. Create a new symbol. Name: StopButton. Type: Button. Create a red oval with a radial gradient. Create the 4 states of the button.
10. On the main timeline, insert a layer: Buttons. Drag instances of StartButton and StopButton onto the stage.
11. Ctrl+Enter to test your buttons
12. In each button symbol:
• Rename the layer to Button.
• Insert a layer: SFX
• On the SFX layer, insert a keyframe for down and another keyframe for hit.
13. Copy from another flash file
• Download this flash file
• Open it. Go to the library. Select rockin1.wav. Right click > Copy.
• Go back to your flash file, in the library, Right click > Paste.
• Close and delete the flash file you just downloaded.
14. On the main timeline, insert a layer: ActionScript. On frame 1, open the Actions panel and type (this prevents sound from playing when the file swf first loads):
            stop();
            flash.media.SoundMixer.stopAll();
15. Edit the StartButton symbol in the library.
• On the down state in the SFX layer, drag an instance of rockin1.wav onto the stage. It will appear on the timeline.
• Change the sync of the sound to Event.
• Test the movie and press the green button. 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.
• Change the sync of the sound to Start and 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.
• 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.
16. Edit the StopButton symbol in the library.
• On the down state in the SFX layer, 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.
• Change the sync of the sound to Stop
• Test the movie. After pressing the green button, the sound will loop until you press the red button.
17. Make the speaker thump
• Create a new symbol. Name: Speaker Thump. Type: Movie Clip.
• Drag an instance of Speaker onto its stage.
• Insert a frame at frame 12.
• Insert a keyframe at frame 7.
• Select one of the first 6 frames and create a motion tween.
• On frame 6, with the selection tool selected, use the arrows to nudge the speaker over 4 and down 4.
• Select one of the last 6 frames and create a motion tween.
• On frame 7, with the selection tool selected, use the arrow keys to nudge the speaker over 4 and down 4.
• Enter to test the symbol
18. On the main timeline, delete the old speaker symbol from the stage and drag an instance of Speaker Thump onto the stage.
19. On the main timeline, select the Speaker Thump. Change its instance name to: thump1
20. On the main timeline, select the StartButton. Change its instance name to: btn_start
21. On the main timeline, select the StopButton. Change its instance name to: btn_stop
22. In the main timeline, click on the first frame of the actions layer, then open the actions panel.
• Add this line of code on line 3:
          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.
• Add the following code below the existing line of code (The red lines with forward slashes denote comments and don’t affect the code.).

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

  this.btn_stop.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();

  }

   

23. Ctrl+Enter to test the movie, as the music comes on, the speaker should "thump" in a cheesy manner.
24. Add a new scene
• Navigate to window > other panels > scene
• In the scene panel, create a new scene (bottom left corner of panel), and drag the new scene above the previous one
• Double click on the new scene's name and when the text becomes editable, type "Intro". 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 StopButton onto the stage, name it btnIntroStart
• Use the text tool to add the text "Lab Radio" to the stage
• Insert a new layer. Name: ActionScript
• Select the first frame, in the actions panel, type the following code
  

  // 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.btnIntroStart.addEventListener( MouseEvent.CLICK, startMovie );

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

  function startMovie( e:MouseEvent ):void
  {

  this.gotoAndPlay( 1, "Radio" );

  }

25. Add Dynamic Text
    • Open up the scene panel again, and return to the radio scene.
    • Select the text tool, and create a text box above the radio.
    • With the text box selected, in the properties panel, select TLF Text and Editable from the drop down menu. Give it an instance name of: radioName
    • Select the ActionScript layer, in the Actions panel, type this:
      this.radioName.text = myName + "'s radio";
26. Do a final test of your movie