Interval.cz

SMIL - tvorba prezentace v praxi

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:

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:

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:

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:

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∞:

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:

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.

Vyhledßvßnφ