Flash – Vytvorte si vlastný videoprehrávač!

0
270

S príchodom širokopásmového internetu sa na internete rozmáha čoraz viac multimediálny obsah, vrátane videa. Potrebujete aj Vy jednoducho, pár kliknutiami vytvoriť videoprehrávač pre Vaše webové aplikácie?

Pár slov na úvod

V jednej knihe o Flashi 5 z roku 2000 sa píše toto: „Jedným z nedostatkov, za ktoré býva Flash najčastejšie kritizovaný, je nemožnosť dostať do toho programu nejakým jednoduchým spôsobom video. Najskôr si však treba uvedomiť, že Flash je program, ktorý je primárne určený pre vytváranie internetových stránok, na ktorých je video len výnimočne. Pri dnešných pomalých rýchlostiach (internetu) sa ani nie je čomu diviť.“ Od roku 2000 nám ubehlo 6 rokov, za ktoré veľká populácia prešla z pomalého dial-up pripojenia, s ktorým sa dosahovalo priemernej rýchlosti okolo 4-5 Kb/s, na širokopásmový internet akým je DSL, Chello, Wifi, optika. S týmito pripojeniami nie je problém dosahovať 100-krát rýchlejšie pripojenie, vďaka čomu prichádza masívny nával multimediálneho obsahu, ako napríklad internetové rádiá, platené sťahovanie filmov a stále väčšie začleňovanie videí do rôznych recenzií, článkov. Kde je toto všetko vidieť? Dnes už takmer každé rádio má aj vysielanie na internete – každý poslucháč sa ráta. Platené sťahovanie filmov? Napríklad veľký telekomunikačný operátor spustil svoj portál, kde sa dajú sťahovať filmy v béčkovej kvalitatívnej kategórii. V zahraničí je to o niečo ružovejšie – veľké filmové štúdio z USA sa chystá na distribúciu svojich filmov cez p2p sieť BitTorrent. O výhodnosti radšej nehovorím, keďže ceny budú porovnávateľné s produktmi z kamenných obchodov, nebudú v žiadnom časovom predstihu pred lisovanými DVD. A nakoniec prichádza na rad aj zmysel tohto článku – začleňovanie rôznych mini-videí do recenzií, článkov. Tento jav je už viditeľný aj v našom blízkom okolí – najväčší internetový portál zaoberajúci sa mobilnými telefónmi v Česku začal včleňovať do svojich recenzií aj rôzne videá, ktoré informujú o telefóne, jeho vzhľade. Podobný trend som videl aj na serveri zaoberajúcim sa PC tuningom, a na ďalších. Možno si hovoríte, na čo je toto dobré. Argumenty sú jasné… Pri spomínaných mobilných telefónoch si môžete prezrieť vzhľad telefónu, prácu v menu, ako riešiť problémy s údržbou – napríklad vkladanie batérie, a podobné… Pri PC tuningu? Máte možnosť vidieť napríklad spôsob zapájania komponent, údržbu… Obrázky už jednoducho nestačia, hlavne v dobe, keď takmer s každým digitálnym fotoaparátom môžete zhotoviť video v rozlíšení 640×480, ktoré bohato postačuje na použitie na webe. A posledný argument – prečo nevyužiť nadupané linky, keď už ich máme?

Alternatívne spôsoby vkladania videa na webové stránky

Alternatíva k Flashu samozrejme že je, bola tu skôr než Flash prišiel s videom. Avšak keď si to povieme po pravde, vkladanie videa do webových stránok prostredníctvom HTML kódu je úbohé, v praxi nepoužiteľné. Prečo? Vkladanie cez HTML má jednu veľmi podstatnú nevýhodu – zobrazuje sa len v Internet Exploreri, čo je v dnešnej dobe, keď sa na trón šplhá Firefox, a skvelá Opera si tiež ukrajuje svoj podiel z používaných prehliadačov, neprekonateľná nevýhoda. Páčilo by sa vám, kebyže sa vo Vašom Firefoxe zobrazil len odkaz, aby ste ste si ručne stiahli video? Mne tiež nie. Kto by chcel čerpať viac informácií, môže začať tu.

Ako sa pripraviť na vkladanie videa?

