DirectAnimation, 4.část: Sprite aneb Image je na nic :-) - Builder.cz - Informacni server o programovani

Odběr fotomagazínu

Fotografický magazín "iZIN IDIF" každý týden ve Vašem e-mailu.
Co nového ve světě fotografie!

 

Zadejte Vaši e-mailovou adresu:

Kamarád fotí rád?

Přihlas ho k odběru fotomagazínu!

 

Zadejte e-mailovou adresu kamaráda:



JavaScript

DirectAnimation, 4.část: Sprite aneb Image je na nic :-)

12. září 2001, 00.00 | Po nějaké době se opět vracíme k našemu seriálu o DirectAnimation. Dnes se podíváme na prvek Sprite, pomocí něhož je možné

ovládat animované obrázky ve formátu GIF.

Po nějaké době se opět vracíme k našemu seriálu o DirectAnimation. Dnes se podíváme na prvek Sprite, pomocí něhož je možné ovládat animované obrázky ve formátu GIF.

Od posledního dílu našeho seriálu o DirectAnimation již přece jen uplynula delší doba, proto zde pro ty z vás, kteří již zapomněli co že ta DirectAnimation vlastně je, přináším odkazy na minulé díly seriálu, aby je nemuseli hledat v archivu Builderu:

DirectAnimation, 1.část: Úvod
DirectAnimation, 2.část: Structured Graphics
DirectAnimation, 3.část: Structured Graphics podruhé

Proč používat prvek Sprite?

Nejpoužívanější formou animace na webu jsou nepochybně animované obrázky ve formátu GIF - ty jsou založeny na tom, že jednotlivé fáze animace jsou uloženy v jednom souboru bezprostředně za sebou. Tyto animace mají jednu velkou výhodu - je jí velikost souboru, která je pro publikování na webu jedním z nejdůležitějších hledisek. Tato výhoda je ale bohužel kompenzována tím, že tyto obrázky není možné ovládat tak, jako např. video záznam - pozastavovat, přetáčet apod. To již ale neplatí o Internet Exploreru, který právě pomocí prvku Sprite tyto obrázky ovládat umožňuje.

Vzhůru do toho

Nebudeme dlouho otálet a hned se podíváme, jak se prvek Sprite na stránku vkládá:

<OBJECT CLASSID="CLSID:FD179533-D86E-11D0-89D6-00A0C90833E6" ID="obrazek">
  <PARAM NAME="jméno vlastnosti" VALUE="hodnota vlastnosti">
</OBJECT>

Vidíme tedy, že stejně jako všechny ostatní prvky DirectAnimation se i prvek Sprite na stránku vkládá pomocí tagu OBJECT a identifikátoru prvku CLASSID. Prvek je nutné pojmenovat pomocí parametru ID tagu OBJECT, jinak ho není možné ovládat pomocí skriptů. Prvku přiřazujeme vlastnosti pomocí tagů PARAM, které uvádíme uvnitř tagu OBJECT - nyní si tyto vlastnosti ukážeme:

Jméno vlastnosti Význam vlastnosti
AutoStart Nastaví, zda má přehrávání začít v momentu, kdy je načtena stránka. Hodnoty true (pro ano) a false (pro ne).
ColorKey Nastaví průhlednou barvu obrázku. Hodnoty ve formátu RRR,GGG,BBB (postupně se udávají hodnoty barev v desítkové soustavě).
UseColorKey Nastaví, zda se má použít průhlednost (true pro ano, false pro ne).
InitialFrame Nastaví číslo snímku, kterým animace začne.
FinalFrame Nastaví číslo snímku, kterým animace skončí.
FrameMap Nastaví pořadí přehrávání snímků a jejich časy zobrazení. Hodnoty se zadávají ve tvaru číslo prvního snímku,čas prvního snímku;číslo druhého snímku, čas druhého snímku atd. Čas se zadává ve tvaru .hodnota, a to v milisekundách.
NumFrames Nastaví počet snímků ve zdrojovém souboru.
MouseEventsEnabled Nastaví, zda mají být nad prvkem zachycovány myší události.
PlayRate Nastaví rychlost přehrávání prvku. Pokud použijeme zápornou hodnotu, bude se animace přehrávat pozpátku.
Repeat Nastaví počet opakování animace, pokud použijeme hodnotu -1, bude se přehrávání opakovat donekonečna.
SourceURL Nastaví cestu k obrázku.
TimerInterval Nastaví dobu mezi aktualizacemi snímků v milisekundách.

Všechny tyto vlastnosti je možné číst i nastavovat v JavaScriptu, a to pomocí zápisu název prvku.vlastnost. V JavaScriptu navíc můžeme používat těchto několik vlastností, které jsou pouze ke čtení: Frame (udává číslo aktuálního snímku), NumFramesAcross (udává šířku zdrojového obrázku v počtu snímků), NumFramesDown (udává výšku zdrojového v počtu snímků), PlayState (vrací jeden ze těchto stavů animace: play, paused a stopped) a Time (udává celkový čas přehrávání animace).

Metody prvku Sprite

Kromě výše uvedených vlastností podporuje prvek Sprite i několik JavaScriptových metod. Ty se aplikují pomocí zápisu název prvku.metoda a jsou to FrameSeek(n) (nastaví přehrávání na n-tý snímek animace), Pause() (pozastaví animaci), Play() (spustí přehrávání animace) a Stop() (zastaví přehrávání animace a vrátí ji na začátek). Závěrem bych vás ještě rád seznámil s událostí onMediaLoaded, která se používá u tagu OBJECT a která se volá v momentě, kdy je prvek Sprite kompletně načtený (včetně obrázku).

A to je o prvku Sprite vše. Příště se podíváme na prvek Path a poté se již začneme zabývat využitím prvků DirectAnimation v praxi.

Obsah seriálu (více o seriálu):

Tématické zařazení:

 » Rubriky  » JavaScript  

 » Rubriky  » Web  

 » Rubriky  » HTML  

 

 

 

Nejčtenější články
Nejlépe hodnocené články

 

Přihlášení k mému účtu

Uživatelské jméno:

Heslo: