Rants,Raves and Ruminations

Here's a very short excerpt from my new book Foundation Flash CS3 Video to be published later this year by friendsofED.

In mid-December 2007, Adobe quietly released Update 3 for the Flash Player 9, which updated the Player to version 9.0.115.0. It was odd that the release was so quiet because along with the usual bug fixes and so on, Adobe slipped in an update to the FLVPlayback component that allows you to use this component, instead of a video object, to play back HD video.

Shortly after that, in late January 2008, Adobe also released an updated version of the Flash Media Server (FMS). Actually it was two versions: Flash Media Interactive Server 3 and Flash Media Streaming Server 3. Apart from eye-popping price drops (have you ever seen the price of software drop to about 10 percent of its previous value and still include an amazing lineup of feature additions?), the FMS 3 line up includes the capability to stream HD files instead of using the Progressive Download method we have been using throughout this book.

Here’s the Executive Summary regarding the differences between streaming and a Progressive Download. If you use the Progressive Download method, the video file loads into the browser cache and starts playing when enough information is in the cache to start playing the video. A stream doesn’t put anything in browser cache and starts playing as soon as the first bit of information hits the Flash Player.

Included in the Streaming Server is a feature that should appeal to practically everyone thinking of using FMS 3 to stream video. If there was one common “rap” against the FMS, it was the fact it was really hard to learn and required you to master another subset of ActionScript to harness the power of the server. Simply getting a video to stream from the FMS into the Flash Player required you to write both server-side ActionScript and client-side ActionScript. As well, if the files were not in their proper locations, the odds were about 300 percent that the video wouldn’t play. This is now a thing of the past thanks to the inclusion of a video on demand (vod) feature in the Streaming Server.

In this exercise, we’ll give you the opportunity to try out the vod feature and play an HD video using the FLVPlayback component.

I want to thank William Hanna, Dean of the School of Media Studies and Information Technology at the Humber Institute of Technology and Advanced Learning, for permission to use the clip used in this exercise. The clip is taken from a video series (Earley Bird) that was produced by a group of students and graduates known as the Producer’s League.

Let’s get started:

1. You’ll need to install a Developer Edition of FMS 3 on your PC. (There is no Mac version available at this time; FMS 3 only comes in Windows or Linux editions.) Point your browser to www.adobe.com/products/flashmediastreaming and click the Download the free developer edition link on the page.
   
   
2. When the download finishes, double-click the Installer and follow the onscreen instructions. If you are curious or a bit nervous about what will be going on during the installation, one of the authors has written a small guide that walks you through the installation process at www.adobe.com/devnet/flashmediaserver.
   
   
3. Navigate to C:\Program Files\Adobe\Flash Media Server 3\applications\vod\media on your PC and copy the Vultures.mp4 (You can pick it up at the end of this post) file to the media folder found in the vod folder.
   
   
4. This folder is really cool. The vod service lets you stream any file (FLV, MP4, or MP3) located in this folder without your having to write a line of code to build an application or playing with the server. The other really neat thing is that you can use the Flash CS3 or the Flash 8 FLVPlayback component to play the video.
   
   
5. Open a new Flash CS3 document and set the stage size to 854 pixels wide by 520 pixels high.
   
   
6. Add an FLVPLayback component to the stage and set its dimensions to 854 pixels wide and 480 pixels high. In the Property Inspector, set the component’s X and Y coordinates to 0,0.
   
   
7. Click once on the component on the stage to select it and click the Parameters tab in the Property Inspector. Use these settings in the Parameters:

• align: center
• autoPlay: true
• cuePoints: None
• preview: None
• scaleMode: maintainAspectRatio
• skin: SkinUnderAllNoCaption.swf
• skinAuthoHide: false
• skinBackgroundAlpha: 1.00
• skinBackgroundColor: #009933

8. Double-click the source parameter. When the Content Path dialog box opens, enter rtmp://localhost/vod/Vultures.mp4 (see Image 1). Make sure that you do not select Match source FLV dimensions and Download FLV for cue points and dimensions.

Image 1. You have to manually enter the path to the video in the Content Path dialog box.

The address uses an RTMP address, not the HTTP address you are familiar with. RTMP is a proprietary protocol developed by Adobe specifically for the FMS. When an RTMP address is detected, Flash is smart enough to figure out where the server is located (in this case, on your computer) and poke into the applications folder to find the vod folder. From there, it is also smart enough to figure out that the video, if it is in the media folder, is in the vod folder.

