Tvorba počítačových animácií

Tvorba počítačových animácií

3.1. Animácia a jej použitie vo vzdelávaní

Určite ste si ako dieťa skúšali na okraj jednotlivých strán zošita nakresliť obrázok, ktorý sa postupne zo strany na stranu menil. Pri listovaní v zošite bolo možné sledovať pohyblivý obraz. Dnes toto vaše snaženie môžete označiť ako svoju prvotinu pri tvorbe animácie.

Pod počítačovou animáciou môžeme rozumieť sekvenciu počítačom generovaných obrázkov. Pohyb je v animácii len ilúziou využívajúcou nedokonalosť ľudského oka (zotrvačnosť zrakového vnemu na sietnici), ktoré je neschopné rozlíšiť sériu rýchlo premietaných obrazov a vníma ich ako spojitý pohyb. Počítačová animácia je prvkom, ktorý dokáže oživiť nehybný svet textu a grafiky. Animáciu s obľubou využívajú tvorcovia webových stránok na spestrenie obsahu a upútanie pozornosti čitateľa.

Mnohokrát vo vyučovacom procese potrebujeme žiakom prezentovať proces prebiehajúci v prírode, laboratóriu či v technickej praxi.

Zachytenie dynamiky deja, časovej a významovej náväznosti, dôležitosť sledu jednotlivých časti deja nás privádzajú k prirodzenej potrebe využívania dynamického obrazu.

Jednou z možností je videozáznam na klasickej videopáske. Ak sme však vo svete počítačových technológii videozáznam spracovaný do digitálnej formy je objemom dát veľmi náročný na pamäťový priestor.

Ako veľmi vhodná alternatíva, hlavne v prípade názornej prezentácie podstatných častí sledovaného deja sa javí využitie počítačovej animácie. Tá môže zachytávať v zjednodušenej podobe len vybranú časť napr. zariadenia, resp. pomocou nej môžeme modelovať reálnu situáciu na vytvorenom počítačovom modeli. Výhodou je fakt, že žiakovu pozornosť sústredíme na podstatné znaky a prvky sledovanej udalosti a eliminujeme rušivé vplyvy z reálnej situácie.

Praktické skúsenosti ukazujú, že ako najvhodnejšie riešenie sa ukazuje kombinácia reálneho videa (pre žiaka je to autentický materiál zvyšujúci dôveryhodnosť) s počítačovou animáciou.

Úloha:

1. Pripravte si pre svoj predmet námet na jednoduchú počítačovú animáciu, ktorú by ste vedeli využiť vo vyučovacom procese. Uvažujte o vhodnosti a prednostiach animácie pred statickým obrázkom.

3.2. Formáty súborov obsahujúcich animáciu

Z hľadiska spôsobu vytvárania, môžeme animácie rozdeliť na dve skupiny:

• 2D animácie predstavujú klasický, veľmi často používaný spôsob, základom ktorého je vytváranie jednotlivých snímok animácie neskôr spojených do súvislého zdanlivo plynulého obrazu. Príkladom môže byť aj jednoduché posúvanie textu po obrazovke monitora.
• 3D animácie vznikajú na základe matematického modelu trojrozmerného sveta zloženého z rôznych objektov, ktoré majú určité vlastnosti. Takto definovaný svet je potom možné oživiť pomocou rôznych softvérových nástrojov, nazývaných aj vizualizačné (renderovacie) programy. Tento spôsob animovania dnes vo výraznej miere používa celý zábavný

Animácie sú zvyčajne uložené v niektorom z nasledujúcich formátov:

• GIF je formát, ktorý sa používa na uloženie statickej grafiky, dovoľuje však uložiť aj postupnosť obrázkov, ktorú je potom možné premietať ako animáciu. Tento formát na ukladanie jednoduchých animácií sa s obľubou používa na webových stránkach.
• FLI, FLC pochádza z dielne firmy Autodesk a je rozšírený najmä na platforme Intel. Väčšina počítačových animácií doprevádzajúcich počítačové hry bola uložená práve v tomto formáte.
• SWF, FLA ide o súbory produkované softvérovým produktom Macromedia FLASH. V poslednej dobe sa veľmi rozširuje hlavne vďaka nízkej pamäťovej náročnosti výsledného

