9. Working with Sound and Video

1. Double-click the file Shearwood-Wildlife-Preserve.air, a cross-platform program, in the Lesson09/09End folder to play the animation.

The installer will warn you that the application comes from an unknown author, but you can trust us! Click Install. When the installation is done, the application launches a new window at the upper-left corner of your desktop. View the movie of the polar bear with a short soundtrack of an African beat. A zoo director pops up and introduces himself.

2. Click a sound button (in the lower-left corner) to hear an animal sound.

3. Click one of the buttons bearing the picture and name of an animal to view a short movie about the animal. Use the interface controls below the movie to pause, continue, or lower the volume.

4. Press Ctrl+Q/Command+Q to close the application (or choose Quit from the Mac OS Dock or Windows Taskbar).

In this lesson, you’ll import audio files and put them on the Timeline to provide the short introductory audio flourish and then embed some of those sounds in each button. Moving on to video, you’ll use Adobe Media Encoder CC to compress and convert the video files to the appropriate format for Animate. Other useful techniques you’ll learn include how to work with transparent backgrounds in video to create the silhouetted zoo director video and how to export Animate content to high-quality video.

1. Double-click the 09Start.fla file in the Lesson09/09Start folder to open the initial project file in Animate CC.

2. Choose File > Save As. Name the file 09_workingcopy.fla, and save it in the 09Start folder. Saving a working copy ensures that the original start file will be available if you want to start over.

The initial setup of the project has been completed except for the audio and video portions and some of the ActionScript code. The Stage is 1000 × 700 pixels. A photo of a snoozing lion forms the background of the application. Layered above the background is a row of buttons along the bottom of the Stage, with three simple buttons at the left and a set of buttons depicting colorful animals to the right. A title banner spans the top of the Stage.

The Timeline contains several layers that separate the different content.

The bottom three layers, called background photo, title, and bottom navbar, contain design elements, text, and images. The two layers directly above, called buttons and sound buttons, contain instances of button symbols. The videos layer contains several labeled keyframes, and the actions layer contains ActionScript that provides the event handlers for the bottom row of buttons.

If you’ve completed Lesson 8, you should be familiar with the structure of this Timeline. The individual buttons on the bottom row are already coded so that when the user clicks a button, the playhead moves to a corresponding labeled keyframe in the videos layer. You’ll be inserting content into each of those keyframes. But first you’ll learn to work with sound.

1. Choose File > Import > Import To Library.

2. Select the Monkey.wav file in the Lesson09/09Start/Sounds folder, and click Open.

The Monkey.wav file appears in your Library panel. The sound file is indicated by a unique icon, and when it is selected the preview window shows a waveform—a series of peaks and valleys that represent the sound.

3. Click the Play button in the far upper-right corner of the Library preview window.

The sound plays.

4. Double-click the sound icon to the left of your Monkey.wav file.

The Sound Properties dialog box appears, providing information on your sound file, including its original location, size, and other technical properties. Click OK to close the dialog box.

5. Choose File > Import > Import To Library and select the other sound files to import into your Animate project. Import Elephant.wav, Lion.wav, Africanbeat.mp3, and Afrolatinbeat.mp3. Click Open to import the files.

Your Library panel should contain all the sound files.

6. Create a folder in your Library panel and place all the sound files in it to organize your Library panel. Name the folder sounds.

1. Select the videos layer on the Timeline.

2. Insert a new layer and rename it sounds.

3. Select the first keyframe of the sounds layer.

4. Drag the Afrolatinbeat.mp3 file from the sounds folder in your Library panel onto the Stage.

The waveform of your sound appears on the Timeline.

5. Select the first keyframe of the sounds layer, if it’s not already selected.

In the Properties panel, in the Sound section, note that your sound file is now listed on the Name menu.

6. Choose Stream from the Sync menu.

The Sync options determine how the sound plays on the Timeline. Use Stream sync for long passages of music or narration when you want to synchronize the sound with the Timeline.

7. Move the playhead back and forth on the Timeline.

The sound plays as you scrub the Timeline.

8. Choose Control > Test.

