1. 5-1 OBJ Copyright 2003, Paradigm Publishing Inc. Adding Sound, Video, and Basic Interactivity with Buttons Macromedia Flash Design & Application

2. 5-2 OBJ Copyright 2003, Paradigm Publishing Inc.  List the audio formats supported in Flash. List the audio formats supported in Flash.  Import sound to a movie's library. Import sound to a movie's library.  Add sound to an animation in a keyframe. Add sound to an animation in a keyframe.  Change synchronization, sound effects, and loop sound. Change synchronization, sound effects, and loop sound.  Edit the sound envelope to customize a sound effect and control volume. Edit the sound envelope to customize a sound effect and control volume.  Specify the compression setting for the sound file. Specify the compression setting for the sound file.  Describe how sampling rate and sample size affect a sound file. Describe how sampling rate and sample size affect a sound file.  Use sounds from the common library. Use sounds from the common library.  Increase the layer height to display sounds in frames. Increase the layer height to display sounds in frames. Performance Objectives

3. 5-3 OBJ Copyright 2003, Paradigm Publishing Inc.  List the video formats supported in Flash. List the video formats supported in Flash.  Import a video clip to a movie. Import a video clip to a movie.  Specify import video settings. Specify import video settings.  Modify a video clip instance. Modify a video clip instance.  Create a button symbol. Create a button symbol.  Modify a button instance. Modify a button instance.  Test the button in the authoring environment. Test the button in the authoring environment.  Add sound to a button. Add sound to a button.  Add an action statement to a button to control a movie using the Actions panel. Add an action statement to a button to control a movie using the Actions panel.  Create a movie clip symbol. Create a movie clip symbol.  Create an animated button. Create an animated button.  COMMANDS REVIEW COMMANDS REVIEW Performance Objectives

4. 5-4 OBJ Copyright 2003, Paradigm Publishing Inc. Adding Sound to a Movie  Sound is added to a movie by importing the sound file to the library  then adding an instance of the sound to the frame in the Timeline in which you want the sound to start playing  Flash can import sound files in the following file formats with QuickTime 4 or later installed:  wav  aif  au  mp3 A Windows-based computer without QuickTime 4 installed cannot import au files. A Macintosh-based computer without QuickTime 4 installed cannot import wav files.

5. 5-5 OBJ Copyright 2003, Paradigm Publishing Inc. Importing a Sound File File, Import or Ctrl + R change to the sound file format that you want to import

6. 5-6 OBJ Copyright 2003, Paradigm Publishing Inc. Importing a Sound File…/2 waveform for selected audio file click the Play button to hear the recording Flash imports sound files directly to the library. Window, Library or F11

7. 5-7 OBJ Copyright 2003, Paradigm Publishing Inc. Adding Sound in Animation  Insert a new layer in the Timeline  not required but is recommended for ease of editing  Insert a keyframe at the required frame in the Timeline  Insert sound in a keyframe by dragging an instance of the sound from the library to the stage with the keyframe active  can also be added by choosing the sound file name in the Properties panel

8. 5-8 OBJ Copyright 2003, Paradigm Publishing Inc. Adding Sound in Animation…/2 pointing at the waveform displays a tooltip with the name of the sound file sound waveform displays in Timeline

9. 5-9 OBJ Copyright 2003, Paradigm Publishing Inc. Synchronizing Sound to the Animation Sync sound properties can be applied to the keyframe from the Properties panel to synchronize the sound with the other elements in an animation.

10. 5-10 OBJ Copyright 2003, Paradigm Publishing Inc. Sync Sound Options  Event  starts playing when the playhead reaches the keyframe and continues playing to completion  completely downloaded before it begins to play  Start  same as an event sound with the exception that any existing instances of the same sound will be stopped when the start sound plays  Stop  use to discontinue playing a sound  Stream  is synchronized with the Timeline and will stop playing when the playhead reaches the end of the frames  can begin playing almost immediately while the remainder of the data is downloaded in the background

11. 5-11 OBJ Copyright 2003, Paradigm Publishing Inc. Looping a Sound Instance Key a value for a sound keyframe to specify the number of times in which the sound should be replayed.

12. 5-12 OBJ Copyright 2003, Paradigm Publishing Inc. Applying Sound Effects The Effect drop-down list for a sound keyframe provides preset options to control the volume level or channel from which the sound plays.

13. 5-13 OBJ Copyright 2003, Paradigm Publishing Inc. Sound Effect Options  Left Channel  plays in left channel only  Right Channel  plays in right channel only  Fade Left to Right  volume pans from left channel to right channel  Fade Right to Left  volume pans from right channel to left channel  Fade In  volume gradually increases as sound is played  Fade Out  volume gradually decreases as sound is played  Custom  opens Edit Envelope dialog box  customize volume or define starting and ending points for sound

14. 5-14 OBJ Copyright 2003, Paradigm Publishing Inc. Editing the Sound Envelope Envelope line Envelope handle Sound Timeline Right channel editing window Display Timeline in frames Display Timeline in seconds Zoom Time In Left channel editing window Play Stop

