The Secret to Effective HTML Page Title Tags
The CS5 CSS Starter Page Series - Part 9: Quality Assurance
Quickshot - Using Subqueries and Count to Display Membership Counts Per RegionThe CS5 CSS Starter Page Series - Part 8: Adding a Custom Font
Formatting Currency Values in JavaScriptThe genesis for this article started over a conversation between Scott Fegette and myself at TODCON 8 this past May. Both of us are spending an increasing portion of our time exploring the subject of the uses, abuses and potential for Flash Video among users and Adobe customers. Though we move in different circles, a major intersection point for our careers has become the number of emails and conversations we have had with people that start with, "I can't seem to get this Flash Video stuff working."
When we compared notes at TODCON we realized the root of most problems with Flash Video is not the technology but the actual creation and deployment of Flash Video. More specifically, there appears to be unfamiliarity with the intimate relationship between data rates and bandwidth when the FLV is created. In this article we will deal with this relationship and strip away some of the mystery surrounding it.
No matter how you approach the subject you have to understand that you really aren't dealing with video. What you are doing is managing a stream of audio and video data into the Flash Player.
In many respects, what you become is the manager of a river dam. If the floodgates are at the proper setting, the water flows out of the dam and stays within the banks of the river below the dam. An improper floodgate setting releases far too much water for the river to handle and the town downstream from the dam gets flooded out.
When it comes to video, if the floodgates are wide open the video plays and stops. What is happening is that a torrent of video and audio data is overwhelming the Flash Player. When this occurs the player will buffer the data and then release it. This explains why the video stops and starts. The most common cause of this video issue is the use of an overly large data rate when the FLV is created. As one of the authors is fond of saying, "Set the data rate too high and what you are attempting to do is this: Push a watermelon through a worm".
Another common misconception is that you need to write ActionScript to control Flash Video playback. This is not exactly correct. The ActionScript you write controls the data stream. The play() and pause () methods of the NetStream class turn the stream on and off. They don't turn the video on and off. This is an important concept to grasp when approaching Flash video.
Before you create the FLV you need to have a plan of action. You simply can't encode a full screen video and expect your users to marvel at your technological prowess. The only marveling that will occur is your marveling at how fast people leave the page.
The first major consideration is user bandwidth. It is still a fact of internet life that there is a definite bandwidth split. If you live in a large urban area, the odds are you have access to a high speed internet line either through a cable modem or DSL service. If you are in a rural area, the odds are very good you have a dial up service. If you expect the bulk of your users to be urban-based then a video with the physical dimensions of 320 by 240 will work. That same video will clog a dial up line. In this case a video with the dimensions of 120 wide by 90 high will be about as large as you can go.
If you are unsure of what physical dimensions to use for a video, follow these rough guides as a starting point:
It is pretty common for VGA-sized files – 640x480 – to work well at respectable bitrates – but you really have to get nitpicky with settings to do so. Talking head videos or ones with very limited motion of course survive this conversion the best.
The next step in the preflight process is to actually watch the video. That means open the video in the QuickTime or Windows Media Player, sit back and watch it. In fact, watch it twice. The first time through the video let's you get the enjoyment factor out of your system. The second time you go through the video, pay careful attention to the action in the video, the image quality, the colors used and the audio. All three of these factors will have a profound effect on the final compression you do in the Flash 8 Video Encoder.
Now that you have a good idea of what is going on in the video, you now note the video's length, dimensions, frame rate and the audio and video codecs used to create the video. In the Windows Media Player, these settings can be found in File > Properties (Figure 1) or by selecting Window > Show Movie Info (Figure 2) if you use QuickTime.
Image 1: The Windows Player gives you a lot of the valuable
information you will use when creating the FLV
Image 2: QuickTime's Movie Info can be found in the Window
menu.
The dimensions and frame rate of the video are the most important pieces of information. If your plan is to increase the size of the FLV to one larger than the original video, you are setting your self up for a nasty quality issue. Resizing a video upwards has exactly the same effect as resizing a Photoshop image upwards. The only thing that gets bigger is the pixels, resulting in a serious degradation of image quality. The other thing to consider regarding the size is the Aspect Ratio. Standard video has a 4:3 aspect ratio. Moving a video out of that ratio will introduce distortions to the video.
This last point is important. A couple of months back one of the authors was approached by a user and accused of spreading false information. His videos, as he put it, simply weren't working, in fact they were distorted, even though he was using a 4:3 aspect ratio. When the author looked at the original file, the dimensions were 200 by 177. If you want your video to play perfectly, every time, use the dimensions presented earlier.
Frame rate is your next consideration. Broadcast video and many home video cameras will record and play back the video at the NTSC standard rate of 29.97 frames per second (commonly referred to as 30 frames per second or 30 FPS). The other broadcast standard, common in Europe, for example, is PAL, which has a frame rate of 25 frames per second. Neither is appropriate for Flash Video. A frame rate of 30 or 25 fps will often overwhelm the Flash Player. If the video is recorded at 29.97 or 30 frames per second, use a frame rate of 15 frames when creating the FLV. If the video is recorded using the PAL standard, then a frame rate of 12 fps will work. But use your judgment, if your video content has lots of fast motion and transitions, you may require a faster frame rate to adequately display the video. In these cases, you'll need to look elsewhere for optimization – by either adjusting the physical dimensions of the video file smaller, or lowering the bitrate.
Finally, most other video codecs – including the DV format itself, as well as popular online codecs such as MPEG 4, H.264 and AVI – are lossy codecs. This means information will be lost when the video is compressed in the interest of making the file size smaller. When you create the FLV you will be further compressing an already compressed video! It has exactly the same effect as applying JPG compression to a JPG image in Photoshop or Fireworks. The end result will be a video that looks a bit "fuzzy" thanks to the lost information. Those crystal-clear videos you see on a number of sites are due to the fact the videos were shot professionally and then digitized using a lossless codec before they were encoded in the Flash 8 Video Encoder. On the Macintosh, the popular lossless codecs are Apple's QuickTime Animation or Video codecs, and on Windows, the uncompressed AVI format. Use these codecs when you're editing or compositing your footage before encoding to FLV, so that you can encode a high-quality, flattened final version into FLV and avoid multiple encoding passes that can quickly degrade quality.
If you are working with a third-party company who supplies your video, request they apply a lossless codec to the video file they will be giving you. If you are using AfterEffects, Premiere or even Final Cut Pro to create or clean up the video, the best advice we can give you is this: Create a QuickTime movie using the Video codec or, if the video incorporates an Alpha Channel, use the Animation codec with the Color Depth set to Millions +. When it comes to video , experience has shown us, the QuickTime format creates far superior results to the .WMV and AVI formats. As well, avoid the temptation to export the video directly to the FLV format from a video editing application. Another common problem with exporting digital video (DV) footage output directly from an editing applications is that interlacing – the splitting of each video frame into two independent sets of fields (alternating rows of pixels) – wreaks havoc with encoding and results in bloated file sizes. To avoid this, always render a de-interlaced (progressive) version of your video before encoding to FLV. By doing so, you remove the 'ghosting' effects interlacing can cause when playing back on computer screens, handheld devices and phones (which generally only display video as progressive frames anyway).
The final preflight decision is to target the Flash Player version. Though Flash 8 Player and now Flash 9 Player are receiving faster adoption than normal, it is a fact of life that Flash Player 6 and Flash Player 7 have even deeper penetration. The other factor to consider is many users will view your work from within a corporate setting. In this instance, the IT department, as a general practice, is slow to adopt the Flash 8/9 player. Most IT departments have stringent corporate rules regarding the installation of any software, including browser plug ins, on corporate-owned computers. If this is the case, then you will have to target the Flash 6/7 Players.
The decision will have a profound impact upon both the design of the project and the codec that can be used. If you target the Flash 8/9 Player you can:
If you target the Flash Player 6/7 Player you can:
Having completed your preflight you should have a good idea of your bandwidth strategy, the dimensions of the video and its frame rate. With that information in hand, you can now concentrate on creating the FLV. If there is a common complaint regularly encountered by the authors it is this: "I use default values all the time and still get lousy results. What's with that?" The answer is the default settings are like throwing grenades. The default values in the Encoding settings, at best, are rough approximations aimed more at general usage than your specific needs.
When you arrive at the Encoding Settings panel, you should:
Image 3: When you arrive here, ignore the defaults, name
the file and click the Show Advanced Settings button.
Clicking the Show Advanced Settings button opens the rest of the Encoding Settings panel and this is where you need to make several extremely important decisions.
The first decision you need to make is which codec to use. The two codecs in the video codec pop down are Sorenson Spark and ON2VP6. As pointed out earlier, the choice of codec is directly tied to the Flash Player version you have targeted. ON2VP6 can only be used for projects targeted for playback through the Flash 8 and Flash 9 Players. If your project contains an Alpha channel, you can only target the Flash Player 8 or the Flash Player 9.
Having decided upon the codec the next step is to select the frame rate for the FLV file. If you click the Frame rate: pop down menu you will be presented with a number of choices ranging from the same frame rate as the video to be encoded to 30 frames per second (fps). This is the time for you to refer to the notes you created when you previewed the video in either QuickTime or Windows Media players. The frame rate should either be 12 or 15 frames per second for most all applications.
Like all rules, this one can be broken. One of the authors has prepared several video tutorials using screen capture software. These captures are usually done at a physical size of 640 by 480 and, in order to ensure smooth browser playback, he sets the frame rate to 5 frames per second. This can be done by selecting the value in the frame rate input area and entering the value from the keyboard.
The next decision you will make is Key frame placement. Your choices in this pop down menu are Automatic and Custom.
In many respects a video is much like a series of images on a timeline. The problem is each image will need to be drawn and this explains why digital video files can be rather hefty in size. To reduce the size of the video file and the "hit" on the processor, digital video employs two types of frames: key frames and Difference or Delta frames.
A key frame is a frame in the video containing the entire image. A Difference frame , if you could see it, contains only the differences between the frames. If you were to film one of the authors walking in front of a wall the key frame would look like a Photoshop image and would contain the author and all of the details in the wall. A difference frame would not contain the wall because it hasn't changed. The information in the difference frames is not lost, it is simply stored and added back into the frame when the video plays back.
This is a critical concept to understand because it has a major impact upon the final file size of the FLV. Let's assume a video is composed of nothing but key frames and is encoded at 15 fps. If each frame of the video is 15k then one second of video would have a file size of 225k. Now let's apply one key frame per second. This means at Frames 1 and 15 the full image is in place but the 13 frames between then are difference frames that, for illustration purposes, have a file size of 5k because the stuff that doesn't change is removed. The file size of that one second clip plummets to 95k.
Both the ON2VP6 and Spark codecs spread the key frames out even further. It is not uncommon, for example, to see them place a keyframe every 300 frames. If we do the math, you will clearly understand why FLV files traditionally are around 10% of the file size of the original video.
Three hundred frames of a video playing back at 15 fps means there is one key frame for every 20 seconds of video. Using our previous example the size of the video with one key frame every second weighs in at 1.9 mb. An FLV with keyframes spaced at 300 frames apart results in a 20-second video that has a file size of 1.5 mb.
The other factor that plays into FLV quality and key frames is the movement in the video. If the video contains Formula 1 racers zipping by you or lots of pans and zooms, the key frames will need to be placed closer together. If the video contains nothing more than a tree in a farmer's field, the key frames can be spread apart with no quality loss. This explains why we suggested you watch the video before encoding.
The great thing about digital media is there are certain rules we live by
when using software. The first rule is: Let the software do the
work. This means, unless you are a seasoned digital video producer,
it is best that you select the Automatic option. When you select this option
the codec will scoot through the video looking for areas with lots of changes –
racing cars zipping by – or few changes – a tree in a field – and
will determine the key frame placement for you. The major difference between
the Spark and ON2VP6 codecs, apart from the Player version specificity, is
the ON2VP6 codec, in general, does a better job with fewer key frames than
its Spark counterpart.
Image 4: Don't always go with the default settings.
If your resulting FLV files still need to go on a size diet, you may want to override the Automatic keyframe setting by specifying a custom keyframe interval. For general usage, an interval of 5 seconds is a good place to start – simply multiply your target frame rate (in the example above, 15 frames per second) by 5 (seconds), and enter the result – 75 frames – into the Keyframe interval field. If your video quality is poor, reduce the interval by a second (15 frames) and try again. Unfortunately, the best way to preview different keyframe settings is to render versions at different interval values, and compare them visually. But that's why we all love the batch processing available in the Flash 8 Video Encoder, right? Just set up your renders and let them process overnight so you can let your computer do the heavy lifting.
Image 5: Start by setting the codec, frame rate and key
frame placement.
If there is one area of confusion regarding the Flash 8 Video Encoder it is the misconception that higher data rates means higher quality. In a perfect world where the FLV would reside on your local hard drive, this may be accurate – but when you put the network between your viewers and the FLV file they're viewing, data rate becomes your prime consideration. It is not uncommon for the authors to be sent links to videos where the FLV creator is wondering why his video has such poor quality even though he set the data rate to over 1,000 kbps! What floors us is that rate is only for the video portion of the FLV.
The first thing to understand about data rate is that video traditionally contains two tracks: the images are on the video track and the audio is on a separate track. What this means is that the data rate for the video is separate from the audio data rate.
This also means the total data rate for an FLV is the sum of the video and the audio data rates. For example, the default setting for the Flash 8 Video Encoder is Flash 8- Medium Quality (400 kbps). If you open the Advanced Settings you will also see the data rate for the Audio encoder is set to 96 kbps. Thus the total data rate for the resulting FLV will be 496 kbps which is more appropriate for a Corporate LAN situation than web playback. Using the Dam Keeper analogy presented at the start of this article, at that rate the floodgates are wide open and the town downstream from the dam is about to have a really bad day.
So what is the magic number? In a high bandwidth situation the totals of both the video and audio data rates should be less than 350 kbps. In a dial up situation, the total should be no more than 100 kbps. Which leads to the next question: So what is the magic number for the video portion?
The answer is any data rate between 200 and 275 kbps in a broadband situation and about 60 to 70 kbps for dial up. If the majority of your viewers will be on a local network (i.e. an Intranet site or other internal web application), you can get by with 400-600kbps in many cases, but these bitrates will require almost perfect network and client/viewer environments to not be affected by bandwidth constraints. We wish we could give you a specific 'magic value' for bitrate settings, but variables such as motion, physical size of the video and lots of zooms and pans can require higher rates than the proverbial tree in a field. You'll need to balance your qualitative aesthetics against real-world network constraints and the specific content of your video to get the best results.
Image 6 : Keep the video data rate below 275 kbps
Now keep in mind, it is easy to be lulled into a false sense of complacency by the blazing-fast playback on your desktop when previewing FLV files encoded at astronomically-high bitrate settings, perhaps even when deployed on LAN networks. But we beg you – consider the average user and try to respect bitrate settings that reflect your audience's real connection speeds.
When the Flash Player runs into situations where it cannot keep up playback due to bitrate issues, it will often take matters into its own hands and either drop your visual quality, your frame rate, or both. Don't let network traffic and speed dictate the quality of your video – and be prepared to make compromises in order to keep your encoded bitrate reasonable for everyone.
The audio data rate is also going to require a major decision on your part. The decision is this: Will it be mono or stereo sound? We suggest you go with a mono rate of either 48 or 64 kbps not because we have "tin ears". A mono sound track means a reduced demand on bandwidth. It would also be a good idea on your part to be pragmatic when it comes to choosing mono over stereo. If your audio is mostly spoken voice, 48kbps is a fine option, but if you have more complex sound in your footage – soundtracks, music, sound effects – you may need to go well above 64kbps to preserve the important nuances in your audio. But be realistic, if you really think about it, the average viewer won't be able to tell the difference between stereo and mono sound simply because in many cases, the cabinets that enclose the electronics for the speakers are worth more than the electronics themselves.
Image 7: More often than not,you really only need mono
sound for Flash video.
In this article we hope we have sensitized you to the nuances and decisions involved in creating an FLV for playback through the Flash Player. As you have discovered, this process involves more than simply selecting a preset value in the Flash 8 Video Encoder and then rendering the FLV.
You need to first preflight the video paying careful attention to the motion, color and other properties of the video. These will go a long way to determining the appropriate bitrate and keyframe placement in the final FLV. Another consideration is targeting the appropriate Player. Depending on the version targeted, your choice of codec and video playback components will be limited. The final point was that video created in a digital video editing application should be output in a non-compressed format and we suggested a couple of codecs that, depending on platform and format, you can use.
We also explained how to choose a codec as well as the importance of the frame rate and keyframe placement. Though you can manually determine keyframe placement we suggested letting the software do the job for you.
We then tackled the issue of data rate. You should now understand that the data rate for an FLV is the combination of the audio and video data rates. We explained a couple of scenarios where higher data rates, for both the audio and the video tracks, may work but on the whole you will achieve consistent playback results if the data rate total is kept to under 350 kbps.
Having given you this information we are going to leave you with one final piece of advice. The suggestions we have made are guidelines. Feel free to experiment because when it comes to Flash Video the first rule of Digital Media Physics comes into play. It states: For every action there is an equally opposite and ugly implication. You now have a starting point and, we hope, the confidence to understand what may be behind video that stops and start, is blurry or pixelated and how to fix it.
Keywords
Flash, Flash 8 professional, Flash Video
