<< zpět na hlavní stránku

Minitutoriály

Stáhnout všechny ukázkové scény pohromadě

V minitutoriálech jsou vysvětleny základní animační úkony. Ke každému minitutoriálu si lze stáhnout ukázkovou scénu, která obsahuje též program Animer - stačí rozbalit do libovolné složky a spustit program Animer.exe, scéna se otevře automaticky.

1. Pozadí scény

Obrázky pro program Animer vytvoříte v grafickém editoru či jiném programu. Obrázek uložte do složky "img" a to ve formátu JPG, PNG, TGA nebo BMP. Pro obrázky, které používají průhlednost (obrysy), použijte formát PNG. Pro neprůhledné obrázky nejlépe JPG nebo BMP. Po uložení obrázku spusťte program AnimerPic.exe, který zkonvertuje všechny obrázky ze složky "img" do složky "bmp". Ve složce "bmp" jsou soubory *.bmp ve speciálním formátu programu Animer.

Po spuštění programu Animer přidejte obrázek pozadí scény tlačítkem "Přidat obrázek" . Obrázek nalistujte ve složce "bmp". Plocha scény má rozměr 1920x1080 bodů. Pokud jste obrázek vytvořili v této velikosti, zaplní celou plochu pozadí scény. Pokud ne, můžete rozměry upravit pomocí táhel "Šířka" a "Výška".

Budete-li přidávat do scény další obrázky, pamatujte že obrázky se překrývají v takovém pořadí, jak jsou uvedeny v seznamu obrázků (pole vlevo nahoře). Obrázek níže v seznamu překryje obrázky nacházející se nad ním.

Stáhnout ukázkovou scénu

2. Pohyb

V grafickém editoru si vytvořte obrázek míče s průhledností a uložte ho do složky "img" ve formátu PNG (který je nutný kvůli průhlednosti). Po konverzi programem AnimerPic načtete míč do scény ze složky "bmp" tlačítkem "Přidat obrázek" . Obrázek míče se objeví uprostřed obrazovky.

Chceme, aby se míč během animace přesunul z levé strany na pravou. Nejdříve přesuneme míč dolů, na zem. To zajistíme táhlem "Y", což je souřadnice ve vertikálním směru. Uprostřed obrazovky je Y=0, nahoru je kladný směr a dolů záporný. Nastavte Y přibližně na hodnotu -400. Podobně přesuneme míč k levému okraji obrazovky, pomocí táhla "X". Uprostřed obrazovky je X=0, vpravo je kladný směr a vlevo záporný. Nastavte X přibližně na hodnotu -800. To bude výchozí pozice pro pohyb.

Všimněte si dlouhého táhla ve spodní části programu vpravo. To je ukazatel snímku animace. Vlevo od něj se zobrazuje číslo snímku. U nové scény je zde přednastavena 0. Pozice míče, kterou jste nastavili, se vztahuje k tomuto vybranému snímku. Snímky s nastavenou hodnotou se nazývají "klíčové snímky" a indikují se zapnutým zaškrtávátkem po levé straně parametrů "X" a "Y". Pokud popotáhnete táhlem ukazatele snímku, zaškrtávátka zmizí - pro jiné snímky nejsou parametry nastaveny a program je dopočítává interpolací z nejbližších klíčových snímků.

Chceme-li zajistit přesun míče, stačí jen nastavit v jiném snímku jinou pozici a program zajistí plynulý pohyb na novou pozici. Nejdříve si ale animaci zkrátíme, protože implicitní délka 880 snímků by znamenala půl minuty a to je zbytečně moc. Délku animace nastavíte v políčku "Délka" na horní liště programu. Nastavte zde 150, což je při rychlosti přehrávání 30 fps (=30 snímků za sekundu) doba 5 sekund.

Přetáhněte nyní táhlo ukazatele snímku na konec, na snímek 149. Hodnotu "Y" můžete nechat stejnou. Hodnotu "X" změňte na "800". Míč se objeví u pravého okraje obrazovky. Táhnete-li nyní posuvník snímku, můžete pozorovat, jak se míč posouvá mezi levým a pravým okrajem obrazu. Scénu si můžete přehrát tlačítkem "Přehrát" .

