In the past few years, Flash has become the video champion of the Internet. You find Flash video on sites from YouTube to Hulu to CNET. It wasn't long ago that a battle royale raged among Microsoft, Apple, and RealMedia for web video bragging rights. Flash was seldom mentioned in the contest; after all, it was just for making little animations. But, like the Trojans with their famous horse, Flash Player managed to sneak onto about 90 percent of today's computers. And guess what? Flash does video, too. It's easy for you to add video to a web page or any other project by adding it to a Flash animation. It's easy for your audience, too, since they don't have to download and install a special plug-in to watch your masterpiece. Flash is also fueling the recent surge in video blogging, or vlogging—adding video clips to plain-vanilla blogs. You can find out more at sites like www.vidblogs.com or http://mashable.com/2009/10/09/video-blogging.
Figure 11-6. The sound file you see here is a two-channel (stereo) sound, so you see two separate waveforms, one per channel. To crop the sound clip, drag the time in and time out control bars left and right. Flash ignores the gray area during playback and plays only the portion of the waveform that appears with a white background, so here Flash plays only the second half of the waveform. To create a custom fading effect, you can drag the envelope handles separately. These settings tell Flash to fade out on the left channel while simultaneously fading in on the right channel. To preview your custom effect, click the Play icon.
Tip
If you're watching a video on the web and wondering whether the site uses Flash to publish it, right-click (Control-click) the video. If you see "About Flash Player" in the shortcut menu, you know Flash is working behind the scenes.
May as well face it: Sometimes video footage is more effective than even the most well-crafted animation. For example, video footage showing a live product demonstration, a kid blowing out the candles on his birthday cake, or an interview with a CEO can get the point across quickly and directly.
There are two basic steps to creating Flash video:
Convert your video to the Flash video file format: .flv or .f4v. Before you can add video to your Flash animation, you have to convert it to a special file format. The process, which video techies call encoding, creates small files that can travel quickly over the Internet. Flash comes with the Adobe Media Encoder, which lets you convert most types of video into Flash video format. The next section describes the encoding process.
Note
Adobe is working hard to keep Flash at the forefront of the Internet video revolution. With version 9.0.124 of the Flash Player (code named Moviestar), Adobe added capabilities for HD (high definition) video and audio. As of this writing, the current version of Flash Player was 10.1.15.95, but you can expect Adobe to release new versions with added features and capabilities.
Import your video into a Flash animation. Once your video clip is in Flash video format, you can import it into your project. Flash stores a copy of the video in the Library, and you can drag the video to the stage like any other graphic. It's remarkably easy to add video playback controls to your Flash video. If you have a video that's already in the Flash video format (.flv or .f4v), you can jump ahead to Importing Video Files to learn how to import it into your Flash file.
Tip
Neither Flash nor the Adobe Media Encoder let you do extensive editing. At best, they let you crop a segment out of a larger video clip. If you're interested in piecing together different video segments to create a movie or a scene, turn to a specialized video editing program like Adobe Premiere or Apple Final Cut Pro. If your needs are more modest, you can probably get by with Premiere Elements, Apple's iMovie or Microsoft's MovieMaker. When using those programs, it's best to save or export your video as a Flash video (.flv or .f4v). The next best choice is to save your video as uncompressed .mov or .avi. Why? Because you only want to compress your video once. Otherwise, the quality of the image and sound will suffer.
Video files are notoriously huge, which means standard video files take a long time to travel the Internet. To solve this problem, Flash uses special video formats that shrink or compress video into smaller files. The quality might not be what you'd expect from your 50-inch plasma HDTV, but it's certainly acceptable for web delivery. The process of converting a video from its original format to Flash video (.flv or .f4v) is called encoding. If you already have a file in the Flash video format, or if someone else is responsible for this part of the job, you can jump ahead to Importing Video Files.
Using the Adobe Media Encoder, you can encode any of the common video files listed in Table 11-2. As explained in the box on Multiframe Graphic Symbol vs. Movie Clip, it's best to start off with a high-quality, uncompressed video. You can add prebuilt controls that let your audience control the playback and adjust the volume. You can even apply effects to a video clip in Flash: for example, skewing and tinting.
Table 11-2. Video file formats you can convert to Flash Video with Adobe Media Encoder
File Type | Extension | Note |
|---|---|---|
QuickTime movie | .mov, .m4v, .m4a | The audio/video format. Apple's video player uses. A free version of QuickTime player is available for both Macs and PCs. |
Audio Video Interleaved | .avi | Microsoft audio/video format. |
Motion Picture Experts Group | .mpg, .mpeg | MPEG-1 is an early standard for compressed audio and video media. |
MPEG-2 is what standard DVDs use. | ||
.mp4 | MPEG-4 Part 2 is used by the DivX and Xvid codecs. | |
.264 | MPEG Part 10 is used by QuickTime 7 and the H.264 codec. | |
Digital video | .dv | Many camcorders use this digital video format. |
Windows Media | .asf, .wmv | These Microsoft formats are for compressed audio/video files. |
Flash video | .flv, .f4v | Flash's video format employs a lossy compression technique to produce very small files suitable for broadcast over the Internet. |
The hardest part of encoding video files is the wait. It takes time to encode large video files, but it's getting better with today's faster computers. Flash CS5's installer automatically puts Adobe Media Encoder on your computer. Fire it up, and it looks like Figure 11-7. There are two basic things you need to do: Locate the file you want to encode, and give Adobe Media Encoder instructions about how to process it. Here are the steps:
In Adobe Media Encoder, click Add.
Flash displays a standard Open window similar to the one you use to open a Flash document.
Navigate to the file on your computer that you want to encode, and then click Open.
The name of the video file appears under Source Name.
Under Format, choose the Flash video format: FLV/F4V.
Flash video files automatically determine whether your file is encoded in the FLV or the F4V format. That determination depends on the preset you choose in the next step. Flash gives you these presets (predetermined settings) because choosing all the settings to encode video can be ridiculously complicated. Even when you choose a file format like FLV or F4V, there are still dozens of settings you can choose based on how the video is to be distributed and viewed. Adobe helps you wade through the swamp of video settings by providing presets for common video needs.
Under Preset, choose a preset format that matches your project.
The Media Encoder has what may seem like a bewildering number of presets, as shown in Figure 11-8. The names are marginally descriptive. If your project is destined for a web page, try FLV – Web Medium to start. The FLV format works with Flash Player 8 and later. The F4V formats show better quality video in smaller files, but they work only in Flash Player 9 and later. Experienced videographers may want to tweak the encoding settings or trim the video clip before it's encoded.
Under Output you can change the name or location of the file.
If you don't make any changes under Output, then the encoded file appears in the same folder as the original video file. It has the same name, but will end with either .flv or .f4v.
Click Start Queue.
Adobe Media Encoder starts to encode your file. A bar at the bottom of the window tracks the progress (Figure 11-9). If you have several files to encode, you add them all to the queue before you hit Start Queue. The encoder makes no changes to the original file. When the encoder is finished, a checkmark appears next to the file in the queue, and you have a new file with a .flv or .f4v extension.
No matter how you cut it, encoding video takes time and can slow down your computing workflow. If you have lots of video to encode, prepare several video clips for encoding using the steps described in this section. You can add several encoding jobs to the encoding queue, and then run them all at the same time when you click Start Queue. Why not do all that encoding overnight or when you head out to lunch?
There are a few reasons why you might want to dig into Adobe Media Encoder's export settings before you encode a file. One of the most common scenarios is that you have a long video and you need to bring only a small part of it into your Flash project. To do so, follow the encoding steps that begin on Encoding: Making Flash Video Files. When you reach step 4, instead of choosing one of Adobe's presets, click Edit Export Setting at the bottom of the list. The next thing you see looks like a video editing window, shown in Figure 11-10. You can't do extensive editing in this window like you can with Adobe's Premiere or Apple's Final Cut, but you can select a portion of a video clip to encode. Encoding is pretty slow business, and there's no reason to waste time converting video that you won't use.
In the upper-left corner of the Export Settings window is a small preview screen. Below the screen is a timeline with a playhead similar to Flash's. Drag the playhead to see different frames in your video. The two markers in the timeline below the playhead are called the in point and the out point. You use these two points to select a segment of the video. As you drag either point, the preview window shows the image (or video frame) for that point in time. A highlight appears on the selected segment of video.
Figure 11-10. You can't do extensive editing in Adobe Media Encoder, but you can select the portion of a video file that you want encode. The program also provides tools to resize the entire video, to select portions of the image, and to fine-tune the video codec used to encode your Flash video file.
If you want to use one of Adobe's encoding presets, you can choose one in the upper-right corner of the Export Settings window. (If you'd rather tweak the export settings on your own, see Cropping a video while encoding.) Click OK, and you're back at the Media Encoder, where you can change the name and location for your encoded file, as described in step 5 on Batch encoding to save time. Or, you can simply click the Start Queue button to encode the video segment you selected.
When you choose an encoding preset in Adobe Media Encoder, the preset determines the dimensions of the video image. For comparison, a wide-screen TV might show a high-definition image that's 1920 pixels wide by 1080 pixels high. When you choose the FLV – Web Medium setting, the preset encodes an image that's 360 pixels wide by 264 pixels high. When you're in Export Settings, you can choose any size you want. Understandably, large dimensions, like those for that hi-def TV, mean much larger files. If your video is traveling the Internet, you can dramatically reduce the travel time by reducing the video dimensions. The 360 x 264 size of the FLV – Web Medium preset is a nice, compact size for the Net. If you know everyone in your audience is going to have a fast cable or DSL connection, you can go ahead and bump the dimension up to 640 x 480, another fairly standard dimension for video.
After you've opened Adobe Media Encoder and added a video to the encoding queue, as described on Encoding: Making Flash Video Files, follow these steps to choose a custom size for the encoded video:
Instead of choosing one of Adobe's presets, click Edit Export Setting at the bottom of the list.
The Export Settings window appears, where you can fine-tune many aspects of the encoding process.
On the left side of the Export Settings window, click the Video tab.
If you don't see tabs in the Export Settings window, click the Advanced/Simple Mode toggle button, as shown in Figure 11-10.
Click the Resize Video checkbox.
Once you've checked the Resize Video box, the encoder uses the size dimensions entered in the next step.
Change the height and width dimensions, as shown in Figure 11-11.
Most of the time, you want to maintain your video's proportions to keep the images from looking too tall or too fat. To constrain the proportion, make sure the Constrain Width/Height button is depressed. Then you can enter either a width or a height dimension, and the other dimension automatically sizes itself.
Click OK.
The Export Settings window closes, and you see the Adobe Media Encoder queue.
Cropping a video is just like cropping a photo. Instead of resizing the entire image, you select a portion of the image that you want to view. With moving pictures, it's a little trickier, because the image is changing at multiple frames per second. The crop that looks great for the first 20 seconds of a clip might not look as good a minute later. Also keep in mind that when you crop a video, you're changing the dimensions and the quality of the image. When you crop into an image too far, you end up with a blurry picture.
To crop your video, follow the preceding steps to open the Export Settings window in Adobe Media Encoder. Above the preview window, click the Crop button. A frame appears around the video image with handles at the corner. Drag the handles to frame the portion of the picture you want to keep, as shown in Figure 11-12. A tooltip shows the dimensions of your video image in pixels. You can click the Crop dimension numbers and then type new values, but keep in mind that these numbers are showing the number of pixels being trimmed from the edges of the picture.
Flash lets you place cue points (markers) in your video clips, which you can then use to trigger other actions in your Flash animation. For example, perhaps you'd like to show text on the screen at a certain point in the video, or perhaps you'd like to trigger a certain sound or narration track. You give cue points names—like "narration"—as you create them. Then you use ActionScript code to identify the cue points and trigger the actions you want performed. (There's more on ActionScript starting in Chapter 12.)
You add cue points in Adobe Media Encoder, using the same Export Settings window that you use to resize or crop your video.
In Media Encoder select Edit→Export Settings to open the Export Settings window.
You see a preview window showing your video, with a timeline underneath, as shown in Figure 11-13. Just as in Flash, the timeline has a playhead. Drag the playhead to a point in the timeline, and you see that frame in your video. Below the preview, there are two panels: one for cue points and one for parameters.
Drag the playback head to the point in your video you want to mark.
The video image changes as you move the playback head.
Click the + button to add cue points; click the – button to remove them if you make a mistake.
Flash creates a cue point in the list and gives it a name, a time setting, and a type. The time setting is determined by the playback head's position in the video clip. In the next steps, you'll change the name and type of the cue point.
Click the name, and then type a descriptive name for your cue point.
Flash names all cue points "cue point" when it creates them. It's up to you to type something more descriptive.
Choose the type of cue point you want to create—Event or Navigation. If you're an ActionScript hotshot, set parameters.
Event cue points trigger an action when the video reaches them. Navigation cue points let you locate and play certain portions of your video. Both Event and Navigation cue points require ActionScript to work their magic.
Click the + button to add parameters to your cue point; click the – button to remove them if you make a mistake.
Parameters are key-value pairs that programmers use to store and retrieve information. So the parameter values are available to ActionScript programs when the video reaches the cue point.
Repeat steps 2–6 to add more cue points, or click OK to go back to the encoder queue.
Part of the encoding process is choosing the codec (compressor/decompressor…get it?) that shrinks your video as it converts it to the Flash video format. Over its short history, Flash video has used three different codecs. The makers of Flash have updated the Flash Player to use new codecs as they've become available. The new codecs provide new features and produce better quality video using smaller file sizes. As a Flash designer, you need to guess which version of the Flash Player your audience is likely to have when you choose the best codec for encoding.
Flash makes these decisions relatively easy for you. If you use one of the presets when you encode, all you need to do is choose the Flash player your audience will use, and then decide the relative size. For example, one of the choices is FLV – Web Medium (Flash 8 or higher). If you customize the Export Settings, you can choose the video codec that's used to shrink your video file to size. Here's a guide to the Flash Players that work with different codecs (the year the Flash Player was released is shown in parentheses):
Sorenson Spark: Flash Player 6 (2002) and above. It's the safest choice; if your audience's Flash Player is video-capable, this codec will work.
On2 VP6: Flash Player 8 (2005) and above. This choice is pretty safe, unless you're sure your audience has older computers. One advantage of this codec is that you can perform tricks like making part of the video image transparent, just like the news folks do when they put the weather guy in front of a map.
F4V (H.264): Flash Player 9.2 (2008) and above. This choice produces the best-quality video using smaller file sizes. If you choose the F4V Flash video format, it automatically uses the same H.264 codec that Apple uses for iTunes and Apple TV.
You can manually choose a codec from the Export Settings window of the Adobe Media Encoder. Here are the steps:
In the Media Encoder, select Edit→Export Settings.
The Export Settings window opens, as shown in Figure 11-10.
Click the Format tab, as shown in Figure 11-14.
If you don't see tabs in the Export Settings window, click the Advanced/Simple Mode toggle button, as shown in Figure 11-10.
Choose either FLV or F4V format.
If you choose the F4V format to take advantage of its good looks and small file sizes, your job is done. The encoder uses the H.264 codec. If you choose the FLV file format so you have compatibility with the older Flash Players out there, then you need to go on to step 4 to specifically choose a codec.
If you're using the FLV format, click the Video tab, and you see the On2 VP6 codec is selected.
With the On2 VP6 codec, you can go on to the next step to choose whether or not to add an alpha channel (transparency) to your video.
If you chose the On2 VP6 codec, you can click the Encode Alpha Channel checkbox.
With an alpha channel encoded in your video, you have the ability to replace a specific color with transparency. Called chroma keying, this technique is common in newscasts and feature films.
No one likes to wait while a web page loads. So when you're publishing video on the web, life is a constant quest to shrink the size of your video files so they'll travel the Net faster. In addition to the encoding tricks already mentioned, here are some tips for shrinking those files while still providing a good video experience. Some of these techniques are related to creating the video, and others are related to Adobe Media Encoder and Export Settings.
Use a tripod and keep pans and zooms to a minimum. Steady shots make for better compression results.
Start out with good-quality video. When possible, use uncompressed video before you encode to Flash Video. If your video has blips and glitches (called noise by videographers) before you encode it, the video file ends up bigger.
Avoid fancy effects and transitions. Special effects like fancy wipes or spiral transitions don't work as well in Flash video as a plain cut from one scene to the next. Even dissolves add to the size of your video file.
Reduce the dimensions of the video. It's great to have a high-resolution video that looks beautiful when the audience clicks the full-screen button. But if it takes too long to download over the Internet, you won't have an audience. As described on Resizing and Cropping a Video Clip, you can change the dimensions of your video to reduce the file size.
Consider using a lower frame rate. You can set the frame rate in the Video tab of the Export Settings window. The standard frame rate for American TV is 29.97 frames per second (don't ask about the decimal; it's a long story). The standard for film is 24 fps. Test your videos at 18, 15, or even 12 fps to see whether the quality/file size tradeoff is worth it.
Use mono sound where possible. If your video is a musical performance, it may be important to have stereo sound, but otherwise you can save precious file space by clicking the Audio tab in the Export Settings window and then choosing Mono.
Use a lower bit rate for sounds that are mostly voices or don't require high fidelity. Go to the Audio tab in Export Settings, and then use the drop-down menu to reduce the bit rate for sound. The encoder has bit rates from 16 to 256. A bit rate of 64 works for many Flash videos. You can go even lower if the sound track is primarily voice, with no music.
Before you can import a video clip into Flash, it's good to know up front how you expect to link the video file to your finished Flash animation file at runtime: by embedding the video file directly into your Flash timeline, or by linking to the video file at runtime, and so on.
This cart-before-the-horse consideration isn't quite as odd as it seems at first blush. Video files tend to be so huge that you don't usually want to embed them directly into your Flash document the way you embed graphics (Importing Graphics) and sound files (Incorporating Sound). The process of setting up your Flash animation and Flash video files for the public to view them is called deploying.
Note
Chapter 20 tells you all you need to know about publishing Flash files, including Flash files containing video clips.
Your deployment options include the following:
Progressive download from a web server. This option is one of the most popular because all you need to publish video on the Internet is a regular, garden-variety web server. Your Flash animation files (.swf) and Flash video files (.flv or .f4v) are stored on the server. It's called progressive because the video starts playing for your visitors before the entire video file is downloaded. The downside to this option is the fact that the entire video is eventually stored on your visitor's computer, giving her the ability, if she's clever, to make a copy of your video. If you aren't comfortable with bootleg copies, then consider one of the next two options.
Stream from Flash Video Streaming Service. This option is the most popular way to show videos without letting others copy them. Basically, you hire a company to stream your video from their computers to your website visitors. Your visitors never have a complete copy on their computers, making it more difficult (but not impossible) for them to swipe it. You can find a long list of companies that provide this service on Adobe's website (www.adobe.com/products/flashmediaserver/fvss/). These companies have a program called Flash Media Server on their computers, which detects the speed of your web visitor's Internet connection and sends the video at a speed it can handle. Your visitor gets a higher-quality video experience, and you get added security for copyrighted material. All you have to do is pay for the service.
Stream from Flash Media Server. This option is similar to the second option above, except that you (or, more likely, your organization's IT department) buy the server hardware, install the server software, and maintain the resulting system. This option is best if you have deep pockets (Flash Media Server costs $4,500) and don't mind the hassle of maintaining a media server.
Note
If you have your own web server and want to dip your toe in the Media Server water, you may want to investigate Red5, an open source (free) Flash Server (http://osflash.org/red5).
As mobile device video bundled in SWF. Use this option in combination with Flash's templates for consumer devices and handsets to create animations for small handheld devices. This option is used to place video inside SWF files used with phones and handsets.
Embed video in SWF and play in timeline. This option represents the simplest way to embed video into your animation, but it works only for very short video clips (somewhere between 5 and 10 seconds or less). Any more than that, and the size of your animation file grows so large that you have trouble editing the file in Flash and your audience has trouble viewing it in their Flash Players.