Home » Školení » Internetový design » Animovaná grafika

Animovaná grafika

… animace, pohyb a dynamika působí na emoce a uživatelský prožitek každého člověka.


Animovanou grafiku tvoří vektorová grafika, digitální fotografie, video, hudba i zvukové efekty. Je používána při tvorbě reklamních spotů, videoklipů, znělek, animovaných log, multimediálních prezencí, ale také internetových stránek a projektů.

Animace ve webdesignu (webové grafice)

Animovaná scenérie v záhlaví internetové prezentace zcela jistě zaujme a upoutá pozornost každého návštěvníka. Z hlediska optimalizace pro vyhledávače jsou však celoanimované weby nepřístupné vyhledávacím robotům. Řešení se tak nabízí v kombinaci technologie FLASH a HTML, kde jsou animace použity pouze jako doplněk layoutu.

Celoanimované weby najdou využití pouze ve formě propagace na kulturní nebo společenskou akci, kde není nutná kvalitní optimalizace. Ze stejného důvodu se nedoporučuje vytvářet efektní animované navigace v technologii FLASH.

Přiznejme, že se jedná o prvky kontroverzní. Na jedné straně je jakýkoli pohyb, interaktivita či dynamika uživatelsky velice lákavá. Tohle je jedna z věcí, které radikálně odlišují počítačové nosiče informací od papírových. Na straně druhé se však nevhodné používání těchto konstrukcí snadno může zvrtnout. Hranice kýče je velmi blízko. Animace navíc mívají tendenci strhávat na sebe nadměrnou pozornost a odvádět uživatele od vlastního obsahu stránky. Proto buďte při používání pohybu na stránkách velmi opatrní.

Blikání

Nejjednodušším dynamickým prvkem na WWW stránce je blikající text. Jeho výroba je primitivní a opírá se o párovou značku <BLINK> , kterou zavedl Netscape Navigator. Text, který tvoří tělo značky, se bude na obrazovce v pravidelných intervalech rozsvěcovat a zhasínat.

Existence blikajících nápisů vzbudila bouřlivé reakce, směřující k jednoznačnému odmítání tohoto prvku. Všechna doporučení pro tvorbu stránek, která jsem zatím četl, se shodují na názoru: NEBLIKAT!

Jen výjimečně je některá informace natolik důležitá, aby si zasloužila takto silné zdůraznění. Například pokud na stránce publikujete oznámení o probíhající soutěži a blíží se termín pro podání přihlášek. Považujete-li onu soutěž za velmi atraktivní pro své čtenáře, lze na blížící se uzávěrku upozornit blikáním.

Naopak za příklad naprostého nepochopení lze považovat blikající nápis „Stránka je ve výstavbě“. Samotná skutečnost zveřejnění nedokončené stránky je známkou pochybení ze strany autora. Pokud tuto skutečnost ještě zvýrazňuje, dělá zhruba totéž jako kdyby si na dveře pověsil veliký neonový nápis „Jsem trouba“.

Obecná nevraživost vůči blikání se projevila i tím, že značka <BLINK> nepronikla ani do HTML verze 3.2, ani do jiných WWW klientů.

Animovaný GIF

Snad nejpopulárnější metodou pro animace na WWW stránkách byl jednu dobu animovaný GIF. Tento formát totiž umožňuje, aby v jednom souboru bylo uloženo několik obrázků, které se mají vzájemně překreslovat. Můžete definovat časové odstupy mezi překreslováním a dokonce i zajistit, aby se obrázky opakovaly cyklicky – po posledním bude znovu následovat první.

Vytvoření animovaného GIFu začíná přípravou jednotlivých dílčích obrázků, představujících jednotlivé fáze pohybu. Měly by být stejně velké a mají-li představovat pohyb jednoho objektu, měly by obsahovat i totožnou paletu barev. Druhý požadavek odpadá, chcete-li v animaci střídat obrázky nesourodé – například několik různých výrobků.

Když máte obrázky nachystány, spusťte GIF Animator (nebo podobný program). V něm nadefinujte pořadí, ve kterém mají být jednotlivé obrázky prezentovány. U každého z nich můžete zároveň zadejte, po jaké době (zpravidla v milisekundách) nahradí svého předchůdce. Tento údaj nenechávejte nevyplněný. Jinak by se mohlo stát, že se na výkonnějším počítači budou obrázky střídat tak rychle, až budou čtenáři oči přecházet. Speciální volba umožňuje animaci zacyklit.

Animované GIFy jsou akceptovatelné na prezentačních stránkách, které mají především upoutat pozornost a zaujmout čtenáře. Jakmile však pokročí k „seriózním“ informačním stránkám, měl by pohyb mizet. Dopřejte uživateli klid na čtení.

FLASH

  • internetové reklamní bannery
  • grafické upoutávky na www stránkách
  • animované záhlaví (hlavička) webové prezentace (FLASH HEADER)
  • FLASH intro – animace na úvod webové prezentace
  • interaktivní reklamní hry
  • animované novoroční přání
  • tutorialy, návody
  • animovaná schémata
  • kompletně animované webové prezentace (microsite)

Výhody technologie FLASH

  • malá datová velikost výsledného SWF souboru
  • umožňuje použít i nestandardní písma, které nejsou na internetu používány
  • umožňuje použít hudbu a zvukové efekty