The Rise of Flash Video, Part 3

In: Articles

By Tom Green

Published on November 27, 2006

In the first two articles in this series, I traced the rise of the Flash video as a streaming media format, and demystified much of the hype around Flash video. In this installment, let’s get down to business and actually put a video on a site. You won’t need to learn how to do Flash animations—or learn anything else about Flash—in order to put videos online. You can jump right into preparing videos with Flash just by reading this article and some of the other resources I’ll recommend at the end. I’ll deal with the entire process, from someone handing you a video to a user actually viewing the Flash video in a browser, and you’ll do it without needing to know any code. Though the process is dead simple, the entire workflow can be both technical and, especially if you are new to Flash video, a little intimidating.

The tools you need to get going are not as extensive as you may think. They are:

• QuickTime Pro: Pay the extra cash for this because it allows you to save videos in a variety of formats, and is a very basic editing tool for such things as removing those few seconds of black screen at the start of the video. The current version of the application is Version 7 (Mac and PC) and you can download it at www.apple.com.
• Windows Media Player: This is the standard for the PC. The current version is Version 11. The key word here is “Player.” That is about all you can do with this software: Play the video on a PC or a variety of Windows-based devices, ranging from cell phones to the recently released Zune device. I’m recommending QuickTime Pro and Windows Media Player simply because it’s best to test your video in both, if possible.
• Flash Professional 8: You can’t get into the Flash video game without this cross-platform application.
• Flash 8 Video Encoder: This stand alone application is how the Flash video is created. When you install Flash Professional 8, the Encoder is also installed.

That is the bare-bones package. The players allow you to preview the video, the encoder allows you to create the video, and Flash Professional 8 lets you create the video application.

If you are serious about encoding Flash video, then consider picking up a copy of either of these two commercial Flash video encoding solutions:

• FlixPro: The current version, Flix 8.5, is available through ON2 Technologies. These are the same people who produce the ON2VP6 codec introduced in Flash 8 that has, in many respects, ignited the video explosion on the web.
• Sorenson Squeeze: The current version, Squeeze 4.5, is a full video compression suite offering both FLV and Digital Video compression. The interesting aspect of this application is that it offers the ON2VP6 codec along with its Squeeze codec as an FLV creation option.

If you are at all serious about creating Flash video, either one of these two tools is indispensable because they offer something not available through the Flash Video Encoder: two-pass variable bit-rate encoding.

Two-pass VBR encoding is what makes for a higher quality video than the constant bit-rate encoding offered by the Flash Video Encoder. In very simple terms, two-pass VBR trots through the video twice. The first time it runs through the video, it analyzes the changes in motion and so on. In the second pass, it does the actual compression. Constant bit-rate encoding, CBR, does the analysis and encoding at the same time. The result is a lower-quality video than that resulting from the two-pass. To actually see what I am talking about, head over to Flash Video FAQ and do a side-by-side comparison of the results of encoding through the Flash Video Encoder, FlixPro, and Sorenson Squeeze 4.3.

Image 1: FlashVideoFAQ lets you do side-by-side comparisons of the Encoders.

To take a deeper look at these two products, Elliot Mebane has recently published an excellent overview of them—and their strengths and weaknesses—at the Adobe Developer Center.

Step one: Preflight the video

With the tools in hand, someone hands you a video and it is now time to actually prepare the FLV file. The first thing you want to do is to ensure that you have the highest quality video in your possession. Open the video in the QuickTime Player or the Windows Media Player and see if Lossless Compression—uncompressed AVI for example—has been applied to the video. You can retrieve this information by selecting File > Properties in the Windows Media Player or Window > Show Movie Info in the QuickTime Player. If it isn’t lossless, then seriously consider returning the file, as I suggested in part two of this series, and request a version that is not lossy.

Image 2: The QuickTime Info window lets you see what you are working with.

Image 3: The Windows Media Player Properties dialog box.

The next step in the process is to actually watch the entire video—twice. The first time through, just enjoy the show and get it out of your system. The second time you watch the video, watch for movement, artifacts (little blocks or banding in areas of solid color which are indicators of lossy compression) and listen to the audio. What you find will help you determine your encoding strategy. This is one of the most important steps in the process. Scott Fegette at Adobe and I co-authored an article that walks you through this process. You can see it either at Community MX or at the Adobe Design Center.

