A Crash Course in Flash Video
3. Now, with the component selected, take a look at the Parameters panel (Figure 5). This is where you specify all the parameters for the component you’ve got selected. (Note that all of these properties can also be set in ActionScript, if you prefer to write code instead of setting them in the Flash workspace.) There are really just two important parameters to set for most simple uses: source and skin. (See the sidebar FLVPlayback Component Parameters for more.)
Figure 5 (below). Detail of the Flash Properties window.
4. To choose a skin (playback controls) for your video player, select the skin parameter in the Properties panel, and then click on the magnifying glass icon. From here, you can choose one of the skins included with Flash CS3 from the dropdown menu. You can also specify a custom skin URL if you’ve created your own (see Figure 6).
5. After choosing a skin, click OK. Then publish the SWF to watch your video, complete with playback controls. See, wasn’t that just too easy?
Figure 6 (below). Choosing a skin for the FLVPlayback component.
The second, more Zen-like option to get an FLV playing in Flash is to use a simple Video object. This is basically just a box that the video will play in. You specify the size of the box, the filename of the video you want to play, and voila! There are no skins, player controls, or other bells and whistles. This can be perfect if you just want a small, lightweight SWF that plays video, or if you’re building a customized player. The Video object can be just the building block you need.
To use it, however, you have to write a bit of ActionScript. Not much—the magic happens with just a few simple lines of code. Let’s give it a try.
1. Open a new document (either AS2 or AS3) in Flash. 2. In the drop-down menu of the Library panel, choose New Video (ActionScript controlled). The Video object will then appear in your document’s Library.3. Then, drag that Video object from the Library onto the Stage. You can change its size to match the dimensions of the video you’d like to play, if you like.4. In the Properties panel, give it an instance name of myVid. 5. Now, let’s add the ActionScript. Create a new empty layer on your timeline and call it Actions. Click on the first frame, then open the Actions panel (see Figure 7). The code you’ll enter there varies slightly from AS2 to AS3. If you’ve created an AS2 file, you need to add the following 5 lines of code (just be sure to change the source file name to point to your own FLV):
var nc:NetConnection = new NetConnection();
nc.connect(null);
var ns:NetStream = new NetStream(nc);
myVideo.attachVideo(ns);
ns.play("yourVideo.flv");
If you created an AS3 file, you’ll need to enter the following code into the Actions panel:
var nc:NetConnection = new NetConnection();
nc.connect(null);
var ns:NetStream = new NetStream(nc);
myVid.attachNetStream(ns);
ns.play("yourVideo.flv");
ns.client = this;
function onMetaData(infoObject:Object):void { // catch onMetaData event to avoid throwing an error}
Figure 7 (below). Writing ActionScript to play video in a generic Video object.
Note that there are a few syntax differences and a few extra lines of code in the AS3 version. In AS3, you need to include a function that handles metadata when it is received on the stream to avoid Flash complaining and throwing an error. You don’t need to do anything when the metadata is received, but you need to handle the event. (Really, you don’t need to worry too much about this, just be sure the function is in there and it’s all good.)
6. Finally, publish your SWF. You should see your FLV playing in the Video box, just as you told it to in the ActionScript code (Figure 8).
Figure 8 (below). An FLV playing in a generic Video object.
The examples above all demonstrate progressive delivery. The only change you’ll need to make if you’re streaming is to change the NetConnection connection string. Instead of passing in "null," you’ll pass in the URL of your streaming server, like this:
nc.connect("rtmp://yourFMSserver.com/AppName/AppInstance/");
If you want to understand just what this ActionScript code is doing, refer to the FLV101 sidebar for a bit more insight.
What Else Can I Do with Video in Flash?
Anything you can do to a movieclip object you can do to video. You can animate, mask, crop, map to a shape, or even apply filters to it. You could add a drop shadow, blur, skew, transform the colors, and more. This can all be done in real time, so all of these effects could be interactive.
Fresh AIR
With the introduction of Adobe’s AIR (Adobe Integrated Runtime) application environment, Adobe is making Flash Video available offline as well. This tool, which will see its beta release later this year, gives developers the tools they need to easily create desktop applications that can store files on the user’s computer as well as access the web. AIR will give developers even more tools to work with video. Adobe Media Player—an early application written by Adobe in AIR—will provide video aggregation, digital rights management, and access to local FLV files, among other yet-undisclosed features. It’s basically like iTunes for video. Adobe says there will be opportunities to brand and customize this application as well.