Vkládání videa do Flashe

22.5.2006· Autor: Ondřej Brichta· Počet komentářů: 63

Zobrazení videa přímo ve flashových animací jistě patří k velikým lákadlům a proto si dnes ukážeme několik jednoduchých způsobů, jak zobrazit videa ve flashových animacích.

Působivé oživení

Flashové aplikace bez pohybu si dnes opravdu nelze představit. S trochou nadsázky lze říci, že právě kvůli tomu pohybu a nejrůznějším animacím jsme Flash vybrali jako nástroj, s jehož využitím dokážeme uživatele našich aplikací mnohem lépe zaujmout. Abychom ale nebyli odkázáni pouze na animace, které si „ručně“ vytvoříme přímo v editačním prostředí programu, máme velmi dobrou možnost importovat širokou škálu typů souborů. Ty mohou obsahovat jak jednoduché animace například v GIF formátu tak i klasická videa, jejichž vhodným použitím zvýšíme atraktivnost vyvíjených aplikací. Namátkou zde můžeme zmínit dvě ukázky velmi zdařilé kombinace Flashe s videem: http://adisney.go.com/disneypictures/pirates/index.html; http://www.lowetesch.com/showroom/saab/animalvision/GLOBAL/en/.

Vkládání videa do Flashe

Existují dvě varianty zobrazení videa v animacích. První možností je vložení videa přímo do vytvořené animace. Video se tak stává přímou součástí exportovaného SWF souboru. Výhoda tohoto řešení spočívá v jednoduchosti, kdy máme pouze jeden SWF soubor, ve kterém je vše potřebné. Ovšem, jak jistě každého napadne, toto řešení není vhodné při vkládání velkých videí, která mají řádově stovky a více kB. Přeci jenom bychom měli dbát na co nejmenší datový objem, který je třeba načíst, aby se zobrazila alespoň část prezentace či aplikace.

Uvedený způsob je vhodný při použití velmi malých videosouborů, které tvoří jen určitý doplněk dalším animacím. Jakmile už velikost výsledného videa přesahuje zmíněné stovky kB, je vhodné umístit video mimo SWF soubor a načítat jej externě (v případě offline CD prezentací je samozřejmě velikost videa méně limitujícím faktorem, ale i zde bychom měli dbát na rozumnou velikost výsledného souboru)

Pokud se rozhodneme pro externí umístění videosouborů, máme opět několik možností. První je analogická k vložení videa přímo na časovou osu, kdy vytvoříme SWF soubor s vloženým videem a tento soubor pak podle potřeb načítáme jako externí zdroj dat do aplikace. Výhodou je pak možnost vkládání dalších potřebných skriptů či objektů do externího SWf souboru.

Elegantnějším řešením je vytvoření flash video souboru – FLV. Uvedený formát umožňuje užitečné streamování, kdy se video začne přehrávat ihned po začátku načítán. Samozřejmě lze namítnout, že i první způsob uložení videa v externím SWF souboru je možné považovat za určitý typ streamování, protože pokud animaci(video) v externím SWF souboru nezastavíme na prvním snímku a nepočkáme na kompletní načtení celého souboru, začne se automaticky přehrávat od prvního snímku, i když nejsou další snímky načteny. Pokud ale porovnáme možnosti v ovládání obou způsobů, při použití FLV videí jsou potřebné funkce a vlastnosti dostupné přes třídu NetStream, zatímco při použití externího SWF souboru musíme veškeré stavy ošetřit novým vlastním skriptem.

Vložení videa na časovou osu

Nejdříve si představíme jednodušší způsob vkládání videa, kterým je umístění přímo na časové ose animace. Otevřeme si nový dokument a vytvoříme nový symbol (Insert|New Symbol) Movie Clip, který pojmenujeme „video“.

Z hlavní nabídky zvolíme File|Import|Import to Stage a vybereme videosoubor, který chceme vložit. Pokud jsme soubor vybrali, zobrazí se první okno průvodce vkládání videa, ve kterém můžeme dodatečně zvolit umístění souboru.

Následující okno nám nabídne několik zdrojů umístění videosouboru.

Obrázek1

Nás teď bude zajímat pouze poslední možnost (Embed video in SWF and play in timeline), která znamená umístění videa přímo do SWF souboru. Ostatní položky jsou určené pro streamování videa buď z vlastního webového prostoru/lokálního umístění, nebo s využitím Flash Communication serveru.

Zvolíme vložení videa do časové osy a pokračujeme dalším krokem, kde se zobrazí možnosti, jak bude vložené video zobrazeno.

Obrázek2

První nabídka Symbol Type umožňuje zvolit typ symbolu, ve kterém se video zobrazí. Pokud zvolíme Movie Clip nebo Graphic, video se vloží do příslušného typu symbolu, pokud ponecháme možnost Embedded video, video zůstane samotné. Další nabídka Audio track umožňuje oddělení audio stopy. Pokud nechceme, aby bylo video pevně spjaté se zvukem, můžeme zvolit možnost Separated. Kromě samotného videa se navíc vytvoří samostatná audio stopa. Po skončení importu se v knihovně objektů vedle videa objeví i zvuková stopa.

V okně pro nastavení vkládání videa nalezneme navíc položky určující, jestli chceme po dokončení importu vložit video přímo na časovou osu, dále pokud je počet snímků menší, než by odpovídalo délce videa, lze časovou osu prodloužit.

V případě, že zvolíme Embed the entire video bude videosoubor vložen kompletně celý, u položky Edit the video first budeme mít v následujícím kroku možnost video rozstříhat na jednotlivé sekvence.

oBRÁZEK3
Okno s možností sestříhání videa

 

Dalším krokem je už nastavení samotné konverze videa.

oBRÁZEK4_1

V první řadě zde máme možnost si vybrat z předem nastavených typů komprese vkládaného videa. Platí zde jednoduché pravidlo, že čím vyšší datový tok, tím kvalitnější ale i objemnější bude výsledné importované video. Je proto dobré zvážit, k jakému účelu bude naše video sloužit. Pokud potřebujeme kvalitní výstup, zvolíme vyšší datový tok. Kromě datového toku se v nabídce vyskytuje údaj o verzi Flashe, od které je zvolené nastavení použitelné.

Použitelnost je závislá na zvoleném kodeku, který si můžeme vybrat, pokud otevřeme podrobnější nastavení klepnutím na tlačítko Show Advanced settings.

oBRÁZEK4

U nabídky Video Codec máme možnost zvolit mezi On2 VP6 kodekem a Sorenson Spark kodekem. On2 VP6 kodek je novější a přišel společně s Flash 8 verzí. Z toho plyne i použitelnost vytvořeného SWF souboru, kdy takto kódované video budeme moct přehrát pouze na flashplayeru verze 8 a vyšší. Výsledné video je při použití tohoto kodeku kvalitnější, než video vytvořené pomocí staršího Sorenson Spark kodeku.

Společně s vyšší kvalitou však přichází i vyšší náročnost na zpracování a proto je celkový čas konverze videa delší než při použití staršího kodeku. Kromě vyšší náročnosti při konverzi je takto kódované video náročnější i pro přehrávání.

Průhledné video

Pokud jsme si rozšířili nabídku o dalším možnosti nastavení konverze videa, najdeme zde kromě ořezávání, změny délky, nastavení kvality videa a zvuku také možnost vytvořit video s průhledným pozadím. Ihned pod nabídkou s výběrem kodeku můžeme zaškrtnout položku Encode alpha channel. Pokud video, které importujeme má vytvořený alpha kanál, bude zprůhledněn.

Jak ale alpha kanál ve zdrojovém videu vytvořit? Nejsnazší to máme, pokud jsme sami tvůrci videa, které renderujeme v některém z modelovacích programů, jakými jsou Cinema 4D, 3D Studio Max apod. V těchto programech pak stačí nastavit u exportu videa, že chceme zakódovat i alpha kanál a vše je vyřešeno. Horší to je v případě, kdy máme k dispozici video hotové. Pak nezbývá nic jiného než se pokusit o „ruční“ vyklíčování pozadí v některém z videoeditačních programů (Adobe Premiere …).

V případě, že už máme konverzi nastavenou, přejdeme k dalšímu kroku, kde překontrolujeme zvolen parametry a pak už následuje samotný převod videa.

Obrázek5

Přehrávač pro streamování videa

Pokud se rozhodneme pro vytvoření FLV souboru a ten chceme zobrazit v aplikaci, postupujeme stejně, jako v předchozím případě při vkládání videa přímo do časové osy ale s tím rozdílem, že při volbě umístění videosouboru zvolíme první možnost z nabídky, tedy Progressive download from a web server. Dalším krokem je pak již známé nastavení parametrů konverze videa.

Následuje předposlední krok, kterým je volba vzhledu přehrávače, který bude zobrazovat FLV soubor.

Obrázek 6

V případě, že chceme připravený vzhled upravit, musíme se podívat do adresáře s Flashem: Flash 8\en\Configuration\Skins , kde nalezneme SWF soubory použitých skinů. Jejich zdrojové FLA nalezneme o kousek vedle v adresáři: Flash 8\en\Configuration\SkinFLA

Po dokončení převodu videa se podíváme do adresáře s aktuálním dokumentem. Nalezneme zde kromě SWF souboru i vygenerovaný FLV soubor, který obsahuje převedené video. Je tedy zřejmé, že pro zobrazení videa jsou nutné oba dva soubory. Navíc ještě kromě zmíněných souborů je zde SWF soubor zvoleného skinu. Pokud soubor vymažeme, video se zobrazí, ale už se nezobrazí ovládání, které je součástí SWF souboru zvoleného skinu.

Používání komponent pro přehrávání FLV souborů má ovšem jeden háček. Komponenty jsou dostupné pouze v Professional verzi Flashe a proto se v příštím díle podíváme, jakým způsobem lze streamovat a ovládat video i bez použití připravených komponent.

Ondřej Brichta Vývojář flashových a mobilních AIR aplikací, šéfredaktor Flash.cz, školitel produktů Flash, Flex, Flash Media Server

E-mail: ob(zavinac)obria.cz | Web: http://www.obria.cz |

Motto: <°))))><