V našom prípade sa treba pripraviť hlavne v rozmeroch videa. Hlavne si treba uvedomiť, na akú stránku chceme video vložiť, akými rozmermi stránka disponuje. Nie je vhodné keď je stránka optimalizovaná na rozlíšenie 1024×768, a vložíte do nej video o rozmeroch 640×480 pixelov. Prečo? Žiada seriózna stránka nemá obsah roztiahnutý na 1024 pixelov – väčšinou okolo 950 pixelov na šírku. K tomuto údaju si treba uvedomiť v prípade portálov aj bočné informačné panely, pri ktorých si hravo z každej strany ukúsnu 200 pixelov, a dostali sme sa na veľkosť plochy približne 550 pixelov. Stále to nie je však všetko. Páčilo by sa vám video od jedného panelu po druhý? Treba si uvedomiť aj to, že okolo videa musia byť z estetických dôvodov aj medzery, každá napríklad 20 pixelov. A sme sa dostali na cca 500 pixelov, čo nie je závratne nízko. Toto všetko je len v tom lepšom prípade – pokiaľ je stránka optimalizovaná na 1024×768 pixelov, oveľa horšie je to v prípade stránok optimalizovaných na 800×600 pixelov.

V druhom rade sa treba venovať videu aj z estetických dôvodov – nech nie sú vo videu „hluché miesta“, je potrebné mať video aj vkusne, a účelne zostrihané, a veľa ďalších vecí. Pokiaľ chcete mať video tip-top, zabrúzdajte do sekcie Foto-Video.

Začíname

V prvom rade musíte mať video pripravené v jednom z týchto formátov : *.mov, *.avi, *mp(e)g, *.dv(i), *.wmv, *.flv . S týmto myslím že nebude problém, keďže väčšina bežne používaných video formátov je podporovaných. Pravdepodobne takmer všetky formáty súborov budete poznať, až na *.flv. Čo je to?

*.flv

Čo sa môže skrývať pod týmto tajomným formátom súborov? Nie je to nič iné, než skratka Flash Video. Dosť často bývajú videá vo Flashi uložené mimo swf súboru – vo *.flv – je to v podstate formát, ktorý doručuje video do ostatných swf súborov. Avšak nie je to pravidlo, video môže byť aj priamo vo swf súbore, avšak tým sa človek ochudobňuje o viacero vecí – napríklad aj možnosť streamovať video. Jedným z obmedzení flv je aj to, že má možnosť zaznamenať do jedného flv súboru len jednu zvukovú stopu, a jednu video stopu. V aktuálne verzii programu Macromedia Flash 8 je možnosť do flv súboru zaznamenať video stopu pomocou jedného z dvoch kodekov – Sorenson Spark, On2 VP6.

Sorenson Spark & On2 VP6

Začneme u staršieho kodeku – Sorenson Spark. Je starší, menej náročný, menej efektívny, v dnešnej dobe už zastaralý, neodporúčam používať, jedine ak v jedinečných prípadoch, ak by sa rátalo s použitím na veľmi staré PC, poprípade s veľmi malými dátovými tokmi.

Kodek TrueMotion VP6 bol vyvinutý firmou On2 Technologies, v novembri roku 2003 bol zvolený kodek VP6 zvolený do používania pre EVD (Enhanced Versatile Disc), konkurenta pre DVD. Po rôznych udalostiach, akou je napríklad zavedenie licenčných poplatkov 2$ pre každý prehrávač používajúci formát EVD, a po rôznych právnických ťahaniciach sa zavedenie, vývoj formátu EVD definitívne zastavili.

V auguste 2005 však nastala pre kodek VP6 záchrana – Macromedia ho zvolila pre použitie videa vo svojom novom Flash Player-i 8. V decembri toho istého roku Skype zvolilo pre svoje videokonferencie kodek VP6. V januári 2005 vydala spoločnosť On2 Technologies nový kodek VP7, ktorý sa vyznačuje skvelou kompresiou.

Ideme tvoriť

Môžeme opustiť teóriu, a konečne začať s praxou. Tento tutoriál je robený hlavne pre Macromedia Flash 8 Professional (v klasickej verzií nie sú prístupné tieto prehrávače videa), v nižších verziách budú len malé rozdiely v dialógoch, budú chýbať niektoré možnosti.

Stiahneme si potrebné video, ktoré budeme potrebovať pri tomto článku, pre lenivých pripájam aj hotové zdrojové kódy. Vytvoríme si nový dokument (CTRL+N) v rozmeroch 320×280 pixelov, na pozadie definujeme farbu #C8C6AD. Dokument si uložíme (CTRL+S) do rovnakého adresára s videom. Prejdime na ponuku File – Import – Import Video, pred nami sa otvorí toto dialógové okno:

V tomto okne máme dve možnosti:
– Máme video v PC v klasickom formáte videa (*.wmv., *.mov, *.avi….)
– Máme video vo formáte *.flv už na web serveri, odkiaľ budeme streamovať, túto možnosť využijeme iba vtedy, keď už budeme mať vyexportovaný .flv súbor, a budeme už len dotvárať GUI prehrávača.