Na zloženie obrázkov do animačnej sekvencie slúžia rôzne programy. Za všetky spomeňme aspoň MS Gif Animator, GIF Construction Set, či Animagic, Macromedia Flash, Jacs Animation Shop, Logomotion a pod.

Úloha:

1. Vyhľadajte na Internete animácie v niektorom z uvedených formátov a uložte ich na disk vášho počítača s priliehavým názvom. (kliknutím pravého tlačidla nad animáciou sa objaví ponuka „Uložiť obrázok ako“).

3.3. Prezeranie animácií

Animáciu uloženú na disku vášho PC vyhľadajte s využitím IrfanView, resp. pomocou Prieskumníka či s využitím nástroja operačného systému: Hľadať súbory.

Podľa typu asociovaného programu k danému typu súborov sa po kliknutí na vybranú animáciu spustí jej prezeranie v príslušnom programe.

Ak chceme prezrieť animáciu po jednotlivých snímkach, je potrebné otvoriť ju v programe, v ktorom sa uvedený typ animácie vytvára.

LogoMotion

Vyhľadané animácie (*.lgf), ktoré boli vytvorené v prostredí LogoMotion otvoríme po spustení programu LogoMotion príkazom Súbor – otvoriť. Po vyhľadaní príslušného adresára na disku počítača sa animácia otvorí.

Na prehratie animácie využitie ovládacie prvky programu.

Úloha:

1. Prehrajte si v programe LogoMotion animácie, ktoré ste našli na Internete. Prezrite si akým štýlom sú animácie vytvárané, z koľkých obrázkov sa skladajú, aká je dĺžka trvania jednotlivých obrázkov.

Jasc Animation Shop

Animácei typu *.gif je možné prezerať aj pomocou Jasc Animation Shop.

Animácia sa zobrazí ako sled vedľa seba uložených pozmenených obrázkov. V spodnej časti pri prvom obrázku je označenie F:1 D:10 vyjadrujúce, že ide o obrázok 1 (Frame 1) s dĺžkou trvania 10 stotín sekundy (Duration 10).

Ak sa vo vašej nástrojovej lište nachádza menší počet zobrazených nástrojov, vyvolajte si ich zobrazenie pomocou ponuky View.

Aktivovaním nástroja Vie Animation sa nám animácia prehrá v novom okne. Takto môžeme získať predstavu o danej animácii.

Úloha:

1. Prehrajte si v programe Jacs Animation Shop animácie, ktoré ste našli na Internete. Prezrite si akým štýlom sú animácie vytvárané, z koľkých obrázkov sa skladajú, aká je dĺžka trvania jednotlivých obrázkov.

Flash Player

Animácie vytvorené v prostredí Macromedia Flash, alebo uložené do súboru *.swf, je možné prehrávať pomocou prehrávača animácii Flash player.

Úloha:

1. Vyhľadajte na disku vášho počítača flash animácie – súbory s príponou swf. Prehrajte ich pomocou prehrávača Flash

3.2. Formáty súborov obsahujúcich animáciu a softvér na tvorbu animácií

Z hľadiska spôsobu vytvárania, môžeme animácie rozdeliť na dve skupiny:

• 2D animácie predstavujú klasický, veľmi často používaný spôsob, základom ktorého je vytváranie jednotlivých snímok animácie neskôr spojených do súvislého zdanlivo plynulého obrazu. Príkladom môže byť aj jednoduché posúvanie textu po obrazovke monitora.
• 3D animácie vznikajú na základe matematického modelu trojrozmerného sveta zloženého z rôznych objektov, ktoré majú určité vlastnosti. Takto definovaný svet je potom možné oživiť pomocou rôznych softvérových nástrojov, nazývaných aj vizualizačné (renderovacie) programy. Tento spôsob animovania dnes vo výraznej miere používa celý zábavný

Animácie sú zvyčajne uložené v niektorom z nasledujúcich formátov:

