Webcasting live movie with Flash Media Live Encoder

Content

Page implements

By clicking Submit, you accept the Adobe Terms of Use.

Requirements

Prerequisite skill

A basic working skill of Flash Media Server and either Flash CS3 Professional or Dreamweaver CS3.

User level

Required products

• Flash Media Server (Download trial)
• Flash Media Live Encoder
• Adobe Animate CC
• Dreamweaver (Download trial)

Sample files

• Samples.zip (9232 KB)

For the world of Flash movie, the year two thousand seven opened with a bang when Adobe released Flash Media Live Encoder. Adding Flash Media Live Encoder to Adobe’s product line makes Flash movie web broadcasts of live events even lighter and of the highest supported quality. Best of all, Flash Media Live Encoder is free to Flash Media Server licensees or users with Flash Movie Streaming Service accounts.

This article provides a quick overview of how to set up a live webcast using Flash Media Live Encoder and Flash Media Server.

Overview of Flash Media Live Encoder

Since its inception, Flash Media Server has supported live movie and audio streaming. Now adding Flash Media Live Encoder for encoding live web broadcasts offers two significant benefits: the highest quality movie supported, and quicker, lighter deployment.

Flash Media Live Encoder directly produces the highest quality supported movie by using On2 VP6 encoding. Previously, this was only possible through the use of third-party solutions. Flash Media Live Encoder provides quicker, lighter deployment by being a fully featured acquisition and encoding application that natively integrates with Flash Media Server. Previously, the acquisition and encoding functionality had to be custom-coded using the Flash authoring implement.

This article provides a basic overview of using Flash Media Server, Flash Media Live Encoder, and either Flash CS3 Professional or Dreamweaver CS3 to create a live web broadcasting application. Figure one presents each of these in context with the other elements of a basic live broadcast.

The elements of the basic live broadcast illustrated in Figure one are as goes after:

• Live event: The subject to be broadcast—business, educational, or political speakers, performers, sporting events, or any other event.
• Audio/movie capture: Cameras and/or microphones connected to the computer running Flash Media Live Encoder.
• Onsite encoding: Encoding provided using Flash Media Live Encoder on a computer with a reliable Internet connection.
• Internet: Liaison inbetween computers running Flash Media Server, Flash Media Live Encoder, a web server hosting the playback SWF file, and the audience’s computers.
• Flash Media Server or Flash Movie Streaming Service servers: Flash Media Server (FMS) provides delivery of the movie and audio rivulets using explosion balancing, failover, redundancy, and clustering via an origin/edge architecture. The Flash Movie Streaming Service (FVSS) is provided through leading content delivery network (CDN) providers. FVSS provides an alternative to wielding and operating your own FMS servers.
• Web server: Elementary HTTP server hosting the Flash SWF file that is downloaded by the audience’s computers to receive the webcast event. Only a single playback SWF file is required.
• Audience: Internet-connected event audience viewing the event using Flash Player to play the playback SWF file.

The following sections step you through configuring Flash Media Server using Flash Media Live Encoder, and creating a playback SWF file.

Configuring Flash Media Server

Flash Media Server offers a unique combination of traditional scalable streaming media capabilities and a pliable development environment for creating and delivering innovative, interactive media applications to the broadest possible audience. This article concentrates solely on Flash Media Server’s live streaming capabilities.

This article assumes that you have Flash Media Server installed and running locally. The application setup is the same whether the server is running locally or remotely. You can use any version of Flash Media Server for this task, including the free Developer Edition.

If you do not already have Flash Media Server installed, download it and go after the documentation to install it. To see a movie tutorial covering the installation of Flash Media Server two on Windows as well as Linux, check out Train Ordinary movies: Introduction to Flash Media Server two in the Flash Media Server Developer Center.

To create a Flash Media Server application for your live movie stream, do the following:

1. Go to the directory [Flash Media Server install directory]\Applications
2. In the Applications directory, make a subdirectory called myLiveApp.

Note: Make sure that there are no typos in your subdirectory name. Hereafter, this subdirectory name is your Flash Media Server application name, and it will be referred to both in configuring the Flash Media Live Encoder and in authoring your playback SWF file. The spelling in each case must match exactly.