The sound plays only for a short time before getting cut off. Because the sound is set to Stream, it plays only when the playhead moves along the Timeline, and if there are sufficient frames to play. There is a stop action at frame 9 that stops the playhead and thus stops the sound.

1. Click on the Stage to deselect the Timeline, and then place the playhead between frames 1 and 9 by clicking on the top frame numbers.

2. Choose Insert > Timeline > Frame, or press F5, to insert one frame into each layer between frames 1 and 9.

3. Continue inserting frames until the sound will be able to play for about 50 frames before it hits the the stop action in the second keyframe of the actions layer. The keyframe that contains the stop action should be at frame 51.

4. Choose Control > Test.

The sound lasts longer because it has more frames to play before the playhead stops.

1. Select the first keyframe of the sounds layer.

2. In the Properties panel, in the Sound section, click the Edit Sound Envelope button, which is to the right of the Effect menu and bears a pencil icon.

The Edit Envelope dialog box appears, showing you the sound’s waveform.

The upper and lower waveforms represent the left and right channels of the stereo sound, respectively. The thin black line running horizontally above each waveform shows the sound level for each channel, and together they make up the envelope of the sound. A timeline runs between the waveforms, the Effect menu in the upper-left corner offers preset effects, and buttons that enable view options occupy the bottom-right corner.

3. In the Edit Envelope dialog box, click the Seconds button, if it isn’t already selected.

The Timeline changes units to show seconds instead of frames. Click the Frames button to switch back. You can switch back and forth, depending on how you want to view your sound.

4. Click Zoom Out until you can see the entire waveform.

The waveform appears to end at around 240 frames, or about 10 seconds.

5. Drag the right end of the time slider to the left to about frame 45.

The sound shortens by being clipped from the end. The sound now plays for about 45 frames.

6. Click OK to accept the changes you’ve made.

The waveform on the main Timeline indicates the shortened sound.

1. Select the first keyframe of the sounds layer.

2. In the Properties panel, click the Edit Sound Envelope button.

The Edit Envelope dialog box appears.

3. Select the Frames viewing option, and zoom in on the waveform to see its end near frame 45.

4. Click the left channel level above frame 20.

A box appears on the line, indicating a keyframe has been added for the sound volume.

5. Click the left channel level above frame 45 and drag it down to the bottom of the channel.

The downward diagonal line indicates the drop in volume level from 100% to 0%.

6. Click the corresponding keyframe on the right channel level and drag it down to the bottom of the channel. Click OK to close the dialog box.

1. Select the first keyframe of the sounds layer.

2. In the Properties panel, choose None from the Name menu.

The sound is removed from the Timeline.

3. Now let’s add a different sound. Choose Africanbeat.mp3 from the menu.

The Africanbeat.mp3 sound is added to the Timeline. The settings in the Edit Envelope dialog box that clip the sound and fade it out are reset (since you chose None to remove the Afrolatinbeat.mp3 sound). Return to the Edit Envelope dialog box to customize the Africanbeat.mp3 sound in the same way as the previous sound.

1. In the Library panel, double-click the icon of the button symbol called sound_button1.

You enter symbol-editing mode for that button symbol.

The three layers in the button symbol help organize the content for the Up, Over, Down, and Hit states.

2. Insert a new layer and rename it sounds.

3. Select the Down frame in your sounds layer and insert a keyframe.

A new keyframe appears in the Down state of your button.

4. Drag the Monkey.wav file from the sounds folder in your Library panel to the Stage.

A waveform for the Monkey.wav file appears in the Down keyframe of the sounds layer.

5. Select the Down keyframe in the sounds layer.

6. In the Properties panel, in the Sound section, choose Start from the Sync menu.

When Sync is set to Start for a keyframe, the sound is triggered whenever the playhead enters that particular keyframe.

7. Choose Control > Test. Test the first button to hear the monkey, and then close the preview window.

8. Edit sound_button2 and sound_button3 to add the Lion.wav and the Elephant.wav sounds to their Down states. Click Scene 1 in the Edit bar to exit symbol-editing mode.

Deploying video varies depending on whether you’re working in an ActionScript 3.0, AIR for Desktop, AIR for Android, AIR for iOS, or HTML5 Canvas document.

