DirectAnimation, 1.část: Úvod - Builder.cz - Informacni server o programovani

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

11. června 2001, 00.00 | DirectAnimation je další z technologií, které umožňují webovým tvůrcům dosáhnout efektního oživení stránek při minimální velikosti přenášených dat k uživateli. V tomto úvodním díle si zodpovíme několik základních otázek pojících se k této technologii.

DirectAnimation je další z technologií, které umožňují webovým tvůrcům dosáhnout efektního oživení stránek při minimální velikosti přenášených dat k uživateli. V tomto úvodním díle si zodpovíme několik základních otázek pojících se k této technologii.

V jakých to funguje prohlížečích?
DirectAnimation je pevnou součástí Internet Exploreru od verze 4 a nevím o žádném jiném prohlížeči, který by tuto technologii podporoval. To je také asi jediný handicap této technologie.

Co to vlastně DirectAnimation přesně je?
DirectAnimation je soubor čtyř prvků ActiveX, které jsou pevnou součástí IE od verze 4, a proto se při každém použití nemusejí nahrávat do paměti prohlížeče, jako ostatní prvky ActiveX. Nyní si představíme jednotlivé prvky DirectAnimation:

• Structured Graphics - Umožňuje pomocí pouhého HTML kódu vytvářet na stránce obrázky a poté je ovládat pomocí skriptů. Díky tomu, že jsou tyto obrázky vytvářeny pomocí HTML kódu, je možné ovlivňovat jejich podobu i pomocí vyšších skriptovacích jazyků, jako je PHP, ASP či CGI, a vytvářet tak obrázky podle preferencí uživatele. Další vlastností těchto obrázků je, že jsou vektorové - to znamená, že jsou tvořeny čárami a křivkami, narozdíl od rastrové grafiky (například formát GIF), která je tvořena jednotlivými body. Díky tomu je možné s těmito obrázky různě manipulovat - otáčet, zvětšovat, zmenšovat... Všechny tyto možnosti prvek Structured Graphics nabízí.
  
  
• Sprite - Umožňuje ovládat animované obrázky ve formátu GIF, a to jak přímo v HTML kódu, tak pomocí skriptů. Tyto obrázky jsou charakterizovány velmi malou velikostí v kilobajtech a také tím, že jsou zde jednotlivé fáze animace uloženy snímek po snímku. Prvek Sprite nabízí například možnost přehrávání jen určených snímků animace a mnoho dalšího.
  
  
• Path - Umožňuje velmi jednoduše definovat pohyb téměř libovolného objektu po stránce, a to po téměř libovolné trajektorii (co se týče tvaru i délky).
  
  
• Sequencer - Umožňuje časovat provádění operací na stránce, nenabízí ale žádné výrazné výhody oproti JavaScriptovému window.setTimeout(), a proto se jím nebudeme zabývat.

Jen dodám, že všechny prvky DirectAnimation jsou nezávislé na hierarchii stránky, podobně jako prvky, u kterých používáme absolutní pozicování (pomocí zápisu position:absolute).

Jak vidíte, pomocí DirectAnimation se dají vytvářet efekty, kterých nejde dosáhnout jiným způsobem (prvek Sprite a částečně prvek Path) i efekty, u kterých se díky DirectAnimation výrazně sníží objem přenášených dat k uživateli (prvky Structured Graphics a Path).

Základní syntaxe
Prvky DirectAnimation se na stránku vkládají pomocí párového tagu OBJECT. Ten je umístěn buď v sekci HEAD (prvky Path a Sequencer) nebo přimo v těle stránky (prvky Structured Graphics a Sprite). Jednotlivým prvkům se dají přiřazovat nejrůznější parametry pomocí nepárových tagů PARAM, které musí být umístěny uvnitř tagu OBJECT. Vše ukazuje následující příklad:

<OBJECT ID="jméno objektu" CLASSID="identifikátor prvku"> <PARAM NAME="jméno parametru" VALUE="hodnota parametru"> <PARAM NAME="jméno parametru" VALUE="hodnota parametru"> </OBJECT>

V příkladu se vyskytuje ještě jeden parametr, který neznáte. Je to parametr CLASSID tagu OBJECT. Ten obsahuje identifikátor daného prvku DirectAnimation. Tyto identifikátory se budete dozvídat v dalších dílech našeho seriálu, které již budou zasvěceny jednotlivým prvkům DirectAnimation. V příštím díle konkrétně začneme s prvkem Structured Graphics.