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.
-
var nc:NetConnection = new NetConnection();
-
nc.connect(null);
-
-
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.
-
var vid:Video = new Video(320, 240);
-
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.
-
vid.attachNetStream(ns);
-
-
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.
-
var netClient:Object = new Object();
-
netClient.onMetaData = function(meta:Object)
-
{
-
trace(meta.duration);
-
};
-
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.
-
ns.addEventListener(NetStatusEvent.NET_STATUS, netstat);
-
-
function netstat(stats:NetStatusEvent)
-
{
-
trace(stats.info.code);
-
};
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.
-
var nc:NetConnection = new NetConnection();
-
nc.connect(null);
-
-
var ns:NetStream = new NetStream(nc);
-
-
var vid:Video = new Video(320, 240);
-
this.addChild(vid);
-
-
vid.attachNetStream(ns);
-
-
ns.play(“test.flv”);
-
-
ns.addEventListener(NetStatusEvent.NET_STATUS, netstat);
-
-
function netstat(stats:NetStatusEvent)
-
{
-
trace(stats.info.code);
-
}
-
-
var netClient:Object = new Object();
-
netClient.onMetaData = function(meta:Object)
-
{
-
trace(meta.duration);
-
};
-
-
ns.client = netClient;
Lee
Flash MP3 Player Tutorial – Part 2
In this second part of the tutorial I show how to implement some simple controls into the music player. First I show how to create a play/pause toggle button followed by a simple “next” button. Lastly I go over the ActionScript needed to implement these new controls. Check it out at http://www.gotoandlearn.com.
Hope you like it!
Lee
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 the flash.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.
Lee
AE and Flash Integration Article in Layers
In this month’s issue of Layers Magazine I wrote a tutorial on how to use Photoshop, After Effects, and Flash together to make a cool Flash video piece. First I take a stock photo and mask out a flat panel TV that will display the Flash video. Next I skew the video file in 3D space using After Effects and export an FLV file. Lastly the video and the graphic are combined inside of Flash to make the finished product.
This is a simple example of how great it can be to leverage the full power of Adobe’s creative toolsets. This type of thing could have been done in Flash using some complex Actionscript but there is no need to take that route if you have After Effects and Photoshop avaialble to you.
It should be on newstands very soon and subscribers should already have it. For more information you can go to the Layers website at http://www.layersmagazine.com.
Lee
Two New Windows XP Themes!
As Windows users anxiously await the release of Vista, there have been two new themes released for XP that can help to jazz up your desktop. I got both of these themes from notstatic.com which is run by a designer who works for Microsoft. The first theme is called Royale Noir and is an unofficial theme that people within Microsoft have been using for quite some time. This is a nice looking blue/black glass theme. The other theme is an official one created for the release of the Zune media player. This theme is called, not surprisingly, the Zune theme. The Zune theme is the one pictured below.
Gotta love themes!
Lee









