Předtím než se budeme věnovat naší první animaci, odskakujícímu míči, rád bych nejprve udělal technickou výzvu: Text by měl být nakreslen tak, jako by byly písmena napsána rukou. Fig Leaf Rag má krásný úvod s akcentem na konci, kde umístíme tečku na vykřičník.

Existuje několik metod, které jsou více či méně úspěšné v závislosti na situaci, ve které se nacházíme. Protože pracuji s grafickým tabletem, nakreslím písmo a ukážu vám, jak animace funguje. Než to však udělám, ukážu vám ještě, jak by se to mohlo udělat i jinak, což tady však není můj favorit:


Kroky 1–10

Krok 1

Chci mít textovou vrstvu pryč a namísto toho kompoziční vrstvu, obyčejnou pixelovou vrstvu, na které mohu kreslit. Text by měl být uvnitř vrstvy. Vytvořím tedy podkompozici pomocí Ctrl+Shift+C nebo přes Upvrstvení>Vytvořit podkompozici. Tuto vrstvu pojmenuji "Typo_Intro".

Animace snadno vytvořena: Kreslená animace

Krok 2

Všechny atributy byly zachovány, včetně Turbulentního posuvu.

Turbulentní posuv, stisknu Ctrl+X a vložím to zpět do kompozice výš ("Fig Leaf Rag").

Animace snadno proveditelná: Kreslená animace

Krok 3

Vraťme se zpět do kompozice "Typo_Intro". Zde máme text odhalený a můžeme to celé animovat.

První možností je přes Cesty. Vezmu Nástroj tužka a přetáhnu první linku písmene A na písmu. Pak ukončím uchopení a kliknu s podrženým klávesou Ctrl-kliknutím kamkoliv do černého a tak ukončím aktuální cestu, než přetáhnu druhou linku písmene A.

Znovu ukončím, kliknu s podrženým klávesou Ctrl- kliknutím do černého a pak přetáhnu další linku a pokračuji tak dál, dokud není celé písmo přetažené.

Animace snadno vyrobená: Čárová animace

Krok 4

Nyní na to aplikujeme efekt. Najdeme ho jako Obrys ve verzi CC v Generovat. Do CS6 se nazýval Účinek tahů.

Všechny masky a takto můžeme nechat tyto masky nakreslit.

Animace snadno udělána: Kreslená animace

Krok 5

Vypnu masky pomocí tohoto malého symbolu a obarvím Cestu červeně. Můžu také změnit Velikost, však pouze globálně pro všechny masky.


Animace snadno proveditelná: animace pásku

Krok 6

Skvělé je, že tady mám Začátek- a Konec-posuvník: Přetáhnu od začátku do konce a tak mohu nechat celý text nakreslit.


Animace snadno udělaná: kreslená animace



Z toho důvodu bych vám chtěl ukázat ještě jinou metodu, která podle mého názoru jde trochu rychleji než ručně nakreslit všechno zvlášť …

Krok 7

V tomto případě preferuji trochu rychlejší metodu s Kresem.

Kresem však nelze použít na textových vrstvách. Musíme tedy znovu vytvořit podkompozici a pojmenuji ji "Typo_Statický". V této podkompozici můžeme ihned začít pracovat.

Animace snadno proveditelná: kreslená animace

Krok 8

Jakmile chceme pracovat s Kresem a dvakrát klikneme v Režimu kreslení, otevře se panel vrstev a pouze zde můžeme pracovat s Kresem.

Kresebný a Malování. V panelu Kresebný můžeme nastavit velikost, tvrdost atd. štětce.

A v panelu Malování můžete vybrat způsob malování. U políčka Trvání je nejprve konstantní, ale změním to na Animovat malování.


Animace snadno udělaná: Kreslená animace

Krok 9

Když přepnu na jinou záložku a projíždím časovou osou, vidím, že všechny tahy jsou tam a všechny se kreslí automaticky.

Animace snadno vytvořena: animace čáry

Krok 10

Když stisknu UU pro všechny změněné vlastnosti, zobrazí se spousta podvlastností.

Pro každou zvlášť jsou zobrazeny i počátek a konec.