Copy main.asc into the \Applications\myLiveApp directory. A version of main.asc is provided with Dreamweaver CS3. For Flash CS3 Professional users, extract the main.asc file contained in the Samples.zip file linked to at the beginning of this article.

For Dreamweaver users, the required main.asc file can be found in the following Dreamweaver directory:

[drive]:\Program Files\Adobe\Adobe Dreamweaver CS3\configuration\Templates\Video_Player

If you are still using Flash Professional 8, you can find the required main.asc file here:

[drive]:\Program Files\Macromedia\Flash 8\Samples and Tutorials\Samples\Components\FLVPlayback

Note: These versions of main.asc contain logic required by components that you will be using to author the playback SWF file in a later section. In Flash Media Server, files with .asc extensions denote files that contain server-side ActionScript logic.

Whichever version of main.asc you use, open it and examine its contents. Look for the application.onConnect function. You may find the line p_client.writeAccess , which prevents live streaming from happening by default. If you see it, be sure to comment out this line as goes after:

That’s all the setup required of you on the server side. Before proceeding to the next section, make sure that Flash Media Server is running.

Using Flash Media Live Encoder

Flash Media Live Encoder is designed to enable live event producers to capture audio and movie and stream it live to Flash Media Server or the FVSS.

The intuitive user interface of Flash Media Live Encoder works seamlessly with plug-and-play cameras and microphones, and compatible analog-to-digital converters. Flash Media Live Encoder produces live Flash movie with On2 VP6 encoding, delivering high-quality footage with size and bit rate plasticity. You also get total audio control with the bit-rate efficient Nellymoser audio codec.

Flash Media Live Encoder installs just like a regular desktop application. Presently Flash Media Live Encoder is available only for Windows XP. To make sure that your computer can run Flash Media Live Encoder, review the system requirements.

Understanding the Flash Media Live Encoder interface

To help you get oriented to the Flash Media Live Encoder interface, Figure two highlights the Flash Media Live Encoder’s main sections.

Following is a key with descriptions for the numbered sections in Figure Two:

1. Menus
2. Preview displays: input (left) and output (right)
3. Control panel: preset selector, movie encoding settings, audio encoding settings, and output settings (not shown output metadata and encoding log)
4. Control buttons: commence and stop

Note: For a total description of all Flash Media Live Encoder’s features, review the in-product help. You can access the help from the main menu by selecting Help > Flash Media Live Encoder Help.

Sending your very first live stream from Flash Media Live Encoder to Flash Media Server

To configure Flash Media Live Encoder to send your very first live stream:

1. Meet up a movie source to the computer that Flash Media Live Encoder will be running on.
2. Launch Flash Media Live Encoder.
3. From the Preset Selector, select the setting for Medium Bandwidth (300 kbps).
4. In the Movie area, from the Device selector, ensure that the movie source that you would like to use is both displayed and selected. Also ensure that the Movie option is checked.
5. In the Output area, set the following options to the values indicated (accepting the defaults on the other values should be fine):
   • Stream to Flash Media Server: Selected
   • FMS URL: rtmp://localhost/myLiveApp/instance1

Make sure that there are no typos in your FMS URL. This URL is specifying the real-time messaging protocol, followed by host name (localhost), application name (myLiveApp), and creating an example name (instance1). In the next section, when you create playback SWF files, you will reference this URL and must match the spelling exactly.

Peak: If your Flash Media Server is on a server other than localhost, update the FMS URL here accordingly, along with all following instructions referencing localhost.

Note: Ensure that there are no typos in your stream name. In the next section when you create playback SWF files, you will reference this stream and must match the spelling exactly.

Save to File: Deselected

In the Output area, click the Connect button.

Note: If an error is returned, double-check all the previous steps in both this section and in the prior section.

Click the Begin button along the bottom to commence encoding.

At this point your stream is live! Now all you need is an audience.

The next section covers creating a playback SWF file you can publish on your website that your audience can download to connect to the live stream. Before proceeding to the next section, however, make sure that Flash Media Live Encoder is began and streaming.

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

