Filtry v dynamickém HTML, III. část: náročnější efekty - Builder.cz - Informacni server o programovani

Navigace:  » Úvodní stránka  » Rubriky  » JavaScript  

25. května 2001, 00.00 | V dnešním článku o filtrech v DHTML si představíme filtr Light, budete si moct vyzkoušet míchání filtrů a také se podíváme na to, jak vytvořit pomocí filtrů efektní animace.

V dnešním článku o filtrech v DHTML si představíme filtr Light, budete si moct vyzkoušet míchání filtrů a také se podíváme na to, jak vytvořit pomocí filtrů efektní animace.

Filtr Light

Popis:

Simuluje osvícení objektu.

Poznámka:

Tento filtr se ovládá odlišným způsobem od ostatních filtrů. Poté, kdy ho na objekt aplikujete (pomocí zápisu style="filter: light;" nebo ve skriptech pomocí zápisu objekt.style.filter = 'light';), můžete používat jeho metody k jeho ovládání. Syntaxe je následující: objekt.filters.light.metoda(hodnota prvního parametru,hodnota druhého parametru). Popis jednotlivých metod a jejich parametrů naleznete pod příklady. Pod každým příkladem se zároveň nachází textové políčko, kam můžete zadávat metody s jejich parametry (zadávejte tedy ve tvaru metoda(hodnota prvního parametru,hodnota druhého parametru...)) a měnit tak vzhled daného objektu. Ve velkém textovém poli pod každým příkladem se nachází kompletní syntaxe. Je také možné, že změny na obrázku nebudou patrné ihned po aplikaci metody. V takovém případě je třeba scrollovat se stránkou tak, aby obrázek nebyl vidět, a zpět. Můžete zadat i několikrát tu samou metodu, obrázek pokaždé změní svou podobu.

Filtr Light
Popis metod filtru Light
addAmbient (R,G,B,strength)	Osvětlí okraje objektu. Je implicitně definováno při prvním použití filtru Light na objekt:
	R:	Intenzita červené barvy ve světle, hodnoty od 0 (pro nejmenší intenzitu) do 255 (pro největší intenzitu).
	G:	Intenzita zelené barvy ve světle, hodnoty od 0 (pro nejmenší intenzitu) do 255 (pro největší intenzitu).
	B:	Intenzita modré barvy ve světle, hodnoty od 0 (pro nejmenší intenzitu) do 255 (pro největší intenzitu).
	strength:	Intenzita světla.
addCone (x1,y1,z1,x2,y2,R,G,B,strength,spread)	Aplikuje na objekt kuželové světlo:
	x1:	Vodorovná souřadnice zdroje světla.
	y1:	Svislá souřadnice zdroje světla.
	z1:	Poloha zdroje světla ve třetím rozměru.
	x2:	Vodorovná souřadnice místa dopadu světla na objekt.
	y2:	Svislá souřadnice místa dopadu světlana objekt.
	R:	Intenzita červené barvy ve světle, hodnoty od 0 (pro nejmenší intenzitu) do 255 (pro největší intenzitu).
	G:	Intenzita zelené barvy ve světle, hodnoty od 0 (pro nejmenší intenzitu) do 255 (pro největší intenzitu).
	B:	Intenzita modré barvy ve světle, hodnoty od 0 (pro nejmenší intenzitu) do 255 (pro největší intenzitu).
	strength:	Intenzita světla v místě dopadu na objekt.
	spread:	Úhel dopadu světla, možné hodnoty jsou 0 - 90 stupňů.
addPoint (x,y,z,R,G,B,strength)	Aplikuje na objekt bodové světlo:
	x:	Vodorovná souřadnice světla.
	y:	Svislá souřadnice světla.
	z:	Poloha světla ve třetím rozměru.
	R:	Intenzita červené barvy ve světle, hodnoty od 0 (pro nejmenší intenzitu) do 255 (pro největší intenzitu).
	G:	Intenzita zelené barvy ve světle, hodnoty od 0 (pro nejmenší intenzitu) do 255 (pro největší intenzitu).
	B:	Intenzita modré barvy ve světle, hodnoty od 0 (pro nejmenší intenzitu) do 255 (pro největší intenzitu).
	strength:	Intenzita světla.
changeColor (lightnumber,R,G,B,fAbsolute)	Změní barvu již definovaného světla:
	lightnumber:	Číslo již definovaného světla (na jeden objekt může být aplikováno postupně více světel, číslují se v pořadí, jak jsou definovány po sobě, a to od nuly).
	R:	Intenzita červené barvy ve světle, hodnoty od 0 (pro nejmenší intenzitu) do 255 (pro největší intenzitu).
	G:	Intenzita zelené barvy ve světle, hodnoty od 0 (pro nejmenší intenzitu) do 255 (pro největší intenzitu).
	B:	Intenzita modré barvy ve světle, hodnoty od 0 (pro nejmenší intenzitu) do 255 (pro největší intenzitu).
	fAbsolute:	Pokud má hodnotu true, jsou barvy definovány na novo, při hodnotě false jsou nové hodnoty barev přičteny k původním hodnotám barev nebo odečteny od původních hodnot barev.
