Webcasting live video with Flash Media Live Encoder

Creating a playback SWF file to embed in your web page: Using Dreamweaver CS3

A key to the power of using Flash video for your live events is the ubiquity of Adobe Flash Player, one of the most widely installed pieces of software in the world.

You have several options for creating Flash playback SWF files so your audience can view live broadcasts from Flash Media Live Encoder and Flash Media Server. This article looks at two: using Dreamweaver CS3 and using Flash CS3 Professional with the FLVPlayback component.

Note: When you test the playback SWF files, if everything is working correctly, the video being streamed by Flash Media Live Encoder should appear almost immediately. If the video being streamed does not appear within 15 or 30 seconds, double-check all the steps for creating the playback SWF file and the steps in the prior sections on Flash Media Server and Flash Media Live Encoder. If the video still does not appear, the layer behind it (if any) will show through. This is true if either Flash Media Server or Flash Media Live Encoder are not started. This is also true if there is any error in configuring the FLVPlayback component at author time.

The Flash video component in Dreamweaver CS3 helps you easily insert and display Flash video in your websites. It's great for Dreamweaver users who are not familiar with Flash because you can insert Flash video into your web pages without using the Flash authoring tool.

To use Dreamweaver CS3 to create a playback SWF file for your audience to use to view the live stream being published from the Flash Media Live Encoder:

1. Launch Dreamweaver CS3.
2. Create a new basic HTML file. Save the new file as myLiveVideo.htm in a directory containing no other files.
3. To launch the Insert Flash Video dialog box, from the main menu select Insert > Media > Flash Video. The Insert Flash Video dialog box will open.

4. In the Insert Flash Video dialog box, from the Video type pop-up menu at the top, select Streaming Video. The appearance of the Insert Flash Video dialog box changes as shown in Figure 3.

   

   Figure 3. Insert Flash Video dialog box in Dreamweaver CS3

5. In the Insert Flash Video dialog box, set the following options to the values indicated (accepting the defaults on the other values should be fine):

   • Server URI: rtmp://localhost/myLiveApp/instance1
   • Stream name: mylivestream
   • Skin: Halo Skin 3
   • Width: 320
   • Height: 240
   • Live video feed: Checked

   Note: Make sure there are no typos in the values in either your Server URI or stream name. These values must exactly match values previously set in configuring both Flash Media Server and Flash Media Live Encoder.

6. Click OK.
7. Save the file with your changes. From the menu, select File > Preview in Browser. When your HTML page opens, you should see the live stream.

You can now customize your HTML page as your requirements demand and publish the resulting files to your website. In addition to myLiveVideo.htm, your directory now contains two SWF files and a copy of main.asc. When publishing to your website, you must copy the HTML and SWF files together!

Regarding the main.asc file, for this article you copied a duplicate of main.asc earlier in the section on configuring Flash Media Server. When you publish to a production server, the contents of this main.asc file must be included in the main.asc file in the application directory on your production server.

Note: If there already is a main.asc file on your production server, be sure to check with your Flash Media Server administrator before possibly overwriting any existing main.asc file.

Creating a playback SWF file to embed in your web page: Using Flash CS3 Professional

Flash CS3 Professional includes the FLVPlayback component, which makes it easy to insert and display Flash video in your websites. Flash CS3 includes both ActionScript 2.0 and ActionScript 3.0 versions of FLVPlayback. The ActionScript 2.0 version is the same FLVPlayback component that shipped with Flash Professional 8. The ActionScript 3.0 version is new with Flash CS3 Professional and includes support for Flash Player 9 features such as full-screen video on playback. For users who are familiar with the Flash CS3 authoring tool, the FLVPlayback components enable you to use Flash video with minimal or no ActionScript code.

Here I cover creating a playback SWF file with both the ActionScript 2.0 and ActionScript 3.0 versions of the FLVPlayback components.

Using Flash CS3 with the ActionScript 2.0 FLVPlayback component

Here's how you use Flash CS3 and the ActionScript 2.0 FLVPlayback component to create a playback SWF file for the live stream being published from the Flash Media Live Encoder:

1. Launch Flash CS3.
2. From the main menu, choose File > New > Flash File (ActionScript 2.0).
3. Save the new file as myLiveVideoAS2.fla.
4. On the Components panel, expand the Video group and drag an instance of the FLVPlayback component to the Stage.

5. Select the instance of the FLVPlayback now on the Stage and open the Component Inspector panel. Figure 4 shows the Component Inspector panel after completing the next step.

   

   Figure 4. Parameters tab of the Flash ActionScript 2.0 FLVPlayback component inspector

