Animation and Video

Animation and Video Lesson 2 — Enhancing Animations

Objectives • Record a sound file. • Edit a sound file. • Import a sound into an animation program. • Add a sound to an animation. Lesson 2 – Enhancing Animations

Objectives (continued) • Add text to an animation. • Animate text. • Add button objects to an animation. • Use action scripts to control an animation. Lesson 2 – Enhancing Animations

Add Sound to Your Animation • Adding sound to an animation can increase its effectiveness. • Most computer sound cards come with some type of sound-recording program. • Windows and other operating systems also have sound-recording programs that you can use. • Sound can be recorded from a microphone for voice narrations. • Music can be recorded from CD drives or other audio sources. Lesson 2 – Enhancing Animations

What Types of Sound Files Can You Use? • Most animation programs allow you to import sound files in WAV or MP3 format. • WAV files are higher in quality, but also require more storage space and take longer to load. • These work well in a presentation where storage space and download time are not as critical. • MP3 files have high quality in a compressed format. • These files are ideal for Web sites since they are smaller and download quickly. • Sound files in other formats may have to be converted to WAV or MP3 format before they can be used. Lesson 2 – Enhancing Animations

Make the Right Connections • Most modern sound cards have at least three connections: • One is for external speakers. • One is for connecting a microphone • One is for connecting an external device such as a CD or MP3 player. • Before making your recording, be certain you are using the right source. • Use the microphone input for voice recording. • Use the line-in connection for an external device. Lesson 2 – Enhancing Animations

Select the Right Input Source This figure shows the Wave In dialog box for the Windows Sound Recorder program. In this figure, the microphone has been selected as the input source. You could also choose the Line-in option for an external device or CD Audio for using your computer’s internal CD-ROM drive. Microphone selected as recording source Lesson 2 – Enhancing Animations

Windows Sound Recorder This figure shows the Windows Sound Recorder recording dialog box. There are buttons to Stop, Play, Record, Rewind, and Fast Forward. Click the Record button to start recording and the Stop button to end recording. The other buttons are used for playback. Play button Fast Forward Rewind Stop Record Lesson 2 – Enhancing Animations

Edit a Recording Once a recording has been made or opened, you can edit it using the Sound Recorder program as well. This figure shows a recording being played. Note the waveform of the recording in the window in the middle of the dialog box. Move the position indicator to any place in the recording. You can then delete sections prior to or after that position. Waveform Lesson 2 – Enhancing Animations

Import Sound into an Animation • Flash MX allows you to import a WAV or MP3 file (and AIFF in Macintosh versions). • Animation programs either require or recommend that you add the sound file to its own layer in the animation. • In Flash MX, imported sounds are added to the library. • Add a keyframe to the sound layer where you want the sound to begin playing, then drag it from the library to the Stage. Lesson 2 – Enhancing Animations

Stream and/or Loop the Sound This figure shows the Flash MX Property inspector for a sound file. Choosing the Stream option in the Sync text box will cause the sound to be synchronized with the playing of the movie. You can specify how many times to loop the sound file in this box. Lesson 2 – Enhancing Animations

Animate Text Objects • You can add and animate text in your movie just like any other object. • Use the Text tool to add a text object to the Stage, and use the Property inspector to set the font attributes for the object. • It is usually recommended to put the text on its own layer. • You can select a text object with the Arrow tool and modify it with the Text tool. • Use the Property inspector to apply special effects to the text, such as fading in or fading out. Lesson 2 – Enhancing Animations

Use the Alpha Effect on Text The figure on the left shows a portion of the Stage with a text object in place. In the figure on the right, the text object is no longer visible, and the blue rectangle indicates where the text is. Note that the Alpha effect has been set and the opacity box set to 0%, which has made the text invisible. Setting a keyframe later on the Timeline and changing the opacity to 100% will make the text appear between the starting frame and the ending frame. Object visible Object invisible Lesson 2 – Enhancing Animations

