Flash Streaming Video Tutorial

By Dr. Edgar Huang and Clifford Marsiglio

Indiana University-Purdue University Indianapolis
School of Informatics

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

Quite several software programs, such as Apple Final Cut Pro 5, Adobe Premiere Pro 2.0, Sorenson Squeeze 4, Swish Video 2 and VisualHub have the capability to encode Flash streaming videos, but the most popular encoder probably is the Flash 8 Video Encoder, which comes along with the Macromedia Studio 8 suite. This tutorial will show you how to batch-process multi-data-rate encoding with Flash 8 Video Encoder.

ENCODING

Link To Wiki

Link To Flash Screencast

1. Importing

The original video to be added 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 Flash 8 Video Encoder either from a Mac or a PC. Press the Add button on the right to add the video you want to encode. The default setting is Flash 8 - Medium Quality (400kbps). You can always change the settings later, so don't worry about it for now. Add the same video twice more since you will encode three data rates.

Click on the following image to enlarge it.

The encoder screen.

2. Configuring

Double-click the first video to open the Encoding Settings window. Type name_768 (replace name with a name you desire) for Output filename to output this video for 768kbps. By the way, it is a convention among streaming video professionals to name streaming videos for different Internet connection speeds this way. For encoding profile on top, choose Flash 8 - High Quality (700kbps) to start with. Click Show Advanced Settings.

Flash 8 Video Encoder comes along with seven presets that allow encoding for users with fast to slow Internet connection speeds and users with Flash Player 7or Flash Player 8. Encoding for Flash Player 7 uses Sorenson Spark codec while encoding for Flash Player 8 uses On2 VP6 codec. Sorenson Spark allows faster encoding, and On2 VP6 generates better image quality. Flash Player 7 enjoys a much higher pre-installation rate (94.8% in April 2006) than Flash Player 8 (69.3% in April 2006) since it came into being earlier, but the difference can be expected to narrow down soon considering the fast adoption rates of earlier versions of the Flash Player. You can use the default values in the presets to encode for three different Internet connection speeds, but this tutorial will show you how to customize encoding for the designated speeds—768kbps, 384kbps and 128kbps using the On2 VP6 codec for better image quality.

Under the Encode video pane, Leave Video codec to ON2 VP6. Leave Frame rate to Same as Source, which is 29.97fps if it is an NTSC video. Choose Custom for Quality. Change Max data rate to 672kbps. Check Resize video. Change Width to 496 pixels, and Height will automatically change to 330 pixels if Maintain aspect ratio is checked. Or key in a smaller dimension you like. Under the Encode audio pane, change Data rate to 80 kbps (stereo). The total streaming bit rate, 768 in this case, consists the video data rate, 672kbps, and the audio data rate, 80kbps. Some extra data rates must be left for meta data for streaming the video. You don't need to do anything in Cue Points or Crop and Trim unless you have some special needs. By the way, you have the option of streaming only a portion of the imported video by sliding the In point and Out point directly below the video in the upper right. This tool is useful when a video has a counter at the beginning, which you may want to get rid of. Unfortunately, Flash has not provided an option for deinterlacing a video. Click OK.

Double-click the middle video. Type name_384 (replace name with the name you used for the first video) for Output filename to output this video for 384kbps. For encoding profile on top, leave Flash 8 - Medium Quality (400kbps) alone. Click Show Advanced Settings. Under the Encode video pane, change Frame rate to 15fps. Change Quality to Custom and key in 344 for Max data rate. Check Resize video and change the dimension to 384 by 256 pixels. Change audio data rate to 32kbps (mono). Click OK.

Double-click the last video. Type name_128 (replace name with the name you used for the first video) for Output filename to output this video for 128kbps. For encoding profile on top, leave Flash 8 - Medium Quality (400kbps) alone. Click Show Advanced Settings. Under Encode video, change Frame rate to 10fps. Change Quality to Custom and key in 112 for Max data rate. Check Resize video and change the dimension to 277 by 184 pixels. Change audio data rate to 16kbps (mono). Click OK.

3. Outputting

Flash 8 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. Flash 8 Video Encoder will batch-process the three videos in order. You can find the three output videos in the designated folder. Flash 8 Video Encoder does not maintain an outputting log, but you can at least find how much time you have spent on exporting a queue of videos. Quit Flash 8 Video Encoder.

SCREENCAST

To view the screencast for this tutorial, you must have the Adobe Flash Player plug-in. This screencast will walk you through the tutorial above.

WEB AUTHORING

Link To Wiki

Embedding Flash Video into your web page is as simple as adding the following code to the body of your page:

  <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" 
      codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" 
      width="496" height="330">
  <param name="movie" value="videos/Flash/smoke.swf" />
  <param name="quality" value="high" />
  <embed src="videos/Flash/smoke.swf" quality="high" 
      pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" 
      width="496" height="330"></embed>
  </object>

The first line describes the unique ClassID that tells your browser what plug-in to use, the code base to download the Active plug-in if you do not have it, and the dimensions.

Next, the Movie parameter tells the application where to find the video. This is a standard URL.

The last parameter tells the browser what the approximate quality of the media to be streamed.

The Embedded portion is found within the Object code and re-describes the media from a more standards neutral point of view using such terminology as MIME typing as opposed to proprietary code numbers and is more XHTML friendly.

While it is always necessary to understand how to do this utilizing the manual method, there are other scripts that can take the pain out of embedding these object. SWFObject1 is just one of these applications. It will include both the embed and the Flash detection scripts for you. There are other software packages available, but this seems to be one of the better ones and has spawned several clones for other types of embedded objects.

External Links

SWFObject — Javascript Flash Player detection and embed script ↩

Note: In order to play this correctly on newer browsers seamlessly due to the Eolas ruling, please see our javascript embedding tutorial.

Tutorials Previous

Next Quicktime