Navíc můžeme měnit jednotlivé rozestupy, tvrdost a dokonce i pozici každého tahu - i poté, co byl nakreslen.

Animace snadno udělána: Přímočará animace

Pokračujte jednoduše: Kroky 11–20

Krok 11

Znovu vymažu všechno, abychom měli lepší přehled.

Znovu nakreslím nový tah a pokud jste v pohledu na vrstvy, uvidíte cestu. To je to, co je uchováváno.

Pokud se mi například nenelíbí malovaný tah, mohu jej přemalovat tak, že jej vyberu a jednoduše jej znovu namaluji. Bude aktualizován a přepsán.

Animace snadno proveditelná: animace čáry.

Krok 12

Chci také překreslit text, protože to je nejrychlejší způsob, jak něco animovat.

Proto si upravím průměr a pomocí grafického tabletu budu text opisovat a kreslit ho sem.

Animace snadno vytvořena: Kreslená animace.

Krok 13

Nakreslil jsem všechny tahy a když celé projedeme v časové ose, uvidíme, že všechno je zde.

Pokud stisknu U, budou znovu zobrazeny všechny klíčové snímky.

Animace snadno udělaná: kreslená animace

Krok 14

Pokud stisknu klávesu Ü, maximálně zvětším okno, přes které právě myš přejíždí. V tomto případě časovou osu. Tak získám více místa a lépe rozpoznám prvky, které vynikají. Ty pak trochu zpětně snížím, aby trvaly přibližně stejně dlouho.

Animace snadno vytvořena: Ruční kresba

Krok 15

Nechme to hrát.

Mimochodem: Pokud jste omylem stiskli Caps lock, After Effects se již neaktualizuje. Dostanete upozornění Vypněte CAPS LOCK pro aktualizaci zobrazení.

Pokud nyní začneme přehrávat, začne After Effects kreslit všechna písmena najednou. Mělo by však začít první a pokračovat směrem vzad. A přesně to je problém. Chci to zajistit tak, jak chci já, musel bych celý proces časování dělat ručně - tah po tahu. To je docela náročné. Chtěl bych to udělat rychleji.

V dalším kroku vám vysvětlím, jak přesně - ale předtím označíme všechny tahy.

Animace snadno proveditelná: Animační čáry.

Krok 16

Proto vezmu skript, který tyto klíčové snímky postupně nastavuje.

Tento skript jsem napsal sám a samozřejmě jsem vám ho také poskytl. Najdete jej ve složce skripty s názvem Sequence strokes. Ti, kdo znají film „Sequenzebene z After Effects“, si asi dokáží představit, co tento skript dělá.

Otevřu skript v rozhraní Extend Script a spustím jej.

Animace snadno proveditelná: Kreslená animace.

Krok 17

Nyní máme v podstatě schody klíčových snímků a text je krok za krokem kreslen. Nicméně stále velmi pomalu.

To musíme zrychlit. K tomu vybereme vše, vezmeme poslední klíčový snímek, který najdeme, podržíme klávesu Alt- a posuneme to na 5 sekund.

Pak to již bude mnohem rychlejší.

Animace snadno vytvořena: Čárová animace



Poslední bod musí být ještě trochu zpožděn, ale o to se postaráme brzy.

Krok 18

Rád bych ještě promluvil o hodnotě offset-. Ta ovlivňuje přechody mezi klíčovými snímky:

Pokud se podíváme na aktuální přechody mezi klíčovými snímky, další začíná vždy přesně tam, kde končí předchozí (a).

Pokud to nechci a například raději bych měl dvě rámečky pauzu mezi dvěma tahy, zadám u offset hodnotu 2.

Samozřejmě musím znovu vybrat všechny štětce, než aktivuji skript. S Ctrl+A mohu vybrat vše najednou.

Animace snadno vytvořena: animace čáry



Nebo pokud chci, aby se rámečky překrývaly, nastavím u offset hodnotu -2. Pak by vždy šel o dva snímky zpět za vlastní tah. Pokud je ale toto zkráceno tak rychle, jak jsme to udělali tady, nedává to smysl. Jsem dokonce s touto hodnotou 2 spokojený a ponechám ji tak.