6. In the Component Inspector panel, set the following options to the values indicated (accepting the defaults on the other values should be fine):

   • contentPath: rtmp://localhost/myLiveApp/instance1/mylivestream

     Note: When entering the contentPath value, the Content Path dialog box shown in Figure 5 will open. In the dialog box, deselect both options.

     

     Figure 5. Component inspector's Content Path dialog box

   • isLive: true
   • skin: ClearExternalPlayMute.swf
7. Test-publish your SWF file. You should see the live stream.
8. Publish the SWF file and embed it in your web page.

You can now customize your SWF file as your requirements demand, embed it in an HTML page, and publish the resulting files to your website.

Using Flash CS3 with the ActionScript 3.0 FLVPlayback component

To use Flash CS3 and the ActionScript 3 FLVPlayback component to create a playback SWF file for the live stream being published from the Flash Media Live Encoder:

1. Launch Adobe Flash CS3.
2. From the main menu, choose File > New > Flash File (ActionScript 3.0).
3. Save the new file as myLiveVideoAS3.fla.
4. On the Components panel, expand the Video group and drag an instance of the FLVPlayback component to the Stage.
5. Select the instance of the FLVPlayback now on the Stage and, in the Properties panel, assign it the instance name myFLVPlayback.

6. Again, select the instance of the FLVPlayback on the Stage. This time open the Component Inspector panel. Figure 6 shows the Component Inspector panel after completing the next step.

   

   Figure 6. Parameters tab of the Flash ActionScript 3.0 FLVPlayback component inspector

7. In the Component Inspector panel, set the following options to the values indicated (accepting the defaults on the other values should be fine):

   • skin: SkinUnderPlayFullscreen.swf
   • source: rtmp://localhost/myLiveApp/instance1/mylivestream

   Note: When entering the contentPath value, the Content Path dialog box shown in Figure 7 will open. In the dialog box, deselect both options.

   

   Figure 7. Component inspector's Content Path dialog box

8. Select Frame 1 and open the Actions panel. Enter the following:
   myFLVPlayback.isLive=true;
9. Test publish your SWF file. You should see the live stream.
10. When testing the playback SWF file, the button in the bottom right of the controls will take it full-screen. To cancel full-screen and return to the original size, press Escape.
11. Publish the SWF file and embed it into your web page.

You can now customize your SWF file as your requirements demand, embed it in an HTML page, and publish the resulting files to your website.

Note: The ActionScript 3.0 FLVPlayback component supports a degree of styling through the properties skinBackgroundColor and skinBackgroundAlpha.

Where to go from here

This article demonstrates how easy it is to add live video to websites using Flash Media Server, Flash Media Live Encoder, and a playback SWF file authored in either Dreamweaver CS3 or Flash CS3 Professional.

If you are interested in going beyond single-camera webcasts, see Kevin Towes' article on Building a live video switcher with Flash Communication Server MX. (Flash Media Server was previously known as Flash Communication Server MX.)

If you are interested in customizing the Flash ActionScript 2.0 FLVPlayback component, read Creating custom video controller skins for the Flash video component in Dreamweaver 8 by Jen deHaan and also Customizing the FLVPlayback component by Dan Carr. To customize the latest Flash video controllers and provide unique user interfaces for navigating through movie content, check out Dan Carr's article, Skinning the ActionScript 3.0 FLVPlayback component.

If you are interested in either authoring a custom playback SWF file (that is, not using the FLVPlayback component) or—for live webcasts—using the acquisition and encoding functionality built into the Flash Player (that is, not using Flash Media Live Encoder), see Stefan Richter's article, Building a simple live video broadcaster and receiver.

Note: The acquisition and encoding functionality built into Flash Player encodes video using the Sorenson Spark codec. The quality of video encoded using the Sorenson Spark codec is generally considered not to be of the same quality as video encoded using the On2 VP6 codec. You can see side-by-side comparisons of recorded video encoded using the two codecs at FlashVideoFAQ.com. Playback SWF files can mix streams encoded using both codecs. You can also learn about comparing different encoding software to find what's most appropriate for your Flash video needs in Elliot Mebane's article, Selecting a Flash video encoder.

Here are some additional resources for studying Flash Media Server:

• Encoding best practices for live video (Kevin Towes)
• Performance-tuning Flash Media Server 2 for live webcasts using Linux (Jake Hilton and Brent Andrewsen)
• Adobe LiveDocs for Flash Media Server 2 (product documentation)
• Flash Media Server 2: Streaming media application development (instructor-led course)