reklama

Začínáme s Flash MX 2004 – 28. díl – přehrávání FLV souborů

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“.

Klepněte pro větší obrázek

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.

Klepněte pro větší obrázek

Klikneme na nově vytvořený objekt a zarovnáme jej k levé straně objektu, tvořícího pozadí.

Klepněte pro větší obrázek

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.

Klepněte pro větší obrázek

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.

Témata článku: Software, Video, Programování, Flash, Stat, Convert

5 komentářů

Nejnovější komentáře

  • OBr 2. 10. 2005 16:37:40
    ve zkratce odkážu na tento díl:...
  • Johny 30. 9. 2005 21:26:08
    Vrať se prosím k webu.. Byl bych Ti strašně vdečný za díl, který by...
  • gully, gully 26. 9. 2005 16:51:43
    Tak si ho stáhni z http://zaciname-s-flash-mx-2004.wz.cz/htm/
reklama
Určitě si přečtěte

Vybíráte herní periferii nebo hardware? Pak zapomeňte na nálepku Gaming

Vybíráte herní periferii nebo hardware? Pak zapomeňte na nálepku Gaming

** Herní hardware se od toho běžného často liší jen vzhledem ** Při výběru stále nezapomínejte na základní parametry ** Poradíme jak vybrat herní hardware i periferie

20.  2.  2017 | Stanislav Janů | 37

10 nejhorších produktů v historii Microsoftu

10 nejhorších produktů v historii Microsoftu

20.  2.  2017 | Karel Javůrek | 141

AMD oficiálně představilo procesory Ryzen. Známe i jejich české ceny

AMD oficiálně představilo procesory Ryzen. Známe i jejich české ceny

** AMD uvedlo první tři procesory Ryzen 7 ** Všechny budou pracovat s osmi jádry a šestnácti vlákny ** Na pulty obchodů se dostanou už za týden

22.  2.  2017 | Stanislav Janů | 134

EU se děsí Windows 10. Prý o nás vědí až příliš. Microsoft chystá změny

EU se děsí Windows 10. Prý o nás vědí až příliš. Microsoft chystá změny

** Evropští úředníci chtějí, aby byly Desítky transparentnější ** Microsoft od jara skutečně chystá změny ** Ochráncům soukromí to ale nestačí

21.  2.  2017 | Jakub Čížek | 222

Remix Singularity: Microsoft si na tom vylámal zuby. Jak dopadne Android?

Remix Singularity: Microsoft si na tom vylámal zuby. Jak dopadne Android?

** Microsoft do svých telefonů integroval desktopové prostředí ** Moc to ale nevyšlo, chyběl pořádný výkon ** Teď to zkoušejí ex-googleři s Remix Singularity

23.  2.  2017 | Jakub Čížek | 74


Aktuální číslo časopisu Computer

Supertéma o počítačové bezpečnosti

AMD Ryzen přichází

Velké testy kinoprojektorů a levných špuntových sluchátek

Příslušenství do USB-C

reklama
reklama