VIDEO 529 The source files are available online from either of the following sites:  www.FoundationFlashCS4.com  www.friendsofED.com/download.html?isbn=1430229940 The authors would like to thank William Hanna, Dean of the School of Media Studies, at the Humber Institute of Technology and Advanced Learning in Toronto, and Robert O’Meara, a faculty member with the Film and Television Arts program at Humber, for permission to use many of the videos in this chapter. The videos were produced by students of Humber’s Interactive Multimedia program and Film and Television program. We also want to thank Phoebe Boswell for letting us use her student project—The Girl With Stories In Her Hair—and to her instructor, Birgitta Hosea, at Central Saint Martins College of Art and Design in London, UK, for introducing us to Phoebe. Video on the Web Before we turn you loose with creating and playing Flash video, it is critically important that you understand how it gets from the server to the user’s machine. The Flash video format uses the .mp4, .mov, .flv, or .f4v extension. The first two must be encoded using the H.264 codec and AAC encoding for the audio track. It plays only in Flash, Adobe Bridge, or Adobe Media Player (a free AIR application available from www.adobe.com/products/mediaplayer/). The key thing about this format is that the data is sent to the user’s computer from the server, and then Flash Player plays it. To help you understand this process, let’s go visit the Hoover Dam in the United States. The Hoover Dam was built in the 1930s to control the Colorado River. When the dam was completed, the water behind it backed up to form Lake Mead. Now the water flows along the Colorado River into Lake Mead, and the dam releases that water, in a controlled manner, back into the Colorado River. That means if the water rushes to the dam and overwhelms it, or the dam operator releases too much water, the people downstream from the dam are in for a really bad day. Streaming video is no different from the water flow to the Hoover Dam and beyond (see Figure 10-1). The data in the FLV is sent, at a data rate established when the video was encoded, from the server to Flash Player. The video is then held in a buffer and released, in a controlled manner, by Flash Player to the browser. If the flow is too fast—the data rate is too high for the connection—the browser is overwhelmed, and the result is video that jerkily stops and starts. This is because the buffer constantly emptying and having to be refilled. In many respects, your job is no different from that of the crew that manages the flow of water from the buffer behind the Hoover Dam back into the Colorado River. When you create the FLV, the decisions you make will determine whether your users are in for a really bad experience. www.zshareall.com Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. CHAPTER 10 530 Figure 10-1. When it comes to Flash video, you control the Hoover Dam. Video formats The first step in the process of creating the FLV file that will be used in the Flash movie is to convert an existing video to the FLV format. This means you will be working with digital videos that use the following formats:  AVI (Audio Video Interleave): A Windows format that supports a number of compression schemes but also allows for video without any compression  DV: The format used when video moves directly from a video camera to the computer  MPG/MPEG (Moving Pictures Experts Group): A lossy standard for video that is quite similar to the lossy JPG/JPEG standard for still images  MOV: The QuickTime format For those of you wondering about the WMV (Windows Media Video) format, yes, you can encode it. However, the encoding can be done only on a Windows computer. This book is somewhat platform-agnostic, which explains why WMV didn’t make the video format list here. Do yourself and your users a favor, and check out the compressor used to create the video. If a lossy compressor was used, you are going to have a serious quality issue. The compressors used to create FLV files are also lossy, meaning you will be compressing an already-compressed video. Both the QuickTime player and Windows Media Player show you compressor information. In the QuickTime player, select Window ➤ Show Info. You will see a dialog box with movie information, including the compressor used, as shown in Figure 10-2. This book was purchased by flashfast1@gmail.com www.zshareall.com Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. VIDEO 531 Figure 10-2. QuickTime’s Movie info dialog box shows that the H.264 compressor was used for the The Girl With Stories In Her Hair video. Windows video files playing through the Windows Media Player are a bit different. Open a file in the Media Player, right-click the file’s name, and select Properties from the context menu. You will see the Properties dialog box, which identifies the video codec. Now that you know which file formats you can use, you also need to know that three output formats are available to you:  FLV: This is the common format used on the Web, which can be played by Flash Player 6 and higher.  F4V: This is the new kid on the block and was primarily developed to manage HD files that will need to be converted to a format that is used by Flash Player 9,0,115,0 or higher. Think of this as being an MP4 video for Flash, and you will be on the right track.  H.264: This is a common format that you might know better as MPEG-4 or MP4. It is an international standard (MPEG4 H.264) developed by the Moving Pictures Expert Group (MPEG) and is also recognized by the International Standardization Organization (ISO). www.zshareall.com Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. CHAPTER 10 532 From a Flash designer’s perspective, the H.264 format has some rather profound implications. The biggest one is that video, for all intents and purposes, has become untethered—it is not device-dependent. The file handed to you by your video producer can just as easily be played on a website as it can on an iPod, Sony’s PlayStation Portable, or high-definition television (HDTV). It also means that, thanks to the addition of hardware acceleration and multithreading support to Flash Player, you can play back video at any resolution and bitrate, including the full HD 1080p resolution you can watch on HDTV. Encoding an FLV Surprisingly, the first step in the conversion process has absolutely nothing to do with Flash. Instead, open the video in your player of choice and watch the video twice. The first time is to get the entertainment/coolness factor out of your system. The second time you watch it, ask yourself a few questions:  Is there a lot of movement in this video?  Is the audio of major importance?  Is there a lot of color in the piece?  Is the video in focus, or are there areas where the image becomes pixelated? The answers to these questions will determine your approach to encoding the video. To demonstrate encoding, we will use the Rabbit.mov file, located in this chapter’s Exercise folder. Go ahead and open this file in QuickTime, and watch it twice. Yes, the file is huge: just over 70MB. There is a reason. When creating Flash video, you need every bit of information contained in the video when you do the conversion. Uncompressed video is about as big as it gets. When you finish converting the video into an FLV, you will be in for a rather pleasant surprise. Using the Adobe Media Encoder To encode video, you use the Adobe Media Encoder CS5. This used to be known as the Adobe Flash Video Encoder. The name change is deliberate. Adobe came to the conclusion that the Flash brand name was being attached to a lot of stuff, and there was understandable concern that the brand was becoming diluted. The release of Creative Suite 4 started the process of Adobe’s refocusing of the Flash brand. If you have used Flash to encode video in previous, pre-CS4, iterations of the application, you will find that things have really changed. To begin, open the Adobe Media Encoder, found in C:\Program Files\Adobe\Adobe Media Encoder CS5 on a Windows computer or Macintosh HD\Applications\Adobe Media Encoder CS5 on a Mac. Then drag a copy of the Rabbit.mov file from your Exercise folder into the render queue, as shown in Figure 10-3. Alternatively, you could click the Add button or select kFile ➤ Add. Then, using the Open dialog box, navigate to your Exercise folder for this chapter, select the video, and click the Open button to add the video to the queue. Just be aware that once a video is added to the queue, the clock starts running. If you do nothing within the couple of minutes you get, the video will be created using the default settings. www.zshareall.com Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. VIDEO 533 The drop-down lists in the Format and Preset areas actually aren’t as complicated as they may first appear. The Format drop-down list offers the format choices FLV/F4V and H.264. The Preset list includes presets for a variety of situations and formats. To keep this chapter manageable, we aren’t going to go deep into the choices and formats. Instead, let’s just create a simple FLV file that will allow you to explore this application. Click the Preset drop-down arrow, and select Edit Export Settings at the bottom of the menu. This will open the Export Settings window, as shown in Figure 10-4. At the left is a preview area. The area underneath the video preview is where cue points can be added. We’ll talk about cue points later in this chapter. The right side of the window consists of a series of tabs that allow you to choose a preset encoding profile, select a filter, choose an output format, set the video compression, and set the audio compression. Figure 10-3. A file is in the render queue waiting to be encoded. www.zshareall.com Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. CHAPTER 10 534 Figure 10-4. The Export Settings window We are not huge fans of the encoding presets in the Preset drop-down list. The problems with the presets are that they assume the lowest common denominator, tend to be wrong, and result in files that are unnecessarily large. For example, many of the presets have the audio track encoded to stereo, which, as we explain later, usually just increases the file size and bandwidth demand, without adding any quality to the audio. Making your own choices for the encoding, rather than using presets, puts you in control of the process and allows you to produce files that meet your specific design needs, instead of satisfying a broad, homogenous audience. Previewing and trimming video Under the preview area is the current time indicator. It displays time in the format hours: minutes: seconds: milliseconds. The triangle at the top of the line is the jog controller. If you drag it back and forth, the video will follow along. Underneath the jog controller are two other triangles. The one on the left is the In point, and the one on the right is the Out point. You can use these to trim the video. For example, assume there are two www.zshareall.com Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. VIDEO 535 seconds of black screen and no audio at the end of the video. If you drag the Out point to the start of the stuff you don’t need, it will be removed when you create the FLV. Here’s a neat little trick that can help with setting In and Out points. The preview controls are very precise, and reaching an exact point in time can be an exercise in tedium. Assume you want the current video to last 4 minutes and 14 seconds instead of 04:14:53. Drag the playhead slider rightward to the end of the video. Press and hold the left arrow key. When the key is down, the milliseconds measure will reduce. When you are close to the 000 milliseconds point, release the key, and then click the Out point slider. The video will now have an Out point at that precise point in time. Video settings On the right side of the Export Settings window, click in the Format tab, and click the FLV radio button. Then click the Video tab to open the Basic Settings area, as shown in Figure 10-5. This is where you set the all-important video data rate. If you want to change the name of the video, double-click the Output Name on the right side of the Export Settings window to open the Save As dialog box. All this does is save the filename. It does not create the FLV. Figure 10-5. Setting the encoding values for the video portion of the movie www.zshareall.com Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. CHAPTER 10 536 The various areas of the Video pane are as follows:  Codec: The job of the codec (short for COmpressor/DECompressor or enCOder/DECoder) is to reduce the data rate while maintaining image quality. In simple terms, there are two types of codecs: lossy and lossless. Lossless codecs, like QuickTime’s Animation codec, add minimal compression to preserve data, which explains why these files are massive and inappropriate for direct web playback. The two codecs that are available for your selection here—Sorenson Spark and On2 VP6—are lossy. They preserve playback quality while tossing out a ton of information, which explains how a 1MB video file becomes an 800KB FLV or F4V file. Note that If your target is Flash Player 7 or lower, your only choice is the Sorenson Spark codec. For our example, select On2 VP6.  Encode Alpha Channel: If your video contains an alpha channel, select this. Alpha channel video can be encoded using the On2 VP6 codec only. For our example, this option should not be selected.  Resize Video: If this is selected, deselect it. This is not the place to resize video. If you really need to resize a video, do it in Adobe Premiere, After Effects, Final Cut Pro, or another video- editing application. If you need to resize a video, be sure to maintain the video’s aspect ratio. When digital video is created for your television, it is created at a 4:3 ratio. This ratio is called the video’s aspect ratio and fits most computer monitors. Other common examples would be widescreen television video, which has an aspect ratio of 6:5, and HDTV, which uses a 16:9 aspect ratio. For example, the video you are encoding has a physical size of 320 pixels wide by 240 pixels high. The width is easily divisible by 4, and the height is divisible by 3. By maintaining the aspect ratio, you avoid introducing artifacts (blocky shapes and other nastiness) into the video when it is resized. While we are on the subject of resizing video, never increase the physical size of the video. If you need to change the size, use this area to reduce, not increase, the width and height values. Increasing the physical dimensions of the video from 320  240 to 640  480 will only make the pixels larger, just as it does in Photoshop and Fireworks when you zoom in on an image. The result is pixelated video, and it will also place an increasing strain on the bandwidth, or flow of data into Flash Player. In spite of our having said to never increase the size of a video, Flash Player 9,0,115,0 (and higher) now permits full-screen video playback. We’ll review this feature later in the chapter. It changes video size in an exception-to-the-rules way. www.zshareall.com Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. VIDEO 537  Frame Rate [fps]: This is how fast a video plays, measured in frames per second (fps). If you are unsure of which frame rate to use, a good rule of thumb is to choose a rate that is half that of the original file. If the original was prepared using the NTSC standard of 29.97 fps (close enough to 30), select 15 fps. If the PAL standard was used (25 fps), rates of 12 or 15 fps are acceptable. Of course, with the improvements to Flash Player, the industry is steadily moving toward 24 fps. For this example, set Frame Rate to 15.  Bitrate Encoding: Your choices are CBR (for constant bitrate) and VBR (for variable bitrate). If you are streaming video through Flash Media Server 3 or using the Flash Video Streaming Service, choose CBR, which, as the name implies, provides a level bitrate into Flash Player. Choose VBR if you are intending to use a web server making standard HTTP requests. For this example, select VBR.  Encoding Passes: One pass means the video analysis and encoding are done at the same time. Two passes means the encoder analyzes the video in the first pass looking for major changes, and the second pass encodes the video to accommodate those changes. So, what’s the difference? Two-pass encoding is the best for videos with numerous bitrate changes. For example, you could have a video with a narrator who stays put for the first few seconds of the video and, when he finishes, race cars go roaring by. The narration doesn’t require much to play, but the cars zipping by will require a higher bitrate to display accurately. Encoding in two passes allows the bitrate savings at the start of the video to be passed on to the action sequence. So, Two is the right choice for our example.  Bitrate [kbps]: This slider sets the bitrate for the video portion of the encoding process in kilobits per second (kbps). Be very careful when choosing a Bitrate setting. For example, don’t think you can supersize the quality and set the data rate to, say, the maximum of 10,000 kbps. Do that, and you can guarantee that residents downstream from the Hoover Dam are in for a day that involves scuba gear. The data rate for an FLV is the sum of the audio and the video data rates. What should you choose? Until you become comfortable with creating FLV files, consider a combined audio and video data rate of around 350 kbps to 400 kbps as being a fair target. For the example, use 300 kbps.  Set Key Frame Distance: This is in the Advanced area for a reason. Unless you have mastered video, it is best to let the software do the work and leave this option unselected.  Key frame interval: Enter a value here, and the Key frame placement selection will change to Custom. Remember that first question we asked you to consider at the start of the chapter: is there a lot of movement? The answer determines key frame placement. If you are recording paint drying, having a key frame every 300 frames of the video would work. If you are encoding a video of a Formula One race from trackside, you will want the key frames to be a lot closer to each other, such as every 30 frames or so. After you’ve set the video values, click the Audio tab, not the OK button, to continue. www.zshareall.com Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. CHAPTER 10 538 Audio settings The Audio pane, shown in Figure 10-6, is where you manage the audio quality. As we pointed out in Chapter 5, the default format for all audio in Flash is MP3. This explains why you have only that one choice in the Audio pane. Figure 10-6. Setting the data rate for the audio portion of the movie You need to make two decisions here:  Will it be stereo or mono?  What will the data rate be? Unless there is a persuasive reason—you are encoding a band’s video, for instance—stay with a Mono setting for Output Channels. Don’t think you can improve the audio track by outputting it as a stereo track if it was originally recorded in mono. You can’t change mono to stereo. All that does is double the size of your audio by playing two synchronized mono tracks. Outputting stereo will only serve to increase the final file size of the FLV. Twirl down the Bitrate Settings. For Bitrate [kbps]; you should generally choose either 48 or 64. Anything lower results in an increasing degradation of audio quality. Anything higher only serves to increase the demand on the bandwidth, with no appreciable quality gain. Still, 32 kbps is a good choice if the soundtrack is nothing more than a voice-over, and 16 kbps is ideal if the soundtrack is composed of intermittent sounds such as the buzzing fly sound used in the Butterfly project that started this book. For this example, select 64 from the Bitrate [kbps] drop-down menu. www.zshareall.com Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. [...]... CS4 and its CS5 reincarnation are rather startling In many respects, the CS5 version is a sleek, well-oiled machine dedicated to a sole purpose: create video for Flash Player For example, if you were to click the Export formats available box for the Vultures.mp4 file in the CS4 render queue, you would be presented with a list of 16 potential formats ranging from Audio Interchange File Format to MPEG2... F4V format was introduced in conjunction with Flash Player’s ability to play H.264-encoded files Even though mov files encoded with the H.264 compression can be played directly out of Flash Player, the F4V format offers one significant difference: these files can’t be played anywhere but through Flash Player and can’t be converted to another format and subsequently edited Based on the ISO base media format,... to the formats preferred by Vimeo, YouTube, and Apple’s iPod and Apple TV devices If you select one of the 3GPP choices—a common video format for cell phones—the Open in Device Central area lights up With the advent of Flash Player 10.1 and the increasing growth of the Android platform, the Adobe Media Encoder CS5 is destined to be the device workhorse when it comes to video When you select the format... when a video is destined for more than web playback Figure 10-13 You can preview the file in Device Central 545 www.zshareall.com Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark CHAPTER 10 Playing an FLV in Flash CS5 After encoding the video, you’re ready to have it play in Flash There are three ways to accomplish this task: Let the wizard do it for you Use the FLVPlayback... the original file size Batch encoding If there was one common complaint about encoding videos for Flash, it was that there was no way of encoding a bunch of them all at once Third-party software, such as Sorenson Squeeze and On2’s Flix Pro, allowed for batch processing, but this feature was unavailable in Flash that is, until now Here’s how to encode a folder full of videos: 1 Create a folder on your... of which approach you may choose, the end result is the same: you are in the Flash video business Using the wizard We’ll begin with an example of using the wizard We’ll cover the steps involved in actually adding video to Flash If you have never used Flash video, this is a great place to start Let’s get going: 1 Create a new Flash document, and select File ➤ Import ➤ Import Video This will open the Import... with playback component radio button This tells Flash it needs to stream the video into Flash Player If you have a lot of videos, you may have put them in a folder on your website In this case, you need to add an absolute path to the file The path to Rabbit.flv would be www.mySite.com/FLVfile/ Rabbit.flv The path to the Flash Video Streaming Service or Flash Media Server would be a bit different—something... bet you didn’t expect to see the video jammed into a small area This book was purchased by flashfast1@gmail.com The reason is, the snippet uses the default size for a video object, which is 320 x 240 In many respects we set you up for that one to show you that an unhealthy reliance on “prerolled code” can have unforeseen consequences Let’s fix this 7 Select the first frame of the Actions layer, and open... MPEG2 Blu-ray The CS5 version gives you two choices: H.264 and FLV/F4V The H.264 format is the most important because it is the most ubiquitous You can find it playing video on everything from an iPod to a 60-inch HD screen and from YouTube and Vimeo to your cell phone Another really interesting aspect of the Adobe Media Encoder can be found in the Export Settings dialog box If your output format is H.264,... Split-Merge on www.verypdf.com to remove this watermark VIDEO is becoming a secure format for HD video because the video track is encoded using H.264 and the audio is compressed using the AAC compression standard As well, it is ideally suited to video with the 16:9 aspect ratio, whereas FLV has always been the choice for video with a 4:3 aspect ratio Here’s how to create an f4v file: 1 Open the Adobe . Group): A lossy standard for video that is quite similar to the lossy JPG/JPEG standard for still images  MOV: The QuickTime format For those of you wondering. used by Flash Player 9,0,115,0 or higher. Think of this as being an MP4 video for Flash, and you will be on the right track.  H.264: This is a common format