• GIF je formát, ktorý sa používa na uloženie statickej grafiky, dovoľuje však uložiť aj postupnosť obrázkov, ktorú je potom možné premietať ako animáciu. Tento formát na ukladanie jednoduchých animácií sa s obľubou používa na webových stránkach.
• FLI, FLC pochádza z dielne firmy Autodesk a je rozšírený najmä na platforme Intel. Väčšina počítačových animácií doprevádzajúcich počítačové hry bola uložená práve v tomto formáte.
• SWF, FLA ide o súbory produkované softvérovým produktom Macromedia FLASH. V poslednej dobe sa veľmi rozširuje hlavne vďaka nízkej pamäťovej náročnosti výsledného

Na zloženie obrázkov do animačnej sekvencie slúžia rôzne programy. Za všetky spomeňme aspoň MS Gif Animator, GIF Construction Set, či Animagic, Macromedia Flash, Jacs Animation Shop, Logomotion a pod.

Úloha:

1. Vyhľadajte na Internete animácie v niektorom z uvedených formátov a uložte ich na disk vášho PC s priliehavým názvom. (kliknutím pravého tlačidla nad animáciou sa objaví ponuka

„Uložiť obrázok ako“).

3.3. Prezeranie animácií

Animáciu uloženú na disku vášho PC vyhľadajte s využitím IrfanView, resp. pomocou Prieskumníka či s využitím nástroja operačného systému: Hľadať súbory.

Podľa typu asociovaného programu k danému typu súborov sa po kliknutí na vybranú animáciu spustí jej prezeranie v príslušnom programe.

Ak chceme prezrieť animáciu po jednotlivých snímkach, je potrebné otvoriť ju v programe, v ktorom sa uvedený typ animácie vytvára.

LogoMotion

Vyhľadané animácie (*.lgf), ktoré boli vytvorené v prostredí LogoMotion otvoríme po spustení programu LogoMotion príkazom Súbor – otvoriť. Po vyhľadaní príslušného adresára na disku počítača sa animácia otvorí.

Na prehratie animácie využitie ovládacie prvky programu.

Úloha:

1. Prehrajte si v programe LogoMotion animácie, ktoré ste našli na Internete. Prezrite si akým štýlom sú animácie vytvárané, z koľkých obrázkov sa skladajú, aká je dĺžka trvania jednotlivých obrázkov.

Jasc Animation Shop

Animácei typu *.gif je možné prezerať aj pomocou Jasc Animation Shop.

Animácia sa zobrazí ako sled vedľa seba uložených pozmenených obrázkov. V spodnej časti pri prvom obrázku je označenie F:1 D:10 vyjadrujúce, že ide o obrázok 1 (Frame 1) s dĺžkou trvania 10 stotín sekundy (Duration 10).

Ak sa vo vašej nástrojovej lište nachádza menší počet zobrazených nástrojov, vyvolajte si ich zobrazenie pomocou ponuky View.

Aktivovaním nástroja Vie Animation sa nám animácia prehrá v novom okne. Takto môžeme získať predstavu o danej animácii.

Úloha:

1. Prehrajte si v programe Jacs Animation Shop animácie, ktoré ste našli na Internete. Prezrite si akým štýlom sú animácie vytvárané, z koľkých obrázkov sa skladajú, aká je dĺžka trvania jednotlivých obrázkov.

Flash Player

Animácie vytvorené v prostredí Macromedia Flash, alebo uložené do súboru *.swf, je možné prehrávať pomocou prehrávača animácii Flash player.

Úloha:

1. Vyhľadajte na disku vášho počítača flash animácie – súbory s príponou swf. Prehrajte ich pomocou prehrávača Flash

3.4. Nástroje a postupy pri tvorbe bitmapovej 2D animácie

• Tvorba animácií v LogoMotion

Po spustení programu LogoMotion sa otvorí pracovná plocha so základnými nástrojmi pre tvorbu animácií.

Predpokladajme, že ste sa zamysleli a je vám jasné aký dej budete animovať. Na ukážku možností prostredia LogoMotion a prezentáciu jednotlivých krokov tvorby animácií budeme animovať pohyb guľôčky po naklonenej rovine.

Nastavíme rozmery pripravovanej animácie.

Animácia – Nastaviť papier

Buď vyberieme niektorý zo štandardných rozmerov „papiera“, alebo je možné použiť vlastný rozmer.

Pri tvorbe animácie nám bude výdatne pomáhať ak si nastavíme ako priesvitný Predchádzajúci záber, alebo Dva predchádzajúce zábery.