Using the FLVPlayback component allows you to keep the video separate from your Animate file. If you have a very short video clip, you can use the second option, which is to embed the video directly inside your Animate file.

To embed a video in your ActionScript 3.0 or AIR document, your video must be an FLV file, an older format that uses a different codec. Embedding video is a less common way of handling video, so most of your work with video will be done with MP4 files using H.264 encoding.

1. Launch Adobe Media Encoder CC.

The opening screen displays the Queue panel in the upper right, which shows any current video files that have been added for processing. The Queue panel should be empty. The other panels are the Encoding panel, which shows any video currently being processed; Media Browser, which lets you navigate to find computer for video files; and the Preset Browser, which provides commonly used predefined settings.

2. Choose File > Add Source, or click the Add Source button (with the plus sign icon) in the Queue panel.

A file navigation dialog box opens to allow you to select a video file.

3. Navigate to the Lesson09/09Start folder, select the Penguins.mov file, and click Open.

The Penguins.mov file is added to the queue of files for processing and is ready for conversion to your choice of video format.

1. In the first column under Format, stick with the selected default, H.264.

H.264 is a widely accepted codec for web videos and works with Animate’s video components.

2. Click the arrowhead in the Preset column to open the Preset menu.

The video presets determine the dimensions of the video and the quality of the video based on specific playback platforms and devices. Keep the current selection at Match Source – High bitrate.

3. Click the name of the preset you just chose.

The Export Settings dialog box appears, with advanced settings for cropping, resizing, clipping, and many other video and audio options. You’ll resize the penguin video so that it fits comfortably on the Stage of your zoo kiosk project.

4. Click the Video tab. Deselect Match This Property To The Source Video to allow the video to be resized and enter 432 for the Width. Click outside the field to accept the change.

Because the Constrain Proportions option is selected (chain link icon), Animate modifies the Height to 320 to keep the proportions of your video consistent.

5. Click OK.

Animate closes the Export Settings dialog box and saves your advanced video and audio settings.

6. Click the link under the Output File column.

The Save As dialog box appears. You can choose to save the converted file in a different location on your computer or choose a different filename. Your original video will not be deleted or altered in any way. For this exercise, click Cancel.

7. Click the Start Queue button (with the green triangular icon) in the upper-right corner.

Adobe Media Encoder begins the encoding process. The Encoding panel shows the progress of the operation (along with a preview of the video) and the encoding settings.

When the encoding process finishes, “Done” appears in the Status column of the Queue panel.

You now have the Penguins.mp4 file in your Lesson09/09Start folder along with the original Penguins.mov file.

1. Drag the playhead (top blue marker) to scrub through your video to preview the footage. Place the playhead at the point where you want your video to start playing.

The current-time indicator at the left end of the Timeline shows the position of the playhead in hours, minutes, seconds, and frames.

2. Click the Set In Point button.

The In point moves to the current position of the playhead.

3. Drag the playhead to the point where you want your video to stop.

4. Click the Set Out Point button.

The Out point moves to the current position of the playhead.

5. You can also simply drag the In and Out point markers to bracket the desired video segment.

The highlighted portion of your video between the In and Out point markers will be the only segment of your original video that will be encoded.

6. Drag the In and Out points back to their original positions, or choose Entire Clip from the Source Range menu, because you do not need to adjust the video length for this lesson.

You can choose one of the options from the top Preset menu. At the bottom, you can navigate to advanced video and audio encoding options using the tabs. At the very bottom, Animate displays the estimated output size.

1. In the Export Settings dialog box, click the Save Preset button.

2. In the dialog box that opens, provide a descriptive name for the video and audio options. Click OK.

3. In the Export Settings dialog box, click OK to return to the queue of videos. You can apply your custom settings to additional videos by simply choosing an item from the Preset menu or from the Preset Browser panel.

4. Press Ctrl+Q/Command+Q to quit Adobe Media Encoder.

Your videos are independent of your Animate project. Keeping videos external ensures that you can edit them separately and that the videos can maintain different frame rates from your Animate project.

1. Open your 09_workingcopy.fla project in Animate CC.

