Vytváříme si domovskou stránku

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ý...


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í podle mého názoru příliš
vhodné používat ActiveX v Internetu. Jeho použití má význam spíše 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é vyšlo v CW 5/98.
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ž Microsoft 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 (na obrázku vidíme prvních 10 fází).
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í.
8 0006 / pah









Komentáře
K tomuto článku není připojena žádná diskuze, nebo byla zakázána.