Animované obrázky

Jiří Kosek ml.

Na čím dál tím větším počtu stránek se objevují různé interaktivní prvky. Ty se snaží svým pohybem (či případnou reakcí na chování uživatele) zaujmout čtenáře stránky. Způsobů, jak stránky obohatit o interaktivní prvky, je několik. Uveďme si je alespoň ve stručnosti:

Mezi nejjednodušší metodu patří animované obrázky. Jedná se o obrázky ve formátu GIF, kdy jeden soubor obsahuje několik obrázků, které se v zadaných intervalech střídavě zobrazují. Výsledný efekt pak budí dojem animace. Do stránky se tyto obrázky vkládají zcela stejně jako obyčejné obrázky pomocí elementu IMG.

Mnohem větší možnosti nabízejí Java-aplety. Java-aplet je program zapsaný v jazyce Java, který má na stránce vyhrazenu určitou plochu. Na této ploše může zobrazovat, co chce. Jelikož se Javou a Java-aplety zabývá zcela samostatný seriál vycházející v Computerworldu, nebudeme se jimi zde zabývat.

Podobné možnosti jako Java-aplety nabízí i ActiveX. Komponenty ActiveX jsou však narozdíl od Javy určeny výhradně pro počítače s operačními systémy Windows 95 a Windows NT na platformě Intel. Nebudou fungovat tedy na všech počítačích. Tím je technologie ActiveX v hlubokém rozporu s původní myšlenkou Webu -- zpřístupňování informací nezávisle na použité počítačové platformě. Díky omezené přenositelnosti a problémy s bezpečností není vhodné používat ActiveX v Internetu. Jeho použití má význam pouze v podnikových Intranetech, kdy máme zaručeno, že všichni uživatelé používají platformu Win32. ActiveX komponenty se do stránky vkládají pomocí elementu OBJECT. Jejich ruční vkládání je však téměř nemožné, protože jsou identifikovány pomocí mnohamístného šestnáctkového čísla, které se ještě čas od času mění. Výše uvedené důvody jsou dostatečné pro to, abychom s touto technologií v našem seriálu neztráceli čas.

Největší novinkou v možnostech přidání interaktivity do stránek je dynamické HTML. Jedná se o zajímavou a dosud ne příliš rozšířenou technologii, takže ji věnujeme celé jedno téma týdne, které vyjde v některém z únorových Computerworldů.

Z názvu dnešního dílu je patrné, že se budeme zabývat právě animovanými obrázky. Jejich tvorba je velmi jednoduchá a výsledný efekt mnohdy překvapující.