Stáhnout ukázkovou scénu

3. Plynulý pohyb

Vyjdeme z minulé scény. Chceme doplnit, aby míč kromě pohybu doprava také letěl obloukem vzduchem. Jak by se dalo předpokládat, znamená to uprostřed animace změnit souřadnici Y a program se již o zbytek postará. Ovšem nejdříve je potřeba zajistit ještě koncovou pozici. Jak jste si jistě všimli, souřadnice Y má zaškrtávátko klíčového snímku pouze u snímku 0, u ostatních snímků tuto pozici udržuje. Pokud byste změnili Y uprostřed animace, program by nevěděl na jakou hodnotu pokračovat, protože by mu chyběla cílová pozice. Proto přesuňte táhlo snímku na poslední snímek a zaškrtněte přepínač klíčového snímku u parametru "Y". Tím jste určili, že na posledním snímku se hodnota Y vrátí zpět na -400, což byla hodnota přednastavená v políčku. A nyní se už můžete přesunout na snímek 75, nastavit Y na hodnotu např. 200 a animaci si přehrát.

Jak vidíte, míč sice letí nahoru, ale vypadá to naprosto nepřirozeně. To proto, že nahoře je ostrý zlom pohybu. Program umí zlom zjemnit. Vyberte opět střední snímek 75 a po pravé straně parametru "Y" zaškrtněte přepínač "Plynule". Míč teď sice už nevyletí tak vysoko, ale jeho pohyb je plynulejší a mnohem přirozenější. Program vyhladí změnu kteréhokoliv číselného parametru tak, že vyjde z hodnot uprostřed mezi dvěma klíčovými snímky a změnu parametru proloží Bezierovou křivkou - tedy tak, aby se zachovaly směrníky okrajových bodů pohybu.

Stáhnout ukázkovou scénu

4. Rotace

Pokračujeme minulou scénou, do které přidáme otáčení míče. K řízení otáčení slouží parametr "Rotace". Podobně jako parametry souřadnice či rozměr, otáčení také představuje absolutní hodnotu - úhel otočení od výchozí polohy. Budete-li s táhlem "Rotace" pohybovat, míč se bude otáčet. Dokud budete parametr měnit jen v jednom smínku, bude míč otočený stejně po celou dobu animace. Aby se otáčel v průběhu letu, je potřeba nastavit na začátku animace jinou hodnotu úhlu otočení, než na konci. Zadejte proto ve snímku 0 rotaci 0 (nebo zaškrtněte přepínač klíčového snímku Rotace, čímž uzamknete přednastavenou hodnotu 0) a na konci animace, ve snímku 149, nastavte úhel rotace např. 1000 (hodnota se udává ve stupních). Když nyní spustíte přehrávání animace, míč se za letu otáčí proti směru hodinových ručiček.

Chceme s míčem nyní otáčet jinak - aby se nedříve otáčel jedním směrem a pak druhým, tedy jako když za letu postupně změní směr rotace. Nastavte ve snímku 0 rotaci 0 a také v posledním snímku 149 nastavte rotaci 0. V prostředním snínku 75 nastavte úhel rotace např. 500. Když spustíte přehrávání, míč se nejdříve otáčí proti směru hodinových ručiček (tedy z úhlu 0 na úhel 500) a od poloviny animace se otáčí opačným směrem (z úhlu 500 na úhel 0). Což splňuje náš požadavek jen částečně - chtěli jsme, aby se rotace měnila plynule. K tomu opět slouží přepínač "Plynule", který se nachází napravo od parametru "Rotace". Když jej zaškrtnete, míč se začne točit proti směru hodinových ručiček, postupně bude zpomalovat a nakonec se pomalu roztočí ve směru hodinových ručiček. Ovšem pozor - přepínač "Plynule" se vztahuje ke klíčové hodnotě parametru v bodě, ve kterém chcete animaci zjemnit. Proto přepínač zaškrtněte ve snímku 75, kde nastavujete úhel rotace pro střed animace.