Add Interactive Buttons • You can add buttons to an animation to provide interactive functions for the user. • They can use the buttons to play a movie, stop a movie, jump to some other page or Web site, display a menu, and so on. • Rollover buttons are easy to add and respond to movement and actions of the mouse. • Rollover buttons have defined states for which you can assign actions to be performed when the state is activated. Lesson 2 – Enhancing Animations

Rollover Button States • Most animation programs have three common states for rollover buttons: • Up – How the button appears when the mouse pointer is not over the top of it. • Over – How the button appears when the mouse pointer is over the button. • Down – How the button appears when it has been clicked by the mouse. • Flash MX (and other programs) also has a fourth state associated with buttons: • Hit – Allows you to define an area around the button that is the “hot” or clickable area for that button. This area does not display when the movie is played. Lesson 2 – Enhancing Animations

Creating Buttons • Some animation programs require you to create the graphic for the buttons in another program and import them to the animation. • Others, such as Flash MX, allow you to draw and edit them in the program itself. • In Flash MX, you create the graphic as a “symbol” and add it to the library. It can then be used in other places in the animation or duplicated and modified to represent a different state. • Flash MX symbol-editing mode to modify and place the button. Lesson 2 – Enhancing Animations

Flash MX Symbol-Editing Mode This figure shows the symbol-editing mode in Flash MX. Note that there are frames defined for each state. Although not visible here, there is also a crosshair that can be used to align objects on the Stage. The color of the button can be changed for each state to make it obvious to the user that it is in a different state. Lesson 2 – Enhancing Animations

Duplicate Buttons This figure shows a second button created from the original button. Once you have created a button as a symbol, it is easy to duplicate it and use it as a new button. You change the text of the button and, possibly, the color, rename it, and set the actions for its states instead of creating a whole new button from scratch. Lesson 2 – Enhancing Animations

Add Scripts to Your Animation • Buttons and other interactive controls cannot do anything until you tell them what to do. • In most animation programs, this is done by creating scripts, or actions, to attach to each control. • You usually select the object, then open a window or panel where you can write or generate the script for the selected control. • Adobe LiveMotion and Flash MX both use a scripting language called ActiveScript. Lesson 2 – Enhancing Animations

Flash MX Actions Panel This figure shows the Flash MX Actions panel, which automatically builds a script based on selections you make. In this case, the “on” action was selected from the left-hand pane of actions, and the event to which it pertains is the “Release” event as shown by the checkmark in the top-right pane. The lower-right pane shows the actual script code that was generated. You would then specify an action to perform on the release, such as “stop.” The final script would read: on (release) { stop(); } Lesson 2 – Enhancing Animations

Summary • The WAV format includes the original sound data but results in a large sound file. Compressed formats such as MPs, however, discard unheard sound data, resulting in a smaller, high-quality sound file. • Most operating system software includes a simple sound-recording utility, such as Sound Recorder in Windows. However, your system’s sound card may have more sophisticated software for recording and editing sounds. Lesson 2 – Enhancing Animations

Summary (continued) • To record a wave file, connect the microphone or other device correctly, using the microphone (mic) in or line-in jack. Then, specify which device to record in the operating system. Finally, use the recording software to make the actual recording. • Sounds have waveforms that can be edited in sound-editing software. Even Sound Recorder in Windows can be used to delete part of a sound or add an echo effect. Lesson 2 – Enhancing Animations

Summary (continued) • Add text on its own layer in an animation project file, then use tweening to animate the text object like any other object. • You can add buttons or other types of controls to enable viewers to interact with the animation. • When you create a button, you can define its rollover states. Duplicate a button to save time when you need more than one in an animation. Lesson 2 – Enhancing Animations

Summary (continued) • You build a script to define the action that should happen when an animation event occurs or the user takes an action such as clicking the mouse on the button or other control. Most animation programs include tools to make scripting easy. Lesson 2 – Enhancing Animations

Animation and Video