SMIL – tvorba prezentace v praxi

14. září 2004

•

V tomto článku si konečně předvedeme tvorbu multimediální prezentace se vším, co k ní patří, na praktickém příkladě. Využijeme při tom většinu informací, které jsme shromáždili v předchozích článcích, rozhodně tedy nezaškodí, pokud si je přečtete nebo alespoň osvěžíte v paměti.

Před tím, než webdesignér začne s tvorbou prezentace, měl by se rozhodnout, jaký formát zvolí. My pomineme program PowerPoint a další jemu podobné, takže nám zůstanou dvě možnosti:

Vytvořit prezentaci v jazyce SMIL. Bude ji možno zobrazit v některých multimediálních přehrávačích (Apple Quick Time Player, Real Player, Adobe SVG Player).
Použít formy HTML+TIME. Tím vznikne prezentace, kterou bude možné zobrazit v internetovém prohlížeči (Microsoft Internet Explorer 5.5 a vyšší).

Rozhodnutí mezi těmito formáty je poněkud zúžené faktem, že každý typ prezentace je určen pro jiné zařízení. Můžeme se však rozhodovat alespoň závisle na rozšíření přehrávačů a prohlížečů. Microsoft Internet Explorer 5.5 a 6.0 je momentálně (9/2004) nejrozšířenějším prohlížečem. Oproti tomu Apple Quick Time Player je obvyklým přehrávačem pro platformu Apple, zatímco Real Player moc rozšířený není (jde o obdobu Winampu či Windows Media Playeru). Dále je třeba si uvědomit, kolik uživatelů je schopno zobrazit prezentaci vytvořenou v PowerPointu – není jich sice tolik, ale prohlížeč pro tento formát je dostupný zdarma (podporuje verze PowerPoint 97, 2000, 2002 a 2003).

Potrženo a sečteno, většině uživatelů vyjdete vstříc formátem HTML+TIME, avšak bude-li existovat též obdoba ve formátu SMIL, vaše prezentace bude čitelná pro ještě větší část uživatelů. A o to se dnes pokusíme, vytvoříme krátkou prezentaci ve SMILu a následně ji vytvoříme též v HTML+TIME. K dispozici jsou vám obě prezentace včetně obrázků v ZIP archivu.

Prezentace ve SMILu a prezentace v HTML+TIME se neliší jen koncovým zařízením, ale existují mezi nimi ještě další důležité rozdíly. Prezentace ve SMILu musí být validní, jinak ji přehrávač není schopen přehrát. To neplatí pro HTML+TIME v Microsoft Internet Exploreru, i když ani ta by samozřejmě neměla obsahovat chyby. Dalším rozdílem jsou textové prvky, SMIL pracuje s textem jak s objektem, proto musí být veškerý používaný text uložen s koncovkou .txt, případně .html (webová stránka, avšak ta je pro některé přehrávače nečitelná). HTML+TIME pracuje s textem naprosto normálně. Takže za fungující prezentací ve SMILu se skrývá více práce než za toutéž prezentací ve formátu HTML+TIME, je však kvalitnější a do budoucna i přístupnější.

Pracovní postup

Vše už jsme rozhodli, nyní potřebujeme vytvořit dvě podobné prezentace v rozdílných formátech. Ideální je začít s prezentací ve SMILu a teprve od ní odvodit prezentaci napsanou v HTML+TIME. Jde o zcela logický postup, HTML+TIME vychází ze SMILu, ne naopak. Jak si prezentaci navrhnete, je na vás, ale nejlepší je asi prezentaci rozkreslit na papír – polohy jednotlivých objektů a jejich animací (z kterého směru přijedou), jednotlivé časy je nejlepší nechat na konečném dojmu.

Jak bude vypadat hotová prezentace

Naše prezentace bude sestávat ze tří oken (snímků), které se budou v určitém časovém intervalu měnit. První a druhé okno bude tvořeno čtyřmi objekty – dva nadpisy a dva odstavce textu. Tyto prvky přijedou do prezentace, tak jak je vyznačeno na obrázku:

Náhled prezentace

První okno skončí zmizením nadpisu a odstavců. Podobně jako v případě prvního okna přijede nový nadpis a dva odstavce textu. Nakonec se i tyto prvky „vypaří“, hlavní nadpis odjede směrem nahoru a namísto původních podnadpisů přijede hypertextový odkaz. Tím je celá prezentace završena.

Prezentace ve SMILu

Nyní se pokusíme vytvořit prezentaci ve SMILu, fungující v přehrávači RealPlayer. Prvním úkolem je navržení regionů (ploch, ve kterých se budou zobrazovat jednotlivé objekty). Zde nesmíme zapomenout na velikosti, polohy a případně barvy. V našem případě bude kód vypadat takto:

