displaying FLV's first image frame at runtime

[jan33]

Hi, isnt there a way to get an FLVPlayback component to display its FLV's first frame until it has enough frames buffered to start playing the video? I can add a preview to it that i can see while im authoring the flashfile the component is in, but it just shows up as a white frame for a second at runtime.. id like to get it to display its first videoframe instead of that. The component inspector assures me there is a way to do this using actionscript, but leaves me hanging on exactly how its done, or where to discover such information.. would you know perchance? Flashkit, I appreciate your insights..

[jan33]

..am i making no sense i.e. expressing myself in ways that nobody understands again?

[DamageX2]

I take it you want to have a tumbnail on the FLV-playbackcomponent.

You can do this in flash, at least in CS4

On the scrolloverMenu select- Window/Component Inspector

in that window there will be a line that says: Preview, click on the magnifingglass on that line, select whitch frame


Exuse my bad grammar/English

[jan33]

hi, thanks for your reply.. your english is great... i did that already, but this only displays the image within the timeline when i work within flash.. not when i publish the film - when i publish , it doesnt display this frame .. when i set the preview pic, the component inspector tells me that to display a preview pic at runtime, ill need to use actionscript .. it doesnt mention exactly the script i need to use..

[DamageX2]

im, doing a prodject now, where my FLV got preview images.
But I had to take screenshots and make JPEG, rescale in photoshop, paste it into flash.

If you find a code for getting it to work, be sure to PM me

[jan33]

hi, will do.. at the moment im doing the same thing, i have jpgs on a layer over the flv that i fade to alpha after a few moments when the flv starts playing.. its kind of messy as hell...

I just found this

http://mrsteel.wordpress.com/2006/12...duration-time/

and theres a rar file you can download with a fla that has code in it... i dont see where hes putting the first frame as a thumbnail tho, do you?

this.createTextField("buffer_txt", this.getNextHighestDepth(), 10, 16, 400, 22);
buffer_txt.html = true;
totalTimeText = "";
var connection_nc:NetConnection = new NetConnection();
connection_nc.connect(null);
var stream_ns:NetStream = new NetStream(connection_nc);
stream_ns.setBufferTime(4);
my_video.attachVideo(stream_ns);
stream_ns.play("video.flv");
stream_ns.onMetaData = function(infoObject:Object) {
	/*for (var propName in infoObject) {
		trace(propName+" = "+infoObject[propName]);
	}*/
	FLVduration = infoObject["duration"];
	var minutes2:Number = Math.floor(FLVduration/60);
	var seconds2 = Math.floor(FLVduration%60);
	if (seconds2<10) {
		seconds2 = "0"+seconds2;
	}
	totalTimeText = " Total time:"+minutes2+":"+seconds2;
};
//
//
connection_nc.call("getLength", myStream, "city.flv");
this.createTextField("time_txt", this.getNextHighestDepth(), 10, 0, 300, 22);
time_txt.text = "LOADING";
mc_progress.mc_buff._xscale = 0;
mc_progress.mc_played._xscale = 0;
// total time text
// 
// 
mc_progress.mc_buff.onPress = function() {
	xpos = mc_progress._xmouse;
	percent = Math.round(xpos/mc_progress._width*100);
	seekTime = percent/100*FLVduration;
	seekTime = Math.round(seekTime*100)/100;
	stream_ns.seek(seekTime);
};
//
//
onEnterFrame = function () {
	var percent:Number = Math.round(stream_ns.bytesLoaded/stream_ns.bytesTotal*100);
	mc_progress.mc_buff._xscale = percent;
	// buffer info
	var bufferPct:Number = Math.min(Math.round(stream_ns.bufferLength/stream_ns.bufferTime*100), 100);
	var output_str:String = "<textformat tabStops='[100,200]'>";
	output_str += "Length: "+stream_ns.bufferLength+"\t"+"Time: "+stream_ns.bufferTime+"\t"+"Buffer:"+bufferPct+"%";
	output_str += "</textformat>";
	buffer_txt.htmlText = output_str;
	// time info
	var ns_seconds:Number = stream_ns.time;
	var minutes:Number = Math.floor(ns_seconds/60);
	var seconds = Math.floor(ns_seconds%60);
	if (seconds<10) {
		seconds = "0"+seconds;
	}
	time_txt.text = minutes+":"+seconds+totalTimeText;
	// elapsed time progress bar
	mc_progress.mc_played._xscale = Math.round(stream_ns.time*100/FLVduration);
};
//
stop();

[jan33]

aha, getting closer... found this:

http://monkeyflash.com/tutorials/pos...r-flash-video/

(keyword to look for is Poster Image)

which seems to do just about what we need.. heres the code

import fl.video.VideoEvent;

myPoster.addEventListener(MouseEvent.CLICK, playMovie);

function showPosterFrame(event:Event):void {
	myPoster.visible = true;
}

function hidePosterFrame(event:Event):void {
	myPoster.visible = false;
}

function playMovie(event:MouseEvent):void {
	myVideo.play();
}

myVideo.addEventListener(VideoEvent.PLAYING_STATE_ENTERED, hidePosterFrame);
myVideo.addEventListener(VideoEvent.COMPLETE, showPosterFrame);

this only works when the posterimage gets clicked tho.. would you or any of the moderators perhaps know how to make the posterimage disappear once the flv has buffered enough to begin autoplay instead of on MouseEvent?

I think it would have something to do with this line:

myPoster.addEventListener(MouseEvent.CLICK, playMovie);

Since im brand new to AS3, any help would be greatly appreciated!

[jan33]

got it, no need to help guys.. this is what i came up with.. set the autoPlay to true in the component inspector and presto

rr is the instancename of my flv

import fl.video.VideoEvent;


function hidePosterFrame(event:Event):void {
	myPoster.visible = false;
}

function playMovie(event:MouseEvent):void {
	rr.play();
}

rr.addEventListener(VideoEvent.PLAYING_STATE_ENTERED, hidePosterFrame);