ActionScript 3 QuickTip #2 – FLV Playback

There have been quite a few changes to the way in which you implement a custom FLV player using the NetConnection and NetStream classes in ActionScript 3. You can look at the code here to see the current ActionScript 2 implementation. The ActionScript 3 version starts out the same way by defining the NetConnection object and passing null its connect method. Also the same is the creation of the NetStream object by passing in a reference to the aforementioned NetConnection object.

1. var nc:NetConnection = new NetConnection();
2. nc.connect(null);
3.  
4. var ns:NetStream = new NetStream(nc);

We can finally create an embedded video object using only code! We previously had to go the library, create the object, and drag it out onto the stage. In ActionScript 3 we simple create the video object just like we do with any class that inherits from DisplayObject. To the constructor we pass in the width and height that we want the video object to be. Finally we need to add the video object to the DisplayList in order to have it rendered to the screen.

1. var vid:Video = new Video(320, 240);
2. this.addChild(vid);

Once we’ve created the video object we now need to connect it to the NetStream object. In ActionScript 2 we did this using the attachVideo() method of the Video class. In ActionScript 3 there is now a more-appropriately called method called attachNetStream(). As a side note, If you want to attach a webcam to the video object you would use the new attachCamera() method. Once the NetStream is attached we can begin playing an external FLV the same as before by calling the NetStream.play() method.

1. vid.attachNetStream(ns);
2.  
3. ns.play(“test.flv”);

There have been major overhauls to the way in which you respond to events from the NetStream class. First off, you have to provide a callback function for the onMetaData event or Flash will throw errors at you. You need to create an object that will act as the NetStream’s client for the callback event. Once you have setup the onMetaData function for this object you need to set the NetStream.client property so it knows where to look. If your FLV contains embedded cue points then you will also need to create an onCuePoint function to handle that callback event.

1. var netClient:Object = new Object();
2. netClient.onMetaData = function(meta:Object)
3. {
4.         trace(meta.duration);
5. };
6. ns.client = netClient;

In ActionScript 2 we defined the NetStream.onStatus() event in order to receive status messages. In ActionScript 3 we use the NetStream.addEventListener() method to define a listener function to respond to this event. See the code below for the exact implementation of this new method for handling events.

1. ns.addEventListener(NetStatusEvent.NET_STATUS, netstat);
2.  
3. function netstat(stats:NetStatusEvent)
4. {
5.         trace(stats.info.code);
6. };

Look for more articles in the future regarding the ActionScript 3 video integration. Below is the full code block for implementing FLV playback in ActionScript 3.

1. var nc:NetConnection = new NetConnection();
2. nc.connect(null);
3.  
4. var ns:NetStream = new NetStream(nc);
5.  
6. var vid:Video = new Video(320, 240);
7. this.addChild(vid);
8.  
9. vid.attachNetStream(ns);
10.  
11. ns.play(“test.flv”);
12.  
13. ns.addEventListener(NetStatusEvent.NET_STATUS, netstat);
14.  
15. function netstat(stats:NetStatusEvent)
16. {
17.         trace(stats.info.code);
18. }
19.  
20. var netClient:Object = new Object();
21. netClient.onMetaData = function(meta:Object)
22. {
23.         trace(meta.duration);
24. };
25.  
26. ns.client = netClient;