2. Select the keyframe labeled penguins in the videos layer.

3. Choose File > Import > Import Video.

The Import Video wizard appears. This wizard guides you step by step through the process of adding video to Animate.

4. In the Import Video wizard, select On Your Computer and click Browse.

5. In the Open dialog box, select Penguins.mp4 from the Lesson09/09Start folder and click Open.

The path to the video file is displayed under the Browse button.

6. Select Load External Video With Playback Component. Click Next or Continue.

7. In the next screen, you choose the skin, or the style of the interface controls for the video. From the Skin menu, choose the third option from the top, MinimaFlatCustomColorPlayBackSeekCounterVolMute.swf, if it’s not already chosen.

The skins fall into three broad categories. The skins whose names begin with “Minima” are the latest designs and include options with a numeric counter. The skins that begin with “SkinUnder” use controls that appear below the video. The skins that begin with “SkinOver” include controls that overlap the bottom edge of the video. A preview of the skin and its controls appears in the preview window.

8. Click the Color box and select#333333 with 75% Alpha. Click Next or Continue.

9. On the next screen of the Import Video wizard, review the information for the video file, and then click Finish to place the video.

10. Your video with the selected skin appears on the Stage. Place the video on the left side of the Stage.

An FLVPlayback component also appears in your Library panel.

11. Choose Control > Test. After the musical introduction, click the Magellanic Penguins button.

The FLVPlayback component plays the external penguin video with the skin you chose in the Import Video wizard. If your video does not play, check to make sure your MP4 video file is in the same folder as your FLA file. In the Properties panel, Component Parameters section, the Source item indicates the path to the video file.

Close the preview window.

12. The other animal videos have already been encoded and provided in the 09Start folder. Import the Mandrill.mp4, Tiger.mp4, and Lion.mp4 videos in each of their corresponding keyframes and position them on the Stage in the same location as the Penguins.mp4 movie. Choose the same skin as the Penguin.mp4 video.

Individual properties are listed in the left column, and their corresponding values are listed in the right column. Select one of the videos on the Stage, and then choose from among the following options:

• autoPlay: When selected, the video plays automatically. When deselected, the video is paused on the first frame.

• skinAutoHide: Select this option to hide the controller and display it only when users roll their mouse cursor over the video.

• skin: This displays the name of your current skin file. Click the name to open the Select Skin dialog box and make another choice from the Skin menu.

• skinBackgroundAlpha: To change the transparency of the skin, enter a decimal value from 0 (totally transparent) to 1 (totally opaque).

• skinBackgroundColor: To change the color of the skin, click the color chip and select a new color.

• source: This displays the name and location of the video file that Animate seeks to play. To change either of those, click the file information.

In the Content Path dialog box that appears, enter a new filename or click the Folder icon to choose a new file to play. The path is relative to the location of your Animate file.

Transparencies in video (called alpha channels) are supported only in the FLV format using the On2 VP6 codec. Although the FLV format is no longer supported in Adobe Media Encoder CC, previous versions of Media Encoder can still export to FLV. When encoding a video with an alpha channel from previous versions of Adobe Media Encoder, be sure to choose Edit > Export Settings, click the Video tab, and then select the Encode Alpha Channel option.

You’ll import the video file, which is already encoded with an alpha channel in FLV format, into Animate for display with the playback component.

1. Insert a new layer called popup video above the videos layer.

2. Insert a keyframe at frame 51 and insert another keyframe at frame 86.

You’ll place the video of the zoo director at the end of the musical introduction at the same time the stop action appears (frame 51). The keyframe at frame 86 ensures that the video of the zoo director disappears from the Stage when the animal videos appear.

3. Select the keyframe at frame 51.

4. Choose File > Import > Import Video.

5. In the Import Video wizard, select On Your Computer and click Browse. Select the Popup.flv file in the Lesson09/09Start folder and click Open.

6. Select Load External Video With Playback Component. Click Next or Continue.

7. Choose None for the skin. Click Next or Continue.

8. Click Finish to place the video.

The video of the zoo director with a transparent background appears on the Stage. Move the video so its bottom edge lines up with the top edge of the navigation bar. Make x=260 in the Properties panel.