V našom prípade si zvolíme prvú možnosť – vybrať video na disku. Po vybraní videa klikneme na Next a pokračujeme ďalej.

V tomto dialógovom okne máme možnosť si zvoliť možnosti:
– Načítavať klasickým spôsobom videá
– Streamovanie videa pomocou FVSS – Flash Video Streaming Service. Viac informácií nájdete na adobe.com/
– Streamovanie videa cez Flash Communication Server, viac informácií nájdete na www.adobe.com/devnet/flashcom/
– Vložiť video do scény na vrstvu. Vhodné, pokiaľ chcete aplikovať rotoscoping

V našom prípade zvolíme klasickú možnosť načítavania, teda možnosť Progressive download from a web server, tým sa dostaneme na ďalšie dialógové okno:

V tomto okne si volíme kľúčové nastavenia výsledného videa. Klikneme na Advanced settings, a máme tam možnosti:
– Použitý kodek
– Počet obrázkov za sekundu (fps)
– Umiestnenie key framov
– Bitrate videa
– Zmeniť veľkosť videa
– Použitý audio kodek
– Bitrate audia, a množstvo kanálov (mono, stereo)
– Orezanie videa
– Zvolenie začiatku a konca videa

Aké máme možnosti pri hore uvedených voľbách?

Video kodek – Už spomínaný Sorenson Spark a On2 VP6. Viac informácií v kapitole Sorenson Spark & On2 VP6.

Počet framov za sekundu – Pokiaľ chcete ušetriť každý kilobajt, tak zvoľte nižšie počty fps, avšak za cenu dosť trhaného videa. 30 fps je predsa len plynulosť ;)

Umiestnenie key framov – Môžete si zvoliť voľbu automaticky (odporúčam), alebo si zvoliť vlastné nastavenie – koľký fram v poradí bude keyframe.

Bitrate videa – Na výslednú veľkosť videa najdôležitejší faktor. Čím nižší bitrate budete mať, tým menšia výsledná veľkosť, ale tým aj väčšia „kockatosť“. V našom prípade bude vhodných 300 kilobitov za sekundu

Menenie veľkosti videa – Nemýľte si s možnosťou orezať video. V tejto voľbe máte možnosť zmeniť veľkosť videa (aj nahor, aj nadol) , samozrejme aj so zachovaním pomeru strán

Použitý audio kodek – V podstate máte len informáciu, nemáte možnosť zmeniť.

Bitrate audia – Môžete si zmenšiť bitrate, avšak utrpia tým detaily. Pokiaľ chcete ušetriť miesto, máte možnosť si zvoliť mono zvuk.

Orezanie videa – Dosť praktická funkcia, máme možnosť napríklad orezať širokouhlé videá.

Zvolenie začiatku a konca videa – Tak isto praktická funkcia, využitie môže byť v odstránení napríklad reklám na začiatku, poprípade konci videa

Po nastavení všetkých záležitostí ohľadne kvality videa sa posunieme na ďalší dialóg:

V tejto fáze si zvolíme už len skin prehrávača. Každá farba má niekoľko variácií rozvrhnutia prvkov.

Toto je už posledné okno s informáciami pred enkódovaním videa. Máme tu informácie ohľadne umiestnenia súborov, atď. Už len kúzelné tlačidloFinish a náš prehrávač bude hotový pre export ;)

Po dokončení enkódovania posunieme video na súradnice x 0 y 0, vyexportujeme, a pred sebou by sme mali mať takúto plochu:

A náš finálny výsledok:

Treba si uvedomiť, že všetky tri (raptor.flv, video.swf, MojaveExternAll.swf) musia byť v jednom adresári, inak nám bude chýbať jedna časť.

Stále Vám nestačí?

Po prelúskaní všetkých nástrah, a vytvorení prehrávača nemusíme byť stále s výsledkom spokojní. Pokiaľ je to aj Váš prípad, máte dve možnosti:
Navrhnúť, a naprogramovať vlastný prehrávač – Nie je to ľahké, ale s nevyčerpateľnou studnicou, akou je internet, nie je nič problém. Všetko sa dá poskladať doslova ako lego. V tutoriáloch nájdete rôzne komponenty – ovládanie zvuku, nastavenie načítavania videa, časovú os. Pokročilý používateľ by toto všetko mal zvládnuť dať do jedného funkčného celku.
Upraviť dostupné skiny – Toto je jednoznačne tá jednoduchšia cesta ako upraviť prehrávač pre svoje vlastné potreby.

Úprava skinu pre vlastné potreby

Čo všetko sa dá dosiahnuť zmenením skinu?
– Upraviť vzhľad status baru.
– Upraviť vzhľad tlačidiel
– Upraviť rozvrhnutie tlačidiel na ploche
– Úplne zmeniť layout prehrávača – ovládacie prvky nemusia byť len pod videom