Stáhnout ukázkovou scénu

5. Seamless loop

"Seamless loop" je tzv. "bezešvá smyčka". Znamená to, že konec animace plynule navazuje na svůj začátek. Animaci lze do nekonečna opakovat, aniž je přelom animace znatelný. Zpravidla to znamená, že na konci animace musí být nastavený stejný stav jako na začátku (např. stejná pozice míče).

Založte novou scénu tlačítkem "Nový projekt" , přidejte obrázek míče a délku scény nastavte na 150 snímků. Zkusíme nejdříve jednoduchou rotaci tak, aby se míč neustále otáčel. Nastavte ve snímku 0 úhel rotace 0 (uzamkněte hodnotu rotace 0 přepínačem) a v posledním snímku 149 nastavte úhel rotace 360 stupňů. Jak se jistě správně domýšlíte - aby animace mohla navazovat, musí být míč na konci animace otočený stejně, jako na začátku. Ovšem v případě úhlu by nastavení na koncový úhel 0 znamenalo, že míč se vůbec neotočí, protože v průběhu animace se hodnoty interpolují mezi výchozí a cílovou hodnotou. Namísto 0 tedy musíme u úhlu nastavit násobek hodnoty 360, čímž zajístíme, že se hodnota rotace bude interpolovat a přitom míč bude na začátku i konci otočený stejně. Když animaci spustíte, míč se otáčí. Pomalu, a proto jej zrychlíme, opět ale jen o násobky hodnoty 360. Změňte proto rotaci v posledním snímku na 720, tedy dvojnásobek 360. Míč se otáčí rychleji.

Možná si všimnete jedné chyby. V okamžiku navázání začátku a konce animace míč v pohybu neznatelně zadrhne. Úvaha o podobnosti začátku a konce animace má totiž jednu šmouhu. Animaci si můžete představit tak, jakoby se definice animací za sebou neustále opakovaly. Ve snímku 149 má míč úhel rotace 720 (což je stejný úhel rotace jako 0), ale v navazujícím snímku 0 má opět stejnou hodnotu 0. Míč se tedy na dobu jednoho snímku zastaví. Vzhledem k rychlosti animace 30 fps je to chyba sice malá, ale znatelná. Chybu opravíme tak, že v posledním snímku namísto přesného úhlu 720 stupňů nastavíme takový úhel, jakoby těch 720 stupňů bylo až v následujícím snímku 0. Spočítáme si, že pokud se má míč za dobu 150 snímků otočit o úhel 720 stupňů, otočí se za 1 snímek o 4,8 stupňů a o tuto hodnotu musíme koncový úhel snížit - nastavíme zde tedy 715 stupňů (nepřesnost 0,2 stupně už můžeme zanedbat jako nepozorovatelnou). Neboli koncový úhel 720/150*149 = 715,2 (desetiny můžeme zadat, ale můžeme je nanedbat). Spustíte-li animaci, jistě už žádné zadrhnutí neuvidíte.

Jak seamless animaci ověřit? Jedna možnost je přehrávání v náhledu programu Animer. Program přehrává animaci poměrně plynule a bez záseků. Někdy ovšem je potřeba zkontrolovat už vygenerovanou animaci - např. používá-li se vložené video (které nelze přehrávat v náhledu) nebo už nejsou k dispozici zdrojové kódy animace. Pokud vygenerované video spustíte v přehrávači, jako např. VLC, tak animace při přechodu z konce na začátek silně zadrhne. Přehrávače totiž neumí správně navázat začátek a konec, protože na začátku přehrávání video znovu otevírají a načítají první snímky.

Seamless video je možné zkontrolovat spojením segmentů programem VirtualDub. Ve VirtualDub video otevřete (musí být ve formátu AVI) a poté ho připojíte k sobě ještě jednou volbou "Append AVI segment". Výsledné složené video uložíte. Není ovšem nutná rekomprese videa, postačí zvolit mód Video / "Direct stream copy". Video se tak jen jednoduše zkopíruje 2x za sebe a tato operace je velmi rychlá, během pár sekund. Přehrajte si výsledné video a všimněte si místa uprostřed videa, což je bod navázání začátku a konce animace. Animace zde musí být plynulá a nesmí být patrný žádný zádrhel či zlom.

