Flash - 2D animace - 3D efekt - Grafika.cz - vše o počítačové grafice

Flash animace tváře

Flash animace tváře

18. června 2001, 00.00 | Metoda "frame by frame" při užití v praxi. Vytvoření 3D efektu pomocí 2D animace.

V dnešním tutorialu si ukážeme další z možností animace v programu Macromedia Flash.

Jednou z nejjednodušších metod při vytváření 2D animací a následných 3D efektů je použít jakousi "formu", kterou si nejdříve rozanimujete a poté k ní doplníte další potřebné části. V našem případě docílíme asi tohoto výsledku:

Nejdříve si upravíme pracovní plochu a to na velikost cca 200 x 200 px. Dále si v knihovně symbolů vytvoříme nový "movie clip" a je celkem jedno jak si ho nazveme, protože v celé knihovně bude pouze tento jeden, takže nemůže dojít k problémům.

V tomto "movie clipu" si vytvoříme nový "layer" a v něm si nakreslíme kruh. Dále si vytvoříme další dva "layery". V tom prvním uděláme přes kruh horizontální čáru a v tom druhém čáru vertikální. Výsledek by měl vypadat asi takto:

A teď metodou "frame by frame", popř. můžeme použít "motion tweening" pomocí "shapes", ale metoda rámeček po rámečku nám dává možnost větší přesnosti a kontroly nad výsledným dílem, vytvoříme pohyb a to tím způsobem, že křivky vždy "vyboulíme" do určitých směrů a pomocí toho vlastně posunujeme průsečík obou přímek:

Nyní si vytvoříme další vrstvu, ve které si na prvním rámečku nakreslíme v průsečíku obou přímek ovál, který vybarvíme červeno-černým radiálním přechodem. Dále si (opět rámeček po rámečku) posunujeme tento "nos" vždy tam, kde se právě nachází průsečík obou přímek.

V této situaci je možné také použít jinou metodu než "rámeček po rámečku" a sice nakreslit si takovou křivku, která bude respektovat pohyb průsečíku a výslednou animaci potom udělat "po křivce". Problém je však v tom, že nebudeme moci "nos" deformovat, jak je tomu u výše zmiňované metody možné a jak to také v některých případech budeme dělat.

Tak, nos je rozanimován a před sebou máme něco takového:

Nyní si vytvoříme další vrstvu a v té si nakreslíme oči. Tyto oči umístíme POD vrstvu s nosem, protože v některých situacích budeme chtít, aby se ony skryly pod "nosní boubel". Zornice vytvoříme pomocí modro-černé radiální výplně, kde si "vytáhneme" modrou barvu na co největší možnou hranici:

Výhodou opětovného posouvání "rámeček po rámečku" je to, že můžeme tuto radiální výplň v průběhu měnit, čímž vytvoříme iluzi pohybu očí:

Stejným způsobem ještě doplníme obočí a ústa, která budeme roztahovat a prohýbat tak, aby bylo vytvořeno zdání smějící se tváře, avšak nesmíme zapomenout na to, abychom ústa vybarvili (jakoukoliv barvou), což se nám později bude hodit. Celkem bych byl tedy skoro hotov, ovšem ještě nám chybí velice důležitá část a tou jsou zuby.

Vytvoříme si další vrstvu, ve které si nakreslíme obdélník, jehož střední část bude vybarvena černou barvou a horní a dolní část budou bílé:

Tento obdélník umístíme POD vrstvu, ve které se nachází animace úst. Nyní, opět "rámeček po rámečku" tento obdélník posunujeme, roztahujeme, zvětšujeme, zmenšujeme, či rotujeme podle toho, kde se nachází ústa s tím, že bílé části jsou považovány za zuby a černá část za vnitřní část chrupu. Na závěr uděláme to, že z vrstvy, ve které se nachází ústa uděláme MASK a z vrstvy, ve které se nachází "černobílý obdélník" uděláme MASKED. Tímto docílíme toho efektu, že bude vidět pouze ta část zubů, která má a my se nebudeme muset "piplat" s dokreslováním na každém rámečku.

Na závěr ještě uděláme z našich pomocných křivek GUIDE, což způsobí, že ve výsledném *.swf nebudou vidět.

Principem tohoto tutorialu bylo ukázat další animační možnosti Flashe, v tomto případě se dá říci, že jsem ukázal použití klasické a tradiční 2D animace v prostředí Internetu. Je jasné, že mnoho výše uvedených postupů se dá vytvořit také pomocí "motio tweeningu" a to ať už normálního, či tzv. "shapes", ale metoda "frame by frame" má také své přednosti a to zvláště v oblasti dokonalého ovládnutí pohybu, i když soubory, které jsou vytvořeny rámeček po rámečku, jsou o něco vyšší, než ty, kde se používat motion tweening.

No a zdroják je ZDE