Úgy érzem ezt meg kell, hogy osszam, mert szükség lehet rá a jövőben. Túrkáltam a netet érte fél napon keresztül, innen-onnan összejött egy jó kis alap, ha az ember video bannert akar készíteni.
A kódokat úgy próbáltam leírni, hogy magában a flash fejlesztőkörnyzetben használhatóak legyenek, tehát egyenesen másolható a timeline-ra. Sietek leszögezni, nem szeretem a timeline-os kódolást, de egy egyszerű banner esetén nincs szükség külső osztályok létrehozására.
lássuk:
Itt a cégben Tweenert használunk a szabványos flash elemek mozgatásához, erre nem fecsérelnék sok időt, akit érdekel, az itt megnézheti. Esetleg a greensock cuccait, melyek itt találhatóak. A videó újraindítása ezeknek a segítségével történik majd, a végén visszatérek rá.
Definiáljuk a videó lejátszásához sükséges változókat:
var video:Video;
var nc:NetConnection;
var ns:NetStream;
var URLVideo:String = "http://www.ateszervered.hu/atevideod.flv"
Az URLVideo sztring mutat a lejátszandó videóra.
Nézzük a videó betöltését, hozzunk létre egy Video osztályt a megfelelő paraméterekkel:
initVideo()
function initVideo(){
// létrehozzuk a Video osztály egy példányát
// amely megkapja a stage szélességét és magasságát
video = new Video(stage.stageWidth, stage.stageHeight);
// a video példányt hozzáadjuk ahhoz az osztályhoz
// ahol éppen vagyunk. ez lehet egy bármilyen MovieClip
// is ami a stage-en található
addChild(video);
// rápakolunk egy élsímítást a video példányunkra
// hogy szebb legyen a videó lejátszáskor
video.smoothing = true;
}
Ebbe fogjuk beletölteni a külső urlről betöltött flv fájlt. Ezt a metódust többet nem kell meghívnunk, fölösleges terhelni a gép memóriáját újabb és újabb példányok létrehozásával.
A következő lépésben hozzunk létre egy NetConnection és egy NetStream példányt.
initVideoStream();
function initVideoStream(){
// A NetConnection kétirányú kapcsolatot hoz létre a
// kliens és a szerver között.
nc = new NetConnection();
// A connect-el hozzuk létre a kapcsolatot, általános
// esetben webszerverről kapjuk a videót ehhez egy
// null-t kell átadnunk.
nc.connect(null);
// A NetStream megnyit egy egyirányú streaming
// csatornát a NetConnection-on keresztül
ns = new NetStream(nc);
// Az AsyncErrorEvent listenert azért adjuk hozzá,
// mert ha tartalmaz metadatát a video, akkor az
// megpróbálja lekezeltetni azt a cliens oldalon,
// de ha ehhez nincs definiálva kód, akkor errort
// fogunk kapni.
ns.addEventListener(AsyncErrorEvent.ASYNC_ERROR,
asyncErrorHandler);
// A NetStatusEvent minden olyan eseményről
// értesít minket ami a NetStream objektumunkal
// történik, ezzel tudjuk majd a későbbiekben
// elindítani a bannerünket
ns.addEventListener(NetStatusEvent.NET_STATUS,
videoStatusEvent);
// Adunk neki egy buffert, lassú netkapcsolat
// esetén ez hasznos lehet
ns.bufferTime = 5;
// hozzácsapjuk a videó objektumunkhoz
// a NetStream-et
video.attachNetStream(ns);
// A play-el értelemszerűen indítjuk a lejátszást
ns.play(URLVideo);
}
Ezt metódust sem kell többé meghívni, a létrehozott objektumok bőven elegendőek ahhoz, hogy megfelelően működjön a bannerünk.
A fenti kódrészletben a NetStream objektumunkhoz hozzáadtunk két listenert, kezeljük le azokat:
function videoStatusEvent(statusObject:Object):void{
// trace-szel láthatjuk, hogy milyen események
// történnek a video lejátszásakor, ezekhez
// tudjuk igazítani a banner lefutását.
// Ilyenek pl a NetStream.Buffer.Flush ez jelzi,
// hogy a buffer tele van, indulhat a lejátszás.
// Érdekes lehet még a NetStream.Play.Stop
// (ezzel elindíthatjuk a banner többi részének
// lejátszását) vagy a NetStream.Play.Start,
// használja mindenki azt ami neki megfelel.
trace (statusObject.info.code);
if(statusObject.info.code=="NetStream.Buffer.Flush"){
// innen elindíthatunk egy tweenert ami
// mozgatja a banner animált részét
}
}
function asyncErrorHandler(event:AsyncErrorEvent):void
{
// ide nem kell semmi, ezzel kiküszöböljük a
// lehetséges metadata által okozott problémákat
}
Ha már nincs szükségünk a banner végéig a videó utolsó képkockájának látványára, nem kell, hogy fusson a videó, akkor állítsuk le, tekerjük az elejére, adjunk még egy cleart a videónak, hogy törölje a képet.
function pauseVideo():void{
// NetStream-et leállítjuk
ns.pause();
// visszacsévéljük az elejére (videót csévélni
// szokták? :))
ns.seek(0);
// adunk egy clear-t a videó objektumnak, hogy
// eltüntessük a képet, ha még lenne rajta valami.
video.clear();
}
Ezt a metódust egyik tweener használata után, a movieclipek mozgatása közben hívhatjuk meg. A pause és a seek fontos része a folytonos lejátszásnak, ezeknek köszönhető, hogy nem kell a NetStream play funkcióját újra hívni, amely újra kapcsolódna a szerverhez és így terhelné is azt rendesen.
Ha vége a tweener animációnak, újra kell indítanunk a videót. Ez hallgatólagosan a doLoop metódussal történik:
function doLoop():void{
// A resume újra indítja a pause-zal leállított
// NetStream-et
ns.resume();
}
FONTOS!: A NetStatusEvent-et használjuk arra, hogy elindítsuk a tweener animációinkat, abból történhet a legjobb időzítés.
Boldog kódolást! :)