Zobrazenie – Priesvitky – Dva predchádzajúce zábery

Budeme tak môcť vykresľovať nasledujúcu fázu animácie vzhľadom na predchádzajúcu polohu objektov.

Pomocou nástrojov na lište Kreslenie nakreslíme prvú snímku vytváranej animácie.

V spodnej časti sledujeme náhľad snímky. Pod zobrazením snímky je vypísaná dĺžka trvania uvedeného záberu. V prípade, že potrebujeme trvanie záberu zmeniť dvakrát klikneme na číselný údaj a hodnotu zmeníme. Rovnako môžeme vybrať:

Animácia – Nastaviť trvanie fázy (Ctrl+D)

Vloženie novej fázy animácie realizujeme cez ponuku:

Úpravy – Vložiť nový za (Ins)

Ak potrebujeme využívať nakreslené objekty z prvej fázy aj na fáze druhej, stačí ak využijeme kopírovanie a vkladanie fázy:

Úpravy – Kopírovať (Ctrl +C), Úpravy – Prilepiť (Ctrl +V)

Fáza sa aj s celým obsahom skopíruje do nasledujúcej fázy.

Ak potrebujeme kopírovať iba časť fázy využívame nástroj Ctrl +V Definovať oblasť

a postupujeme obdobne s využitím Ctrl +C, Ctrl +V.

Detailnejší náhľad pri tvorbe animácie získame využitím zväčšenia. Pri zväčšení 400% sa zobrazia aj jednotlivé body plochy.

Pri kreslení využívame nástroje panela Kreslenie, ktorých význam objavíme hravo.

V spodnej časti pracovnej plochy sledujeme jednotlivé fázy animácie, máme možnosť medzi nimi prepínať, a upravovať ich.

Pri chybnom kroku môžeme využiť návrat späť, resp. vymazanie obsahu fázy.

Aj skromný výsledok nášho snaženia je vhodné uložiť.

Súbor – Uložiť

LogoMotion ponúka vlastný formát

*.lgf, resp. export do iných formátov, napr. gif.

Na prehratie animácia slúžia štandardné ovládacie tlačidlá.

Úloha:

1. Vytvorte jednoduchú animáciu vybraného deja, ktorý vysvetľujte v rámci vyučovania vášho aprobačného Použite znázornenie veličín, ozrejmujúcich príčinu a priebeh skúmaného deja.

3.4. Nástroje a postupy pri tvorbe bitmapovej 2D animácie

Pre tvorbu počítačových 2D animácií je možné využívať viacero prostredí. Ak pochopíme základné princípy tvorby animácií, bude práca v ľubovoľnom prostredí len určitou obmenou základných postupov s doplnením konkrétnych možností daného prostredia.

Ukážku nasledujúceho postupu považujte za prezentáciu možností jedného z mnohých prostredí pre tvorbu 2D animácie.

3.4.2. Tvorba animácií v Jacs Animation Shop 3 Úprava hotovej animácie

S využitím nástrojov identických ako pri úpravách a tvorbe obrázkov si ukážeme základné úpravy už hotovej animácie.

Skúsme na našej animácii zameniť anglický text textom slovenským iného znenia. Vyberme kliknutím prvý obrázok animácie. Z ponuky nástrojov vyberme gumu a vymažme pôvodný text. Zelenú plochu pomocou nástroja vyfarbiť prefarbite na inú farbu. Všimnite si, že nasledujúci obrázok obsahuje jemné obrysy predchádzajúcej scény, čím sa zvyšuje plynulosť prechodu pri prezeraní animácie.

Na prázdnu tabuľu vložíme pomocou ponuky Effects – Insert animation text pripravený text. Pri definovaní efektu máme možnosť nastaviť počet obrázkov za sekundu a dĺžku efektu v sekundách. Výber z ponuky effect je bohatý.

V centrálnom okne panelu sa nám pri aktivovanej funkci Show Preview prehraje vybraný a nastavený efekt.

Musíme si uvedomiť, že pridaním efektu s 5fps a dĺžkou trvania 1,2s pridávame do animácie 6 nových obrázkov.

Na posledné dva obrázky animácie pridajme pomocou ponuky Text ten istý text, ale v statickom tvare.

Úloha:

1. Pomocou opísaných nástrojov upravte niektorú z vyhľadaných animácií.

Príprava vlastnej animácie

Pretože ponuka nástrojov na kreslenie je oveľa bohatšia v Paint shop pro ako v Jacs Animation Shop pre prípravu animácie je vhodné si vytvoriť základný obrázok v Paint shop pro, ktorý budeme animovať.

Pri voľbe rozmerov obrázka postačujeme zvyčajne s rozmermi okolo 200x200 bodov a s rozlíšením 72DPI. Pozadie môže byť priehľadné alebo jeho farbu vyberieme z palety farieb.

Základné nástroje pre príprave vlastnej animácie ukážeme pomocou jednoduchého príkladu pohybujúcej sa lopty. V Paint shop pro nakreslíme obrázok lopty a uložíme ho na disk.

Pomocou ponuky File, New vytvorme prvý obrázok animácie s rozmermi 200x200 bodov s napr.bledemodrým pozadím.

Aktivovaním Animation, Insert Frames, From file

vložíme do obrázka animácie vytvorený obrázok v paint

shop pro teda, napr. potrebnú loptu (pre vkladanie môžeme samozrejme použiť v ľubovolnom z grafických editorov vytvorený niektorý z podporovaných grafických formátov).

Umiestnenie lopty zvoľte do jej začiatočnej polohy pripravovanej animácie. Použitím klávesovej skratky Ctrl+C nakopírujeme obsah prvého obrázka animácie do clipboardu, a z nástrojovej lišty vyberieme ponuku Paste after current.

Program uloží obsah clipboardu do ďalšieho obrázka animácie. Aktivovaním nástroja Arrow  vyberieme ako aktívny druhý obrázok animácie. Pomocou nástroja Mover  na presúvanie objektov zmeníme polohu lopty v zmysle je animovaného

pohybu. Pôvodná poloha lopty z prvého obrázku animácie je zobrazená v odtieňoch šedi, čo výrazme uľahčuje nastaviť plynulosť animácie. Uvedenú postupnosť krokov opakujeme, až kým nedôjdeme do výslednej polohy lopty, ktorú chceme animáciou zobraziť. Kedykoľvek máme možnosť kliknutím na niektorý z obrázkov animácie zmeniť jeho nastavenie, vložiť doň ďalší obrázok, kresbu, text....

Aktuálny stav prezentácie je možné prezrieť aktivovaním nástroja View Animation.

Ak sa nám javí animácia ako príliš rýchla môžeme pomocou ponuky Animation, Frame Properties zmeniť prednastavenú dĺžku trvania jednotlivých obrázkov animácie. Prednastavená dĺžka trvania jedného obrázka animácie je 10 stotín sekundy.

Veľa zaujímavých efektov je možné aplikovať buď na jednotlivé obrázky animácie, alebo ako prechodové efekty medzi dvoma obrázkami animácie.

Pripravme si prvé dva obrázky animácie, kde na prvom obrázku máme kruh umiestnený v ľavom hornom rohu a na druhom obrázku máme kruh umiestnený v pravom dolnom rohu obrázka.

Z ponuky Effects vyberieme možnosť Insert Image Effect. Z ponuky vyberieme vhodný efekt, nastavíme jeho parametre a pri potvrdenej voľbe Show Preview sa nám vo väčšom z okien nastavený efekt prehraje.

Z ponuky Effects vyberieme možnosť Insert Image Transition. Tento nástroj umožňuje nastaviť prechodový efekt medzi dvoma obrázkami animácie. Vyberieme vhodný efekt, nastavíme jeho parametre a pri potvrdenej voľbe Show Preview sa nám vo väčšom z okien nastavený efekt prehraje. Pre oba druhy efektov je možné nastaviť počet obrázkov (frames), na ktorých sa efekt realizuje a celkovú dĺžku trvania efektu.

V časti úprava animácie sme ukázali možnosť vložiť text s príslušným efektom. Túto možnosť samozrejme môžeme využiť aj pri tvorbe vlastnej animácie, ktorú obohatíme o sprievodný text.

Úloha:

1. Vytvorte vlastnú animáciu vhodnú pre využitie vo vašom aprobačnom

1. Tvorba počítačových animácií
2. 1. Tvorba animácií v Macromedia Flash

Macromedia FLASH ako grafický editor je nástroj vhodný ako pre web dizajnérov, tak môže slúžiť aj na tvorbu jednoduchých animácií pre bežného používateľa. Na internete je voľne stiahnuteľná jeho 30 dňová skúšobná verzia.

Prostredie Macromedia Flash sa skladá z hlavného panela, panela nástrojov, panela rozširujúcich nástrojov, z plátna, z časovej osi, z vlastností, z mixéru farieb a z komponentov.

Panel nástrojov

Plátno

Rozšírené nástroje

Hlavný panel

Mixér farieb

Časová os

Komponenty

Vlastnosti

Otázky

Teraz si vyskúšajme vytvoriť vlastnú jednoduchú animáciu. Najprv vytvoríme pomocou panela nástrojov objekt, ktorým budeme pohybovať (v našom prípade to bude kruh). V mixéri farieb si môžeme nastaviť farbu nášho objektu.

Tým že sme vytvorili objekt vytvorili sme už aj prvý frame (snímok animácie). Ak teraz chceme tento objekt animovať potrebujeme pridať na časovú os kľúčový frame Insert Keyframe a posunúť objekt do koncovej pozície vpravo (snímok, na ktorom je znázornený koncový pozícia objektu pri posune). Teraz je animácia zložená z dvoch snímkov. Ak chceme predĺžiť čas animácie chytíme kurzorom koncový snímok a potiahneme ho na časovej osi doprava. Tak nám vznikne animácia dĺžky akú si nastavíme (časová os je číslovaná v počte snímkov – 1 sekunda=30 snímkov).

Ak v ponuke CONTROL klikneme na PLAY prehrá sa nám celá naša animácia.

Ukážme si ako by sme pridali ešte jednu paralelnú animáciu. Najprv potrebujeme pridať nový LAYER kliknutím na ikonu INSERT LAYER na časovej osi. Nový LAYER je totiž nový riadok na časovej osi.

Tak ako sme si vytvorili prvý animovaný objekt si vytvoríme aj druhý (červený štvorec). Opäť si animáciu prehráme pomocou PLAY.

Teraz potrebujeme uložiť vytvorenú animáciu. V ponuke FILE klikneme na EXPORT MOVIE. Otvorí sa nám ponuka na export, kde zvolíme názov a typ súboru.

Nám postačia dva formáty Windows AVI súbor typu *.avi a Animated GIF súbor typu

*.gif. Obidva tieto formáty sa spustia aj pri základnej inštalácii operačného systému Windows. Nie je potrebné inštalovať žiadne podporné programy.

Úlohy:

S použitím základných funkcií vytvorte animáciu pre podporu výkladu vybraného pojmu.

3.5 Nástroje a postupy pri tvorbe vektorovej 2D animácie

Pre tvorbu vektorovej 2D grafiky, ktorú poznáme hlavne z webových stránok, sa často využíva prostredie Macromedia Flash¹. Každý zo samostatne pohyblivých objektov je uložený do jednej vrstvy. Každá vrstva obsahuje snímky, ktoré znázorňujú graficky objekt v danom časovom úseku. Pre vytvorenie pohybu stačí zadať dve kľúčové snímky, jednu na začiatku a druhú na konci a medzitým nastaviť efekt prechodu medzi nimi. Ak chceme, aby sa objekt pohyboval po krivke, pridáme ďalšiu

pomocnú vrstvu, kde nakreslíme trajektóriu pohybu. Zvukové pozadie animácie zabezpečíme vložením zvukový súbor do vrstvy. Prostredia pre vektorovú grafiku umožňujú vkladať do obrázkov aj hypertextové odkazy, navigačné tlačidlá atď. Dokonca sa v týchto prostrediach dajú programovať samostatné aplikácie napr. hry.

• Premena štvorca na trojuholník

V ľubovoľnom programovacom prostredí realizujte premenu štvorca na trojuholník. Na postupné zobrazenie bodu X od polohy bodu A zo štvorca ku polohe bodu B z trojuholníka

môžete použiť vzťah X = A + t . (B - A), kde t ∈ <0,1>