Jiří Kosek ml.
Animované obrázky
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í javové applety. Applet 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 applety zabývá zcela samostatný seriál vycházející v Computerworldu, nebudeme se jim zde věnovat.
Podobné možnosti jako javové applety nabízí i ActiveX. Komponenty ActiveX jsou však na rozdí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 tedy fungovat 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émům 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 průběhu února.
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édnout na obrázku 1 -- jsou uloženy v souborech g01.gif až g14.gif.
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.
Nyní by se měl 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 Computerworld). 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í.
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 webovým rozhraním.