<!DOCTYPE smil PUBLIC „-//W3C//DTD SMIL 2.0//EN“ „http://www.w3.org/2001/SMIL20/Language“>
<smil xmlns=“http://www.w3.org/2001/SMIL20/Language“ xmlns:rn=“http://features.real.com/2001/SMIL20/Extensions“ xmlns:md=“http://www.inrialpes.fr/tienthinh/dtd/madeus“>
<head>
<layout type=“text/smil-basic-layout“>
   <root-layout width=“500″ height=“300″ background-color=“#ffffff“ />
   <region id=“logo“ left=“0″ top=“0″ z-index=“20″ height=“40″ width=“500″></region>
   <region id=“nadpis“ left=“120″ top=“80″ z-index=“20″ height=“20″ width=“300″></region>
   <region id=“list1″ z-index=“20″ height=“60″ width=“300″></region>
   <region id=“list2″ z-index=“20″ height=“60″ width=“300″></region>
</layout>
</head>
<body>

Druhým úkolem je příprava všech objektů – obrázky a hlavně texty. S texty je za nynější situace trochu potíž, nelze je doplnit stylem (XHTML+CSS), většina přehrávačů si s nimi neví rady. Proto využijeme pouze „suché“ soubory *.txt. Možným řešením by bylo převedení textů na obrázky, což ale odporuje přednostem SMILu (indexace obsahu a podobně).

Třetím úkolem je sestavení těla dokumentu – jednotlivé objekty poskládat na časovou osu. Naše prezentace není nijak složitá a tak postačí vše uzavřít do jednoho prvku pa a všechny prvky se přehrají hezky popořádku:

Prvek animateMotion vytváří plynulý posun ze souřadnic daných atributem „from“ na souřadnice dané atributem „to“. U každého objektu je třeba určit atribut „region“, kterým je určena vyhrazená plocha objektu, a dále atributy „begin“ a „dur“ – zde budete muset trochu počítat, aby vše vycházelo tak, jak má. Uvnitř prvku par určují atributy „begin“ čas od začátku časové osy, přičemž platí pravidlo, že pokud mají dva objekty stejný součet atributů „begin“ a „dur“, zmizí současně. Prezentace ve SMILu je tímto úspěšně dokončena.

Prezentace v HTML+TIME

Tvorba prezentace v HTML+TIME se moc neliší od vytvoření stránky v XHTML. Ve stylopisu nesmíte zapomenout na prvky jazyka SMIL:

