Encode, Deliver, Design

By Craig Goodman	Article Rating:
November 18, 2004 12:00 AM EST	Reads:	11,440

Related
Print
Email
Feedback
Add This
Blog This

It wasn't so long ago that video and the Web were at odds. Video was becoming more beautiful and entertaining through new post-production techniques. And with the proliferation of video editing software and high-speed buses like FireWire, creative videos started coming from all types of makers - from professionals to first-time home users. The Web, vast but slow, seemed to be stuck in a rut, resisting video's advances by confining it to small sizes and clunky, boxy players.

Flash Video is changing all of this. Now, as many of you either create or have access to great-looking video, you want to match that quality by wrapping it in a super online playback experience. The answer: use Flash Video (see Figure 1).

Getting Started

In this article, I will guide you through some of the steps you need to take to encode and deliver video on your Web site. If you'd like to drill down to more specific Flash Video topics, visit the Flash Video Developer Center.

CIO, CTO & Developer Resources

Step 1: Create Your FLV File
A lot of folks get hung up on this very first step, but it's actually quite easy. Why do they get stuck? Some may not understand that although Macromedia provides the FLV Exporter, you don't use that within Flash (although you do need to have Flash MX Professional 2004 installed to run it). You run the Flash Video Exporter using video editing tools that support standard QuickTime export. With Flash, you can:

Play back Flash Video on the Web using Flash Player
Build custom video players that match your site design
Integrate or layer your video with other elements in Flash, such as animation, text, or interactivity

Here are a few guidelines to point you in the right direction.

If You're Not a Video Editor...

Many of you may create or edit video at work or at home. However, if you don't, you may have video that is pre-encoded as QuickTime, Windows Media, or another type of video file. If this is the case, there are a couple of easy-to-use tools for you to convert your file to FLV.

Note: Compressing and recompressing video is not great for quality. It's always better to start with a version of the video that is closest to the original source as possible - you'll really see a difference in the results.

Sorenson Squeeze: The encoding folks over at Sorenson have produced a great tool in Sorenson Squeeze 4.0, which you can use to encode your FLV files (see Figure 2).

A special version of Sorenson Squeeze is included as part of the Macromedia Video Kit. The kit also has a Dreamweaver extension for adding Flash Video to your site. You can purchase the Macromedia Video Kit from the online store.