Finally, if you insist on shooting your own video, you might want to read this rather informative piece, also by Scott Fegette. There are plenty of practical tips that will help you navigate the video minefield.

Step two: Encoding the video

This next step in the process is what separates you from the YouTube neophytes. As I pointed out in part two of this series, it is not Flash video that sucks on YouTube, it is how the FLV was encoded that makes it such a bad experience.

The Flash 8 Video Encoder is actually composed of two discrete areas: the encoding queue and the encoding settings. One really interesting aspect of the queue is that each video in the queue can have its own custom settings. The implication here, of course, is that the queue can be used for batch processing purposes.

Image 4: The FLV Encoder’s render queue can be used for batch processing of FLV files.

The Encoder window is where the actual encoding settings are applied. You access it by clicking the Settings button in the queue window. The biggest mistake you can make is to blithely assume that the list of presets in the Profile pop down is all you need to know. They are, to be gentle, not exactly correct.

The /files/includes/default.css setting is “Flash 8—Medium Quality (400kbps)”. Select this and you would assume that this will encode a video for broadband playback, but you’d be wrong. An FLV is composed of two tracks—video and audio. The data rate is the sum of both data rates. If you click the Advanced Settings button in the Encoding window, you will see the video data rate is, indeed, 400kbps. Look down to the bottom of the page and you will notice the audio data rate is 96kbps (stereo). The data rate, therefore, is not 400 but 496kbps. This rate is great if you have an internal intranet or a T1 one line but will not play smoothly using either cable or DSL access. The best advice I can give you regarding this window is to avoid the presets and do it yourself.

Image 5: Use the /files/includes/default.css values only as a last resort.

To do it yourself you need to know the Flash Player version being targeted and how the user will be accessing the video. For example, if you are adding a video to an intranet, and your company’s IT department is absolutely draconian about allowing people to install software on the company’s computers, the odds are virtually one hundred percent that the people affected by this policy do not have Flash Player 8 or 9 installed. In this case you will have to use the Sorenson codec. Though I may playfully be taking a swipe at the IT department, if your intention is to reach the broadest possible market, then Flash Player 7 and the Sorenson codec are your only options. However, at this point, Adobe says that ninety-three percent of the market has at least Flash Player 7, and seventy-nine percent or so already have Flash Player 8.

If your video contains an alpha channel (transparency such as the weather reporter in front of a green screen) or uses the FLVPlayback component, Filters, or Blend effects contained in Flash Professional 8, then your only choice is the ON2VP6 codec, which only works in Flash Player 8 and 9.

Knowing how users will be accessing the video is, in many respects, even more important than the player version you will choose. Imagine having dial-up access and the video is sized and encoded using the encoder’s /files/includes/default.css. Not only will it take forever for the file to download and play, but the playback will be, to be gentle, horrendous. The reason is the data rate. You will be overwhelming the player, attempting to push a watermelon through a worm.

Here are some rough guides for data rate and size for broadband and dial-up:

Dial-up: 120×90 and a total data rate of less than 100kps.
Broadband: 320×240 or 240×180 and a total data rate of less than 350kbps.

These are rough numbers. If you are looking for a more complete set of guidelines, William Caulfield has published a rather extensive article on best practices in encoding, which reviews encoding video for a variety of delivery situations.

Other factors that can affect the experience are frame rate, the physical size of the video, and the audio data rate. As you get going you will determine the settings that work best for you. Until then, these settings tend to work in a variety of situations:

Size: 320×240
Frame rate: 15 frames per second
Audio date rate: 64kbps (mono)

Size: 640×480 (full screen) – See more about full screen video here.
Frame rate: 5 frames per second
Audio date rate : 48kbps (mono)

Another good benchmark for frame rate is to set it to half of the frame rate used to encode the video in the first place. In North America we use the NTSC standard, which is 29.97 frames per second. This is always rounded up to 30 frames per second when it comes to digital video meaning the FLV frame rate can be 15 frames per second. In Europe the standard is PAL which is 25 frames per second. In this case the frame rate can be either 12 or 15 frames per second.

