Dnes se vrátíme k restu z předešlých dílů ohledně přehrávání videa ve FLV formátu a ukážeme si jednu z možností v ovládání uvedených videosouborů.
Ovládání videa
Otevřeme si zdrojový soubor z 25. dílu, který si lze stáhnout zde. Uvedenou ukázku upravíme pro pohodlné ovládání přehrávaného videa. Ovladačem bude posuvník, který bude zároveň sloužit jako indikátor aktuálního času videa.
Od posuvníku budeme požadovat, aby se při tažení přesunulo video na požadované místo (čas). Po kliknutí na posuvník chceme, aby se video zastavilo a pokud s posuvníkem nikam nepohneme, chceme, aby se video opět rozběhlo.
Navíc budeme v informačním textovém poli zobrazovat informace o aktuálním stavu přehrávání videa.
Úprava AS hlavní osy
V otevřeném zdrojovém souboru klikneme na první snímek a zobrazíme si panel akcí. Původní skript nahradíme následujícím:
delka = 43;
var netConn:NetConnection = new NetConnection();
netConn.connect(null);
var netStream:NetStream = new NetStream(netConn);
my_video.attachVideo(netStream);
netStream.setBufferTime(5);
netStream.play("video.flv");
Nezměnilo se téměř nic, smazali jsme proměnnou „stat“, která nás informovala o aktuálním stavu bufferu a přehrávání. Přibyla nám zde proměnná „delka“, kterou určujeme celkovou délku videa v sekundách. Nelze totiž automaticky zjistit celkovou délku videa, proto zde musíme „ručně“ nastavit jeho délku.
Celkovou délku videa zjistíme, když si otevřeme knihovnu objektů, klikneme pravým tlačítkem myši na objekt videa, zobrazíme okno vlastností „Properties“ a odečteme uvedenou délku.
Vytvoření posuvníku
Pro ovládání videa použijeme objekt posuvníku. Nejdříve si nakreslíme obdélník, který bude mít délku 160px a výšku zhruba 10px. Nakreslení obdélník celý vybereme a klikneme na něj pravým tlačítkem myši. Zvolíme „Convert to Symbol“ a převedeme obdélník na MC, který pojmenujeme „posuv“.
Dvojlklikem na vytvořený MC jej otevřeme a vytvoříme samotný objekt pro přetahování. Vytvoříme další vrstvu, do které nakreslíme malý obdélník, široký zhruba 4px, vysoký 20px a umístíme jej nad nakreslené pozadí celého MC. Pravým tlačítkem klikneme na zvolený nakreslený obdélník a převedeme jej na MC, který pojmenujeme „posuvnik“. Zkontrolujeme, jestli máme nastaven registrační bod nového objektu do levého horního rohu.
Klikneme na nově vytvořený objekt a zarovnáme jej k levé straně objektu, tvořícího pozadí.
Posledním objektem, který vložíme na scénu, je dynamické textové pole, které pojmenujeme „inf“ a umístíme je na hlavní scénu dokumentu.
Objekty máme připravené a můžeme se podívat na doplnění AS.
AS posuvníku
Dvojklikem na objekt posuvníku jej otevřeme, zvolíme malý obdélník, kterým budeme chtít ovládat video a otevřeme si panel akcí, kam napíšeme následující kód:
onClipEvent (load) {
dragging = false;
}
onClipEvent (enterFrame) {
this._parent._parent.inf.text = "Celkem dat: " + _root.netStream.bytesTotal + " Z toho již staženo: " + _root.netStream.bytesLoaded + newline + "Do vyrovnávací paměti staženo: " + _root.netStream.bufferLength+"s"+newline + "Aktuální čas animace: " +_root.netStream.time;
if (!dragging) {
if (this._x<160) {
this._x = (_root.netStream.time/_root.delka)*160;
}
}
}
on (press) {
_root.netStream.pause(true);
dragging = true;
startDrag(this, false, 0, -4.5, 160, 0);
aktX = this._x;
}
on (release, releaseOutside) {
dragging = false;
stopDrag();
xNew = this._x;
if (aktX != xNew) {
this._x = Math.floor(xNew);
if (this._x != 0) {
_root.netStream.pause(false);
procent = this._x/160;
_root.netStream.seek(_root.delka*procent);
}
} else {
_root.netStream.pause(false);
}
}
Nejdříve se pozastavíme u události „enterFrame“. Zde zobrazujeme v textovém poli aktuální informace o celkových a načtených datech videa a dále informujeme o stavu vyrovnávací paměti a aktuální pozici přehrávaného videa. Následuje podmínka, kde testujeme proměnnou „dragging“.
Proměnná „dragging“ informuje o situaci, když právě objekt přetahujeme. Pokud jej nepřetahujeme, zjišťujeme aktuální čas animace a podle něj objekt automaticky přesouváme. Pokud ovšem s objektem táhneme, nechceme, aby se nám aktuální stav animace promítal do pozice přesouvaného objektu.
Událost „press“, tedy po stisknutí myši na objektu, vyvolá zastavení videa („pause“) a začneme objekt přetahovat. Tažení probíhá pouze v mezích x-ové souřadnice v kladném směru do vzdálenosti 160px (délka pozadí celého objektu).
Proměnnou „dragging“ nastavíme na „true“, máme tak zaručeno, že se objekt bude opravdu přesouvat s myší a nebude jeho poloha ovlivněna aktuálním časem zastavené animace.
Následuje událost při uvolnění tlačítka myši („release“). Zde přirozeně ukončíme přetahování objektu. Následuje testování proměnných, pomocí kterých zjistíme, jestli jsme objekt vůbec někam přetáhli. Pokud ano (souřadnice původní a aktuální se neshodují), pomocí metody „seek“ se přesuneme na požadovaný čas (s) přehrávaného videa.
V případě, že jsme s objektem vůbec neposouvali, pouze znovu spustíme video.
V případě, že bychom chtěli vytvořit samostatné tlačítko pro pauzu videa, můžeme vynechat parametr „true/false“ u metody „pause“. Pokud napíšeme metodu bez uvedených parametrů, bude nám tato metoda automatiky zastavovat a spouštět video při klikání na příslušné tlačítko. Nemusíme zde zjišťovat aktuální stav přehrávání a stačí vypsat pouze uvedenou funkci.
Poslední metoda, kterou zde již jen zmíním je „close()“. Pokud ji použijeme, dojde k ukončení načítání videa, dosud stažená data se vymažou a my můžeme začít zobrazovat další videosoubor.
Zdrojová data dnešní ukázky ke stažení zde.
Ukázka dnešní lekce zde.
