Flash High-definition Streaming Video Tutorial

In this tutorial, the terms "movie" and "video" are equivalent.

ENCODING

1. Importing

Let's use Adobe Flash CS3 Video Encoder to encode this Flash video. An HD video must be produced by an HD camera or a computer-generated video that is tailored to an HD format. The format can be either 1280x720 (720p) or 1920x1080 (1080i). The original video can be in many popular formats, such as AVI, MOV or MP4. In order to achieve the best encoding result, always try to encode the original video output in AVI or MOV format with a large file size. Launch Adobe Flash CS3 Video Encoder either from a Mac or a PC. Press the Add button on the right to add the video you want to encode.

2. Configuring

With the imported video still selected, click Settings. Type name_4000 (replace name with a name you desire) for Output filename to output this video for 4000Kbps. By the way, it is a convention among streaming video professionals to name streaming videos for different Internet connection speeds this way. Ignore the default preset—Flash 8 – Medium Quality (400Kbps).

Click the Video tab. Keep the default One2 Vp6 codec because it generates a much better video image quality than the alternative Sorenson Spark does. If you have chosen a 720p HD video, you don't need to check Deinterlace since the file is already in the progressive format. If yours is a 1080i video, you do need to check Deinterlace if you have not done deinterlacing in another program earlier yet. Since an HD video has a screen size that is much larger than 720x480, the bit rate must be high enough to make it not look fuzzy. Shrinking an HD video to a smaller size when encoding beats the purpose of using an HD video. Therefore, the preferred approach for presenting an HD video is to keep its original size so that presenting an impressive full-screen movie is possible. In the United States, as of 2007, the average broadband connection speed was 4.8Mbps. Many families should have no problem watching at home, let alone at work/school, an HD streaming video encoded at the 4Mbps level. So, let's type 4000 by Max data rate. If you are a conservative person, try 2500. The image quality, however, will suffer. Click the Audio tab. Let's choose 128Kbps. Click OK.

Adobe Flash CS3 Video Encoder designates the folder where the imported video is as the default outputting folder. To change the outputting folder on a PC, click Edit menu > Preferences (Click Flash Video Encoder menu > Preferences on a Mac). Click Start Queue.

IMPLEMENTING TO SERVER

The encoded FLV file now needs to be FTPed to a Flash Media Server (FMS) either hosted in-house or by a content delivery network (CDN). If you are not familiar with this process, talk to your server admin.

WEB AUTHORING

Web authoring for Flash streaming video is best done in Adobe Flash CS3. Launch Adobe Flash CS3. Create a new Flash file. Save it in a newly created empty folder. Go File > Import > Import Video. Choose Already deployed to ... Type the URL of your video in the following format: rtmp://in-info-media1.informatics.iupui.edu/ehuang/_definst_/nz4000. If your FMS has a sophisticated file structure, then, you need to create an SMIL file and type the URL of the SMIL file instead. It is, in nature, an XML file. Therefore, it can also carry an XML extension instead of SMIL. A typical SMIL file looks like this:


<smil>
  <head>
     <meta base="rtmp://in-info-media1.informatics.iupui.edu/informatics"/>
        <layout>
           <root-layout width="1280" height="720" />
        </layout>
 </head>
 <body>
    <switch>
       <video src="students/N501/2007Fall/filename" />
    </switch>
 </body>
</smil>

Click Continue. Choose a skin. In order to make full-screen viewing possible, a skin must contain the FULL-SCREEN button. Let's choose SkinUnderPlayStopSeekFullVol.swf. > Continue > Finish. If everything goes all right, the exact-size video playback will show up on stage. Click the video, and in the Property Inspector, change the values in X and Y to 0 so that the video fits into the stage space exactly. Since the stage is not as big by default, you need to click on stage anywhere except for the video, and adjust in the Property Inspector the stage size to fit exactly the video size plus the skin on the bottom.

To enable full-screen viewing, you must add an actionscript on the first frame. You can copy and paste the actionscript from Tracy Stampfli's article Exploring full-screen mode in Flash Player 9. Before you publish, you have one more step to take. Go File > Publish Settings > Click the HTML tab. > For Template, choose Flash Only – Allow Full Screen. OK.

Save the file. Go File, Publish. You should see four new files generated by Adobe Flash. Ignore the existing FLA file, and FTP all the four newly generated files, including one Javascript file, one HTML file, and two swf files, to your Web server. Go to the URL in a Web browser to check if the streaming is successful.

Watch a sample video.

NEXT: QuickTime