Animované obrázky podporuje pouze formát GIF. Animovaný GIF můžeme vytvořit několika způsoby. Asi nejjednodušší je použití nějakého animačního programu jako 3D Studio Max, SoftImage, CorelMove apod. V animačním programu vytvoříme animaci a tu si necháme uložit do souboru ve formátu GIF. Další možností je ručně vytvořit jednotlivé fáze animace a pak je složit dohromady. K těmto účelům slouží programy Microsoft GIF Animator (součást produktu FrontPage) a GIF Construction Set (shareware dostupný na adrese http://www.mindworkshop.com/alchemy/alchemy.html). Tyto programy umožňují složit více obrázků GIF do jednoho. Přitom lze nastavit, jak dlouho budou jednotlivé fáze animace zobrazeny a jaký mezi nimi bude použit přechod. GIF Construction Set navíc nabízí možnost převodu animačního souboru ve formátu .avi na animovaný GIF.

Při tvorbě animovaných GIFů musíme mít na paměti, že každá fáze animace je stejně velká jako jeden obrázek. Pokud tedy na stránku zařadíme větší animovaný obrázek, který se skládá z mnoha fází, dostaneme tak velký soubor, že jeho přenesení po síti k uživateli v nějakém rozumném čase nebude možné. Animované GIFy bychom tedy měli vytvářet co nejmenší a s co nejmenším počtem fází animace.

Praktickou tvorbu animovaného obrázku si ukážeme na jednoduchém příkladě. Vytvoříme logo Computerworldu, kde logo firmy IDG bude rotovat kolem svislé osy. K vytvoření animovaného GIFu použijeme program GIF Construction Set, který se podle mne ovládá snadněji než Micosoft GIF Animator.

Nejprve v nějakém grafickém editoru vytvoříme obrázky odpovídající jednotlivým fázím. My jsme otočení o 180 stupňů rozložili do 14 kroků. Tyto kroky se pak ještě v opačném pořadí zopakují, abychom dosáhli efektu rotace o celých 360 stupňů. Jednotlivé fáze animace si můžeme prohlédnou na obrázku 1 -- jsou uloženy v souborech g01.gif až g14.gif.

Obr. 1: Jednotlivé fáze animace

Nyní spustíme GCS a vytvoříme nový animovaný obrázek pomocí File -- New. Do něj vložíme obrázky jednotlivých fází. Stiskneme tlačítko Insert a poté Image. Objeví se dialog pro výběr souboru. Nyní můžeme přidat jednotlivé fáze animace. Lze označit všechny obrázky najednou a přidat je v jediném kroku. Myší klikneme na soubor g01.gif. Podržíme klávesu Shift a klikneme myší na g14.gif. Označeny by měly být všechny fáze. Výběr potvrdíme stiskem tlačítka OK.

Měl by se objevit dialog, ve kterém vybereme způsob převodu palety vkládaných obrázků. Ponecháme standardní volbu Remap this image to global palette a zaškrtneme volbu Use this selection for subsequent images. Vše potvrdíme stiskem OK. Obdobným způsobem nyní přidáme fáze 13. až 2. v opačném pořadí (soubory g13.gif až g02.gif).

Po vložení obrázků musíme nastavit parametry animace. Parametry animace jsou uloženy v kontrolních blocích mezi jednotlivými fázemi. Nejsnazší postup pro přidání kontrolních bloků je stisk tlačítka Manage. V dialogovém okně, které se objeví, vybereme všechny fáze (stiskem tlačítka Select All) a stiskneme horní tlačítko Apply.

Objeví se dialog pro nastavení přechodu mezi jednotlivými obrázky. Můžeme zde velice jednoduše nastavit transparentní barvu použitím kapátka. My vybereme bílou barvu. Do pole Delay vyplníme délku zobrazení jedné fáze animace v setinách sekundy. My zvolíme deset setin sekundy. Pokud používáme transparentní barvu, musíme ještě v poli Remove By vybrat položku Background. Kdybychom tak neučinili, jednotlivé fáze animace by se překreslovaly přes sebe. Nastavení potvrdíme stiskem OK. Ukončíme okénko Block Management a vrátíme se zpět na hlavní obrazovku programu.

Takto vytvořenou animaci můžeme vyzkoušet stiskem tlačítka View. Vše by mělo fungovat, animace však proběhne pouze jednou. My bychom chtěli, aby se animace opakovala pořád dokola a vynikl tak efekt rotace části loga. Stiskneme tedy tlačítko Insert a poté Loop. Nyní by již měla animace probíhat podle našich představ.

Před uložením animace do souboru zbývá pouze upravit rozměry animace tak, aby odpovídaly rozměrům jednotlivých fází. Rozměry obrázku se mění v první položce seznamu -- HEADER. Animace se do souboru uloží pomocí příkazu File -- Save As. My jsme soubor uložili pod názvem cw-ga.gif. K jeho vložení do stránky použijeme následující krátký kód:

<IMG SRC=cw-ga.gif
     WIDTH=392 HEIGHT=41
     ALT=Computerworld>

Výsledný obrázek má okolo 40 KB, což je ještě snesitelné. V našem konkrétním případě by šlo velikost animovaného obrázku ještě asi pětkrát zmenšit. V naší ukázce se velká část obrázku nemění. Můžeme také postupovat tak, že do jednotlivých obrázků uložíme pouze jednotlivé fáze pohybu samotného loga IDG (bez nápisu Computerw-rld). Při tvorbě animovaného GIFu jako první vložíme obrázek s logem Computerworldu. Pak vložíme jednotlivé fáze animace logo IDG. U nich nastavíme posunutí od kraje prvního obrázku tak, aby se dostaly na správné místo. Výsledkem je podstatně menší obrázek, protože se v něm neopakují duplicitní části jednotlivých fází.

Obr. 2: Vzhled programu GIF Construction Set

Pojednáním o animovaných obrázcích ukončíme náš seriál o HTML. Neloučíme se však na dlouho, protože na vás čeká nový seriál. Ten se bude opět zabývat tvorbou stránek. Tentokrát se však přesuneme na stranu serveru a naučíme se vytvářet dynamicky generované stránky, které mohou spolupracovat s různými databázemi. Naučíme se vše potřebné pro vytvoření např. objednávkového systému na pizzu, systému pro průběžné zobrazování výsledků voleb či chatu s webovským rozhraním.