9. Choose Control > Test.

After the musical introduction, the zoo director appears and gives a brief talk. If you click one of the animal video buttons, the popup video is removed from the Timeline. If your video does not play, make sure that your video file is in the same folder as your FLA project file.

Keep in mind the following limitations of embedded video: Animate cannot maintain audio synchronization in embedded video that runs more than 120 seconds. The maximum length of embedded movies is the maximum length of any timeline, which is 16,000 frames. Another drawback of embedding your video is the increase in the size of your Animate project, which makes testing the movie (Control > Test) a longer process and the authoring sessions more tedious.

Because the embedded FLV plays within your Animate project, it is critically important that your FLV have the same frame rate as your Animate file. If not, your embedded video will not play at its intended speed. To make sure your FLV has the same frame rate as your FLA, be sure to set the correct frame rate in the Video tab of Adobe Media Encoder. Since the FLV format is not supported in Adobe Media Encoder CC 2014 or later, you must use a previous version of Adobe Media Encoder to convert your video files to FLV. In this section, the FLV-formatted video file has already been prepared for you.

1. Working in the file 09_workingcopy.fla, select the first frame of the popup video layer.

2. Choose File > Import > Import Video. In the Import Video wizard, select On Your Computer and click Browse. Select the polarbear.flv file in the Lesson09/09Start folder and click Open.

3. In the Import Video wizard, select Embed FLV In SWF And Play In Timeline. Click Next or Continue.

4. Deselect Expand Timeline If Needed, and deselect Include Audio. Click Next or Continue.

5. Click Finish to import the video.

The video of the polar bear appears on the Stage. Use the Selection tool to move it to the left side of the Stage.

The FLV also appears in your Library panel.

6. Choose Control > Test to see the embedded video file play from frame 1 to frame 49.

Next, you’ll apply a motion tween to the embedded video so it elegantly fades out just before the zoo director pops up and speaks.

1. Select the embedded video of the polar bear on the Stage; then right-click it and choose Create Motion Tween.

2. An alert asks if you want to convert the embedded video to a symbol so it can apply a motion tween. Click OK.

3. Animate asks if it should add enough frames inside the movie clip symbol so that the entire video can play. Click Yes.

A motion tween is created on the layer.

4. Right-click frame 30 of the popup video layer and choose Insert Keyframe > All (F6).

5. While your playhead is still at frame 30, select the movie clip containing the embedded video on the Stage, and in the Properties panel, in the Color Effect section, choose Alpha from the Style menu and set the Alpha value at 100%.

6. Move the playhead on the Timeline to frame 50.

7. Select the movie clip containing the embedded video on the Stage, and in the Properties panel, in the Color Effect section, change the Alpha value to 0%.

Animate inserts a new keyframe at frame 50 with the Alpha value for your selected movie clip at 0%. The instance fades out from frame 30 to frame 50.

8. Choose Control > Test to see the embedded video play and fade out.

Your interactive zoo kiosk is complete!

2. What is a skin for a video?

3. What is the correct format for using video in an HTML5 Canvas document?

4. What is the correct video format if you want to embed a video in an ActionScript 3.0 or AIR document?

5. How do you export an Animate animation into a video that’s compatible with a specific device?

2. The skin is the combination of functionality and appearance of video controls, such as Play, Fast Forward, and Pause buttons. You can choose from a wide array of combinations with the buttons in different positions, and you can customize the skin with a different color or level of transparency. If you don’t want viewers to be able to control the video, select None from the Skin menu.

3. To play video with the Animate video playback component, video files must be encoded in the H.264 format. Adobe Media Encoder CC, a separate application, allows you to import many kinds of media types, and trim, crop, and export to an H.264-encoded MP4 video file.

4. To embed video in an ActionScript 3.0 document, video files must be encoded in the FLV format, an older codec.

5. In Animate CC, you can export an animation as a video by choosing File > Export > Export Video. The video can be exported with or without the Adobe Media Encoder. In the Media Encoder, you can configure encoding options or choose Preset options that target various platforms, such as the Amazon Kindle, Barnes and Noble Nook, Apple iPhone, Google Android, and other devices.