15. 5-15 OBJ Copyright 2003, Paradigm Publishing Inc. Editing the Sound Envelope…/2  Drag envelope handles up or down to increase or decrease the volume  Drag Time In or Time Out markers to change the point in the sound file at which the sound will start or finish  Changes made apply to the selected sound instance only

16. 5-16 OBJ Copyright 2003, Paradigm Publishing Inc. Defining Sound Properties select sound and click Properties button

17. 5-17 OBJ Copyright 2003, Paradigm Publishing Inc. Defining Sound Properties…/2  Sound is recorded digitally through a process called sampling  device attached to the computer measures the waveform at regular intervals  Sampling rate is the number of times per second a sample of the waveform is recorded  Sample size refers to the amount of information stored for each sampled waveform  High sample rate and sample sizes provide high quality sound  also require larger sound file size to store the information

18. 5-18 OBJ Copyright 2003, Paradigm Publishing Inc. Compressing Sound Files Depending on the active compression option, you can test the level at which a sound file will be compressed using various sample rates and bit rates to achieve a balance between the quality of sound and file size. to hear the quality of the compressed sound file to change all instances of the sound to a different file to update the sound file if you have edited the original file outside Flash to discontinue playing a sound after clicking the test button

19. 5-19 OBJ Copyright 2003, Paradigm Publishing Inc. Compression Options  ADPCM – Adaptive Differential Pulse Code Modulation  only the difference between samples is recorded  recommended for short sound effects  MP3 (file extension for MPEG) – Motion Picture Experts Group  removes redundant and irrelevant parts  no noticeable loss in quality  Raw  no compression but allows you to resample at a new rate  Speech  compression specific for voice data

20. 5-20 OBJ Copyright 2003, Paradigm Publishing Inc. Using Sounds from the Common Library Flash provides a common sound library containing various sound effects that can be copied to the current movie's library. Window, Common Libraries With the keyframe active for which you want to insert a sound, drag the sound from the common library to the stage. The sound is added to the current movie's Library panel.

21. 5-21 OBJ Copyright 2003, Paradigm Publishing Inc. Increasing Layer Height to Display Sound in Frames Modify, Layer click to select layer height setting enlarges display of waveforms

22. 5-22 OBJ Copyright 2003, Paradigm Publishing Inc. Layer Height Settings 100% 200% 300%

23. 5-23 OBJ Copyright 2003, Paradigm Publishing Inc. Finding Sound on the Internet Sound effects can be downloaded from the Web for free or for a small fee for use in a Flash movie. Sound effects can be downloaded from the Web for free or for a small fee for use in a Flash movie.

24. 5-24 OBJ Copyright 2003, Paradigm Publishing Inc. Video File Formats  Flash can import video clips in the following file formats with QuickTime 4 or later installed: avi, dv, dvi, mpg, mpeg, mov, and flv  A Windows-based computer with DirectX 7 or later installed can also import a wmv (Windows Media File) format  Flash imports and exports video using the Sorenson Spark codec which controls the compression in Flash and the decompression in the Flash Player  Users will require Flash Player Version 6 to view a movie with embedded video

25. 5-25 OBJ Copyright 2003, Paradigm Publishing Inc. Importing Video File, Import or Ctrl + R change to the video file format that you want to import

26. 5-26 OBJ Copyright 2003, Paradigm Publishing Inc. Importing Video…/2 Import a QuickTime video clip as an embedded movie clip or as a link to an external video file. Choosing to link a QuickTime video externally requires that the movie be published as a QuickTime movie.

27. 5-27 OBJ Copyright 2003, Paradigm Publishing Inc. Choosing the Import Video Settings Import settings that control the compression level of a video clip are set before the video is imported. drag slider or key value between 0 and 100 to specify compression level drag slider or key value between 0 and 48 to set the number of video keyframes drag slider or key value between 1 and 100 to specify the percentage of pixel dimensions synchronize the video with the timeline audio may or may not be able to be imported depending on program used to record tracks

28. 5-28 OBJ Copyright 2003, Paradigm Publishing Inc. Choosing the Import Video Settings…/2 The video clip is added to the library. displays progress bar indicates number of frames required in the movie Timeline

29. 5-29 OBJ Copyright 2003, Paradigm Publishing Inc. Importing Video Directly to the Library File, Import to Library Insert by dragging an instance of the video to the stage.

30. 5-30 OBJ Copyright 2003, Paradigm Publishing Inc. Embedded Video Properties select video clip and click Properties button

31. 5-31 OBJ Copyright 2003, Paradigm Publishing Inc. Modifying a Video Instance An instance of a video can be scaled, rotated, or skewed using the Free Transform tool or moved to a new location on the stage using the Arrow tool. display the Properties panel to change the dimensions of the clip

32. 5-32 OBJ Copyright 2003, Paradigm Publishing Inc. Importing Video in a Movie Clip Symbol Gains the advantage of having its own Timeline and the ability to control the clip's brightness, tint, and alpha properties. Insert, New Symbol or Ctrl + F8 key a name click Movie Clip Behavior

