Fotografický magazín "iZIN IDIF" každý týden ve Vašem e-mailu.
Co nového ve světě fotografie!
Zadejte Vaši e-mailovou adresu:
Kamarád fotí rád?
Přihlas ho k odběru fotomagazínu!
Zadejte e-mailovou adresu kamaráda:
-
5. září 2024
Matrixmedia - Obsluha a tisk na velkoformátových digitálních tiskárnách
-
30. září 2024
-
4. října 2024
-
14. listopadu 2024
Webdesign
Flash - 2D animace - 3D efekt
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
Obsah seriálu (více o seriálu):
- FLASH - vyčkávající Trojský kůň
- FLASH - vyčkávající Trojský kůň - druhý díl
- FLASH - vyčkávající Trojský kůň - třetí díl
- FLASH - ANIMAČNÍ TECHNIKY I.
- SEZNAMTE SE - FLASH 4 - I
- SEZNAMTE SE - FLASH 4 - II
- SEZNAMTE SE - FLASH 4 - III
- SEZNAMTE SE - FLASH 4 - IV
- SEZNAMTE SE - FLASH 4 - V
- SEZNAMTE SE - FLASH 4 - VI
- SEZNAMTE SE - FLASH 4 - VII
- SEZNAMTE SE - FLASH 4 - VIII
- SEZNAMTE SE - FLASH 4 - IX
- FLASH - X - animace bitmapy
- JAK DOSTAT ČEŠTINU DO FLASHE ?
- FLASH XI - 3D hvězda, zvuk na pozadí
- FLASH XII - akce pro tlačítka
- FLASH XIII - jak na preloader a jak ho umístit
- FLASH XIV - intro a menu
- FLASH XV - animace tlačítka
- FLASH XVI - jednoduché menu
- FLASH XVII - akce Tell Target poprvé
- FLASH XVIII - akce Tell Target podruhé
- FLASH XIX - akce Tell Target potřetí
- FLASH XX - konverze MP3 na WAV
- FLASH XXI - vlnění, kruhy na vodě
- FLASH XXI - dokončení
- FLASH 4 - Text Field Properties
- FLASH 4 - Zvláštní výběr křivek a čar
- FLASH 4 - Optimalizace křivek
- Flash 4 a QuickTime video
- FLASH 4 - preloader
- FLASH 4 - Duplikování filmového klipu
- FLASH 4 - pohybování textem pomocí kurzoru
- FLASH 4 - Speciální textové vlastnosti
- Macromedia FLASH 4 - postupné vypisování textu
- FLASH 4 - Spirála
- FLASH 4 - natažení externího .swf
- Macromedia FLASH 5 - načítaní HTML souboru
- FLASH - komunikace mezi dvěma SWF soubory
- FLASH - hrátky s křivkou
- FLASH - menu s posuvníkem
- FLASH - menu s posuvníkem (dokončení)
- FLASH 5 - pseudo 3D menu (dokončení)
- FLASH 5 - menu
- FLASH - Color Effect
- Macromedia FLASH 5 - analogové hodiny
- FLASH 5 - "smart" clip
- Vánoční přání v Macromedia FLASH 5
- FLASH 5 - ohňostroj
- Macromedia FLASH 5 - preloader
- FLASH 4 - animované menu
- Macromedia FLASH 5 - změna kurzoru
- Flash - Efekt založený na nedokonalosti bitmap
- Flash 4 - on-line výpočet ceny - 1. díl
- Flash 4 - on-line výpočet ceny - 2. díl
- Odeslání dat z formuláře ve Flashi 4 - II.
- Macromedia FLASH 5 - odesílání formuláře
- FLASH 4 - postupné odkrývání textu - tzv. maskovací efekt
- FLASH 5 - jednoduchý kaleidoskop nebo projekce?
- Flash 4 - menu pomocí ovládání Movie Clipu
- FLASH 5 - Vypisování textu
- Flash 4 - efektní ukončení *.exe prezentace + práce s více scénami
- Macromedia FLASH 5 - ovládání hlasitosti
- FLAX 1.12 - program na textové efekty v SWF
- FLASH 5 - matematické objekty (1. část)
- Flash4 - animace obličeje
- Flash 4 - Hra na způsob šipek
- Flash 4 + Swift 3D - dokonalá souhra!
- Macromedia FLASH 5 - změna barvy pozadí a textu
- Flash 5 - aktuální datum a čas
- Flash - 2D animace - 3D efekt
- FLASH 5 - prohlížečka obrázků s maskováním
- FLASH A JAVASCRIPT
- FLASH 5 - reversní pohyb
- Jpeg2Swf v1.0 beta - převod jpeg do swf aneb flashwebkamera
- SWISH v2 - Flash bez Flashe
- Jak docílit plynulé animace ve formátu Flash
- Flash - jdoucí Elvis.
- Flash - running man.
- Macromedia Flash - posun pozadí
- Flash - mořská hladina.
- Flash - animace hořící sirky
- Flash - mávání na rozloučenou
- Flash - vzhůru v let
- Flash - animace řeči
- FLASH 5 - Kalkulačka v 1.0
- Flash - BOXující Elvis
- Flash + Flashamp - animace řeči
- Flash - ženský běh
- FLASH 5 - Kalkulačka v 2.0
- FLASH - Programy na analýzu a úpravu SWF souborů
- FLASH 6 - Jaký bude a kdy bude?
- FLASH - Programy na analýzu a úpravu SWF souborů 2
- FLASH MX - novinky pod lupou
- Flash desatero
Poslat článek
Nyní máte možnost poslat odkaz článku svým přátelům:
-
14. května 2014
Jak vkládat snímky do galerií a soutěží? Stručný obrazový průvodce
-
23. dubna 2014
Konica Minolta přenesla výhody velkých zařízení do kompaktních modelů
-
12. června 2012
-
9. dubna 2014
-
29. listopadu 2013
-
6. září 2004
OKI snižuje ceny barevných laserových tiskáren C3100 a C5200n
-
13. května 2004
-
19. ledna 2004
QuarkXPress Passport 6: předvedení nové verze na konferenci Apple Forum 27.1.2004
-
6. února 2001
-
30. listopadu 2014
Nový fotoaparát α7 II: první plnoformát s pětiosou optickou stabilizací obrazu na světě
-
8. září 2024
-
14. října 2024
-
22. října 2024
-
14. listopadu 2024