<< zpět na hlavní stránku

Tutoriál 1 - Skákající míč

Upozornění: Podkladová grafika zde použitá je chráněna autorskými
právy a nesmí být dále šířena ani použita ve vašich projektech!

V úvodním tutoriálu se seznámíme se základním ovládáním programu Animer a rozpohybujeme skákající míč. Animace by měla vypadat nějak takto:

Download podrobnějšího náhledu (4 MB)

Náhled na ShutterStock

Pozn.: Podkladové obrázky pro tento tutoriál jsou přibaleny k programu Animer. Slouží jen jako ukázka k vyzkoušení, nesmí být používány a šířeny např. do fotobank.

 

1. Příprava grafiky

Připravíme si grafiku. Rozměry obrázků závisí na tom, zda budeme chtít generovat video 4k UltraHD (3840x2160) nebo jen FullHD (1920x1080). Obrázky by měly mít alespoň takové rozlišení (tedy rozměry v pixelech), jaké budou mít v koncovém videu. Pokud by byly menší, mohly by být ve výsledném videu neostré. Větší mohou být, ovšem ne přehnaně, mohlo by dojít k zahlcení paměti programu (zabranou paměť lze sledovat pomocí Správce Úloh).

Obrázky budeme ukládat do složky "img", která je u programu připravená. Všechny obrázky se musí před použitím zkonvertovat programem AnimerPic na interní format programu Animer. Lze k tomu využít povelový soubor conv_all.bat, který zkonvertuje všechny obrázky ze složky "img" do složky "bmp".

1. Pozadí. Použil jsem fotku ulice a upravil jsem ji na rozměry 1920x1080 (chci generovat pouze FullHD video, protože fotku nemám ve větším rozlišení). Fotku uložím do složky "img" ve formátu jpg.

2. Hydrant. Záměrně pro účely demonstrace chci, aby se míč pohyboval za hydrantem, který se nachází ve spodní části fotky. Proto jsem z upravené fotky (v rozlišení 1920x1080) vyřízl obrázek hydrantu (s odmazaným průhledným pozadím) a uložil ho do obrázku ve formátu png.

3. Míč. Ten jsem nakreslil v Illustrátoru a exportoval do obrázku png s průhledným pozadím.

3. Stín pod míčem. Stíny se běžně dělají tak, že se vezme bílá plocha, stín se nakreslí tmavou barvou a obrázek se pak moduluje na podkladový obraz operací "násobit", která ztmaví barvy podkladu. Při operaci násobení ale nelze regulovat úroveň ztmavení. Proto jsem zvolil gradient s proměnlivou průhledností, kde lze alfa kanálem řídit úroveň ztmavení.

Obrázek stínu vytvoříte ve Photoshopu. Připravíte si nový čtvercový obrázek s průhlednou barvou. Zvolíte nástroj Přechod a v editoru přechodu nastavíte počáteční i koncovou barvu černou, avšak proměnlivé krytí, od 0% do 100%. Táhnutím vyplníte plochu kruhovým stínem s proměnlivou průhledností. Poté obrázek zmenšíte na výšku (asi 50%). Zmenšení je sice možné udělat i v programu Animer, ale muselo by se měnit na hodně místech a proto je jednodušší připravit si obrázek už ve správném poměru stran. Obrázek uložíte do formátu png.

4. Světlo. Chci na míči vytvořit efekt 3D světla, aby vypadal prostorově. Použiji mód průhlednosti "násobit * 2", kterým je možné podkladovou barvu jak ztmavit, tak i zesvětlit. Abych zajistil přesné krytí s míčem, použil jsem obrázek míče, který jsem otevřel ve Photoshopu. Vytvořil jsem novou průhlednou vrstvu. Zvolil jsem nástroj Přechod a v editoru přechodu nastavit okrajové barvy tak, aby byla jedna tmavší než 128 (128 je střední jas) a druhá světlejší než 128. Poté jsem vyplnil plochu kruhovým přechodem tak, aby světlý střed byl vlevo nahoře. Kliknutím pravým tlačítkem myši na ikonu míče v seznamu vrstev jsem zvolil "Vybrat průhlednost vrstvy". Tím se označí výběrem obrázek míče. Přepnul jsem výběr na vrstvu s gradientem, výběr invertoval Ctrl+Shift+I (nebo v menu Výběr / Doplněk) a klávesou Delete odstranil gradient nacházející se vně míče. Uložit do souboru png.

Nakonec spustíme povelový soubor conv_all.bat. Ten zkonvertuje obrázky uložené ve složce img do složky bmp.

 

2. Ovládání programu

Spusťte program Animer. Na horní liště programu se nachází řada tlačítek hlavního menu. Vlevo shora je seznam obrázků ve scéně. Pod ním jsou základní vlastnosti obrázku, tj. vlastnosti nezávislé na klíčovém snímku. Dále pod nimi je pole nastavení klíčového snímku. Klíčový snímek je snímek videa, ve kterém jsou nastavené některé vlastnosti obrázku (jako např. souřadnice nebo rozměr). Program interpoluje vlastnosti ve snímcích nacházejících se mezi klíčovými snímky. Na spodním okraji programu se nachází přehrávací menu spolu s ukazatelem přehrávací pozice. A úplně dole je informační stavový řádek. Pokud kurzorem myši pohybujete nad ovládacími prvky, zobrazuje se v informačním řádku nápověda k těmto prvkům.

 

3. Vložení pozadí a hydrantu

Nejdříve vložíme pozadí. Stiskněte tlačítko "Přidat obrázek" a nalistujte ve složce bmp obrázek pozadí. Program pracuje s obrázky vždy tak, jako by okno videa mělo rozměry FullHD 1920x1080 bodů, nezávisle na tom, jak velké video se bude v závěru generovat. Tomu jsou přizpůsobeny souřadnice i rozměry obrázků. Souřadnice jsou vždy vztažené ke středu obrázku a plochy. Uprostřed plochy je souřadnice X=0 a Y=0, vlevo je X=-960, vpravo X=+960 atd.

Otevřete-li obrázek, nastaví se jeho souřadnice na X=0, Y=0 (vztažný je střed obrázku a střed plochy), obrázek tedy bude umístěn uprostřed plochy. Rozměry obrázku budou nastaveny na 100%, kdy se obrázek zobrazí tak, jak odpovídají jeho rozměry k rozměrům virtuální plochy 1920x1080. Vložíte-li obrázek 1920x1080, zaplní celou plochu. Vložíte-li obrázek pro video UltraHD, tj. s rozměrem 3840x2160, zobrazí se 2x větší než je plocha. V tom případě je nutné obrázek zmenšit nastavením vlastností "Šířka" a "Výška" v poli nastavení klíčového snímku. Doporučuji zapnout tlačítka "Procenta" a "Zámek" , pak můžete nastavovat šířku a výšku snáze pomocí procent z originální velikosti a stačí měnit pouze jeden z údajů.

Když změníte nastavení šířky a výšky obrázku, můžete si všimnout, že po levé straně se zapnuly přepínače Šířka a Výška. Tyto přepínače udávají, že příslušné vlastnosti jsou v aktuálně nastaveném snímku aktivní, snímek je klíčovým snímkem. Budete-li posouvat ukazatel přehrávací pozice, vidíte, že přepínače jsou zapnuty pouze ve snímku 0 (který jste měli vybraný v okamžiku nastavování hodnot). Posunete-li ukazatel na jiné místo a změníte-li tam vlastnosti Šířka a Výška, vytvoří se na tom místě klíčový snímek. Posouváním mezi oběma klíčovými snímky se bude nastavený parametr plynule měnit - např. se bude plynule měnit velikost obrázku pozadí.

Klíčové hodnoty odstraníte tak, že vypnete přepínače na začátku řádků s vlastnostmi. Chcete-li najít, kde se nachází nějaký další klíčový snímek (tedy kde jsou některé hodnoty zapnuty jako aktivní), použijte k tomu tlačítka "Předešlý klíč" a "Další klíč" . Vyhledávání klíčových snímků se vztahuje pouze k obrázku, který je vybraný v seznamu obrázků.

K obrázku pozadí přidáme obrázek hydrantu. Otevřte jej také tlačítkem "Přidat obrázek" . Jak můžete vidět, nový obrázek se přidal na konec seznamu obrázků a obrázek hydrantu se objevil uprostřed náhledového okna. V seznamu obrázků můžete vybírat obrázek, jehož vlastnosti chcete měnit.

Umístěte hydrant na správnou pozici tak, aby se přesně kryl s hydrantem na obrázku pozadí. To dosáhnete úpravou souřadnic X a Y. Chcete-li kontrolovat, jak přesně se obrázky kryjí, zapínejte a vypínejte přepínač "Viditelnost", tím snadno poznáte, zda (a kam) se obraz mění a zda je tedy potřeba souřadnici ještě opravit.

Pořadí obrázků v seznamu obrázků je důležité z hlediska pořadí překrývání obrázků. Obrázky, které jsou v seznamu níže, překrývají obrázky, které jsou nad nimi. Přesunete-li v seznamu obrázek hydrantu nad obrázek pozadí tlačítkem "Nahoru" , vidíte, že obrázek hydrantu zmizel, byl překryt obrázkem pozadí. Vypnete-li viditelnost obrázku pozadí, obrázek hydrantu se objeví na černé ploše. (Pozn.: barvu podkladové plochy můžete měnit tlačítkem "Pozadí" ).

 

4. Vložení míče

Přidejte obrázek míče. Míčem můžete posouvat pomocí souřadnic X a Y. Nezapomeňte ovšem, že jakákoliv změna parametrů se uloží jako klíčový snímek, což by vám později mohlo způsobit potíže v podivném chování animací, když zapomenete, že jsou někde tyto údaje nastaveny. Proto raději před pokusy přesuňte ukazatel vždy na snímek 0, kde změny vlastností snáze najdete.

Obrázek míče přesuňte v seznamu obrázků nad obrázek hydrantu tlačítkem "Nahoru" , protože chceme, aby se míč vykresloval za hydrantem. Nyní budeme chtít, aby se míč přesouval z levé strany k pravé straně.

Na horní liště je editační pole "Délka", které určuje délku animace v počtu snímků. Výsledné video bude mít rychlost 29.97 fps, tedy přibližně 30 snímků za sekundu. Přednastavená délka 880 snímků odpovídá necelým 30 sekundám animace (je to trochu méně než 30 sekund, protože některé fotobanky hlásí při přesných 30 sekundách překročení povoleného limitu). Zvolíme si, že animace bude mít délku 10 sekund, proto změníme počet snímků na 300.

Nastavte ukazatel na snímek 0. Posuňte míč k dolnímu okraji změnou souřadnice Y tak, aby "přijatelně" ležel na cestě. Pak změňte souřadnici X, aby míč vyjel z obrazovky směrem doleva. Nevadí, když zadáte údaj mimo rozsah táhla X. Dále přesuňte ukazatel na poslední snímek tlačítkem "Konec" a změňte souřadnici X, aby se míč dostal za pravý okraj obrazovky. Souřadnice jsou symetrické, takže stačí když pouze změníte znaménko údaje přednastaveného z počátečního snímku. Přehrajte si scénu tlačítkem "Přehrát" nebo posouváním táhla pozice. Vidíte, že míč se přesouvá od levého okraje k pravému a že se pohybuje za hydrantem.

 

5. Skákající míč

Přidáme míči skákání. Chceme, aby míč vystartoval vlevo z nějaké zvýšené pozice, pak následovaly např. 2 odrazy a pak dosedl a už se jen koulel. Aby se pozice snáze editovala, využijte toho, že je nyní přednastavená souřadnice Y místa dosedu na cestu. Nastavte ukazatel přehrávání postupně na všechny 3 místa dosedu, kde chcete udělat odraz od cesty, a tam zaškrtnutím přepínače Y zafixujete vertikální souřadnici v tomto místě. Souřadnici Y zafixujte i na posledním snímku 299. Animace se provádějí jako seamless, bez zafixování posledního snímku by se provedla interpolace konce animace s prvním snímkem a míč by na konci vzlétl nahoru.

Vraťte se zpět na snímek 0 a zvyšte souřadnici Y, jako výchozí místo pro start míče. Poté procházejte místa dosedu tlačítky "Předešlý klíč" a "Další klíč" a uprostřed mezi dosedy zvyšte souřadnici Y tak, aby se výška nadskoku postupně snižovala. Když si nyní spustíte animaci, vidíte, že míč sice skáče, ale jaksi nepřirozeně, jen jakoby klikatě létal mezi horní a dolní polohou. To napravíme zaoblením dráhy v horní úvrati. Přesuňte ukazatel postupně na místa horních úvratí a tam zaškrtněte přepínač "Plynule" na řádku se souřadnicí Y. Horní část dráhy se tím zaoblí a pohyb vypadá mnohem přirozeněji. Nejspíš budete muset výšku ještě trochu zvýšit, protože zaoblením se výška doskoku sníží. Dolní úvrať nezaoblujte, dolní odraz je potřeba aby byl ostrý.

 

6. Koulení

V dalším kroku chceme, aby se míč během odrazů postupně roztočil a na konci dráhy se už jen koulel. Běžte nejdříve na snímek 0 a tam u míče zaškrtnutím přepínače Rotace zafixujete výchozí rotaci 0. Pak jděte na poslední snímek a tam nastavte koncovou rotaci. Na vysvětlenou - úhlem rotace je myšlen absolutní úhel proti výchozímu stavu, ne otočení proti předešlým snímkům. Jako koncový úhel zvolte tedy např. -360 stupňů, čímž se míč během animace otočí o 1 otáčku ve směru hodinových ručiček (kladný směr by byl proti směru hodinových ručiček).

Když si nyní animaci přehrajete, vidíte, že míč se během pohybu pomalu otáčí. Což není to přesné co bychom potřebovali. Chceme, aby se míč ze začátku netočil a roztočil se až v průběhu. Běřte proto na snímek někde uprostřed animace. Zde má rotace hodnotu kolem -180 stupňů. Nastavte menší hodnotu, např. -50 stupňů. A k tomu zaškrtněte přepínač "Plynule", čímž zajistíte přirozenou plynulou změnu rotace.

Když animaci spustíte, rotace už vypadá přirozeně. Na začátku hodu se míč neotáčí, v průběhu odrazů se začíná pomalu točit a na konci už se koulí po zemi. Zajímavá alternativa je, když uprostřed animace namísto -50 stupňů nastavíte +50 stupňů, tedy obrácený směr. Vypadá to pak tak, že se míč dítěti při hodu roztočil do protisměru, ale první odrazy rychle rotaci opravily do správného směru.

 

7. Stín

Přidáme pod míč stín. Samozřejmě, bez stínu by to vypadalo velmi nepřirozeně. Přidejte do scény obrázek stínu. V seznamu obrázků ho přesuňte nad obrázek míče, protože míč musí překrýt stín. U stínu je nutné stáhnout parametr "Ořez" na nulu. Tento parametr zajišťuje odstranění bodů, jejichž průhledost (hodnota alfa kanálu) je pod zvolenou hranicí. V tomto případě se nám to nehodí, stín by měl ostré okraje. Vyzkoušejte si změnu táhla Alfa - lze tak regulovat tmavost stínu.

Přesuňte ukazatel pozice tak, aby míč dosedl na plochu blízko místa se stínem (např. tlačítky hledáním klíčových snímků, musí být přitom vybrán obrázek míče). Nastavte souřadnici stínu Y tak, aby stín ležel těsně pod míčem - tak jak by odpovídalo případu, kdy míč leží na cestě. Budete-li muset při nastavení změnit i souřadnici X, nezapomeňte ji potom opět vypnout vypnutím přepínače.

Nyní zajistíme, aby se stín pohyboval pod míčem. Přesuňte ukazatel na první snímek a nastavte u stínu stejnou souřadnici X, jakou má na začátku míč. Poté se přesuňte na poslední snímek a stejně tak nastavte podle míče i koncovou souřadnici X. Když nyní spustíte animaci, vidíte, že stín sleduje míč.

Ovšem je stále stejně tmavý, to je nepřirozené. To opravíme změnou velikosti a změnou průhlednosti v místech úvratí pohybu míče. Pomocí vyhledávání klíčových snímků se přesouvejte na místa horních a dolních úvratí míče (musíte při tom přepínat výběr na míč). V dolní úvrati nastavte vyšší alfa (stín ztmavne) a menší velikost stínu (změnou Šířka a Výška). V horní úvrati nastavte nižší alfa (světlejší stín) a zvětšete stín.

Míč se v horní úvrati pohybuje s plynulým vyhlazením pohybu a to je potřeba zajistit i pro stín. U změněných parametrů stínu (šířka, výška, alfa) během horní úvratě zapněte přepínače "Plynule". V dolních úvratích nechte přepínače vypnuté.

 

8. 3D světlo

Poslední úpravou scény je přidání 3D efektu míči. Přidejte do scény obrázek světla. V seznamu obrázků ho přesuňte nahoru mezi obrázek míče a obrázek hydrantu - protože světlo se bude překreslovat přes míč. Nastavte mu stejnou velikost, jako má míč.

Nyní bychom mohli do světla zkopírovat pohyby, které dělá míč, aby světlo kopírovalo pohyb míče. To bychom udělali tlačítky "Kopírovat výběr" a "Vložit" , tedy: vybrat míč, nastavit výběr od-do na první a poslední snímek videa, tlačítko "Zkopírovat výběr", vybrat stín, nastavit snímek 0, tlačítko "Vložit" a pak odstranit klíčové hodnoty pro rotaci. Praktičtější ovšem je jiná možnost, která nám umožní později snazší opravy pohybu míče.

Vyberte míč jako rodiče pro světlo. Obrázek světla se tak "přilepí" na obrázek míče a bude ho sledovat. Obrázek dědí od svého rodiče souřadnice X a Y a rotaci. Abychom zajistili, že se světlo nebode otáčet spolu s míčem, budeme s ním otáčet v opačném směru.

Přesuňte ukazatel na první snímek a zaškrtnutím přepínače Rotace zafixujte u stínu počáteční rotaci 0. Přesuňte ukazatel na další snímky, kde se nastavuje rotace míče (uprostřed a na konci) a nastavte v těchto místech úhel rotace s opačným znaménkem než má míč. Když animaci nyní přehrajete, světlo se pohybuje stejně jako míč a osvětlená strana zůstává správně stále vlevo nahoře.

A na závěr zprůhlednění obrázku světla. Změňte mód průhlednosti světla na "26 Násobit * 2". Světlo se zprůhlední a míč je nyní velmi jasný. Pomocí hodnot "Barva RGBA" snižte jas míče tak, aby nebyl přesvícený, ale vypadal přirozeně osvětlený. Všechny 3 hodnoty (R-G-B) by měly mít stejné údaje. Alfa kanál ponechte nezměněný.

Dalším možným vylepšením animace je zrcadlové opakování, kdy se míč koulí zpět zprava doleva. Pro ten účel si můžete spustit program Animer ještě jednou a otevřít v něm znovu projekt animace, aby bylo snazší procházet klíčové snímky a přepisovat jejich nastavení i do opačného směru, ať není potřeba údaje vymýšlet znovu. Pozor ale ať si nechtěným uložením v druhém editoru nepřepíšete editovanou scénu. Já jsem zvolil jednodušší "čítovou" metodu - program jsem zavřel a otevřel si soubor projektu v Poznámkovém bloku. V definicích parametrů objektů jsem zkopíroval definiční řetězce, připojil je na konec ještě jednou a opravil čísla snímků.

Jinou alternativou vylepšení je neustálý proud míčů přicházející z jedné strany. Ve výběrovém bloku uveďte první a poslední snímek celé animace. Vyberte míč a zkopírujte jeho klíčové snímky do paměti . Přidejte obrázek dalšího míče, nastavte snímek např. 50 a vlože klíčové snímky . Druhý míč bude provádět stejné pohyby jako první míč, ale o 50 snímků později. Takto vytvořte i další míče s odstupem 50 snímků, až dosáhnete konce animace. To stejné udělejte i se stíny a se světly na míči. U světel musíte ještě navíc nastavit správný mód průhlednosti a připojit je ke správnému rodiči.

 

9. Renderování

Animaci máte hotovou. Stiskněte nyní tlačítko "Renderovat HD" nebo "Renderovat 4K" (podle požadovaného rozměru videa). Animace se vyrenderuje do snímků s čísly scr00000.tga až scr00299.tga. Spusťte program VirtualDub (lze nalézt na internetu). Zvolte File / "Open video file" a vyberte první snímek animace scr00000.tga. VirtualDub automaticky načte i všechny další snímky animace jako video. Otevřete dialogové okno Video / "Frame Rate" a nastavte "Change frame rate to" na hodnotu 29.97, což bude snímková rychlost výsledného videa. Rychlost není podmínkou a lze nastavit i např. 25, ovšem video poběží trochu pomaleji než by odpovídalo náhledu v programu Animer.

Ve volbě Video / Compression vyberte požadovaný kompresní kodek. Vhodný kodek je "Xvid MPEG-4 Codec" ve variantě "FOURCC code: 'xvid'". V nastavení kodeku zvolte dostatečně vysoký stupeň komprese (=kvalita), např. bitrate=50000. Pokud kodek Xvid ve VirtualDub nemáte, nainstalujte si ho stažením z netu. VirtualDub používá jiné typy kodeků než jaké se běžně používají k přehrávání videí ve Windows, proto dostupnost Xvid kodeku ve Windows nemusí automaticky znamenat dostupnost ve VirtualDub. Nejste-li s kodekem úspěšní, můžete vygenerovat video do formátu "Uncompressed RGB", ovšem video bude mít několik GB a konverze budou trvat dlouho. Do cílového formátu můžete video potom zkonvertovat např. pomocí programu XMedia Recode.

Video uložte volbou File / "Save as AVI". Generujete-li video v rozlišení 4k, nemusí některé počítače stíhat takové rozlišení přehrávat. V tom případě si pro náhled uložte video nejdříve do rozlišení FullHD - ve filtrech přidejte filtr 2:1 reduction.

<< zpět na hlavní stránku