Stáhnout ukázkovou scénu

6. Průhlednost

Na demonstraci průhlednosti jsem trochu rozmáznul míč, aby byl vidět plynulejší přechod. Založte novou scénu a načtěte obrázek pozadí a pak rozmazaný míč.

Všimněte si úplně dole posledního parametru "Ořez". Každý obrázek může mít alfa kanál (průhlednost, obvykle soubor v PNG formátu). Krajní hodnota 0 alfa kanálu představuje zcela průhledný bod (bod není vidět), zatímco opačná hodnota 255 znamená neprůhledný bod. Parametr "Ořez" zajistí, že se vykreslí jen pixely obrázku se zvolenou nebo vyšší hodnotou, tedy odstraní se body průhlednější než je zvolená hranice. Na následujícím obrázku vidíte příklad vlivu parametru Ořez. Pro Ořez=0 se žádné body neodstraňují, obrázek se vykreslí zcela tak, jak je. Hodnota 192 je implicitní nastavení, kdy se odstraní částečně průhledné body. Při hodnotě 255 se odstraní všechny i jen trochu průhledné body a nechají se jen ty zcela neprůhledné. Ve většině případů vyhovuje implicitní nastavení 192. Pokud má objekt obrysy s nesprávnou barvou, může být nutné hodnotu zvýšit a tím odstranit více hraničních bodů. A naopak, pokud jsou obrysy příliš zubaté, může být nutné hodnotu ořezu snížit, někdy až na 0. Parametr "Ořez" se uplatňuje nezávisle na zvoleném módu průhlednosti.

Dalším parametrem je "Mód" průhlednosti. Určuje, jakým způsobem se kombinuje obrázek s barvou podkladu, tedy s obrázky vykreslenými za ním. Nejdůležitější jsou tyto módy (významem číselných kódů se není nutné teď zabývat):

Ostatní módy se spíše zkouší zkusmo než popisovat jejich funkci. Módy jsou některou z kombinací barevných složek obrázku a podkladu, případně jejich doplňkových barev, případně v kombinaci s alfa kanálem.

Stáhnout ukázkovou scénu

7. Kyvadlo

Chceme animovat kyvadlo nástěnných hodin. Načtěte do nové scény obrázek kyvadla a pak hodin (hodiny mají kyvadlo překrývat, proto jsou až druhé v seznamu).

Mohli bychom očekávat, že kyvadlo rozhýbeme změnou parametru Rotace. Ale špatně - kyvadlo se otáčí ve středu obrázku, my potřebujeme aby se kývalo mnohem výše, v závěsu. V tomto případě bychom to mohli obejít zvětšením obrázku, ale ne vždy si s tím vystačíme.

K otáčení obrázku v jiném místě, než je střed obrázku, slouží klouby. Obrázek lze připojit k jinému obrázku (=rodiči) tak, že pohybem rodiče se pohybují i všechny připojené obrázky. Obrázky jsou ke svému rodiči jakoby přilepené. Chceme-li kývat kyvadlem v bodě mimo střed obrázku, připojíme kyvadlo k jinému obrázku a tím jiným obrázkem budeme poté otáčet.

Rodičem může být kromě viditelného obrázku i neviditelný, zcela průhledný obrázek. Takovým obrázkem je soubor "Empty.bmp", který se nachází ve složce programu Animer. Přidejte do scény obrázek Empty.bmp. V seznamu obrázků vyberte obrázek kyvadla a v rozbalovacím seznamu "Rodič" vyberte načtený obrázek Empty. Tím jste kyvadlo připojili k obrázku Empty jako k rodiči.

Budete-li nyní měnit parametr Rotace objektu Empty, bude se otáčet obrázek kyvadla. Empty je nyní kloubem kyvadla. Kyvadlo se zatím stále otáčí ve svém středu. Proto posuňte kyvadlo dál od kloubu změnou souřadnice Y. Kyvadlo nyní kývá v místě vzdálenějším od svého středu. Posunutím souřadnice Y objektu Empty posunete kyvadlo na pozici pod hodinami.