9. Save the movie and test it. When the SWF file launches, the video starts to play.

This is a very simple example of the FMS in action. To actually use it to feed a video into a SWF file on a web page, you will need to use the RTMP specifications given to you by your ISP or Flash video streaming service. That, dear reader, is well out of the scope of this book.
What about those of you who don’t have a FMS account? No problem:

10. Save the Flash document to the same folder as the Vultures.mp4 file. Open the Content Path dialog box . Simply enter the path to the MP4 file on your computer into the Content Path dialog box.

If your file is destined for playback from your web site, be sure to enter the path http://www.mySite.com/HD/Vultures.mp4 before you compile the SWF file.

11. Save and test the movie.

Image 2. Enter the path to the video if you don’t have access to FMS 3.

Here’s where this whole thing gets really cool. Earlier in this chapter we showed you how to go full screen with HD content. The project you have been using contains a Full Screen button in the skin. Here’s how to enable the full-screen feature of the skin:=

1. With the Flash movie open, select File > Publish Settings. In the Formats area of the Publish Settings dialog box, select both the Flash (.swf) and HTML(.html) file formats.
   
   
2. Click the HTML tab and select Flash Only - Allow Full Screen from the Template drop-down menu.
   
   
3. Click the Publish button.
   
   
4. Navigate to the folder containing the HTML just generated and double-click it to launch the page in a browser.
   
   
5. When the video starts playing, click the Full Screen button. The video and the skin will expand to fill the browser window (see Image 3 ). How about that? No code!

Image 3. Full skin HD at the click of a button.

6. Press Esc to return the video to its regular size. If you actually want to see what this looks liike in a real,live browser, click here.
   

Now take a deep breath. As we started digging into the use of these files in Flash, we encountered quite a few issues that we are, for now, chalking up to the sheer newness of this technology with Flash. The other critical aspect of our issues is this: it isn’t always Adobe’s fault.

The first issue we encountered was a biggy.

Several of the videos we used, other than ones supplied by Adobe, didn’t work. They were MOV files, MP4 files, and even H.264 files. We found it to be extremely odd because there was no mention of this by Adobe. What we discovered, thanks in part to Adobe’s help, was that not all MP4 files are created equal—and that MP4, not MOV, is the format you need to use. Image 4 brings this into sharp focus.

Image 4. The settings used for the Vultures.mp4 video.

These are the settings we used to create the Vultures.mp4 video. Note the use of H.264 compression in the Video format drop-down menu. Although H.264 compression is acceptable, MOV files that use the H.264 codec don’t always work in Flash (we discovered this with a MOV file). Figure 12-22 shows that this is a MOV file that uses H.264 compression. When we ran it through Flash, the video would not play. Yet, when we re-encoded the video using the settings in Image 5 , the video played.

Image 5. In theory, an MOV file with H.264 compression should work.

This raises a rather interesting question: Knowing not all files are created equal, how do we know which is a “good” movie and which is a “bad” one? The answer is that there is no way to know. You need to make sure that it works by testing it in Flash. If it doesn’t play, you need to go back to the source and get a new MP4 file that is properly encoded.

Here are a couple of things that can cause playback failure:

• Header information: All video files contain a header called a moov atom. The location of the moov atom in the file can result in failure. If the moov atom is at the start of the file and you are using a Progressive Download method, the file will play. If it is at the end of the file, where it is placed by Adobe Premiere and After Effects, the entire file has to download before it starts to play. This isn’t an issue if you are using FMS 3. If you suspect that this is the case , either use QuickTime Pro to re-encode the video or consider using QTIndexSwapper, which is a small AIR application developed by Renaun Eriickson for this very task. It can be picked up at this link.
  
  
• Codec choice: The video codec for the MP4 needs to be H.264, and the audio codec has to be either AAC or MP3.
  
  
• AVC profile: This is the advanced video coding profile used when the file is created. Flash Player 9 supports 66, 77, 100, and 110. It does not support 88,122, 144, or none.
  
  
• Incorrect 4CC: This is nothing more than a four- character code that is a sequence of four bytes used to identify a data format. The Flash Player supports MP3, MP4a, AVC1, TXG3, GIF, PNG, JPEG, VP60, and VP60A. Thus you might have the correct audio and video codecs along with the right AVC profile and the video will still not play. The Flash Player won’t tell you this. You can see a list of all the 4CCs here .
  
  
• DataRate: If the data rate is set too high (you can see where it is set in Image 4 ), there is a real risk that you will experience playback failure.

Vultures.zip