Upravujeme skin

Pokiaľ máte aspoň mihavú predstavu o tom, ako bude Váš upravovaný skin vyzerať, môžeme sa pustiť do úpravy skinov. Zdrojové kódy všetkých skinov, ktoré máme prístupné vo vytváraní videa, sú v umiestnení C:\Program Files\Macromedia\Flash8\en\Configuration\SkinFLA\, avšak pokiaľ ste si pri inštalácií zvolili inú cestu, hľadajte v koreňovom adresári programu Flash 8.

Pri výbere skinu, ktorý budete upravovať, nemusíte vôbec brať ohľad na farbu, pretože sa bude meniť, tak isto netreba brať ohľad na počet aktívnych ovládacích prvkov, pretože každý skin má vo svojom zdrojovom kóde všetky ovládacie prvky. Pre väčšie pohodlie je predsa len lepšie si zvoliť skin s plným počtom ovládacích prvkov ;) V mojom prípade som si na úpravu zvolil skin MojaveExternalAll.

Keď si otvoríme tento skin, máme pred sebou takúto plochu :

Nemusíte sa ničoho obávať, veľký počet vrstiev na scéne je zapríčinený tým, že každé tlačítko, ktoré je reprezentované ukážkami všetkých jeho stavov, je v samostatnej vrstve. Stavy tlačítka sú zobrazené v nasledujúcom poradí: normálny vzhľad, vzhľad po prejdení myšou nad aktívnu plochu, vzhľad pri stlačenom tlačítku, a nakoniec vzhľad pri neaktívnom stave. V tomto poradí sú zobrazené takmer všetky tlačidlá.

Všimnite si informačný text v prvom snímku vrstvy AllLayout, ktorý objasňuje niekoľko vecí ohľadne fungovania skinov – pri tvorbe skinu „od piky“ treba pomenovať instancie jednotlivých tlačidiel, a správne ich do tejto konfiguračnej vrstvy zapísať, inak nebudú správne plniť svoju funkciu.

Keď chcete začať s úpravou, treba najskôr editovať samotné tlačidlá, až potom ich rozvrhnutie. Prečo? Keď si najskôr nastavíte polohu tlačidiel, a až potom ich budete upravovať, tak úpravami si pravdepodobne zmeníte rozmery, takže pri finálnom exporte budete mať ovládacie prvky porozhadzované.

Ako upraviť tlačidlá

Instancie všetkých stavov tlačidiel máme prehľadne usporiadané v knižnici, takže navigácia pri editovaní bude jednoduchá. Všetky tlačidlá máme v adresári Skins, kde sú ďalšie adresáre, ktoré predstavujú jednotlivé tlačidlá. Myslím že každý adresár bude jasný, adresár _SquareButton je šablóna pre vytváranie nových tlačidiel.

Bližšie ani netreba popisovať úpravu tlačidiel, keďže všetko je prehľadne usporiadané, všetko do seba logicky zapadá. Pri vytváraní vlastných tlačidiel odporúčam najskôr si vytvoriť šablónu, podľa ktorej budete vytvárať ostatné tlačidlá. Ušetrí vám to veľa času.

Úprava layoutu prehrávača

Pokiaľ máte všetko pripravené na úpravu layoutu, môžeme sa pustiť do navrhovania layoutu. Pri navrhovaní treba myslieť hlavne na to, aby sa človek hneď v prvej chvíli vyznal v navigácií medzi tlačidlami – nie je veľmi pohodlné, keď človek musí prechádzať očami z jednej strany prehrávača na iný, len pre to, aby našiel ovládacie prvky, ktoré sú roztrúsené po celej ploche prehrávača. Samotné upravovanie layoutu je taktiež veľmi jednoduché, najťažšie je vymyslieť novú, vkusnú plochu, pre ovládacie prvky ;)

V priečinku Layouts máme layout nášho skinu. Toto je tiež až tak primitívne, že to netreba popisovať – premiestniť inštancie tlačidiel dokáže po ploche každý ;)

Tlačidlá môžu byť takmer kdekoľvek – v ploche videa, na okrajoch, aj v menšej vzdialenosti od plochy prehrávaného videa.

Zakončenie tvorby layoutu

Po dokončení úpravy tlačidiel, layoutu, si uložíme súbor do ľubovoľného priečinku, kde ho aj vyexportujeme (Ctrl+Alt+Enter). Keď budeme chcieť skin použiť, treba pri importovaní videa do scény použiť náš skin – zadaním URL na swf súbor nášho skinu.

Autor: Tomáš Mitana (Axis)