changeStrength (lightnumber,strength,fAbsolute)	Změní intenzitu již definovaného světla:
	lightnumber:	Číslo již definovaného světla (na jeden objekt může být aplikováno postupně více světel, číslují se v pořadí, jak jsou definovány po sobě, a to od nuly).
	strength:	Intenzita světla.
	fAbsolute:	Pokud má hodnotu true, je intenzita světla definována na novo, při hodnotě false je nová hodnota intenzity přičtena k původní hodnotě nebo odečtena od původní hodnoty.
moveLight (lightnumber,x,y,z,fAbsolute)	Změní polohu již definovaného světla. Pro kuželová světla definuje polohu dopadu světla v souřadnicích x,y. Pro bodová světla definuje polohu světla v souřadnicích x,y,z. Tato metoda nemá žádné účinky na světla kolem okrajů objektu:
	lightnumber:	Číslo již definovaného světla (na jeden objekt může být aplikováno postupně více světel, číslují se v pořadí, jak jsou definovány po sobě, a to od nuly).
	x:	Vodorovná poloha světla.
	y:	Svislá poloha světla.
	z:	Poloha světla ve třetím rozměru.
	fAbsolute:	Pokud má hodnotu true, je poloha světla definována na novo, při hodnotě false je nová poloha přičtena k původní poloze nebo odečtena od původní polohy.
Clear ()	Zruší všechna světla aplikovaná na objekt:
	Tato metoda nemá žádné parametry.

Míchání filtrů
Teorií míchání jednotlivých filtrů jsme se zabývali v úvodním článku našeho miniseriálu. Dnes si budete moct všechno sami vyzkoušet.

Pod příklady jsou v nabídce všechny filtry, se kterými jste se dosud seznámili. Pokud kliknete na nějaký z filtrů, objeví se pod ním jeho parametry, které můžete měnit (pro uložení změn musíte stisknout "OK"). Každý z filtrů můžete přemístit do druhé nabídky pomocí tlačítka a aplikovat ho tak na příklady. Pomocí druhého tlačítka můžete tento filtr přemístit zpět. Tímto způsobem můžete na příklady aplikovat jakékoliv filtry s jakýmikoliv parametry. Zdrojový kód filtrů se nachází v textovém poli pod příklady.

Vzhledem ke složitosti filtru Light budou pro tyto účely použity jeho nastavení z příkladů v úvodu článku. Také ve zdrojovém kódu se neobjeví jeho metody. Pokud budete chtít použít filtr Light, musíte ho aplikovat (přesunutím do pravé nabídky) až jako poslední, jinak bude Internet Explorer hlásit chybu.

	Míchání filtrů
Alpha Blur Chroma DropShadow FlipH FlipV Glow Gray Invert Light Mask Shadow Wave Xray

Jak na efektní animace pomocí filtrů
Poslední věcí, kterou jsme si ještě o filtrech neřekli, je ovládání parametrů filtrů. Ke všem parametrům jednotlivého filtru můžete přistupovat pomocí objekt.filters.jméno_filtru.jméno_parametru.

S pomocí našich znalostí o filtrech, časovačem a událostmi onMouseOver a onMouseOut si nyní ukážeme dvě ukázky animací pomocí filtrů. Animace se spustí v momentě, kdy přejedete myší po obrázku:
Zde jsou zdrojové kódy ukázek:

<img onmouseover="animation1();" onmouseout="unanimation1();" src="https://www.builder.cz/dimg/builder.gif" id="obj5" width=310 height=120 border=0> <script type="text/JavaScript"> function animation1 () { obj5.style.filter = "wave (add=true, freq=3, light=20, phase=0, strength=3)"; animation3(); } function animation3 () { var myWave = obj5.filters.wave; if (myWave.phase == 100) myWave.phase = 0; myWave.phase += 5; timer1 = setTimeout("animation3()",20); } function unanimation1 () { clearTimeout(timer1); obj5.style.filter = " "; } </script> <img onmouseover="animation2();" onmouseout="unanimation2();" src="https://www.builder.cz/dimg/builder.gif" id="obj6" width=310 height=120 border=0> <script type="text/JavaScript"> function animation2 () { obj6.style.filter = "blur (add=false, direction=315, strength=2)"; animation4(); } function animation4 () { var myBlur = obj6.filters.blur; if (myBlur.strength == 100) myWave.strength = 2; myBlur.strength += 2; timer2 = setTimeout("animation4()",2); } function unanimation2 () { clearTimeout(timer2); obj6.style.filter = " "; } </script>

Tyto příklady jsem vám ukázal, abyste viděli alespoň náznak možností DHTML-filtrů. Měly by sloužit spíše jako inspirace, protože jde docílit ještě daleko lepších efektů s minimálním zdrojovým kódem.

Dnes jsme si ukázali poslední úskalí práce s filtry. V příštím článku se již začneme zabývat přechody v DHTML, což je speciální typ filtrů.