A key to the power of using Flash movie for your live events is the ubiquity of Adobe Flash Player, one of the most widely installed lumps 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 movie being streamed by Flash Media Live Encoder should emerge almost instantaneously. If the movie being streamed does not show up within fifteen or thirty 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 movie still does not show up, the layer behind it (if any) will display through. This is true if either Flash Media Server or Flash Media Live Encoder are not began. This is also true if there is any error in configuring the FLVPlayback component at author time.

The Flash movie component in Dreamweaver CS3 helps you lightly insert and display Flash movie in your websites. It’s good for Dreamweaver users who are not familiar with Flash because you can insert Flash movie into your web pages without using the Flash authoring instrument.

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 fresh basic HTML file. Save the fresh file as myLiveVideo.htm in a directory containing no other files.
3. To launch the Insert Flash Movie dialog box, from the main menu select Insert > Media > Flash Movie. The Insert Flash Movie dialog box will open.
4. In the Insert Flash Movie dialog box, from the Movie type pop-up menu at the top, select Streaming Movie. The appearance of the Insert Flash Movie dialog box switches as shown in Figure Trio.

1. In the Insert Flash Movie 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 Trio
   • Width: 320
   • Height: 240
   • Live movie 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.

Click OK.

Save the file with your switches. 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 request 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 effortless to insert and display Flash movie in your websites. Flash CS3 includes both ActionScript Two.0 and ActionScript Three.0 versions of FLVPlayback. The ActionScript Two.0 version is the same FLVPlayback component that shipped with Flash Professional 8. The ActionScript Three.0 version is fresh with Flash CS3 Professional and includes support for Flash Player nine features such as full-screen movie on playback. For users who are familiar with the Flash CS3 authoring device, the FLVPlayback components enable you to use Flash movie with minimal or no ActionScript code.

Here I cover creating a playback SWF file with both the ActionScript Two.0 and ActionScript Three.0 versions of the FLVPlayback components.

Using Flash CS3 with the ActionScript Two.0 FLVPlayback component

Here’s how you use Flash CS3 and the ActionScript Two.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 > Fresh > Flash File (ActionScript Two.0).
3. Save the fresh file as myLiveVideoAS2.fla.
4. On the Components panel, expand the Movie group and haul an example of the FLVPlayback component to the Stage.
5. Select the example of the FLVPlayback now on the Stage and open the Component Inspector panel. Figure four shows the Component Inspector panel after completing the next step.

1. 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 coming in the contentPath value, the Content Path dialog box shown in Figure five will open. In the dialog box, deselect both options.

• isLive: true
• skin: ClearExternalPlayMute.swf

1. Test-publish your SWF file. You should see the live stream.
2. Publish the SWF file and embed it in your web page.

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

Using Flash CS3 with the ActionScript Three.0 FLVPlayback component

To use Flash CS3 and the ActionScript three 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 > Fresh > Flash File (ActionScript Trio.0).
3. Save the fresh file as myLiveVideoAS3.fla.
4. On the Components panel, expand the Movie group and haul an example of the FLVPlayback component to the Stage.
5. Select the example of the FLVPlayback now on the Stage and, in the Properties panel, assign it the example name myFLVPlayback.
6. Again, select the example of the FLVPlayback on the Stage. This time open the Component Inspector panel. Figure six shows the Component Inspector panel after completing the next step.

1. 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 coming in the contentPath value, the Content Path dialog box shown in Figure seven will open. In the dialog box, deselect both options.

1. Select Framework one and open the Deeds panel. Inject the following:

myFLVPlayback.isLive=true;

Test publish your SWF file. You should see the live stream.

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 comeback to the original size, press Escape.

Publish the SWF file and embed it into your web page.

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

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

Where to go from here

This article demonstrates how effortless it is to add live movie 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 movie 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 Two.0 FLVPlayback component, read Creating custom-made movie controller skins for the Flash movie component in Dreamweaver eight by Jen deHaan and also Customizing the FLVPlayback component by Dan Carr. To customize the latest Flash movie controllers and provide unique user interfaces for navigating through movie content, check out Dan Carr’s article, Skinning the ActionScript Three.0 FLVPlayback component.

If you are interested in either authoring a custom-made 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 elementary live movie broadcaster and receiver.

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

Here are some extra resources for studying Flash Media Server:

Related video: