Animácia na webe

1. Animácia na webe Dorota Brázdovičová

2. Čo a na čo je animácia ? • Animáciaje séria obrázkov v časovej sekvencii vytvárajúcej pohyblivý obraz. • 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. Animácia v multimédiach neslúži len na upútanie, ale slúži aj ako prostriedok, ktorý nesie informáciu. Dobre navrhnutá animácia dokáže viac osloviť a zaujať ako statický text. Animácie sú vytvorené zo série snímok, ktoré sú zobrazované po sebe, vždy po určitom čase tak, aby vytvorili ilúziu pohybu. Ideálna frekvencia zobrazovania snímok sa pohybuje okolo 25 snímok za sekundu. Každý pohyb musí byť rozčlenený na jednotlivé časti a starostlivo nakreslený. • 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.

3. Druhy animácií Z hľadiska spôsobu vytvárania, môžeme animácie rozdeliť na dve skupiny: • Bitmapové animácie - vytvárame ich ako postupnosť obrázkov rozkreslených do jednotlivých rámčekov. príkladom môže byť naša húsenička v predchadzajúcej kapitole. • Vektorové animácie - vytvárame ich ako skupinu navzájom nezávislých objektov. Napríklad život zviratiek v lese môžeme navrhnúť tak, že les s trávou, kameňmi bude tvoriť pozadie. Zvieratká budú pritom samotné objekty. Pri počítačovom spracovaní nemusíme vykresľovať všetky snímky, stačí len tie podstatné. Ostatné za nás dopočíta a vykreslí počítač.[

4. 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áciepredstavujú 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ácievznikajú 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ý priemysel.

5. Formáty animácií • Animácie sú zvyčajne uložené v niektorom z nasledujúcich formátov: •GIFje formát, ktorý sa používa na uloženie statickej grafiky, dovoľuje však uložiť a 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, FLCpochá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, FLAide 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 produktu. Na zloženie obrázkov do animačnej sekvencie slúžia rôzne programy. Napríklad MS Gif Animator, GIF Construction Set, či Animagic, Macromedia Flash, Jacs Animation Shop, Logomotion a pod.

6. Čo je GIF? • Je to súbor s animovanými obrázkami vo formáte GIF (GIF: formát grafického súboru (prípona .gif v systéme Windows), ktorý sa na webe používa na zobrazovanie obrázkov s indexovanými farbami. Podporuje až 256 farieb a používa kompresiu bez strát, čo znamená, že pri kompresii súboru nedochádza k žiadnym stratám grafických údajov.) zahŕňa pohyb a má príponu .gif. • Hoci animované obrázky vo formáte GIF nie sú videá, obsahujú viacero obrázkov, ktoré plynulým pohybom vytvárajú efekt animácie. Často sa používajú na zvýraznenie návrhu alebo webovej lokality.

7. Čo je banner? • je grafická forma internetovej reklamy. Najznámejšie sú tzv. full bannery s rozmermi 468 * 60 pixelov. Bannerom môže byť statický obrázok, najčastejšie sa však používajú animované bannery ( technológia Flash ), ktoré skôr upútajú pozornosť návštevníka stránky. • Bannery majú význam predovšetkým pre budovanie značky (ako každá grafická reklama), siahnete po ňom keď chcete prilákať veľké množstvo ľudí a tlačí vás čas (napr. potreba publikovať informácie o predaji nového tovaru alebo služby, informácie o aktuálnych zľavách a pod.).

8. Gif vs. Flash • Už od pradávna sa používal na reklamné bannery formát GIF, aj keď veľmi primitívny formát, ale donedávna dostačujúci na jednoduché reklamy. V dnešnej dobe ho stále častejšie nahradzuje nový, atraktívny formát – Flash. Aké sú hlavné nevýhody GIFu? • GIF je určený pre rastrovú grafiku (vhodný na nákresy,plány), používa bezstratovú kompresiu • - Maximálne množstvo uložených farieb je 256 • - Žiadna interaktivita • - Obrovská veľkosť • - Nízky počet fps (frames peer second) • GIF je tu s nami už veľmi dlho, jeho prvá verzia bola vytvorená v roku 1987. V roku 1989 vytvorila firma CompuServe novšiu verziu tohto formátu – 89a. Táto verzia pridala dovtedy nemožnú animáciu, ktorá spočívala v jednoduchom prehrávaní obrázok po obrázku, a veľkou nevýhodou tohto spôsobu je obrovská veľkosť pre malé animácie.

9. Výhody Flashu Flash je moderná, rozvíjajúca sa technológia, ktorá má obrovskú perspektívu na webe. Flash zaznamenáva v poslednej dobe dosť veľký boom, ktorý je dostatočne vidieť v (dosť otravných) reklamách . Spoločnosti si začali veľmi zvykať na vymoženosti, aké Flash poskytuje – zvuky, interakciu s používateľom. Cez všetky tieto vymoženosti si Flash dokáže udržať veľmi malé dátové objemy.Hlavnou úsporou je vektorová grafika, ktorá nie je zaznamenaná pixel po pixeli ale je zaznamenaná v podobe matematických rovníc. Odporcovia Flashu dosť často kritizujú Flash pre jeho malú rozšírenosť, pretože na prehrávanie Flashu potrebujeme mať v systéme plugin prehrávajúci Flash. Na oficiálnej stranke firmy Macromedia z štatistiky vyplýva, že Flash Player je nainštalovaný na 97,7% PC, takže sú to plané reči. Zostávajúcich 2,3% sú tí používatelia, ktorí Flash blokujú, používajú operačné systémy, akými je Linux, a samozrejme že aj tí, ktorí nemaju Flash plugin. • Obrázky sa uchovávajú vo vektoroch (možné sú samozrejme aj bitmapy) • - Veľké multimediálne možnosti – zvuky, videá, animácie... • - Neuveriteľná interaktivita vďaka programovaciemu jazyku ActionScript (súčasná verzia 2.0) • - Možnosť veľkého fps (max. 120), ktoré zaručuje plynulé pohyby • - Multiplatformový formát – Windows, Linux, Mac OS, Symbian (mobilné zariadenia) - Previazanosť s Vašou webovou prezentáciou, možnosť získavať informácie z externých zdrojov

10. JavaScript animácie • JavaScript animácieJavaScript sa používa na vytváranie širokej palety animačných efektov (interaktívna reakcia a náhodnosť). Môže prepojiť jednotlivé snímky do veľkého počtu rôznych animácií. JavaScript možno použiť pre GIF animácie, statické obrázky vo formáte JPEG a PNG. Je obmedzený len na bitmapové obrázky. JavaScript animácie sú považované za objektovo orientované. • Animácie sú vytvárané jazykom JavaScript. Nájdeme ich ako súčasť na rôznych webových stránkach. Pomocou JavaScriptu sa dajú dosiahnuť interaktívne animácie, čím získame možnosť manipulácie s pohybom. Interaktívna animácia zapája používateľa do deja. Použitím klávesnice alebo myši, môže skákať do rôznych častí animácie, hýbať objektmi, vkladať informácie, klikať na tlačidlá. • Základnou požiadavkou na tvorbu JavaScript animácií je určitá znalosť jazyka JavaScript. Na dosiahnutie zložitejších efektov je potrebné naprogramovať dobrý algoritmus pomocou funkcií JavaSciptu. Na písanie skriptov nie je potrebný žiadny špeciálny program. Všeobecne platí, že môžeme použiť editor, ktorým vytvárame www stránky.

11. ĎAKUJEM ZA POZORNOSŤ.