The audio data rate is another area where many of the decisions you will make will be subjective, not objective. If clarity of sound is a major objective, then selecting one of the Stereo Data Rate presets is the way to go. Just be aware that the higher the value, the more weight you will be adding to the final file size. Select mono if the clarity of sound is not a huge issue and the user couldn’t care less if a high-quality sound track blasts out of his stereo speakers. A great candidate for mono sound is a voice-over or narration.

The final consideration is placement of keyframes. In a digital video, there are two types of frames. Keyframes have all of the information in the frame retained. Difference (or delta) frames only contain, in very simplistic terms, the visual data that changes between the frames. As you may have surmised, the size of a delta frame is considerably smaller than a keyframe. Spreading out the keyframes—for example one keyframe every 300 frames—is how FLV files finish up being so small. Though you can manually set the spacing of the keyframes in the Encoder, this is one of those instances that, if you don’t have a lot of encoding experience, you may want to let the software do the work, so select Automatic in the keyframe placement pop down menu.

Image 6: Disgruntled Dan is ready to be encoded.

Once you have put your settings in place, click the OK button to return to the Render queue. When you return, click the Start Queue button and you will see the progress of your encoding. The end result of the process will be an FLV file which will be placed in the same location as the source file being encoded. It is at this point where a lot of people new to this process are a bit astounded. The file size for the final video has plummeted. For example, the QuickTime version of the video being used in this section weighs in at 38.2 MB, while the FLV created using the encoding settings has a final size of 8.6 MB. What you are seeing is a combination of how a lossy codec, frame rate, video data rate, audio data rate, and final physical size affect the process.

Image 7: The video is being encoded.

Before we leave the encoder, a common request for video is how to make it accessible. The best way of doing that it to add closed captions to the video. This is a rather extensive discussion which is out of the scope of this piece, but one aspect of the Encoder—cue points—is critical when adding captions. Though you can add the cue points using the Encoder, I am a bit leery of hard wiring anything into an FLV. If you are wrong on the timing of a cue point you are facing the task of re-encoding a video because once a cue point is embedded, it isn’t able to be removed. This explains why many Flash video creators tend to add these things using ActionScript, or use third party tools for closed captions. If you are looking to add closed captions to a small video, I have written a how-to. If you are looking for an industrial-strength, third party solution, one of the best out there is a product called Captionate.

Playing the video

Having created the FLV, the time has arrived to head to Flash and prepare it for web playback. In the interests of keeping this article focused, I won’t be getting into using ActionScript to play a video or using the Flash Media Server to play the video. These aren’t essential for putting a video online. Instead, I will walk you through the use (and abuse) of the FLVPlayback component found in the Flash Professional 8 Component library.

When you open Flash, the first thing you want to do is to immediately save the new .fla file (FLA) to the directory containing the FLV and which will be uploaded to your web server. Do this now and you will avoid a ton of grief later on, as you will see.

When the new document is open and saved, open the Components panel by selecting Window > Components. Open the FLVPlayback – Player 8 component and drag it from the panel to the stage. This component is your entry into the world of Flash video. It is dead simple to use but there are a couple of gotcha’s that will bite you if you aren’t aware of them. The first thing you need to know about this component is that it isn’t a movie clip. Like all Flash components, this one has its own methods and properties. Unlike most Flash components, this one is really, really easy to use and requires zero knowledge of ActionScript.

With the Component on the stage, select and click the Parameters tab in the Property Inspector, or select Window > Component Inspector. The list of parameters can, at first glance seem to be a bit bewildering. In actual fact, they are pretty concise. Let’s review them:

• Autoplay: The /files/includes/default.css value for this is True. What this means is the video starts to play once enough data is sitting in the browser cache to play the video. If you are going to have a set of controls attached to this component, change the setting to False. This way, the user controls when to play the video.
• autoRewind: The /files/includes/default.css is True. Don’t assume this parameter is what makes a video loop. All it does is to scoot the video back to the first frame when the video has finished playing.
• autoSize: Leave this at False. Changing the value to True means the video gets bigger or smaller depending on the size of the browser window.
• bufferTime: The /files/includes/default.css value is 0.1 seconds, meaning a tenth of a second of the video data is always in the buffer. I have found values between 0.1 and 0.5 seconds work best. Also keep in mind, the amount of time being buffered is also being added to the load time. If you set a buffer of 1 second then the user will have to wait for the video to load and then wait another second for the buffer to fill. If you don’t need to change this value, then feel free to ignore it.
• contentPath: This is the path to the FLV file. This is also where most of the grief around Flash video originates. The path can be either absolute or relative. We understand that, but there are two absolute paths that could be used here. If you click the Browse button and locate the FLV, the absolute path might just be “C:Documents and SettingsusernameDesktopDigitalWeb3DisgruntledDan.flv”. If that is the path it will be embedded into the SWF when you publish the project and the Player will look to that path to find the FLV. Not a good situation. This is why I asked you to save the Flash file to the same directory as the FLV. In this case the link will be relative—DisgruntledDan.flv—and the video will always be found because the SWF and the FLV are in the same directory.
• cuePoints: Any cue points added when the FLV was created will appear, or you can click on the parameter value to open the Cue Points dialog box and add them.
• isLive: Change the value to True only if a web cam is streaming a feed through the component.
• maintainAspectRatio: Always leave this at True.
• skin: Click on this and you get to choose one of over thirty control styles. The styles with “External” in the name will sit under the video. The styles with “Over” in the name will appear over the video. These skins can be customized and branded, but the process for this is well out of the scope of this piece.
• skinAutoHide: The /files/includes/default.css is False, meaning the skin or controls are always visible. Set the value to True and the user will have to roll the mouse over the video to make the controls visible. I am not a huge fan of setting the autoHide parameter to True. The reason is, depending upon the video used, there may just be an image in the first frame of the video. If the autoPlay parameter is set to False and the autoHide to True the user has no way of learning if the content is an image on the page or a video. Bottom line: One or the other, but never both.
• totalTime: This is the duration of the video. Add a value here and the time the video plays is set to that value. Leave it 0 and the Component knows it has to play the entire video.
• volume: The /files/includes/default.css value of one hundred is full volume. Be careful with this because some of the controls you may choose in the skin parameter don’t contain a volume control.

Note:
In the image below, I use the Component Inspector to set the parameters. This is because the window containing the Parameters in the Property Inspector can’t be expanded. I wanted you to be able see them all in one place.

Image 8: The parameters are set and the video is almost ready for upload.

Targeting Flash Player 6 or 7

There will be occasions where the target player is Flash Player 6 or Flash Player 7. In these cases you can’t use the FLVPlayback component. You need to use the MediaPlayback component found in the Media Player – 6 – 7 area of the Components panel. Using this one is almost as easy as using the FLVPlayback component. Once you drag the component to the stage, select it, open the Component Inspector and click the parameters tab in the Component Inspector. As you can see in Image 9, the major differences, apart from the classic Halo style used by Flash components are that you have to enter the length of the video and a frame rate, and also determine the location of the controls. One major gotcha with this component is that it will not play a video encoded using the ON2VP6 codec.

Image 9: Use the Media Playback component if Flash Player 7 or Flash Player 6 are your targets.

With the parameters set, you might want to press ctrl+enter (PC) or cmd+return (Mac) to test the movie. If you don’t see a video playing, check the path to the FLV, and be sure the FLA and the FLV are in the same directory.

Assuming all is working as it should, the next step in the process is to trim off the excess weight by setting the Flash stage to the same size as the FLV. Be careful here because another gotcha will rear its ugly head.

If you select Modify > Document and select the Contents button in the Match area of the Modify Document dialog box, you will see that the dimensions of the contents are 320×240. If you click OK, the Flash stage will shrink to the size of the video, but the controls will be left hanging off of the edge of the stage. If you do this, the controls will not be visible when you place the SWF into the HTML document. This is more an issue with the External controls (rather than the Over controls) you chose in the parameters. If you are using an External control, add another forty or forty-five pixels to the height of the stage.

Image 10: Selecting contents without adding some extra height to the stage will result in the loss of the controller on your web site.

Publishing the SWF