33. 5-33 OBJ Copyright 2003, Paradigm Publishing Inc. Importing Video in a Movie Clip Symbol…/2 File, Import or Ctrl + R change video import settings as necessary change to the video file format that you want to import

34. 5-34 OBJ Copyright 2003, Paradigm Publishing Inc. Importing Video in a Movie Clip Symbol…/3 after the import process has completed, click the Back button insert a layer and/or create frames to place the video modify the movie clip symbol instance as necessary drag an instance to the stage

35. 5-35 OBJ Copyright 2003, Paradigm Publishing Inc. Creating Buttons Create buttons to add simple interactivity with the user in which the user can control the movie's playback. A button is created as a symbol with four states. no mouse action over it Up mouse rolled over it Over has been clicked Down defines the boundaries Hit

36. 5-36 OBJ Copyright 2003, Paradigm Publishing Inc. Creating Buttons…/2 Insert, New Symbol or Ctrl + F8 key a name click Button Behavior

37. 5-37 OBJ Copyright 2003, Paradigm Publishing Inc. Modifying a Button Instance draw the button around the registration point insert keyframes and define the button's appearance for each of the four button states Flash will use the button's Up state as the Hit property if no image is created in the Hit keyframe.

38. 5-38 OBJ Copyright 2003, Paradigm Publishing Inc. Inserting an Instance of a Button With the appropriate keyframe active, drag a button instance from the Library panel to the stage.

39. 5-39 OBJ Copyright 2003, Paradigm Publishing Inc. Testing a Button Control, Enable Simple Buttons or Ctrl + Alt + B Control, Test Movie or Ctrl + Enter By default, Flash does not display a button's attributes during movement of the mouse over the button within the authoring environment. Use the Buttons common library to copy button symbols to the current movie.

40. 5-40 OBJ Copyright 2003, Paradigm Publishing Inc. Adding Sound to a Button With the button in symbol editing mode, insert a keyframe in the Down frame of the button sound layer. select the sound from the drop-down list

41. 5-41 OBJ Copyright 2003, Paradigm Publishing Inc. Adding an Action to a Button  ActionScript  a programming language used to instruct Flash on what actions to perform when a button is clicked by the user  like learning a new language of words and syntax to convey instructions to the computer  create using a point-and-click approach in the Actions panel

42. 5-42 OBJ Copyright 2003, Paradigm Publishing Inc. Adding an Action to a Button…/2  Creating an action statement for a button involves associating ActionScript statements with a mouse event  Mouse event  occurs when the user interacts with the button  triggers Flash to perform the action statement associated with the event  most common are: Press Release Roll Over

43. 5-43 OBJ Copyright 2003, Paradigm Publishing Inc. Actions Panel Window, Actions or F9 Toolbox ActionScript area Displays the current script that you are editing. Click the down arrow to navigate to other scripts. Parameters area Click to open the Reference Panel

44. 5-44 OBJ Copyright 2003, Paradigm Publishing Inc. Actions Panel…/2  An event handler beginning with the keyword on is required at the beginning of any ActionScript statement for a button  created automatically when you add actions using the Actions panel  Double-click an action in the Toolbox to add the action to the ActionScript area  The Movie Control actions Stop, Play, Goto, and stopAllSounds are used to allow the user to control the playback of the movie when assigned to a button

45. 5-45 OBJ Copyright 2003, Paradigm Publishing Inc. Creating a Movie Clip Symbol  Insert, New Symbol  key a name  click Movie Clip in the Behavior section  click OK  File, Import  change the Files of type  double-click the file name  Click the Back button to exit symbol editing mode

46. 5-46 OBJ Copyright 2003, Paradigm Publishing Inc. Creating Animated Buttons Insert the movie clip symbol within a button's Up, Over, or Down keyframes to create a button that animates.

47. 5-47 OBJ Copyright 2003, Paradigm Publishing Inc. Commands Review How do you display the Actions panel? Window, Actions or F9

48. 5-48 OBJ Copyright 2003, Paradigm Publishing Inc. Commands Review How do you view the common button or sound library? Window, Common Libraries

49. 5-49 OBJ Copyright 2003, Paradigm Publishing Inc. Commands Review How do you create a new symbol? Insert, New Symbol or Ctrl + F8

50. 5-50 OBJ Copyright 2003, Paradigm Publishing Inc. Commands Review How do you enable the buttons on the stage? Control, Enable Simple Buttons or Ctrl + Alt + B

51. 5-51 OBJ Copyright 2003, Paradigm Publishing Inc. Commands Review How do you import sound or video? File, Import or Ctrl + R

52. 5-52 OBJ Copyright 2003, Paradigm Publishing Inc. Commands Review How do you import to the library? File, Import to Library Insert by dragging an instance of the video to the stage.

53. 5-53 OBJ Copyright 2003, Paradigm Publishing Inc. Commands Review How do you view the layer properties? Modify, Layer

54. 5-54 OBJ Copyright 2003, Paradigm Publishing Inc. Commands Review How do you open the Library panel? Window, Library or F11

55. 5-55 OBJ Copyright 2003, Paradigm Publishing Inc. Animating Using Symbols and Masks and Publishing Flash Movies Coming Next