A Crash Course in Flash Video

Takin’It to the Big Screen
As you may know, in the Flash 8 Player and above, it’s possible for an entire SWF to enter full-screen mode. But did you know that in Flash 9 Player and above, it’s possible for the FLVPlayback component itself to go full-screen? Let’s see how it’s done.
1. First, drag an FLVPlayback component onto the stage.
2. In the Parameters panel, set the alignproperty to center and the scaleMode to maintainAspectRatio.
3. Choose a skin that has a full-screen toggle button (e.g.,SkinOverAll or SkinUnderAll) and specify your source video.
4. In your document publish settings (File > Publish Settings), click the HTML tab. Choose Flash with Full Screen Support from the Template dropdown menu. This will create a required external JavaScript file and add some special tags to your HTML document.
5. Publish your SWF and click on the full-screen toggle button to view your video on the big screen.

When the stage enters full-screen mode, the FLVPlayback component covers the other content in the SWF and takes over the whole screen. When the viewer hits the Escape button to exit full-screen mode,the SWF returns to its normal layout.

Where Do I Go From Here?
There are a number of books and websites that can be very helpful as you begin to explore the world of Flash Video. Here are some of the resources that can be helpful as you started.

Adobe Developer Center
Adobe Labs
Local user groups; a great source for support and feedback
Basic information about streaming with Flash Media Server.

I also have a blog (www.flashconnections.com) where you can download the source files used here, see examples from presentations and other articles, and keep up to date on news and information about Flash Video. And when you’re ready to dive in and start creating applications, you may want to consider Flash Video for Professionals (Wiley, 2007), a book I co-authored, that goes in-depth into the actual production and development of video applications in both ActionScript 2 and 3.

FLV 101: NetStream and NetConnection
Whenever you are working with code, it’s always best to try to understand exactly what it’s doing; especially if you didn’t write it yourself. Let’s do a little recap of two basic objects that we need in our video applications and explain just what they do.

What Is a NetConnection?
A NetConnection is used for both streaming and progressive video delivery. It lets Flash know whether you’re using progressive download or streaming, and if it’s streaming, it specifies where your Flash Media Server is and what application to connect to. For example, for progressive, your NetConnection code would look like this:
var nc:NetConnection = new NetConnection();
nc.connect(null);

See, if you pass null as the argument, Flash delivers your FLV as progressive download. If you’re streaming your video, your NetConnection code would look like this:
var nc:NetConnection = new NetConnection();
nc.connect("rtmp://yourFMSserver.com/AppName/InstanceName");

Here you’re specifying that Flash should connect via RTMP protocol to a Flash Media Server. You need to specify the host name that FMS is running on, the application you wish to connect to, and the instance name that your FLV files are associated with. That’s basically all the NetConnection does. By itself, it doesn’t play videos—you’ll need to bring in a NetStream for that.

What Is a NetStream?
The NetStream class gives you the power to play FLV files from the local file system, from a web address, or streaming from FMS. The NetStream plays the FLV through the NetConnection object.You’d instantiate it like this:
var ns = new NetStream(nc);
myVideo.attachVideo(ns);
ns.play("yourVideo.flv");
In this example, nc is our NetConnection object,and myVideo is a video object that you want to use to display your FLV. This would be the same for progressive or streaming.

So,that’s it—that’s all there is to NetStreams and NetConnections. Well, it’s a good overview, anyway. There are many built-in functions that you can access through the NetStream and NetConnection object, but we’ll reserve the details of those for another day.
FLVPlayback Component Parameters

align--Specifies the video layout when the video that’s loaded is different from the dimensions of the FLVPlayback component. The default is Center.

autoPlay--Set to either True or False, this determines if the video will begin playing automatically. The default value is True, which means that the FLV will play immediatelywhen loaded. If you’re using player controls, you’ll likely set this to False, so the viewer has control of the video playback right from the start.

source--A string that specifies the URL of the FLV file.

preview--Reads in a PNG file for a preview of the FLV.

cuePoints--An array that contains the cuepoint data for the FLV. Cuepoints allow you to synchronize specific points in the FLV with Flash animation, graphics, or text by triggering events at specified points in the video.

scaleMode--Specifies how the FLV will resize after it is loaded. Options are maintainAspectRatio, noScale, and exactFit.

maintainAspectRatio--Resizes the video to the size of the FLVPlayback component on the stage, maintaining the proportions of its original dimensions.

noScale--Forces the component to respect the original video dimensions. (There is no autoSize parameter in the latest version of the FLVPlayback component.)

exactFit--Stretches the video to fit the dimensions of the FLVPlayback component on the stage.

skin--Specifies the URL of a skin SWF file. This string could contain a filename, a relative path such as Skins/MySkin.swf, or an absolute URL such as http://www.yourdomain.com/MySkin.swf.

skinAutoHide--If True, hides the component skin when the mouse is not over the video. Defaults to False.

skinBackgroundAlpha--Sets the transparencey of the background of the skin. In AS2, you can set the property to a number between 0 (invisible) and 100 (opaque). In AS3, you would set it to a number between 0.0 (invisible) and 1.0 (opaque).

skinBackgroundColor--The color of the background of the skin (uses hexidecimal values, e.g., 0xRRGGBB).

volume--A number from 0 to 100 (AS2) or 0 to 1 (AS3) that sets the initial volume of the video’s audio. The default is full volume.