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