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ů.
Začínáme s Flash MX 2004 – 28. díl – přehrávání FLV souborů

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: Video, Software, Programování, Flash, Stat, Stažené video, 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/
Určitě si přečtěte

Jak vybrat monitor k počítači: nenechte se zlákat nepodstatnými parametry

Jak vybrat monitor k počítači: nenechte se zlákat nepodstatnými parametry

** Na jaké parametry se zaměřit a kde vás výrobci chtějí nachytat ** Monitory se stále více specifikují pro konkrétní určení ** Náročný hráč nebo profesionální grafik mají různé požadavky

20.  6.  2017 | Tomáš Holčík | 31

Dlouhodobý test HTC Vive: co vám recenze o virtuální realitě neřeknou

Dlouhodobý test HTC Vive: co vám recenze o virtuální realitě neřeknou

** Ani hry se sebelepší grafikou vás nevtáhnou tolik, jako ve virtuální realitě ** Pro sledování filmů není VR ani zdaleka ideální ** I první generace je skvělá, stále však působí jako prototyp

20.  6.  2017 | Stanislav Janů | 22

Pojďme programovat elektroniku: Postavíme si titěrnou Wi-Fi meteostanici s lepším teploměrem než Netatmo

Pojďme programovat elektroniku: Postavíme si titěrnou Wi-Fi meteostanici s lepším teploměrem než Netatmo

** Dnes se podíváme na maličkou Wi-Fi destičku Wemos D1 mini ** A připojíme k ní barometrický a teplotní shield ** Poběží na ní web a nabídne i JSON API

18.  6.  2017 | Jakub Čížek | 28

Jak unikají informace o nových iPhonech? Třeba podprsenkami čínských pracovnic

Jak unikají informace o nových iPhonech? Třeba podprsenkami čínských pracovnic

** Na černém trhu mohou zaměstnanci továren za kradené součástky inkasovat částku ve výši ročního platu ** Velké množství informací je vyneseno i z centrály Applu ** Díly jsou pašovány v botách, podprsenkách i odpadem

21.  6.  2017 | Stanislav Janů | 24


Aktuální číslo časopisu Computer

Bojujeme proti Fake News

Dva velké testy: fotoaparáty a NASy

Co musíte vědět o změně evropského roamingu

Radíme s výběrem základní desky