t\:*{behavior:url(#default#time2);position:absolute}
.time{behavior:url(#default#time2);position:absolute}

Jak vytvoříte stylopis je jen a jen na vás, pouze doporučuji doplnit všem animovaným textovým prvkům vlastnost „width“ (šířku), jinak může dojít k nepříjemnému skákání textu v průběhu animace (plocha jim vyhrazená se zvětšuje nebo naopak zmenšuje) a nastavit absolutní pozici (aby s nimi bylo možné hýbat).

Hlavním úkolem je transformovat tělo SMIL prezentace do HTML+TIME. Zde je třeba dodržet několik pravidel – označit jmennou prostorou všechny prvky SMILu (například <t:par>) a prvkům (X)HTML, které budou mít něco společného s prezentací, nastavit třídu time. Pokud toto dodržíte, máte skoro vyhráno. Poslední záludnost je spojena s animací (X)HTML prvků, například animace nadpisu vypadá následovně:

<h2 begin=“2s“ id=“nadpis“ class=“time“ dur=“9″>Základní informace:</h2>
<t:animateMotion targetElement=“nadpis“ begin=“2s“ dur=“1s“ fill=“hold“ from=“600,80″ to=“120,80″ />

Rozdíl oproti SMILu je patrný, animace není uvnitř elementu h2, naopak je umístěna mimo něj a je třeba ji doplnit atributem „begin“ (se stejnou hodnotou jako u nadpisu), aby se mohla k nadpisu připojit. To by bylo vše k teorii, zde je překlad:

<!DOCTYPE HTML PUBLIC „-//W3C//DTD HTML 4.01 Transitional//EN“>
<html>
<head>
   <xml:namespace prefix=“t“/>
   <meta http-equiv=“content-type“ content=“text/html; charset=windows-1250″ />
   <meta http-equiv=“Content-language“ content=“cs“ />
   <title>SMIL Prezentace</title>
   <style type=“text/css“ media=“all“>
   t\:*{behavior:url(#default#time2);position:absolute}
   .time{behavior:url(#default#time2);position:absolute}
   #prezentace{
   position:absolute;left:160px;top:100px;
   border:1px solid #ff8000;
   width:500px;
   height:300px;
   text-aling:center;
   font-family:Verdana;
   font-size:1em;
   color:#8ca3fd
   }
   h2{
   font-size:1.1em;
   font-weight:normal;
   color:#7d7dff
   }
   #list1,#list2,#list3,#list4{
   width:300px;
   }
   a:link{
   color:#7d7dff;
   }
   a:hover{
   color:#b9b9b9;
   }
   a:visited{
   color:#7d7dff
   }
   </style>
</head>
<body>
<div id=“prezentace“>
<par begin=“0″>
   <t:img src=“smil-logo.gif“ id=“logo“ dur=“24.5s“ alt=“SMIL logo“ />
   <t:animateMotion targetElement=“logo“ dur=“1.5s“ fill=“hold“ from=“30,-100″ to=“30,20″ />
   <t:animateMotion targetElement=“logo“ begin=“23s“ dur=“1.5s“ to=“0,-100″ />
</par>
<par id=“prvni“>
   <h2 begin=“2s“ id=“nadpis“ class=“time“ dur=“9″>Základní informace:</h2>
   <t:animateMotion targetElement=“nadpis“ begin=“2s“ dur=“1s“ fill=“hold“ from=“600,80″ to=“120,80″ />
   <span begin=“3.5s“ id=“list1″ class=“time“ dur=“7.5″>Jazyk SMIL umožňuje tvorbu multimediálních prezentací</span>
   <t:animateMotion targetElement=“list1″ begin=“3.5s“ dur=“2s“ fill=“hold“ from=“600,120″ to=“140,120″ />
   <span begin=“5s“ id=“list2″ class=“time“ dur=“6″>Podpora SMILu je zajištěna v multimediálních přehrávačích Apple Quick Time Player a Real Player</span>
   <t:animateMotion targetElement=“list2″ begin=“5s“ dur=“2s“ fill=“hold“ from=“600,175″ to=“140,175″ />
</par>
<par id=“druha“>
   <h2 id=“nadpis2″ begin=“12″ class=“time“ dur=“9″>Možnosti SMILu:</h2>
   <t:animateMotion targetElement=“nadpis2″ begin=“12″ dur=“1s“ fill=“hold“ from=“600,80″ to=“120,80″ />
   <span id=“list3″ begin=“13.5″ class=“time“ dur=“7.5″>SMIL 1.0 umožňuje zobrazování multimediálních objektů na časové ose a jejich synchronizaci</span>
   <t:animateMotion targetElement=“list3″ begin=“13.5″ dur=“2s“ fill=“hold“ from=“600,120″ to=“140,120″ />
   <span id=“list4″ begin=“15s“ class=“time“ dur=“6″>SMIL 2.0 rozšiřuje možnosti SMILu 1.0 zejména o animační prvky</span>
   <t:animateMotion targetElement=“list4″ begin=“15s“ dur=“2s“ fill=“hold“ from=“600,190″ to=“140,190″ />
</par>
<par id=“treti“>
   <h2 id=“nadpis3″ begin=“25s“ class=“time“ dur=“4s“>Více na <a href=“http://www.w3.org“>http://www.w3.org</a></h2>
   <t:animateMotion targetElement=“nadpis3″ begin=“25s“ dur=“1s“ fill=“hold“ from=“600,80″ to=“120,80″ />
</par>
</div>
</body
</html>

Neexisuje žádný návod, jak automaticky převést prezentaci ve SMILu do HTML+TIME. Vždy musíte vzít v úvahu rozdíly mezi SMILem a HTML+TIME, které jsou dané různým přístupem, protože SMIL obsahuje celkem samozřejmě nesémantické informace (velikosti, polohy, barvy, regiony a další) a ty je nutno nahradit pomocí CSS. SMIL pracuje s textem jako s objektem, proto musíte prvky text nahradit normálním textem a značkami. Časovou osu naštěstí nemusíte nijak radikálně měnit, časy zůstanou stejné, rovněž použití prvků par a seq (v podobě t:par a t:seq) se nemění, stačí pouze nastavit třídu time (.time{behavior:url(#default#time2);position:absolute}) a vyřešit animace (přidat atribut „begin“ nebo je spolu s prvkem uzavřít do třetího prvku).

Budoucnost SMIL

Nezbývá než doufat, že se brzy objeví podpora SMILu v klasických internetových prohlížečích (jen si zkuste udělat tuto prezentaci v JavaScriptu, jde to, ale „chvilku“ to trvá). Naše série o SMILu a všech jeho možných podobách tímto článkem oficiálně končí. Pakliže máte nějaké dotazy nebo náměty k tématu, neváhejte se vyjádřit v komentářích.