Preparing FLV video files

The FLV video format has successfully evolved through a few generations now. In its first incarnation, the FLV format appeared in Macromedia Flash MX for use with Flash Communication Server (now Flash Media Server). In Flash MX 2004, we were able to play external FLV files in a SWF application. Flash 8 introduced a new codec for the FLV format. Adobe Flash CS4 continues the evolution progress with improvements to the FLV experience and the user interface components supplied to control it. In addition, Adobe Flash Player 9.0.115 and later supports MPEG-4 formats including the F4V format exported by Adobe Media Encoder CS4.

There are a number of benefits to using FLV files in your SWF application:

• You can import and use video where the settings have already been applied.
• You have greater control while downloading files using the NetStream and NetConnection objects.
• You can play FLV video dynamically from external sources.
• You can create progressive or streaming FLV videos.
• You can export FLV video from Adobe Media Encoder or from a number of other programs.
• You can use Flash CS4 Professional's FLVPlayback and custom UI components for video playback controls.

Adobe has a number of resources already posted which describe these topics in detail. For more information, please visit the links below:

• Video Technology Center
• Flash video learning guide

Creating your own FLV files

First you will need a video source to work with. It's best to start with a high-quality source. If you don't already have video clips to work with, you can shoot your own video with a digital video recorder, purchase stock video clip art, or create a series of screen captures using a screen capture utility. However you obtain your video, you will most likely need to edit it to prepare it for the web. When you are editing your video clips, remember the following recommendations:

• Start with high-quality video.
• Do not use video that contains transitions or unnecessary high motion. Videos that contain less motion will play back better across slower frame rates.
• Cut the video clips to lengths that are an appropriate size for the bandwidth of your target audience. You can do this step during encoding if you like.
• Pick a frame size that is appropriate for your target audience bandwidth. (For modem users, use 160 × 120 pixels; for ISDN, 192 × 144 pixels; and for high-speed connections, 320 × 240 pixels.)

You can import and/or encode your source video by using the Import Video Wizard in Flash CS4 Professional (see Figure 7). You can also use Adobe Media Encoder to encode source video to the FLV format. Using either approach allows you to set the frame size, frame rate, and edit the clip to the appropriate size.

Figure 7. First screen of the Import Video Wizard

Refer to the following resources for more information on Adobe Media Encoder:

• Using Adobe Media Encoder CS4
• Adobe Media Encoder online documentation
• H.264 for the rest of us (Kush Amerasinghe)

Video settings used in the Flash video gallery

The video gallery uses 36 thumbnail video displays. The thumbnail videos exist externally as separate FLV files, so it is important to keep file sizes to a minimum. Understanding these settings will help you when making similar decisions about how to prepare your video clips.

• Sized to 84 × 68 pixels
• Approximately 2–3 seconds in length

The full video clips that load into the detail view are also separate FLV files. Users will be presented with a loader if the videos take a moment to load, so their specifications are a little more relaxed. There are a range of acceptable file sizes and video lengths. The following list describes the range of settings in use:

• Sized to a maximum of 240 × 180 pixels
• Clip lengths range 4–20 seconds in length (longer if streaming)

Using more than 36 thumbnail videos

If you'd like to include more than 36 thumbnail videos, you can take a number of paths to extending the template. The easiest and recommended route is to increase the size of the user interface and include more videos rows and columns in the thumbnail grid. You can modify the size of the Thumb control by editing the assets in the document library. To change the layout and spacing of the thumbnail grid, you'll edit the variables at the top of the FlashVideoGallery class.

Alternate routes would include initializing the thumbnails in a scrolling TileList component or creating a paging system using Sprites containers and ActionScript. Both routes would require some work to change the initialization of the thumbnails and to ensure that the thumbnail events still arrive as expected in the event handler functions in the FlashVideoGallery class (main Timeline).

Keep in mind that performance issues and loading issues may occur with the more videos in use. Thirty-six videos appear to be a stable amount, but you can experiment with more or fewer videos in the thumbnail grid.

Page 5 of 7

Previous Page

Next Page