Having removed the unwanted space from the stage, the time has arrived to publish the video and get it up on your web site. When you select File > Publish Settings you have the choice of publishing just the SWF or the SWF and the HTML (in the Formats area of the Publish Settings dialog box). Being a hard core Dreamweaver 8 user, I rarely publish the HTML and, if you prefer to do it by hand, then you too can deselect the HTML option. All the HTML option does is create an HTML page with the necessary Object/Embed tags, and not much else.

Again, be aware of a gotcha that catches the uninitiated. If you look at the path to the SWF, you may just see another absolute path pointing to a location on your hard drive. This is a really bad idea. If you see the path, click the Browse button and navigate to the directory containing the FLA file and the FLV file. When you return to the Formats area, click the Use Default Names button and this will strip off the path to the directory.

If you are targeting the Flash Player 7 or the Flash Player 6, click the Flash tab in the Publish Settings, and select the player in the version pop down. Just keep in mind that if you are using the FLVPlayback component and select either the Flash Player 7 or the FlashPlayer 6 you will see an alert box suggesting this might not be such a good idea.

Return to the Formats area and click the Publish button. A small dialog box will appear showing you the publish progress. When it disappears, click the OK button to return to Flash. Save the FLA and quit Flash.

Image 11: Publishing the SWF.

If you open the directory where you saved the SWF you will see the following files:

• The FLV
• The FLA
• The SWF
• Another SWF named after the skin you selected.

Whatever you do, don’t move the SWF and the controls to different directories. Do this and the video will be broken. Always keep them in the same folder. In fact, if you can, keep the HTML, the FLV, the SWF and the controls SWFin the same folder. Do this and you are guaranteed the video will always play.

Image 12: Keep the Controller and the Flash SWF in the same directory.

Once the SWF is placed on the web page, it can be treated no differently than any other content on the page. For example, you can use CSS to run text around the video, or place the video in its own location on the page.

Conclusion

This article completes the series on “The Rise of Flash Video.” If you have been following the series, I traced how Flash video muscled out the big boys to become a standard in very short order, and dealt with many of the quality and security concerns raised around the use of Flash video.

This installment walked you through the Flash video process, starting from being handed a digital video to uploading the video and using it in a web page. As you may have surmised, though the process is fairly uncomplicated, there are plenty of opportunities to make mistakes. One of the most common, when it comes to using the FLVPlayback component, is not using a relative path to the FLV. Another is placing the video SWF in one directory and the controls SWF in another.

I also covered creating the FLV using the Flash 8 Video Encoder that ships with Flash professional 8 and, again, pointed out areas where making mistakes or assumption around data rate can result in a poor experience for the user.

Obviously, there is a lot more that you can do with Flash video, especially if you are familiar with ActionScript. You can, for example, create some rather interesting effects by applying Blend Modes and Filters to the video. You can create playlists that allow one to choose among a number of videos, have a sequence of videos play, and even have one video transition into the next one when it finishes playing. Still, the process starts with mastering the basics and expanding your knowledge from that point outwards.

As I am fond of saying, “The amount of fun you can have with Flash video should be illegal.”

I’ll see you in jail!

---

Flash video links:

Here is a list of links you might wish to explore as you become more comfortable with Flash video:

• Adobe Design Center. A great source for ideas and tutorials.
• Flash Video Developer Center. Ground zero for all things Flash video.
• Community MX. A regular series of Flash video articles are posted by a variety of contributors.
• Tom On The Web. My free tutorial site which contains quite a few “How To’s.”
• GoToAndLearn. Lee Brimelow has quite a few video tutorials that range from basic to advanced.

Accessibility:

• Captionate

Books:

• Foundation Flash 8 Video. Authored by me and Jordan Chilcott, this book, published by friendsofED, is designed to get you going.
• Flash 8 Essentials, Paul Barnes-Hoggett et al. The video chapter in this friendsofED book is worth the price of the book.

Other sources:

• Bye Bye Embed. Elizabeth Castro frees herself of the Object/Embed shackles around Flash video.

• Add to Magnolia
• Add to My Yahoo!
• Add to Newsvine
• Digg this story
• Add to Del.icio.us

Related Topics: Flash, Convergence