Thursday, November 11, 2010

ActionScript 3 QuickTip #1 – The Timer Class


In previous version of ActionScript there were a couple of different ways to trigger events based on time. The setInterval() and setTimeout() functions were the two most commonly used ways of calling a function after a specified amount of time had lapsed. In ActionScript 3 we now have the Timer class which lives in theflash.utils package. This class contains all the functionality that you will ever need for time-based applications. In order to use the class, you first must import the flash.utils package as seen is the example below. The Timer constructor expects one argument that represents the desired delay in milliseconds between function calls. An optional seconds argument determines the number of times to call the function. The default for this value is 0, which means that it will call the function indefinitely. If you wanted to replicate the functionality of the deprecated setTimeout() function, you can simply pass 1 as the value for this parameter.
In my example below I am creating a Timer that will fire twice a second, but I haven’t yet told it what function to call every time the delay has passed. To do this we need to respond to the timer event of the Timer class and give it the name of the function that will handle the event. At this point our Timer will be setup for use but we still need to call the Timer.start() method in order to get things started. In my implementation below I am simply doing a trace() to the output window every time the Timer fires showing how many times it has fired. To get this value I am reading the Timer.currentCount property.
[as]// We need to import the utils package
import flash.utils.*;

// Create a new Timer object with a delay of 500 ms
var myTimer:Timer = new Timer(500);
myTimer.addEventListener(“timer”, timedFunction);

// Start the timer
myTimer.start();

// Function will be called every 500 milliseconds
function timedFunction(eventArgs:TimerEvent)
{
trace(“Timer fired ” + myTimer.currentCount + ” times.”);
}[/as]

Check out the AS 3 docs to see all of the available properties and methods of this great new class.

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(320240);
  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(320240);
  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;