Krok 19

To, co určitě ještě změním, je timing vykřičníku. Rád bych ho lépe sladil s hudbou.

Z tohoto důvodu potřebuji hudbu také v kompozici. Přecházím tedy do záložky "Fig Leaf Rag" a kopíruju soubor.

Poté případně přepínám zpět do kompozice pomocí Alt-kliku a vkládám ji sem.

Animace snadno vytvořena: kreslená animace

Krok 20

Nyní se podíváme, kde jsou ty dvě pozice, které potřebujeme. K tomu použiji číselnou klávesnici a stisknu čárku, abych vytvořil náhled. Hvězdičku * na číselné klávesnici stisknu k označení značky. Na zařízeních bez číselné klávesnice, zejména na Macu, jsou to cmd+čárka pro náhled a cmd+8 pro značku.

Nyní pustím hudbu a umístím značku přesně na místa, kde by měly být čára a tečka vykřičníku (1). Konkrétně přesně na oba akcenty melodie.

Takže jsem umístil dvě značky: První ukazuje na konec čáry vykřičníku a druhá udává pozici pro tečku.

Směrovku umístím na první značku a přepínám do kompozice "Typo_Statisch". Tam přesunu ten rámec na směrovku, která označuje čáru vykřičníku (2).

Stejné provedu s druhou značkou, která ukazuje pozici pro tečku: Umístím směrovku na značku, přepnu se do kompozice a posunu rámec podle toho.

Animace snadno udělaná: Kreslená animace

Poslední kroky

Krok 21

Rád bych nechal čáru vykřičníku kreslit pomaleji než předchozí text, abychom měli celkově více akcentu na vykřičník (1).

A text by měl být celkově trochu rychlejší. Takže označím vše před tím (2) a posunu je trochu vpřed (3).

Takže časování bude perfektní.

Animace snadno proveditelná: kreslířská animace

Krok 22

Nad textem jsme nakreslili a teď s tím ještě něco uděláme.

Nejdříve zduplikuji vrstvu "Typo_Statisch" a na spodní vrstvě smažu efekt Malen-.

Animace snadno udělaná: Animace čáry

Krok 23

V horní vrstvě máme tedy narysovaný text s bílým originálem spodní vrstvy.

V dolní vrstvě máme obyčejný bílý text.

Pokud zaškrtneme možnost Kreslit na průhlednost u horní vrstvy, zbývají jenom ty nakreslené červené čáry.

Animace snadno udělaná: Animace čáry

Krok 24

Horní vrstva tedy bude použita jako maska pro spodní.

Jestli se maska nezobrazuje, stačí kliknout dole na aktivovat/deaktivovat režimů, potom se zobrazí pohybující se maska BewMas.

Tak mohu vybrat alfu masku a dosáhnout přesně toho výsledku, který potřebuji. Tzn., všude tam, kde jsou tyto čáry nakresleny, je viditelný také můj původní text.

Animace snadno udělat: animace pomocí čar



Něco jsem se ale zkazil, protože už na začátku je tam A.

Krok 25

Takže nejlépe znovu vybereme všechny štětce s obdélníkovým výběrem odspodu nahoru (1) a pak ale vyjmeme oba rámce vykřičníku stisknutím Shift+výběr (2). Obě jsou časově již perfektně umístěny.

Pak posuneme první rámec dolů trochu doprava, aby bylo A na začátku ještě neviditelné.

Takto to již sedí.

Animace snadno proveditelná: Kreslená animace

Krok 26

To jsme udělali v podkompozici, zde je ještě efekt Turbulence Displace.

Když si v této kompozici vše prohlédneme, máme to nejen v žluté barvě a barva se mění, ale také se to ještě otřásá.

Animace snadno vytvořena: Linková animace

Krok 27

Je to nádherné a dokonale to sedí, ale barva by se měla změnit až potom nebo vůbec. Change Colors tedy zůstává zatím v klidu.

Animace snadno provedená: animace čárou



Prvních 4 sekund traileru máme hotové a uvidíme se znovu v další části tutoriálu, u Bouncing Ball.