Komentáře k článku  
Skiny honcca | 19.9.2006 17:24
verze? OBr | 19.9.2006 17:28
Re: verze? honcca | 19.9.2006 17:51
Re: Re: verze? OBr | 19.9.2006 17:56
Re: Re: Re: verze? honcca | 19.9.2006 18:05
Re: Re: Re: Re: verze? OBr | 19.9.2006 18:08
Re: Re: Re: Re: Re: verze? honcca | 19.9.2006 18:20
Uložení stream videa na web Petr_ | 23.1.2007 14:20
Externí video ve flashy Lol3K | 19.3.2007 15:18
problém s html Homer | 16.7.2007 16:47
Re: problém s html OBr | 21.7.2007 19:24
Nezobrazuje se Moebius | 26.7.2007 13:22
Re: Nezobrazuje se OBr | 26.7.2007 13:25
Re: Re: Nezobrazuje se Moebius | 26.7.2007 14:02
Re: Re: Re: Nezobrazuje se OBr | 26.7.2007 14:08
Re: Re: Re: Re: Nezobrazuje se Moebius | 26.7.2007 14:13
Re: Re: Re: Re: Re: Nezobrazuje se OBr | 26.7.2007 14:21
Re: Re: Re: Re: Re: Re: Nezobrazuje se Moebius | 26.7.2007 14:37
Re: Re: Re: Re: Re: Re: Re: Nezobrazuje se OBr | 26.7.2007 14:44
Re: Re: Re: Re: Re: Re: Re: Re: Nezobrazuje se Moebius | 26.7.2007 15:12
Re: Re: Re: Re: Re: Re: Re: Re: Re: Nezobrazuje se OBr | 26.7.2007 15:15
Re: Re: Re: Re: Re: Re: Re: Re: Re: Re: Nezobrazuj Moebius | 26.7.2007 15:25
rýchlosť prehrávania fero | 7.8.2007 18:16
Re: rýchlosť prehrávania OBr | 7.8.2007 18:23
Re: Re: rýchlosť prehrávania fero | 7.8.2007 18:25
Re: Re: Re: rýchlosť prehrávania OBr | 7.8.2007 18:30
Re: Re: rýchlosť prehrávania fero | 7.8.2007 18:31
Re: Re: Re: rýchlosť prehrávania OBr | 7.8.2007 18:35
Re: Re: Re: Re: rýchlosť prehrávania fero | 7.8.2007 18:37
Re: Re: Re: Re: rýchlosť prehrávania fero | 7.8.2007 18:41
Re: Re: Re: Re: Re: rýchlosť prehrávania OBr | 7.8.2007 18:45
Re: Re: Re: Re: Re: rýchlosť prehrávania fero | 7.8.2007 19:04
Re: Re: Re: Re: Re: Re: rýchlosť prehrávania fero | 7.8.2007 19:11
Re: Re: Re: Re: Re: Re: Re: rýchlosť prehrávania OBr | 7.8.2007 19:28
flash na web ilchmanpetr | 14.9.2007 13:48
Re: flash na web OBr | 14.9.2007 14:31
Re: Re: flash na web ilchmanpetr | 14.9.2007 14:51
Re: Re: Re: flash na web OBr | 14.9.2007 17:54
Re: Re: Re: Re: flash na web ilchmanpetr | 14.9.2007 18:14
Re: Re: Re: Re: Re: flash na web ilchmanpetr | 14.9.2007 18:15
Re: Re: Re: Re: Re: Re: flash na web OBr | 14.9.2007 18:17
Re: Re: Re: Re: Re: Re: Re: flash na web ilchmanpetr | 14.9.2007 18:38
Re: Re: Re: Re: Re: Re: Re: Re: flash na web OBr | 14.9.2007 18:41
Re: Re: Re: Re: Re: Re: Re: Re: Re: flash na web ilchmanpetr | 14.9.2007 19:14
Re: Re: Re: Re: Re: Re: Re: Re: Re: Re: flash na w ilchmanpetr | 14.9.2007 20:13
Re: Re: Re: Re: Re: Re: Re: Re: Re: Re: Re: flash ilchmanpetr | 17.9.2007 12:07
Re: Re: Re: Re: Re: Re: Re: Re: Re: Re: Re: Re: fl OBr | 17.9.2007 12:19
Re: Re: Re: Re: Re: Re: Re: Re: Re: Re: Re: Re: Re ilchmanpetr | 17.9.2007 13:04
Re: Re: Re: Re: Re: Re: Re: Re: Re: Re: Re: Re: Re ilchmanpetr | 17.9.2007 13:09
Re: Re: Re: Re: Re: rýchlosť prehrávania OBr | 17.9.2007 13:12
Re: Re: Re: Re: Re: Re: rýchlosť prehrávania ilchmanpetr | 17.9.2007 13:31
Re: Re: Re: Re: Re: Re: Re: rýchlosť prehrávania OBr | 17.9.2007 13:35
Re: Re: Re: Re: Re: Re: Re: Re: rýchlosť prehrávan ilchmanpetr | 17.9.2007 14:34
Re: Re: Re: Re: Re: Re: Re: Re: Re: rýchlosť prehr ilchmanpetr | 17.9.2007 20:38
Je to jednoduché !!! Petka | 18.11.2007 21:41
video ve flashy mazzy666 | 30.11.2007 17:07
Fullscreen TAP | 24.1.2008 13:04
foolscreen TAP | 25.1.2008 13:36
jak adresovat na FLV video na servru video nejde ? G.M.Kenny | 11.2.2008 23:41
streaming s komponentem - jeho ůpravy G.M.Kenny | 12.2.2008 1:37
FLVPlayback + akcia na konci videa websky | 27.10.2008 13:30
VLOŽENÍ SWF VIDEA ZA GIF LOGO pavelveselydruzec | 29.10.2009 16:16
"odkaz" po skončení flv videa Marma | 21.7.2010 9:59

Přihlášení uživatele