IN THIS CHAPTER
Compressing video in Flash CS5
Using the Video Import wizard
Unleashing the FLVPlayback component
Adding cue points to video clips
Playing alpha video .flv files
One of the most exciting features introduced with Flash Player 6 was the power to add digital video footage to a Flash movie file (.swf)! Designers and developers alike had long awaited this feature. With Flash Player 6 or later, video encoded with Sorenson Spark codec can be played without relying upon additional browser or system plug-ins such as Apple QuickTime or RealNetworks RealPlayer. Flash Player 7 improved the capabilities and performance of video playback, enabling you to load .flv files directly into Flash movies at runtime from a standard Web server, without the aid of Adobe Flash Media Server. With Flash Player 8, you could take advantage of another video codec, the On2 VP6 codec, which yields better compression (that is, smaller file size) with superior image quality to the Sorenson Spark codec used in Flash Player 6 and 7. With Flash Player 9, the power of full-screen mode was added to present your Flash Video content larger than life! Now, with Flash Player 10, you can deploy video by using the AVC/H.264 video codec and the AAC audio codec — these codecs are among the highest-quality codecs available today.
Note
Adobe added the AVC/H.264 and AAC playback capabilities to Flash Player 9.0.115, also known as Flash Player 9 Update 3. That version was made available to the public between the Flash CS3 and Flash CS4 releases.
Adobe has added more tools to make it easier for you to integrate video into your Flash movies. In this chapter, I show you how to perform a wide range of video procedures, from importing a source clip to playing the video clip within the FLVPlayback component.
In Flash CS5, there are three ways in which you can deploy video content. The following sections provide a high-level overview of these methods.
Note
You can also play Flash-compatible video content in Adobe AIR applications by using any of the methods discussed in the following sections.
Starting with Flash Player 7–compatible movies, you can load Flash Video files (.flv) at runtime. When we say "runtime," we mean that you can create a separate Flash Video file (.flv), upload it to your Web server, and use ActionScript code or a component to load the video directly into your Flash movie (.swf) as it plays in the browser. You can create Flash Video files by:
Importing a video file into a Flash document, and then exporting the Embedded Video symbol from the document's Library panel as a Flash Video file (.flv)
Encoding a Flash Video file with the Adobe Media Encoder CS5 application, which is part of Flash CS5
Using a third-party video compression tool designed to export Flash Video files (.flv) such as Sorenson Squeeze, On2 Flix, Telestream Episode Pro, or Rhozet Carbon Coder
In the previous section, you learned that it's possible to load a Flash Video file directly into a Flash movie file (.swf) as it plays in a browser. However, when you use this type of loading, the Flash Video file is loaded and cached as any other asset accessed at runtime. As such, if you have a large video file but only want to watch the last portion of the video, you'll have to wait until most of the video file has been downloaded.
One way you can offer your users the fastest access to Flash Video files (.flv) is to stream the video in real time with Adobe Flash Media Server (also known in previous editions as Macromedia Flash Communication Server) or a Flash Video Streaming Service provider. With this server technology, a Flash Video file is only temporarily cached on the playback computer. You can more easily protect copyrighted material, and users can seek to any point in the video with minimal wait times.
Note
Adobe Flash Media Server is a specialty server product that works separately from a standard Web server. You can set up and install your own Flash Media Server, or you can purchase hosting from companies such as Influxis.com.
The third method that you can use to view video is to embed the video file in the Flash document file (.fla), where it is then published directly inside the Flash movie file (.swf). This method is compatible with Flash Player 6 or later movies. Adobe Media Encoder CS5 can encode your video with the Sorenson Spark, On2 VP6, or the AVC/H.264 codec (discussed later in this chapter). It's important to understand that these codecs don't require additional plug-ins for playback — the Web user needs only to have Flash Player 6 or later (for Sorenson Spark), Flash Player 8 or later (for On2 VP6), or Flash Player 9.0.115 or later (for AVC/H.264) installed on the browser. Flash-compatible video codecs do not use any system-level video codecs; the codecs are built into the Flash Player plug-in.
When you import a video clip as an Embedded Video object, the video is stored in the library as a Flash Video file (.flv).
Warning
You can only embed .flv files in a Flash document. AVC/H.264 video content cannot be embedded into a Flash document.
Tip
You can also use a third-party application to create a Flash movie file (.swf) with embedded video.
Digital video, as with other external media assets that Flash can import, is something that you need to create before working with it in a Flash document. In today's economic climate, you might not only be a Web designer or developer; you might also wear the part-time hat of a videographer. Be sure to read our coverage of video in Appendix D for a primer on shooting and producing better-looking video. The appendix also discusses the various video formats that you can import into Flash CS5.
After you have created a video file in the desired import format, you're ready to prepare the video for use in a Flash movie. This section introduces you to the AVC/H.264, On2 VP6, and Sorenson Spark codec options available for Flash-based video content. In the latter half of this section, we walk you through the process of importing one of the sample files on this book's CD-ROM.
Flash Player 9.0.115 and later can play MPEG-4 files that use the AVC/H.264 codec. This codec is one of the best video codecs available today and is used for a number of video deployment applications, from Web-based video to Blu-ray HD content to high-quality consumer video camcorders. The AVC/H.264 codec has been licensed by Adobe from MPEG-LA (www.mpeg-la.com) for noncommercial playback in the Flash Player. Flash Player 8 and later movies have the capability to use another high-quality video codec, On2 VP6. This codec, created by On2 (www.on2.com), has been licensed by Adobe to be used with Flash Player distribution. Both the AVC/H.264 and On2 VP6 codecs feature superior compression and image quality compared to the Sorenson Spark codec introduced with Flash Player 6.
Note
As mentioned in the previous paragraph, Adobe has licensed only a noncommercial usage of the AVC/H.264 codec. MPEG-LA has a summary of licensing options for commercial content on their Web site at www.mpegla.com.
Note
You can view side-by-side comparisons of equivalent bitrate Flash Video files with an example on this book's support site at www.flashsupport.com/bonus/codec_comparison. You can compare the quality of an AVC/H.264, On2 VP6, and Sorenson Spark file.
The AVC/H.264 codec, however, doesn't come without a price. Playback of AVC/H.264 content requires Flash Player 9.0.115 or later. Adoption of Flash Player 9.0.115 is already past the 80 percent mark, as evidenced by recent surveys Adobe has conducted. Furthermore, AVC/H.264 files may require more CPU power and more RAM (memory) to play compared to older Flash-compatible video codecs. Slower machines, such as Apple Power Mac G3 computers and Pentium II computers, may have trouble playing back AVC/H.264 and On2 VP6-encoded files.
Tip
Make sure that you test your Flash Video file's playback on a variety of machines so that you accurately gauge your expectations for the target audience(s) of your Flash content. Larger video frame sizes (greater than 320 × 240) with newer video codecs might tax the CPU of any computer using less than an Intel Core 2 Duo processor.
If you're willing to sacrifice some visual quality of your Flash Video content and want the security of appealing to a larger audience (that is, people who have Flash Player 8 or later), you may want to encode your video content with the On2 VP6 codec. Flash Player 8 is available on over 98 percent of desktop computers in mature markets! You could also opt to use the Sorenson Spark codec, which has the greatest compatibility of all Flash-based video codecs. Sorenson Spark video requires more data rate (or bitrate) than AVC/H.264 or VP6 for equivalent quality. The Sorenson Spark codec is the least processor-intensive codec available in the Flash Player — if you need to target slow devices, you may find that the Sorenson Spark codec is the best codec to use. The quality of Sorenson Spark encoding is not necessarily poor compared to other Web video codecs; however, Adobe Media Encoder CS5 can only encode video in the Basic edition of the codec. You need to use a third-party video encoder to encode video with the higher-quality Pro edition of the Sorenson Spark codec.
Note
Flash Player 8 and later can decode only VP6 video content. If you're broadcasting live camera output from a Flash movie to a Flash Media Server application, Flash Player 6 and later use the Sorenson Spark codec for all live streams. Adobe has released the Flash Live Media Encoder, a stand-alone application that can stream live AVC/H.264 or On2 VP6 video to a Flash Media Server. For more information on this product, go to:www.adobe.com/products/flashmediaserver/flashmediaencoder.
Video codecs can compress image data in two different ways — temporally and spatially. A temporal compression algorithm, or interframe compressor, compares the data between each frame and stores only the differences between the two. A spatial compression algorithm, also known as intraframe compression, compresses the data in each frame, just as the JPEG format compresses data in a still image. Most video codecs designed for Web playback, including AVC/H.264, On2 VP6, and Sorenson Spark, do not use a lossless compression technique. Rather, some color and detail information is thrown out in an effort to minimize the amount of data saved with each frame. For example, if the original video source recorded a sunset with 80 shades of orange, the compressed version of the sunset may include only 50 or fewer shades of orange. You may have noticed the extremes of lossy compression in Web videos where a person's face is hardly distinguishable, looking more blocky than human.
Note
Historically speaking, most new codecs developed in the last few years rely upon the ever-increasing computer processor speeds to efficiently decompress each frame of video on playback. For this reason, you may want to test video playback on a number of machines and devices that support your targeted Flash Player version and video decoding.
All Flash-based video codecs use interframe (temporal) compression, but they also use intraframe compression when making keyframes. (You will see how tricky keyframes can be in just a moment.) A keyframe in video footage is similar to a keyframe in a Flash timeline. A keyframe defines a moment in time where a significant change occurs. For example, if a section of video has three hard cuts from one scene to another to another, the compressed version of that video should have a keyframe at the start of each scene. A keyframe then becomes the reference for subsequent frames in the video. When the following frame(s) are compared to the keyframe, only the differences are remembered (or stored) in the video file. As soon as the scene changes beyond a certain percentage, a new keyframe is made in the video. Video keyframes are created while the movie is being compressed.
Warning
Video keyframes are the reason you should be careful with special effects or video filter usage in transitions from scene to scene in your video production software. The more frequently your video changes from frame to frame, the more keyframes your video file needs. Keyframes take up more file size than interframes between the keyframes, and if your video data rate can't accommodate the creation of those keyframes, the overall quality of your video degrades.
Flash CS5 ships with a stand-alone application called Adobe Media Encoders CS5. On Windows, you can find this application at Start Menu
When you run the Flash CS5 Video Encoder application, you see the interface shown in Figure 14.1.
The Adobe Media Encoder CS5 works as a batch processor for the same encoding engine that is used for other CS5 applications such as Adobe Premiere CS5 and Adobe After Effects CS5. You can specify all of your encoding settings in the Adobe Media Encoder CS5 application. Some benefits to using Adobe Media Encoder CS5 include:
Adding multiple source video files: You can drag and drop (or browse to) one or more video source files on your computer or network into the application's queue.
Duplicating settings: After you've specified the settings on one source clip, you can click the Duplicate button to add another entry in the queue with the same clip and its settings. You can then adjust the new duplicate's settings to a different data rate.
Saving the queue: You can save the list of video clips in the queue to resume work in another session. However, you can't save the queue list as an external project file.
Deinterlacing capability: If you have a source clip that is captured from an interlaced video source, such as NTSC footage from a miniDV or DVCAM camcorder, you can de-interlace the footage in Adobe Media Encoder CS5.
Cue point import/export: Adobe Media Encoder CS5 enables you to save your cue point data to an external XML file and create cue point data in an XML file that can be imported directly into the Cue Points tab of the tool.
Note
The encoding options available in Adobe Media Encoder CS5 depend on your installed Adobe CS5 applications. If you only have Flash CS5 installed, your encoding presets are limited to the FLV and F4V file formats.
You start the encoding process by dragging a video source file to the queue pane. You can also click the Add button to browse to a video source file on your system. After a source file is added to the queue, you determine how you want to compress the original source clip into the Flash-compatible video file. From the queue pane (shown in Figure 14.2), you can choose from 22 presets as a starting point for your preferred compression options.
The encoding profiles are listed in two formats, FLV (Flash Player 8 or later) and F4V (Flash Player 9.0.115 or later). Each of these formats has three general preset groups:
Same as Source: These presets create an output file whose dimensions and frame rate match that of the source file.
HD (High Definition) quality: The presets labeled with 1080p and 720p create output files with frame rates that match the source file and dimensions that are quarter, half, or full resolution HD. You should only use HD source files with dimensions that match the preset name. For example, if you have a 1080i or 1080p (1920 × 1080, or anamorphic 1440 × 1080) HD source file, you should use the 1080p presets if you want HD quality encoded Flash video. If you have a 720p (1280 × 720) HD source file, you should use the 720p preset for HD quality. 1080p quarter resolution HD is actually a misnomer; if you choose an HD quarter resolution preset, the output size is 480 × 270, which is one-sixteenth the resolution of 1920 × 1080. The 1080p half resolution HD preset is also a misnomer, and is the "real" quarter resolution preset, producing output at 960 × 540.
Web quality: These presets create various resolutions, frame rates, and data rates for deploying Flash-compatible video geared to Internet connection speeds.
After you have selected a preset, you can customize the encoding settings by clicking the name of the preset in the queue pane. In the following sections, we explore video and audio settings available within a preset. To follow along, add a source video clip to the queue pane, select a preset, and click the underlined preset name.
Tip
If you edit a preset, the preset name changes to Custom. You can save an edited preset as a new preset to reuse within Adobe Media Encoder CS5.
On the right-hand side of the Export Settings dialog box (shown in Figure 14.3), you can edit the video and audio compression settings. At the top of the Export Settings section, you can save a customized preset, load a preset, and delete a preset. You can also choose which tracks of the source clip you want to encode. By default, the Export Video and Export Audio boxes are selected.
Expand the displayed settings by clicking the mode toggle button (the double down-arrow button), shown earlier in Figure 14.3. Click the Video tab (shown in Figure 14.4) to control how the video track of the source file is encoded to the Flash Video (.flv) or the H.264 for Flash (.f4v) format.
The Basic Video Settings section of this tab has the following options:
Codec: This menu selects the codec used for compression. Sorenson Spark is the codec compatible with Flash Player 6 and later, whereas On2 VP6 is available in Flash Player 8 and later. If you choose a F4V preset, the MainConcept H.264 Video codec is automatically selected.
Encode alpha channel (FLV only): This option determines if an alpha channel in the source video file will be compressed and included with a FLV file using the On2 VP6 codec. We discuss the alpha channel encoding capability of the On2 VP6 codec later in this chapter.
Resize Video: This option resizes the original dimensions of the source video clip. If selected, you can enter a new width and height for the encoded Flash Video clip. If you've captured high-resolution video footage from your DV camcorder (that is, source video with dimensions of 640 × 480 or larger), you may want to reduce the frame size to a more Web-friendly size, such as 320 × 240. You can create smaller video file sizes with a combination of smaller video dimensions and reduced data rates. If you're using DV footage (or any footage with a non-square pixel aspect ratio), be sure to use proper square pixel sizes, such as 160 × 120, 320 × 240, and so on. Unlock the constraints by clicking the chain link button to the right of the width and height fields.
Frame Rate: This menu controls the encoded frame rate of the output video clip. The Same as source option encodes the video clip with the same rate as your original video clip. You can also choose fixed frame rates, from 10 frames per second (very choppy) to 30 frames per second (very smooth).
Field Order: This option enables you to control interlaced output. For Flash-compatible video, you should only choose None (Progressive).
Profile and Level: These options are available only for F4V and H.264 output. The Profile options include Baseline, Main, and High. If you're targeting playback on slower devices such as older Pentium or PowerMac computers, you may want to use the Baseline profile for H.264 because less processing power is required. If you're targeting modern computers, you should use the Main and High profiles. The High profile produces the best quality but requires the most processing power for playback. The Level menu's options conform your video settings to predefined H.264 specifications. Levels are defined from 1.0 to 5.1 — the higher the level, the larger the video dimensions and faster the frame rate.
The Bitrate Settings of the Video tab contain the following options:
Bitrate Encoding: This option, if available for your selected codec, enables you to control how the bitrate of the video track is encoded. CBR, or Constant Bit Rate, encoding is designed for real-time streaming deployment of video. If you plan to use an Adobe Flash Media Server (or equivalent RTMP hosting service) for your video deployment, use CBR encoding. VBR, or Variable Bit Rate, encoding is designed for local or HTTP playback. If you're planning to deploy your video content on a Web server, use VBR encoding.
Encoding Passes: This option determines how well the video track is analyzed during the encoding process. If you choose One, the encoder reads the source file and writes the output file sequentially frame by frame. If you choose Two, the encoder analyzes the source video clip with the first pass, looking for optimization points along the way, and then encodes and outputs the video file on the second pass. You should opt to use a 2-pass encoding setting whenever possible. The only reason you would choose 1-pass encoding is to create your output file more quickly for a draft video.
Bitrate: This slider controls the data rate used by the output video clip. This setting, more than any other, influences the file size and image quality of the encoded clip. The lower the bitrate, the lower overall quality you'll see in your output clip. If your codec selection enables only one bitrate slider, the value indicates the average bitrate for the entire clip. The H.264 codec enables you specify a Target (or average) Bitrate, as well as a Maximum Bitrate. The Maximum Bitrate is available only for VBR encoding. Generally speaking, you should use a bitrate between 300 and 800 Kbps for Web-based video content.
The Advanced Settings section of the Video tab contains the following option:
Set Key Frame Displacement: This option determines how often keyframes within the Flash Video content are created. As discussed earlier in the chapter, keyframes are needed to store differences between frames in the video clip. If you use the default value (deselected), Flash CS5 determines how often a keyframe should be generated. If you enable this option, you can specify your own keyframe interval with the slider. The lower the value you specify, the more frequently the encoder creates keyframes within the output video clip. The higher the value, the less frequently the encoder creates keyframes. Be very careful with custom settings here: If your data rate isn't high enough to support the keyframe interval you specify, the overall image quality is sacrificed to maintain the keyframe interval.
The Audio tab, shown in Figure 14.5, controls the compression settings for the audio track of the source video clip.
The Basic Audio Settings section of this tab has two options:
Codec: This option controls the audio codec used for the output clip. If you are targeting a .flv file, you can use only the MPEG Layer 3 (MP3) codec. If you are targeting a .f4v file, you can choose variants of the AAC codec, which is the next-generation MP3 codec. AAC + Version 1 and AAC + Version 2 are more complex audio codecs that produce higher-quality audio for equivalent bitrates, at the expense of higher computer processor utilization.
Output Channels: You can choose how the source video's audio track is output in the new compressed file. The Mono option mixes a stereo (dual channel) audio input into one channel. The Stereo option retains left and right channels from the source video clip. Unless your content demands stereo sound, we recommend using a single (mono) channel for audio output.
Frequency and Audio Quality: If you're using the AAC codec, you can choose a sampling rate and quality setting for the audio track. We recommend you use a sampling rate of 44.1 kHz or higher at High quality.
In the Bitrate Settings section of the Audio tab, you can set the following option:
Bitrate: You can modify the data rate of the audio channel, choosing a value between 16 to 256 Kbps (MP3) or 56 to 320 Kbps (AAC). Unless you're encoding high-quality musical scores, an audio data rate between 48 and 64 Kbps is usually adequate.
Note
The audio data rate is separate from the video data rate. As such, you should mentally add both rates to get a clear picture of the total data rate required for the Flash Video clip. For example, if you specify a video data rate of 400 Kbps and an audio data rate of 96 Kbps, the total data rate for the clip is 496 Kbps.
When you view the Export Settings in advanced mode, the cue points section appears at the lower-left side of the dialog box. This section enables you to insert embedded markers within the final output video file. The details of this section are discussed later in this chapter.
The Crop tool is available in the Source tab located at the upper-left corner of the Export Settings dialog box. The Crop tool enables you to change the borders (or cropping) and size of your original source clip before it is encoded.
Tip
Cropping video clips might be necessary if your original footage is letterboxed (that is, black bands are above and below the actual picture area of the clip) or if you captured video with an analog video capture card that retains black borders on the video clip.
When you finish specifying the encoding parameters for the clip, you're ready to encode the clip. After you close the Export Settings dialog box, you can click the Start Queue button in the main window of Adobe Media Encoder CS5, and your clip will go start compressing. When the .flv or .f4v file finishes the encoding process, you can use the video file with a Flash file.
In Flash CS5, you can import Flash-compatible video files by using the File
Note
If you want to use Flash Video in your Flash document, you must be using Flash Player 6 or later as the targeted version in the Publish Settings dialog box (File
Before you start using the Import Video option, you need to determine which Flash Player you want to target. The Import Video process is optimally geared to preparing output for the FLVPlayback component, available in two versions with Flash CS5. If you create or open a Flash file (ActionScript 2.0) targeting Flash Player 8 or later, the Import Video process can prepare the settings for the ActionScript 2.0 (AS2) version of the FLVPlayback component. If you create or open a Flash file (ActionScript 3.0) targeting Flash Player 9 or later, the Import Video process is enabled to set up the ActionScript 3.0 (AS3) version of the FLVPlayback component.
The options you can use during the video import vary based on the Flash Player version and ActionScript version you have selected in the Flash tab of the Publish Settings dialog box (File
When you first select the Import Video option from the File
Note
On the Mac, all Next buttons within the Video Import wizard process are labeled as Continue buttons, as shown in Figure 14.6.
Note
You can find several source clips in the resource folder of this book's CD-ROM.
After you select a source clip, you can choose how you want to include the video clip in your Flash movie. With Flash CS5, you have three options:
Load external video with playback component: This option is the default selection, enabling the wizard to automatically configure parameters for the FLVPlayback component. If you are going to deploy your video content with a Web server, choose this option.
Embed video in SWF and play in timeline: This option adds the encoded video clip to the current Flash document's Library panel. Because the audio track of the compressed video clip will be within the Flash movie, you should make sure that you match the encoder's frame rate to that of your Flash movie.
Warning
Only proceed with the Embed video in SWF option if you need to insert short video clips directly into your Flash movie (.swf) file. If you're processing clips longer than a minute in duration, you should proceed with a progressive download or streaming option.
Import as mobile device video bundled in SWF: This option inserts a source video file "as is" into the Flash file's library. If you intend to distribute mobile video formats, such as 3GP, with a Flash Lite 2.0 or later movie, you can use this option to create an embedded copy of a video file within the published Flash movie (.swf file). You should bundle only video formats that are supported by the mobile device you are targeting for deployment. (Note that the Flash Video format is not natively supported by current mobile devices running Flash Lite 2.0.)
Note
The other deployment options featured on this screen can be used for video already uploaded to a Web server or Adobe Flash Media Server application.
If, and only if, you selected the Embed FLV in SWF and play in timeline option in the Select Video screen, you determine how you want Flash CS5 to place the encoded video content into the current document. On the Embedding screen (shown in Figure 14.7), you can choose from the following options:
Symbol type: This menu lets you choose how you want the video content to be nested within the Flash document.
Embedded video: This option simply places the Flash Video clip as an Embedded Video symbol in the Library panel.
Movie clip: This option places the Flash Video clip inside of a Movie Clip symbol in the Library panel. Note that you still have a separate Embedded Video symbol of the Flash Video clip; this option saves you the step of creating a new Movie Clip symbol and placing the Embedded Video symbol onto its timeline.
Graphic: This option behaves identically to the Movie clip option, except that the video content is nested within a graphic symbol in the Library panel.
Place instance on stage: This option, if selected, places an instance of the video clip on the current timeline of the Flash document. The instance will be of the symbol type selected in the menu discussed previously.
Expand timeline if needed: This option, if selected, adds more frames to the current timeline of the Flash document to accommodate the length of the video clip. For example, if the timeline had 10 frames and your clip is 100 frames long, 90 new frames would be added to the timeline.
Include audio: This menu controls how the audio track (if it exists) of the video asset is handled. The selected value keeps the audio track bound inside of the embedded video symbol after import. When you use this option, you control the compression of the audio track via the audio stream settings in the Flash tab of the Publish Settings dialog box (File
If you click the Next button from the Embedding screen, the wizard goes to the Finish Video Import screen, discussed later in this section.
If you choose the Load external video with playback component option in the Select Video screen, the next screen in the wizard process is the Skinning screen. This screen enables you to pick a control bar for the FLVPlayback component. You learn more about the options on this screen in the step-by-step exercise that follows this section.
After you have taken the care to specify the encoding options you want for your Flash Video clip, you can quickly review some of the presets on the final screen, as shown in Figure 14.8. Click the Finish button to complete the video import process.
With Flash CS5, you have several more options for deploying and encoding video content. In this section, you learn about how to deploy an existing .flv or .f4v file that you have uploaded to your Web server. The Flash CS5 Video Import wizard automatically sets up the parameters for a new FLVPlayback component in your Flash document.
Create a new Flash file. If you want to use the updated AS3 version of the FLVPlayback component, create a new Flash file (ActionScript 3.0), which targets Flash Player 10. If you want to target Flash Player 8, create a new Flash file (ActionScript 2.0) and change the Flash Player version to 8 in the Publish Settings dialog box.
Choose File
On your computer: This field and Browse button enable you to select a digital video source clip on your local computer or computer network.
Already deployed to a web server, Flash Video Streaming Service, or Flash Media Server: This option enables you to enter a fully qualified domain name pointing to an existing flv file on a server.
Choose the second radio button option in this screen, and enter the following URL:
http://www.flashsupport.com/video/lizard_112k_vp6.flv
Click the Next button (or Continue button on Mac) to proceed to the Skinning screen. After the Select Video screen, the Video Import wizard takes you to the Skinning screen (see Figure 14.10).
Choose the playback control skin for your video clip. This skin is used by the FLVPlayback component instance that the Video Import wizard places on to the current document's Stage at the end of the importing process. The skin options vary based on the ActionScript version and Flash Player version specified for the Flash file.
Tip
Full-screen capability is supported in Flash Player 9 or later. The ActionScript 3.0 (AS3) version of the FLVPlayback component includes skin files featuring a full-screen toggle button. Also, the AS3 version of the FLVPlayback component enables you to choose a custom skin background color during the skin selection process.
You can select one of several skins in the Skin menu. All these skins are separate swf files included with the Flash CS5 installation. Whichever skin you choose is automatically copied to the location of the current Flash document you're importing the video file into. This .swf skin file must be uploaded along with your Flash document's .swf file to the Web server so that the FLVPlayback component can load the skin into the Flash movie. If you prefer to make your own video playback controls to use with the FLVPlayback component, you can choose None in the Skin menu. You can also choose Custom Skin URL and enter the path (relative or absolute) to the skin .swf file you created for the FLVPlayback component.
After you pick a skin, click the Next button. As shown in Figure 14.11, you are taken to the Finish Video Import screen (as described in the earlier coverage of the Video Import wizard). The Finish Video Import screen describes the steps you will need to take after you have finished the import process.
Click the Finish button. Flash CS5 loads the metadata from the .flv file you specified during the Import Video process. The width and height data from the .flv file are used to size the instance of the FLVPlayback component that Flash CS5 places in the center of your Stage area, as shown in Figure 14.12. Rename Layer 1 to fp, short for FLVPlayback. In the Properties panel, name the instance
fpas well.Save the document as
deploy_http_video.fla. After you have saved the file, test the movie (Ctrl+Enter/
Note
You can find the completed file, deploy_http_video.fla, in the ch14 folder of this book's CD-ROM.
Tip
If you want to try loading another .flv file into the FLVPlayback instance, you don't have to repeat the Import Video procedure. Instead, select the fp instance on the Stage and open the Component Inspector panel (Shift+F7). Select the Parameters tab, and change the contentPath value (AS2) or source value (AS3) to the new video filename (or location). You can also change the skin file in the Parameters tab.
Also, if you want to test a skin featuring a full-screen togglebutton, be sure to use the Flash Only - Allow Full Screen template in the HTML tab of the Publish Settings dialog box (File
Note
The updated FLVPlayback component in Flash CS5 allows you to preview a movie without having to launch the Flash Player. That means you can play, pause, stop, and scrub through your video more quickly and efficiently than ever before.
You don't have to use the Video Import wizard to add an FLVPlayback component instance to your movie. In fact, you can just drag and drop the component from the Components panel (Window
Note
All these parameters can also be used in ActionScript, with the same spelling. For example, if you have an instance of the FLVPlayback component named fp, you can set the autoPlay parameter to false with code: fp.autoPlay = false;.
align: This parameter determines how the borders of the video clip align to the display area of the FLVPlayback component. The available options arecenter, top, left, bottom, right, topLeft, topRight, bottomLeft, orbottomRight. The default value iscenter. Alignment values are apparent only if your FLVPlayback instance is sized larger than the native frame size of the video andnoScaleis the value for thescaleModeproperty.autoPlay: This parameter determines if the video loaded into the component automatically plays (true) or loads in a paused state (false).cuePoints: This property specifies the cue points that are linked to the playback of the FLV file. If you create embedded cue points (see our coverage later in this chapter), this property auto-fills within the Properties panel after you select a new FLV file with thesourceproperty. If you scroll down to the CUE POINTS section of the Properties panel, you can create new ActionScript-based cue points or view embedded cue points. Embedded cue points cannot be changed. We discuss cue points later in this chapter.isLive: This parameter indicates whether the video is streamed live.preview: This parameter controls which frame of the Flash Video clip is displayed in the FLVPlayback component while authoring the Flash file. When using the new version of the FLVPlayback component that ships with Flash CS5, this option is grayed out, because the FLVPlayback component uses the new Live Preview feature to allow previewing the whole video while working in Flash.scaleMode: This parameter controls how video content fits within the display area of the component. If the display area uses an aspect ratio different than that of the video content and this property is set toexactFit, the video stretches vertically and/or horizontally to fit the display area. If the property is set tomaintainAspectRatio, the video content maintains its aspect ratio regardless of the display area's aspect ratio. If the property is set tonoScale, the Flash Video clip displays at its native size, regardless of the dimensions of the FLVPlayback instance.skin: This property, when accessed in the Properties panel, opens a dialog box from which you can choose a skin swf file for the component. The values in this menu match the skins available in the Skinning screen of the Video Import wizard.skinAutoHide: This property controls if the skin .swf used for the component hides itself if the user's mouse cursor is not over the video display area. If set tofalse, the skin is always visible. If set totrue, the skin disappears when the user's mouse cursor rolls off the component.skinBackgroundAlpha: This property controls the opacity of the skin background color. The range of values is between 0 and 1, where 1 represents full opacity (no transparency) and 0 represents full transparency (no opacity). You can specify decimal values for partial opacity, such as 0.5, which is 50 percent transparent.skinBackgroundColor: This property controls the background color of the skin. You can use the color picker for this property's value in the Parameters tab to choose a custom color.source: This property determines which .flv file is loaded into the component. You can use a relative path (for example,myVideo.flv), an absolute path (for example,/videos/myVideo.flv), or a fully qualified domain (for example,www.flashsupport.com/video/lizard_112k_vp6.flv).volume: This property controls the loudness of the .flv file's audio channel, if one exists. You can use a value in the range of 0 to 1, with 0 being absolute silence and 1 being the maximum loudness of the audio channel. You can use decimal values as well to indicate partial loudness. For example, a value of 0.5 indicates half of the original loudness of the audio track.
With Flash CS5, you can also add custom UI components specifically designed to be used with the FLVPlayback component. In ActionScript, you can tell an FLVPlayback instance to use other components for playback control. The following properties represent component references used with the FLVPlayback component:
backButton: This property specifies the component to seek to cue points prior to the current playhead time.bufferingBar: This property controls which component displays the buffering status of the video clip.captionButton: This property controls which component toggles the display of captions for the video.forwardButton: This property specifies the component to seek to cue points past the current playhead time.fullScreenButton: This property specifies the component to toggle full-screen mode with the video image area of the FLVPlayback component.muteButton: This property specifies the component that can toggle the muting of the video's audio track.pauseButton: This property controls which component can pause the video playback.playButton: This property controls which component can initiate playback of the video file.playPauseButton: This property specifies which component can toggle between play and stop states of the video stream.seekBar: This property specifies the component that displays the scrubbing area and playhead control for the video.stopButton: This property controls which component stops and resets the stream back to its starting position.volumeBar: This property specifies the component that controls the volume setting of the video clip.
We show you how to practice using a few custom UI components with an FLVPlayback instance. The following steps introduce you to the process of adding a play/pause button and a seek bar:
In Flash CS5, create a new Flash file (ActionScript 3.0) and save it as
flvplayback__as3_custom.fla.Rename Layer 1 to fp. On frame 1 of this layer, drag an instance of the FLVPlayback component from the Video nesting to the Stage.
In the Properties panel, name the instance
fp.Open the Component Inspector panel and click the Parameters tab. Double-click the value for the
skinparameter. In the Select Skin dialog box, set the Skin type to None, as shown in Figure 14.14.Create a new layer named custom UIand place this layer above the fp layer.
Open the Components panel and expand the Video group. With frame 1 of the custom UI layer selected, drag an instance of the PlayPauseButton component to the Stage. Place the new instance below the
fpinstance, near the left corner.In the Properties panel, name the new instance ppb, as shown in Figure 14.15. Now, you need to link the ppb instance to the fp instance in ActionScript.
Create a new layer named actions, and place it at the top of the layer stack.
Select frame 1 of the actions layers and open the Actions panel (F9/Option+F9). In the Script pane, add the following actions:
//FLVPlayback fp; fp.playPauseButton = ppb; fp.source = "stella_raw.flv";
Tip
A quick way to see the code hints for an authortime instance in the Actions panel is to use a code comment specifying the data type followed by the instance name. In this code example, the FLVPlayback code hints appear for the
fpinstance because of the//FLVPlayback fp;line of code.Save the Flash document and test it (Ctrl+Enter/
Go back to the Flash document. Let's add another custom UI component. Select frame 1 of the custom UI layer. From the Components panel, drag an instance of the SeekBar component to the Stage, to the right of the PlayPauseButton instance.
Name the SeekBar instance skb in the Properties panel. Optionally, use the Free Transform tool to stretch the width of the SeekBar instance to span the remaining width of the FLVPlayback instance.
Select frame 1 of the actions layer and open the Actions panel. Add the following bold code to the existing script:
//FLVPlayback fp; fp.playPauseButton = ppb; fp.seekBar = skb; fp.source = "stella_raw.flv";
Save the Flash document and test it (Ctrl+Enter/
You can continue adding other custom UI components from the Components panel and specifying the new instance names to the corresponding property of the fp instance in the frame 1 script of the actions layer.
Tip
You can also modify the graphics used by the custom UI components. Open the Library panel to view the skin symbols in the FLV Playback Skins folder.
Note
You can find the completed file, flvplayback__as3_custom.fla, in the ch14 folder of this book's CD-ROM. Note that this sample links to a relative path for the .flv file, located in the resources folder.
In general terms, a cue point is a specific time within a video clip where something of significance occurs. For example, you might want a cue point at the start of each cut or scene within a video, or when something noteworthy is said within the audio track of a video clip. With Flash-compatible video, you can build systems that work with two types of cue points:
Embedded cue points: Using Adobe Media Encoder CS5, which is included with Flash CS5, you can insert cue points within a video clip before the encoder compresses the clip. The resulting .flv file embeds each cue point on a keyframe in the video track. There are two types of embedded cue points:
navigation: This type of cue point marks the video frame as a point that the user can seek to, using the forward and back buttons of the FLVPlayback component, or with ActionScript code.event: This type of cue point marks the video frame as a point that can be detected with an event handler in ActionScript code. You cannot seek to event cue points unless you modify the functionality of the FLVPlayback component code.
ActionScript cue points: This type of cue point is one that is not embedded with the .flv file. An ActionScript cue point can be added, as its name implies, via ActionScript code. For example, if your .flv file doesn't have cue points, you can create cue points with an XML file specifying the times and names of the cue points. You can load the XML file at runtime, and pass each cue point value to the FLVPlayback component. You can specify ActionScript cue points in the new CUE POINTS section of the Properties panel for an FLVPlayback instance, or use the
FLVPlayback.addASCuePoint()method.
Note
In previous versions of Flash, ActionScript cue points could only be added through the Component Parameters panel. In Flash CS5, you can add, remove, export, and import ActionScript cue points through the CUE POINTS section of the Properties panel.
Warning
By default, ActionScript cue points cannot be used as navigation cue points. You need to modify methods of the FLVPlayback instance in order for ActionScript cue points to work with seek buttons.
In ActionScript code, you can detect which type of cue point is fired during playback. A cue point object in ActionScript has a type property, which is set to a String value of "navigation", "event", or "actionscript". You can also use the fl.video.CuePointType class to retrieve constants for these String values.
In the following steps, you learn how to use Adobe Media Encoder CS5 to create cue points for video footage of garden plants. Each plant featured in the video will have a cue point, specifying its name and the location of the name on the screen. The cue points will be used to dynamically create text fields (with drop shadows!) on top of the video. You add both navigation and event cue point types to this footage. The navigation cue points work with the forward/back seek buttons of the FLVPlayback component, and they create the text labels for each plant type. The event cue points remove the text label before the next label fades and blurs onto the Stage.
Tip
You can import and export cue points from Adobe Media Encoder CS5 to an XML file. You can then reuse the cue points with other compression settings or clips, or share the data with other members of your Flash production team. If you don't want to type all the cue point data for this exercise, simply import the HomeGarden_CuePoints.xml file from the resources folder of this book's CD-ROM into the Cue Points section of Adobe Media Encoder CS5.
Note
Make a copy of the HomeGarden_Full-Res.mp4 file from the resources folder of this book's CD-ROM.
Open the Adobe Media Encoder CS5 application. On Windows, you can find this application shortcut at Start
Click the Add button on the right-hand side of the application and browse to your copy of the
HomeGarden_Full-Res.mp4file. Add this file to the queue.In the Preset column for the new video clip, choose FLV – Web Large, NTSC Source (Flash Player 8 or later).
Click the preset name in the queue to access the Encoding Settings dialog box, as shown in Figure 14.17. Make sure that the dialog box is toggled to advanced mode.
In the Cue Points section, located at the lower left of the dialog box, click the Add ( + ) button to add a cue point at the start of the video clip. Change the name of the cue point to plant_001. Change the Type menu to Navigation. Under the parameters area of the dialog box, click the Add ( + ) button to add a new parameter named label. For the value, type Black-eyed susans. Add another parameter named position with a value of rb. This position value stands for "right bottom" and it will be used to properly position the
labeltext for the cue point. See Figure 14.18 for these settings.Warning
Watch your spelling for parameter names and values. You must consistently name your parameters in order for your custom ActionScript code to work.
Now, scrub the video playhead below the preview area to the next scene. The next cue point should be added at 4;17 seconds, as shown in Figure 14.19. Add a cue point by clicking the Add ( + ) button on the left, and name the cue point exit_001. Change the Type to Event. For this exercise, you won't need any parameters for event cue points.
Tip
You can click the playhead marker and nudge it with the Left and Right Arrow keys to finesse the playhead time.
Now that you're familiar with the cue point addition process, add the cue points at the approximate times shown in Table 14.1. (Feel free to choose your preferred values.) When you are finished, your cue point list should resemble Figure 14.20.
Tip
Double-check the label and position parameters for each cue point before you start the encoding process. Also, if you don't want to type each cue point into the Cue Points tab, you can click the folder icon to import the complete set of cue points,
HomeGarden_CuePoints.xml, from theresourcesfolder of this book's CD-ROM.In the Export Settings area of the dialog box, click the Audio tab. Change the Output Channels to Mono and the Bitrate to 16 Kbps. This particular video clip has an audio track that is silent (meaning, there is an audio track, but it just recorded silence).
Click OK to close the Export Settings dialog box. Click the Output File value, and type HomeGarden_1516K_Cues.flv. This new filename indicates the total bit rate of the FLV file and the presence of cue points.
Click OK to accept all the new encoding settings. Back in the main application window, click the Start Queue button to begin the encoding process. The lower area of the application window displays the encoding progress, as shown in Figure 14.21.
Before you close the Adobe Media Encoder CS5 application, choose File
Tip
You can export cue point data to an XML file in the Cue Points section of the Export Settings dialog box. Click the disk icon in the cue points toolbar to specify an output filename. The cue points file for the sample footage is already saved and included in the
resourcesfolder of this book's CD-ROM.Now you're ready to build the Flash document to play the .flv file.
Open Flash CS5 and create a new Flash file (ActionScript 3.0). Save the document as
cuepoints_embedded_as3.fla, in the same location as the new .flv file compressed in Step 9.Tip
You can also use FLV files with embedded cue points with the ActionScript 2.0 version of the FLVPlayback component.
Change the dimensions of the Flash document to 800 × 600 in the Modify
Rename Layer 1 to fp. On frame 1 of this layer, drag an instance of the FLVPlayback component from the Components panel to the Stage. In the Properties panel, name the instance
fp.In the COMPONENT PARAMETERS section of the Properties panel, select a skin for the FLVPlayback instance. For our example, we used the
MinimalUnderPlayBackSeekCounterVolMuteFull.swfskin. For thesourceparameter, browse to theHomeGarden_1516K_Cues.flvfile created in Step 9.Using the Live Preview of the video on the stage, scrub to the portion of the video that shows strawberries.
In the CUE POINTS section of the Properties panel, add a new ActionScript cue point by clicking the Add ActionScript cue point button.
Change the name of the new ActionScript cue point to strawberries. In a later step, we use ActionScript to have a button navigate to this point in the movie.
In the Instance Name field, type vid as the instance name of the FLVPlayback component. Doing so enables you to communicate to the FLVPlayback component through ActionScript.
On the stage, create two button symbols — one labeled Pumpkin and one labeled Strawberry (Figure 14.22).
Select the Pumpkin button on the main Timeline and set its instance name to pumpkin in the Properties panel, and set the Strawberry button's instance name to strawberry. This will allow us to connect these buttons to ActionScript code.
Select the Pumpkin button and open the Code Snippets panel. The Code Snippets panel is under Window
In the Code Snippets panel, expand the Audio and Video folder, and double-click the Click to Seek to Cue Point snippet to add ActionScript code to a new layer in the Timeline.
Note
The Code Snippets panel is new to Flash CS5, and offers a simplified way to create ActionScript 3.0 code. In Chapter 15, I discuss the Code Snippets panel in more detail.
In the Actions panel, near the bottom of the code generated for you, replace both occurrences of video_instance_name with vid. Remember, vid is the instance name of the FLVPlayback component you set in Step 19.
Replace the code that says Cue Point 1 with plant_005. plant_005 is the name of the embedded cue point of the Giant pumpkin, as set earlier in this exercise. You can verify this in the CUE POINTS section of the Properties panel.
Repeat Steps 22–25 for the Strawberries button, but instead of typing plant_005 for the cue point name, type strawberries. The name strawberries comes from the ActionScript cue point you added in Step 18 of this exercise.
Save the file and test the movie in the Flash Player (Control
Note
You can find the completed file, cuepoints_embedded_as3.fla, in the ch16 folder of this book's CD-ROM.
Table 14.1. Cue Points for the HomeGarden_Full-Res.mp4 File
Time | Name | Type | Label | Position |
|---|---|---|---|---|
00;00;00;00 | plant_001 | Navigation | Black-eyed susans | rb |
00;00;04;17 | exit_001 | Event | – | – |
00;00;05;01 | plant_002 | Navigation | Echinacea | rb |
00;00;09;24 | exit_002 | Event | – | – |
00;00;10;07 | plant_003 | Navigation | Dinnerplate dahlia | rt |
00;00;14;25 | exit_003 | Event | – | – |
00;00;15;07 | plant_004 | Navigation | Pumpkin patch | rt |
00;00;23;05 | exit_004 | Event | – | – |
plant_005 | Navigation | Giant pumpkin | lb | |
00;00;28;06 | exit_005 | Event | – | – |
00;00;28;19 | plant_006 | Navigation | Huckleberry bush | lt |
00;00;33;06 | exit_006 | Event | – | – |
00;00;33;13 | plant_007 | Navigation | Huckleberries | rt |
00;00;38;07 | exit_007 | Event | – | – |
00;00;39;08 | plant_008 | Navigation | Strawberries | rb |
00;00;43;07 | exit_008 | Event | – | – |
00;00;44;03 | plant_009 | Navigation | White roses | lb |
00;00;48;21 | exit_009 | Event | – | – |
00;00;49;03 | plant_010 | Navigation | Mallow | rb |
00;00;56;00 | exit_010 | Event | – | – |
00;00;56;13 | plant_011 | Navigation | Shrub rose | rt |
00;01;01;02 | exit_011 | Event | – | – |
00;01;01;15 | plant_012 | Navigation | Chocolate mint bush | rb |
00;01;05;20 | exit_012 | Event | – | – |
One of the most exciting features of the On2 VP6 codec is its capability to utilize alpha channels within video content. Flash CS5 on its own cannot create a true alpha channel for a video clip: You need to use a dedicated video effects application, such as Adobe After Effects or Adobe Premiere Pro to create a matte for the video track. The process of selecting areas of the video to mask for transparency is known as keying. Essentially, you use the video application to select a key color, which is used to create a mask for the video. The accuracy and sharpness of a mask depend on the quality of the keying plug-in. Adobe After Effects offers several keying plug-ins to help you professionally matte your video content.
For the purpose of our coverage in this book, we provide you with the QuickTime .mov files that already have masks created by Adobe After Effects. The general process for keying involves a series of steps:
Acquire video footage. To successfully mask a subject in the video, you should shoot the subject against an evenly lit green screen or blue screen. You may have seen special effects footage shot on such screens, for action thrillers such as The Matrix.
Import the footage into a video effects application. Using a program such as Adobe After Effects, you can add the footage to a composition. Within the composition, you can add key filters to select the green or blue areas of the content.
Render the footage with an alpha channel. After you have key filters in place, you can render the footage with an alpha channel. You need to use a video codec that supports alpha channels, such as the Animation codec. In After Effects, make sure you choose RGB + Alpha in the Channels menu of the Video Output settings.
Encode the footage with the On2 VP6 codec. After you have the rendered QuickTime file, you can process the file with Adobe Media Encoder CS5 or another Flash Video encoding tool. In the Flash Video encoding settings, make sure that you choose the Encode alpha channel check box.
In this section, you learn how to use footage of our dog Stella that was shot against a green screen. The footage already has an alpha channel that was created in Adobe After Effects. You superimpose the footage of Stella on a static .png image imported into a Flash document.
Note
Make a copy of the stella_alpha.mov file found in the alpha_live_action folder of this book's CD-ROM.
In Flash CS5, open the
live_action_starter.flafrom thech14/alpha_live_actionfolder of this book's CD-ROM. This file is set to publish for Flash Player 10 compatibility, using ActionScript 3.0. Save the document aslive_action.fla. This document already has a background .png image on the Stage, as well as a masked image of a branch near the trail.Make a copy of the
stella_alpha.flvfile from thech14/alpha_live_actionfolder of this book's CD-ROM. Move the copy to the same location as thelive_action.flafile you saved in Step 1.In the Flash document, create a layer named vid, and place it between the bg_mask and bg layers.
Open the Library panel (Ctrl+L or
Drag an instance of the new Video symbol from the Library panel on the Stage, at frame 1 of the vid layer.
Select the new Video instance, and in the Properties panel, name the instance
vid. Set the width to 152 and the height to 180. Position the X value at 154 and the Y value at 180. See Figure 14.24.Note
The dimension 152
×180 uses the same aspect ratio as that of the source clip.Create a new layer named actions and place this layer at the top of the layer stack. Select frame 1 of the actions layer, and open the Actions panel (F9/Option+F9). Add the following code. The code creates a new
NetStreaminstance to play thestella_alpha.flvfile, and attaches the stream to thevidinstance.var vid:Video; var nc:NetConnection = new NetConnection(); nc.connect(null); var ns:NetStream = new NetStream(nc); ns.client = this; ns.play("stella_alpha.flv"); vid.attachNetStream(ns); function onMetaData(info:Object):void;Save the Flash document and test it (Ctrl+Enter/
Note
You can find the completed files in the ch14/alpha_live_action folder of this book's CD-ROM. You can also find another alpha video example in the ch14/alpha_3D_model folder of this book's CD-ROM.
Flash-compatible video can be deployed as .swf files, .flv, or .f4v files. You can load .flv files from a Web server or stream them from a Flash Media Server or Flash Video Streaming Service provider.
You can compress source video files in Adobe Media Encoder CS5.
Flash Player 9.0.115 or later is required for .f4v files using the new AVC/H.264 video codec. Flash Player 8 or later is required for .flv files using the On2 VP6 codec. You can use the Sorenson Spark codec with Flash Video content in Flash Player 6 or later.
The H.264 and On2 VP6 codecs offer superior compression and image quality compared to Sorenson Spark. However, H.264 and VP6 require more computer processing power and memory.
The Adobe Media Encoder CS5 application can add embedded cue points to an .flv file. These cue points can be detected in ActionScript.
Flash CS5 has support for Live Preview of videos directly in the Flash environment using the new FLVPlayback component. You can also add, remove, export, and import ActionScript cue points through the Properties panel.
The On2 VP6 codec supports alpha channels within video content. You can create alpha channels in video applications such as Adobe After Effects.