QuickTime Pro and Flash Video Exporter: If you have Flash MX Professional 2004, you already have the Flash Video Exporter (see Figure 3). (It's included on the Flash CD. You can also download it from the Flash Support Center as part of the Flash Video Updater 1.2 [www.macromedia.com/support/flash/downloads.html#fmxpro_vid_up]. You need to have Flash MX Professional 2004 installed to run the Flash Video Exporter.) This exporter hooks into all QuickTime-based exporters that ship with popular video editing software including Final Cut Pro and Express; Avid Media Composer, Xpress DV, and Xpress Pro; and batch encoding applications such as Discreet Cleaner and Anystream Agility.

However, if you're not a video editor, but you do have Flash MX Professional 2004, a cheap and easy way to convert video files to FLV is by purchasing Apple's QuickTime Pro for Mac or Windows (www.apple.com/quicktime). Simply install the Flash Video Exporter, and your FLV export options will appear automatically in QuickTime Pro. You can save any video file that you can open in QuickTime Pro as an FLV file.

If You Are a Video Editor...

Many of you edit your own video with applications such as Final Cut Pro or Avid Media Composer. Since the Flash Video Exporter works as a plugin to the QuickTime Export architecture, once you install it, it will show up as an export option in applications that support it, such as Final Cut Express/Pro and Avid Xpress DV/Pro.

For more information on how the FLV Exporter integrates with different applications and how to get the latest version, check out "Creating Flash Video Files with Flash Video Exporter." (www.macromedia.com/devnet/mx/flash/articles/flv_exporter.html)

Step 2: Choose How to Deliver Your Flash Video
So now that you've created your FLV file, the next step is to decide how you want it to play back in Flash. Here are your choices:

Progressive download video, which you can do in two ways:
- Embedding your video in your Flash (FLA) file
- Storing your FLV files externally
Streaming video

Progressive Download

Progressive Flash Video download, which first emerged in Flash Player 6, doesn't make you wait (and wait) for the whole video to download before it starts playing. The video starts its playback as it progressively downloads segments of the video, providing a smoother experience for your users. Many people call this streaming video, but there is a difference, as I will explain later.

There are a couple of ways to use progressively downloaded Flash Video (FLV) on your site; I'll start with the old way, which is importing and embedding the video in your Flash file, then enlighten you with the new one - playing your FLV files externally.

Embedding Your Video Within the SWF? Think Again!

There's something I have to say, so I might as well get it out of the way right now. Don't embed your video in your Flash file unless it's less than 10 seconds long. Yes, you heard right. While Flash MX touted the coolness of being able to embed video right into the Flash file, I've got news for you - that's not so cool anymore. Here's why.

Differing Flash/video frame rates can hurt performance. Embedding works best if your source video and your Flash movie have the same frame rate. If they don't, you need to adjust one of them, and your playback can suffer.
Long videos on the timeline can lose audio/video synch. It's true - if you put a long video on the timeline, it's likely that you won't be able to keep its audio synched up after about 4000 frames. Also, a single timeline is limited to 16,000 frames.
Stopping the timeline stops your video. If you embed your video on the Timeline, every time you stop the video, you need to stop the playhead on the Timeline. This is not a very flexible authoring scenario.
Download performance can vary. Some developers place embedded video in movie clips to get around the Timeline start/stop issue mentioned above. However, if you put your video into a movie clip, that movie clip (and the video in it) has to download completely before it will play. This eliminates the progressive download benefit and is a common pitfall for many developers.
SWF publishing time goes up. If you embed your video, you have to republish the video every time you publish the SWF file for posting to your website, leading to problems:
- It takes a long time to publish a SWF with video.
- You can't alter video content without having to republish the SWF.

Using External FLVs

In the Developer Center, most of the articles recommend placing your FLV files external to your Flash (FLA) file. This method, new in Flash Player 7, is fast, efficient, and flexible, and it doesn't require any additional software. Here are some more reasons:

Flash media components are easy-to-use. The media components make it super-easy to create a video controller and playback bar in Flash. Just enter the URL of your external FLV file in the Component Inspector panel, and you're good to go.
You avoid all of the issues that come with embedded video. Just take a look at the list of possible embedded video performance and development issues I described above. Use external FLV files instead, and you can check those off of things you have to worry about.
To play external FLVs, simply upload your FLV files to your Web site. Then, in Flash MX 2004 Professional, drag a media component onto the Stage, select it, and then define the URL of the FLV file in the Component Inspector panel. That's pretty much it; you now have a controller that will play your video on your site.

Streaming

You might be thinking, "That progressive download sure sounded like streaming to me. " Well, they are similar - both start playing before the video fully downloads and a lot of people use the terms interchangeably - but they are not identical.

True streaming video comes from playing your FLV files using Flash Communication Server MX. Is the quality higher? Well actually, if you're talking strictly about how the video looks (its colors and sharpness), progressive download and streaming are the same - a 300 Kbps-encoded FLV file is a 300 Kbps-encoded FLV file - no matter how it's delivered.

So How Is Streaming Different?

Streaming video files start playback almost immediately, at any point in the video. While progressive download is a big leap from completely downloading a video file and then playing, streaming takes it one step further. Very little of the video needs to be present in RAM to begin playback. This lets users scrub the video randomly (even frantically) and still, the video plays back almost immediately.
Streaming video plays without ever fully downloading to disk. Streaming FLV doesn't save to disk; there is never a file copy on a user's hard drive. This is an advantage to developers who want to make extra sure that no one can replay their video files.
Streaming video only requires Flash Player 6. This may not be a big deal to you, however, remember that Flash Communication server came out before Flash Player 7, so, you can stream video to users who have only Flash Player 6 installed.
Wait, that's not exactly true. You need to have access to a version of Flash Communication Server in order to stream video. Now, you can do that through a hosted solution called Flash Video Streaming Service.

Step 3: Get Creative: Customize How You Play Video on Your Site
Now that you've decided how you will encode and deliver your video, you're ready for the creative part - building your Flash Video player for your Web site. This isn't too hard, as Flash MX Professional 2004 has prebuilt media components that you can simply drag to the Stage and configure 1n a dialog box. And on top of that, you can now even use a handy Dreamweaver extension (included in the Macromedia Video Kit) to put your FLV in your page - without even going into Flash.

However, many of you will want to do much more. For example, you may want to create custom video players that integrate with your site. You may also want to synch the appearance of other graphics with your video, make your video play borderless within a scene, or overlay your video with interactive hotspots. To get these more customized effects, you need Flash MX Professional 2004.

If You Are a Flash User...

Flash MX Professional 2004 users get the best of both worlds when creating Flash files that host Flash Video. You can use the Flash media components to quickly get video into a Flash movie, then you just publish the SWF and the FLV files on your Web site.

If you want to start creating more complex video presentations, check out the Flash Video Templates, which you can download and modify for your own design and usage. The templates (see Figure 4) include model sites for playing personal video, corporate video presentation, a live video Webcast, and more.

Finally, if you're a real expert with Flash, we've provided the source code (FLA) and documentation for our Flash Video Gallery application on www.macromedia.com.

If You Are a Dreamweaver User...

Some folks who have Dreamweaver (or even Studio MX 2004) may not be that familiar with Flash, but want to get started quickly (and learn Flash later). The Macromedia Video Kit gives Dreamweaver users an easy way to place Flash Video in a Web page - without ever opening Flash.

The Macromedia Video Kit includes two very important components: the Flash Video extension for Dreamweaver MX 2004, and that special version of Sorenson Squeeze 4.0 that I mentioned earlier. With the kit, you can convert and encode any video on your computer to FLV using Sorenson Squeeze; then, with the extension, you can place that video on your HTML page - the extension takes care of building and configuring the video player for you.

Where To Go from Here

For more information on how to use Flash Video, visit the Flash Video Developer Center (www.macromedia.com/devnet/mx/flash/video.html), where you will find the most up-to-date information, as well as tutorials, and templates for making the most of Flash Video. You'll also find articles, including:

Flash Video Learner's Guide:
www.macromedia.com/devnet/mx/flash/articles/video_primer.html

Capturing and Encoding

Best practices for encoded prerecorded Flash Video: www.macromedia.com/devnet/mx/flash/articles/flv_encoding.html

Putting Flash Video on Your Web site

Macromedia Video Kit Tutorials: www.macromedia.com/software/studio/flashvideokit/ index.html?promoid=devcenter_flvkit_090204
- Presenting Video with the Flash Video Extension for Dreamweaver MX 2004: www.macromedia.com/devnet/mx/flash/articles/flv_tutorial.html
- Creating Custom Flash Video Skins for Dreamweaver MX 2004: www.macromedia.com/devnet/mx/flash/articles/flv_tutorial_pt2.html

Flash Video Templates:
www.macromedia.com/devnet/mx/flash/video_templates.html

Building a Video Presentation with Macromedia Flash MX 2004 Media Components:
www.macromedia.com/devnet/mx/flash/articles/media_components.html

Delivering Flash Video

Delivering High-Quality Video with Flash Video Streaming Server
www.macromedia.com/devnet/mx/flash/articles/fvss.html

For Advanced Flash Video Developers

Flash Video Gallery Source FLA File:
www.macromedia.com/devnet/mx/flash/articles/video_gallery.html