The playlist so far is pretty snappy, but let’s not stop there. Jazz it up even more with thumbnails generated on the fly.
The purpose of this external ActionScript file (videothumb.as) is to create thumbnails dynamically of each video in your list.
Because this article focuses mostly on using XML to deliver video dynamically, I won’t go into too much detail about creating and extending the List component class. In this section, I include all the code you need to extend the normal List component to display the thumbnails and provide a brief description of how it works. If you’d like to find out more about creating and extending classes, read Exploring Version 2 of the Flash MX 2004 Component Architecture by Waleed Anbar.
This application uses the List component for displaying the playlist. In this bit of ActionScript, a class is created that extends mx.core.Uicomponent to include a thumbnail. Here is the code in its entirety:
class VideoThumb extends mx.core.UIComponent
{
static var symbolName = "VideoThumb";
var label : Object; // the new text label we'll use
var listOwner : Object; // reference to the tree - supplied by the tree
var thumb;
var nc; // NetConnection
var ns; // NetStream
var streamurl;
function VideoThumb() //define constructor
{
// nothing needed - we're extending v2;
}
function init() //initialize
{
// nothing needed - we don't have any instance variables to initialize
}
function createChildren(Void) : Void
{
var v = this.attachMovie( "VideoHolder", "thumb", 0 );
v._width = 80;
v._height = 60;
v.styleName = listOwner;
var c = createLabel("label", 1);
c.styleName = listOwner;
c.selectable = false;
}
// pass all sizing from the tree to the cell
function size(Void) : Void
{
label.setSize(label.getPreferredWidth(),label.getPreferredHeight());
label._x = thumb._width + 10;
label._y = thumb._height/2 - label._height/2;
}
function setValue(str : String, item, sel)
{
_visible = item != undefined;
if ( !_visible )
return;
label.setValue( item.attributes.name );
// Thumbnail is picked up as the first frame of the playlist
var url = item.attributes.url;
var stream = item.attributes.thumb;
var start = item.attributes.thumbpos;
// If explicit thumb is not specified in XML
// use the first frame of the video
if ( stream == undefined ) {
stream = item.childNodes[0].attributes.name;
start = item.childNodes[0].attributes.start;
}
// Give up if we still don't have valid thumb info
if ( stream == undefined )
return;
// Render the thumbnail only if necessary
if ( streamurl == url + "/" + stream )
return;
streamurl = url + "/" + stream;
//get first frame of video
nc = new NetConnection();
nc.connect( url );
ns = new NetStream(nc);
ns.onStatus = function(info) {
// if video has stopped playing, reset nc and ns
if ( info.code == "NetStream.Play.Stop" ) {
nc = null;
ns = null;
}
}
thumb.video.attachVideo(ns);
ns.connect();
//grab the first frame
//begin at the specified start point, and play one frame
ns.play( stream, start, 0 );
}
.
function getPreferredHeight()
{
return 60;
}
function getPreferredWidth()
{
return label.getPreferredWidth();
}
}
The basic purpose of VideoThumb.as is to specify the appearance and contents of the ListBox and create a thumbnail preview of the video file. The script performs these specific operations:
- It attaches a movie to the
VideoHolderobject and sets it to a default size of 80 x 60 pixels. This serves as the thumbnail object for the list item. - It sets the size of the component elements, based upon the size of the component instance.
- The
setValuefunction begins the rendering of the list item. The script looks for a thumbnail specified in the XML. If there is none, as is true in our example, it creates one by grabbing the first frame of the associated movie. - The last operation ensures that the cell is centered vertically in the listbox cell.
Save a copy of VideoThumb.as in the same folder as VideoSource.as and VideoSource2.fla. With all your ActionScript now in place, you can go back to VideoSource2.fla and publish the SWF file. Place a copy of your SWF file into your web-accessible directory.
The last step places your files on the server so you can watch VideoSource in action.
Testing the Application
In the beginning of this tutorial, you copied your FLV files to your Flash Media Server installation. You will now need to place your ActionScript and interface files in your web-accessible folder for testing.
These three files should be in your web-accessible folder on your server or localhost:
- VideoSource2.swf
- SteelExternalAll.swf (or the skin SWF of your choice)
- playlist-demo-1.xml
Because you already copied your Flash video files to FMS earlier in the article, you are ready to test your application. Using your favorite browser, navigate to VideoSource2.swf to test your playlist, now magically complete with thumbnails. Figure 4 shows the live application in action, loading Flash video files and generating thumbnails.
January 2, 2010 at 4:11 pm
Ancora, come opzioni?