Nyní zbývá animace. Délku scény nastavte na 60, neboť kyv kyvadla tam a zpět bude trvat 2 sekundy (a rychlost animace je 30 snímků za sekundu). Vyberte kloub Empty. Rotaci ve snímku 0 nastavte na hodnotu -20 a rotaci ve snímku 30 nastavte na +20. V obou případech zapněte u rotace přepínač "Plynule". Kloub se teď otáčí mezi úhly -20 a +20 a přitom kýve připojeným kyvadlem. Není třeba nastavovat rotaci u posledního snímku, protože program ji bude interpolovat zpět na snímek 0 a animace tak bude plně seamless.

Stáhnout ukázkovou scénu

8. Přebarvení

Chceme animovat slunce, jak vychází a zapadá a při tom mění svou barvu. Slunce bude mít ksichtík a ten naopak nechceme aby měnil barvu. Proto připravíme zvlášť obrázek slunce a zvlášť obrázek obličeje.

Načtěte obrázek slunce i obličeje do scény. Délku scény nastavte na 150 snímků. Abychom mohli se sluncem pohybovat a nemuseli se starat o obličej, připojíme obličej ke slunci. Proto vyberte obrázek obličeje a v seznamu Rodič vyberte obrázek slunce. Posunutím souřadnice Y opravte správnou pozici obličeje.

Nyní animaci, aby slunce vycházelo a zapadalo. Uděláme to jednoduše - pomocí kloubu. Přidejte do scény prázdný objekt Empty.bmp (kloub) a vyberte ho jako rodiče slunce. Kloub posuňte do dolní části obrazovky nastavením souřadnice Y na hodnotu -540. Slunce oddálíte od kloubu změnou souřadnice Y na hodnotu 540, tím se dostane zpět do středu obrazovky. Pokud nyní měníte rotaci kloubu, slunce obíhá dolní střed obrazovky. Nastavte rotaci kloubu ve snímku 0 na hodnotu 180 stupňů a rotaci ve snímku 149 na hodnotu -180 stupňů. Když spustíte animaci, slunce vlevo vychází a pak vpravo zapadá.

A nyní přebarvení. K řízení barvy slouží parametr "Barva RGBA". Barva obsahuje 4 barevné složky: R je červená, G zelená, B modrá a Alfa je kanál průhlednosti. Složky mají rozsah 0 až 255. Hodnota složek se násobí barevnými složkami obrazu a tím lze barvu obrázku měnit. Vyberte obrázek slunce. Ve snímku 75 uzamkněte implicitní bílou barvu (všechny složky mají hodnotu 255). Přejděte na snímek 0 a změňte druhou složky (G zelená) na hodnotu 0. Stáhnutím zelené složky na 0 zůstala jen červená a modrá. Modrá v obrázku slunce není a tak má slunce červenou barvu. Během animace se složky barvy interpolují a tak je slunce při vycházení nejdříve oranžové, pak žluté a pak zas při zapadání červená.

Změníte-li obrázek slunce ze žlutého na bílé, můžete řídit barvu slunce plně - např. aby bylo modré. Pokud by vám vadilo, že slunce se během pohybu otáčí (kouká stále do středu osy otáčení), můžete to napravit řízením otáčení slunce kolem své osy v obráceném smyslu než slunce rotuje kolem kloubu - tedy ve snímku 0 nastavit rotaci slunce na -180 a ve snímku 149 a +180. Slunce pak bude koukat stále rovně, směrem dolů.

Podobně jako barvu lze řídit i alfa složku (průhlednost). Snižováním hodnoty alfa se obrázek zprůhleňuje. Ovšem pozor na ořez. Alfa hodnota barvy se násobí alfa kanálem obrázku a výsledná hodnota se uplatňuje v ořezu pixelů obrázku. Může se vám proto stát, že při snižování alfa obrázek najednou zmizí. Proto v takovém případě stáhněte ořez na nulu.

Stáhnout ukázkovou scénu

<< zpět na hlavní stránku