Synchronized Multimedia Integration Language (SMIL)

Janne Korhonen

LuK-tutkielma 1.10.2001

Jyväskylän yliopisto

Tietotekniikan laitos

Tekijä: Janne Korhonen.

Yhteystiedot: Sähköposti jankorho@st.jyu.fi ja puh. 050-5280928.

Työn nimi: Synchronized Multimedia Integration Language (SMIL).

Sivumäärä: 22

Linja: Ohjelmistotekniikka.

Teettäjä: Jyväskylän yliopisto, tietotekniikan laitos.

Tiivistelmä: Tutkielmassa kuvataan multimediaelementtien yhdistelyä Synchronized Multimedia Integration Language-kielellä (SMIL). SMIL-esitys on niin sanottu synkronoitu multimediaesitys, joka voi koostua kuvista, tekstistä, videoista ja äänestä. SMIL on W3C:n määrittelemä, hyvin paljon HTML:ää muistuttava määrittelykieli. SMIL-dokumentti koostuu tunnisteista ja niiden sisällä olevista määreistä.

Avainsanat: SMIL, multimedia, tunniste, määre, rakenteiset dokumentit.

Keywords: SMIL, multimedia, structured documents.

Sisällys

1. Johdanto

Synchronized Multimedia Integration Language (SMIL) on rakenteinen määrittelykieli multimediatiedostoista koostuvien esitysten muodostamiseen. Nämä multimediatiedostot voivat olla esimerkiksi kuvaa, ääntä, videota tai tekstiä.

1990-luvun puolessa välissä alkoi useissa yhteyksissä esiintyä tarvetta juuri SMILin kaltaiselle määrittelykielelle. Tärkeimpinä ominaisuuksina kielellä tuli olla helposti hallittava syntaksi ja riippumattomuus multimedian elementtitiedostojen sijainnista. Tällöin elementtien ei tarvitsisi sijaita samalla koneella, ja niitä voitaisiin käyttää verkon yli. Useita WWW-standardeja kehittänyt organisaatio nimeltä W3C ottikin tehtäväkseen kehittää juuri kyseiseen tarpeeseen sopivan työkalun. Ensimmäinen versio kielestä julkaistiin vuoden 1997 marraskuussa. Tämän jälkeen versioita on ilmestynyt useita, mutta toki kehitystyö on edelleen kesken.

SMIL on erittäin kelvollinen työkalu useiden mutimedian elementtitiedostojen integrointiin yhdeksi esitykseksi. Sen käyttökelpoisuutta puoltaa mm. kielen syntaksin helppous. Jos HTML on esityksen luojalle tuttu, on SMILkin helposti hallittavissa. Myös työkalut niin esityksen luontiin kuin katsomiseenkin ovat erittäin helposti saatavilla. SMIL-dokumentin luonti onnistuu helpoimmillaan tavallisella tekstieditorilla ja katselu onnistuu useallakin Internetistä ilmaiseksi saatavalla ohjelmalla.

Tutkielman toisessa luvussa kerrotaan SMIListä ja sen kehittäjästä W3C:stä yleisesti. Kolmannessa luvussa kuvataan SMILin syntaksin perusrakenne, eli kolme ylimmän tason tunnistetta. Luvussa 4 kerrotaan multimedian koon ja paikan asettelusta ruudulla ja luvussa 5 itse esityksen sisällön luonnista ja sen sisäisistä ajoituksista. Kuudennessa luvussa kuvataan muita SMILin tärkeitä tunnisteita ja kerrotaan niiden käytöstä.

2. Mikä on SMIL?

Synchronized Multimedia Integration Language (SMIL) on WWW-ympäristöön kehitetty multimediaesitysten määrittelykieli. SMILin avulla voidaan luoda yhdistettyjä ja synkronisoituja multimediaesityksiä, jotka voivat koostua eri elementtityypeistä, kuten kuvasta, äänestä, tekstistä, animaatiosta ja mahdollisista videotallenteista. SMIL (äännetään kuten "smile") pohjautuu määrittelyltään XML:ään ja on ulkonäöltään hyvin samanlainen kuin HTML. Luku perustuu lähteeseen [6].

2.1. World Wide Web Consortium eli W3C

World Wide Web Consortiumin eli W3C:n perusti vuonna 1994 Tim Bernerss-Lee Massachusetts Institute of Technologystä. Organisaatio perustettiin luomaan standardeja ja protokollia alati laajenevaan World Wide Webiin. Nykyään W3C:llä on yli 500 jäsenyritystä ympäri maailman ja se onkin saavuttanut suuren luottamuksen ja arvostuksen kehitettyään useita tärkeitä WWW-standardeja.

W3C pitää nykyään pitemmän ajan tavoitteenaan kolmea eri seikkaa :

Näiden tavoitteiden pohjalta W3C onkin luonut jo yli kaksikymmentä yleisessä käytössä olevaa standardia ja protokollaa WWW:n käyttöön. Tärkeimpiä ja yleisimmin käytettyjä W3C:n luomia standardeja ovat mm. HTML, CSS, XML ja RDF. Multimedian käsittelyyn W3C on kehittänyt XML-pohjaisen SMIL-kielen, jota tässä tutkielmassa käsitellään.

2.2. SMILin historia ja eri versiot

SMILin historia ulottuu aina vuoteen 1995. Tuolloin erilaisissa tietotekniikan alan konferensseissa ja muissa vastaavissa tapahtumissa ilmaistiin tarve kielelle, jolla voisi yhdistää niin kuvaa, videota kuin tekstiäkin. SMIL-kielen ensimmäinen versio julkistettiin kuitenkin vasta vuonna 1997. Tämän jälkeen versioita on tullut useita lisää. Myös työkaluja SMIL-dokumenttien esittämiseen ja laatimiseen on nykyään saatavilla runsaasti.

Taulukossa 1 on kuvattu SMILin elinkaaren tärkeimmät vaiheet.

Ajankohta

Tapahtuma

Marraskuu 1997

W3C:n julkaisema ensimmäinen SMILin versio saatavilla.

Helmikuu 1998

Toinen SMILin versio saatavilla.

Kesäkuu 1998

W3C julkaisee SMIListä version 1.0.

Heinäkuu 1998

CWI ja REAL julkaisevat omat SMIL-implementaationsa.

Elokuu 1999

W3C julkaisee nk. Boston-version SMILista.

Maaliskuu 2001

W3C julkaisee SMIListä version 2.0.

Taulukko 1. SMILin tärkeimmät vaiheet.

2.3. Käyttötilanteet ja hyöty

SMIL-määrittelykieli on siis tarkoitettu multimediaesitysten kokoamiseen ja synkronointiin WWW-sivuilla. Yksi SMILin tärkeimmistä ominaisuuksista on kielen helppous. SMILin määrittelyt ovat hyvin HTML:n (Hypertext Markup Language) kaltaisia. Jos siis HTML on käyttäjälle ennestään tuttu, on silloin myös SMIL erittäin helppo oppia.

Eräs SMILin hyödyllisimmistä ominaisuuksista on elementtien fyysisen sijainnin vapaus. Tämä tarkoittaa sitä, että esityksessä käytettävien multimediatiedostojen ei tarvitse sijaita samalla koneella, jossa itse esitys sijaitsee. Olinpaikka tiedostoille määritetään URL:n (Uniform Resource Locator) avulla. SMIL-esitykseen voikin integroida mitä tahansa olemassaolevia multimedian elementtien formaatteja, mikäli vain SMIL-dokumenttia esittävä ohjelma ymmärtää niitä.

Myös SMILin laitteistovaatimukset vastaanottajalle ovat muihin multimedian yhdistelytyökaluihin (mm. Flash ja Director) verrattuna pienet. Tämä johtuu suurimmalta osaltaan siitä, että SMIL osaa tunnistaa mm. käytettävän puhelin- tai verkkoliittymän nopeuden ja mukauttaa esitystä sen mukaan. Ainakin vielä tänä päivänä tämä on erittäin hyödyllinen ominaisuus johtuen suurista eroista siirtonopeuksissa ja kaistanleveyksissä. SMIL-esitys voi tarjota käyttäjälleen myös useamman kielivaihtoehdon (mm. videon tekstitykseen).

Etuna SMILissä on myös SMIL-dokumentin laatimisessa käytettävän työkalun helppous ja saatavuus. Kuten HTML:ää, SMILia voi kirjoittaa yksinkertaisella tekstieditorilla, joka kuuluu jokaisen käyttöjärjestelmän vakio-ohjelmistoon.

SMIL-esityksiä on erittäin helppo tuottaa ja myös jakelu on vaivatonta verkon välityksellä. Tulevaisuudessa kuka tahansa voi tuottaa television kaltaista esitystä ja esittää tätä WWW:n kautta. SMILillä saadaan esityksiin myös interaktiivisuutta. Katsojalle voidaan esityksen aikana tarjota linkkejä esitykseen liittyville sivuille, kuten esimerkiksi näyttelijöiden kotisivuille. Myös kaistankäyttö on SMILissä tehokasta. Kaistan käytön tehokkuus ilmenee mm. siinä, että samaa kuvaa ei tarvitse lähettää useaan kertaan (esimerkiksi uutisstudion taustakuva).

2.4. SMIL-dokumenttien muokkaustyökalut ja oppaat

SMIL-dokumentin luonti onnistuu yksinkertaisimmillaan normaalilla tekstieditorilla. Toki SMIL-dokumentin luontiin tarkoitettuja editoreitakin on olemassa. Näillä dokumentin luonti on erittäin yksinkertaista, koska dokumentin runko tulee editorilta automaattisesti. Editoreita löytyy esimerkiksi SmilMedian (URL http://www.smilmedia.com) ja Oratrixin

(URL http://www.oratrix.com/GRiNS) ohjelmistoista.

Verkosta löytyy useita SMIL-dokumenttien tekoon tarkoitettuja erittäin käyttökelpoisia oppaita. Näiden avulla kielen oppii erittäin helposti, vaikka kokemusta esim. HTML:n tai XML:n käytöstä ei olisikaan. Perustiedot SMIListä antava opas löytyy esimerkiksi URL-osoitteesta

http://www.helio.org/products/smil/tutorial. Myös URL-osoitteesta http://www.service.real.com/help/library/guides/

production/htmfiles/smil.htm#100023 löytyy SMILin luontiin käyttökelpoinen opas.

2.5. SMIL-dokumenttien esitysohjelmat

Yleisimmin käytetyt ohjelmat SMIL-esitysten katseluun ovat RealPlayer RealNetWorksilta

(URL http://www.real.com) ja QuickTime Applelta

(URL http://www.apple.com/quicktime/authoring/qtsmil.html). Nämä ovat muodostuneet yleisimmiksi jo senkin takia, että ne ovat saatavilla ilmaiseksi Internetistä.

Selaimet eivät nykyisellään vielä tue SMILiä, mutta esimerkiksi Internet Explorerin seuraavalla versiolla (tällä hetkellä beta-vaiheessa) dokumenttien katselu lienee mahdollista. Myös Netscapen seuraavan version odotetaan tukevan SMILiä.

Tällä hetkellä SMILin versiota 2.0 tukevat ainakin seuraavat ohjelmat:

sekä versiota 1.0

3. SMILin syntaksin perusrakenne

Luvussa kuvataan SMILin syntaksin perusrakennetta, johon sisältyy mm. kolme ylimmän tason tunnistetta eli <smil>, <head> ja <body>. Luku perustuu lähteeseen [4, luku SMIL General rules].

3.1. Yleistä syntaksista

Rakenteeltaan ja ulkonäöltään SMIL-dokumentti on siis hyvin samankaltainen kuin HTML (katso liite). Myöskään dokumenttien laatimiseen ei tarvita muuta kuin tavallinen tekstieditori.

Samankaltaisen kielen SMIListä HTML:n kanssa tekee sen perustuminen tunnisteiden (engl. tag) käyttöön. Tunnisteita on eritasoisia (eli tunniste voi sisältää lisää tunnisteita) ja jokainen sisältää määrätyt osat dokumentin halutusta sisällöstä.

Tunnisteet kirjoitetaan aina <tunniste> -määritteen sisään. Erona HTML:ään SMIL erottaa keskenään isot ja pienet kirjaimet (engl. case sensitive). SMIL-dokumentissa tunnisteet tuleekin kirjoittaa pienin kirjaimin. Erona HTML:ään on myös se, että SMILissä tunniste vaatii toimiakseen aina myös tunnisteen päättävän parin, tyyliin <tunniste>... </tunniste>. Näinhän ei jokaisen tunnisteen tapauksessa HTML:ssä ole.

Seuraavassa esimerkissä on kuvattu kolmen tärkeimmän tunnisteen käyttö ja niiden suhteet toisiinsa.

Esimerkki 1. SMIL-dokumentin perusrakenne.

<smil>
   <head>
      <! head-tunnisteen sisään tulevat osat. -->
   </head>
   
   <body>
      <! body-tunnisteen sisään tulevat osat. -->
   </body>
</smil>

Ylimmän tason tunniste SMIL-dokumentissa on siis <smil> (vertaa HTML:ssä <html>). Tämä tunniste ilmoittaa dokumentin olevan SMIL-dokumentti. <smil>-tunniste jakautuu kahteen alaosioon: <head> ja <body>. Kommentit SMIL-syntaksissa kirjoitetaan esimerkissä 1 kuvatulla tavalla merkkien <! ja --> väliin.

HTML- ja samoin myös SMIL-kielessä itse informaatio sijaitsee tunnisteiden sisällä nk. määreissä (engl. attribute). Jokaisella tunnisteella on omat määreensä ja jokaisella määreellä siis tarkkaan määritelty tehtävä SMIL-esityksessä.

Esimerkissä 2 <region>-tunniste sisältää viisi eri määrettä: id, top, left, width ja height. Näillä on määritelty mm. esityksessä käytetyn ikkunan koko (katso tarkempi kuvaus luvusta 4.2).

Esimerkki 2. Tunnisteen <region> sisällä olevat määreet.

<smil>
   <head>
       <layout>
            <region id="smile" top="200" left="100"               
                    width="100" height="220" />   
       </layout>
   </head>
</smil>

3.2. Tunnisteet head ja body

SMIL-dokumentti jakautuu <smil>-tunnisteen sisällä kahteen samanarvoiseen tunnisteeseen: <head> ja <body>. Tunniste <head> pitää sisällään informaation esityksen ulkonäöstä ja esityksen sisältämien osioiden sijainnista.

Tärkein <head>-osion sisältämä tunniste on <layout>. Sen sisällä määritellään ikkunan koko, esityksessä käytettävät värit sekä tunnistenimet, jolla kyseinen tyyli saadaan käyttöön myöhemmässä vaiheessa <body>-tunnisteen sisällä.

<body>-tunnisteen sisällä määritellään dokumentin lähdetiedostot ja tieto siitä, missä ja kuinka kauan kyseiset tiedostot esityksessä näkyvät. <body>-osio jakautuu esityksen ajoituksen mukaan kahteen alatunnisteeseen: <seq> ja <par> (katso tarkempi kuvaus luvuista 5.2 ja 5.3). <seq>-tunnisteen sisällä määritellyt lähteet esitetään peräkkäin (engl. sequence) ja <par>-tunnisteen sisällä yhtäaikaa (engl. parallel).

Esimerkki 3. <head>- ja <body>-tunnisteiden rakenne.

<smil>
    <head>
        <layout>
           <! Tiedot mm. ikkunan koosta, väreistä ja 
              tunnisteista. -->   
        </layout>
    </head>  
        <body>
        <seq>
           <! Peräkkäin esitettävät multimediaelementit. -->   
        </seq>
               <! tai --> 
        <par>
           <! Samanaikaisesti esitettävät multimediaelementit.  
                -->
        </par>
     </body>  
</smil>

4. Multimedian asettelu SMILissä

Luvussa kuvataan haluttujen multimediaosioiden asettelua ruudulla ja niiden käyttöönottoa. Kyseinen informaatio sijaitsee tunnisteen <layout> sisällä.

<layout>-tunniste jakautuu kahteen alatunnisteeseen, <root-layout> ja <region>. Näissä multimediaesitykselle määritellään ulkonäkö ja myöhemmin esityksen luonnissa käytettävät yksilöivät tyylien tunnukset. Luku perustuu lähteeseen [2, luku 3].

4.1. Esitysikkunan määrittely root-layout-tunnisteessa

<root-layout>-tunnisteessa määritellään koko ja taustaväri ikkunalle, jossa multimediaesitys tullaan näyttämään (katso esimerkki 4). Tunnisteen määreellä width määritellään ikkunan leveys ja määreellä height ikkunan korkeus. Ikkunan koko annetaan määreissä kokonaislukuina.

Taustaväri annetaan määreessä background-color siten, että arvoksi värille annetaan haluttu väri englannin kielellä.

Esimerkki 4. Tunnisteen <root-layout> sisältö.

<head>
  <layout>
    <root-layout width="150" height="400" 
     background-color="white"/>
  </layout>
</head>

4.2. Tyylien määrittely region-tunnisteessa

<region>-tunnisteessa määritellään esitystä myöhemmin rakennettaessa käytettävät "tyylit". Nämä tyylit sisältävät tiedon esimerkiksi kuvan sijainnista esitysikkunassa (määreet left ja top), kuvan koon (width ja height) ja myös kyseisestä tyylistä käytetyn lyhenteen (id).

Esimerkki 5. Tunnisteen <region> sisältö.

<head>
  <layout>
    <region id="style_abs" left="30" top="30" width="200" 
             height="200" z-index="2"/>
  </layout>
</head>

Määreessä id annetaan kyseiselle tyylille haluttu nimi, jolla myöhemmin tyyliä käytettäessä tämä tunnistetaan. Määreet left ja top määrittelevät multimedian (esimerkiksi kuvan) sijainnin ruudulla, joka määriteltiin tunnisteessa <root-layout> (katso luku 4.1). Annetut arvot määrittävät etäisyydet ruudun vasemmasta yläkulmasta siten, että left on etäisyys vasemmasta reunasta ja top on etäisyys yläreunasta. Tämä tapa määrittää tyylille ns. absoluuttisen (engl. absolute) paikan ruudulla.

Sijainti voidaan määritellä myös suhteellisesti (engl. relative, katso esimerkki 6). Tällöin kokonaislukujen sijasta arvoiksi määreille left ja top annetaan prosenttiarvot. Nämä prosenttiarvot kertovat prosentuaalisen etäisyyden ruudun vasemmasta ylänurkasta (vertaa absoluuttinen tapa). Tavat erotetaan toisistaan siten, että suhteellisessa määrittelyssä arvon perään laitetaan prosenttimerkki (%).

Esimerkki 6. Suhteellisen etäisyyden käyttö <region>-tunnisteessa.

  <layout>
    <region id="style_rel" left="30%" top="30%" width="200" 
              height="200" z-index="2"/>
  </layout>

Määreissä width ja height määritellään käytettävän multimedian koko esimerkin 6 määreiden osoittamassa paikassa. Näille määreille arvot annetaan kokonaislukuina, aivan kuin koko ruudun määrittelyssäkin, tunnisteessa <root-layout> (katso luku 4.1).

<region>-tunnisteessa on olemassa myös määre z-index (katso esimerkki 7). Määreessä kerrotaan useamman tyylin mennessä ruudulla päällekkäin kyseisten tyylien tärkeysjärjestys. Tällöin pienemmän arvon määreessä z-index omaava tyyli on aina sen tyylin päällä, jolla on isompi arvo tässä määreessä. Esimerkissä 7 tyylit region_bottom ja region_top tulevat osittain päällekkäin niitä kumpaakin käytettäessä. Koska region_topilla on pienempi arvo määreessä z-index, tulee se siis osittain tyylin region_bottom päälle.

Esimerkki 7. Määreen z-index käyttö.

<layout>
    <root-layout width="300" height="200" background-
             color="white"/>       
     <region id="region_bottom" left="50" top="50" width="150" 
             height="125" z-index="2"/>
    <region id="region_top" left="25" top="25" width="100" 
             height="100" z-index="1"/>
</layout>

Tunnisteessa <region> on mahdollisuus käyttää myös määrettä fit. Tämän määreen avulla voidaan multimedia sovittaa kyseiselle tyylille <root-layout>-tunnisteessa varattuun tilaan.

Arvoiksi tämä määre voi saada meet, slice tai scroll, joiden merkitys on seuraava:

meet -arvon ollessa asetettuna kasvatetaan esimerkiksi kuvaa, kunnes se kohtaa

tyylille region-tunnisteessa asetetuista reunoista joko alareunan tai oikean

reunan.

slice -arvon ollessa valittuna kasvatetaan esimerkiksi kuvaa niin suureksi, että se

peittää alleen koko tyylille varatun tilan. Tällöin mahdollisesti kuvasta joku

osa menee tyylin ulkopuolelle, eli ei jää näkyviin.

scroll -arvon ollessa asetettuna syntyy tyylin reunoille vierityspalkit, jolloin kuvan

koko ei muutu miksikään.

5. Esityksen luonti

Tutkielmassa on tähän mennessä käyty läpi esityksen asetteluun ja sen ulkonäköön vaikuttavia seikkoja. Nämä ominaisuudet määritellään SMIL-dokumentissa siis <head>-tunnisteen alla. Itse esityksen rakentuminen ja luonti tapahtuu toisen samantasoisen tunnisteen <body>n alla. Luvussa käydäänkin läpi itse esityksen sisällön rakentuminen. Luku perustuu lähteisiin [4] ja [6].

5.1. Elementtien sijainti ja attribuutit

Kukin elementti (multimediaa sisältävä tiedosto) sijoitetaan esitykseen sen muodosta riippuen omalla tunnisteellaan. Taulukossa 2 on kuvattu tunnisteet elementtien liittämiseksi esitykseen.

Tunniste

Tunnisteessa käytetty multimediatyyppi

animation

Animaatiot, esimerkiksi Shockwaven Flash-tiedostot (.swf).

audio

Äänitiedostot, esimerkiksi wav-tyyppiset tiedostot.

img

Kuvatiedostot, kuten jpg- ja gif-tyyppiset tiedostot.

ref

Tiedostotyypit, jotka eivät sovi mihinkään muuhun tunnisteeseen.

text

Normaalit tekstitiedostot eli txt-tyyppiset.

textstream

Realtext-tyyppiset tekstitiedostot, joiden pääte on rt.

video

Videotiedostot, joiden pääte on esimerkiksi mpg.

Taulukko 2. Tunnisteet multimediaelementtien liittämiseksi esitykseen.

Käytettävä tunniste riippuu siis käytettävän elementin sisällöstä. Yksinkertaisimmillaan SMIL-esityksen luonti tapahtuu siten, että suoraan <body>-tunnisteen alle laitetaan yksi edellä mainituista tunnisteista, ja tämän sisällä määritellään elementin lähde ja sen tyyli (katso esimerkki 8 ja liite).

Esimerkki 8. Yksinkertaisen SMIL-esityksen luonti.

<smil>
   <head>
      <layout>
         <root-layout width="500" height="500" 
               background-color="white" />
         <region id="testi_id" left="10%" top="10%" 
               width="100" height="100" />
      </layout>
   </head>
   <body>
      <img src="jalkapallo.gif" region="testi_id" />
   </body>
</smil>

Edellisessä esimerkissä on <root-layout>-tunnisteessa määritelty ruudun kooksi 500*500 pikseliä ja taustaväriksi valkoinen. <region>-tunnisteessa on luotu testi_id:ksi nimetty tyyli. <body>-tunnisteen sisällä <img>-tunnisteessa on määritelty käytettävälle kuvatiedostolle lähde määreessä src.

Lähde-elementtinä esityksessä voi olla tiedosto joko lokaalisti omalta tietokoneelta tai yli verkon WWW-palvelimelta. Lähteen määritys kummallakin tavalla on kuvattu esimerkissä 9. region-määreessä otetaan nyt käyttöön aiemmin <layout>-tunnisteen <region>-tunnisteessa määritelty tyyli.

Esimerkki 9. Lähdetiedoston käyttö joko verkon yli tai lokaalisti omalta koneelta.

<img src="http://www.yritys.fi/kuvat/logo.gif"/> 
<audio src="file://c:\audio\auto.rm" />

Yksittäisen multimediaelementin ollessa kyseessä on SMIL-kielessä mahdollista määrittää kyseiselle elementille ajoitus, esimerkin 10 kuvaamalla tavalla. Siinä määritellään kuva näkymään 15 sekunnin ajan määreessä dur ja kuvan näkymisen alkuajaksi asetetaan kolme sekuntia esityksen käynnistämisestä begin-määreessä.

Esimerkki 10. Yksittäisen elementin tapauksessa käytettävä ajoitus.

<body>
   <img src="jalkapallo.gif" 
    region="testi_id" dur="15s" begin="3s" />
</body>

5.2. Peräkkäin esitettävien elementtien ajoitus seq-tunnisteella

SMIL-kielessä on erittäin hyvät ominaisuudet ajoituksen käyttöön myös useamman multimedia-elementin tapauksessa. Ajoitusta useamman elementin kesken voi toki käyttää jo esimerkissä 10 kuvatuilla määreillä dur ja begin, mutta tähän tarkoitukseen on olemassa myös aivan sitä varten kehitetyt tunnisteet <par> ja <seq>. Näillä ajoituksen luonti on helppoa ja monimutkaisemmatkin esitykset ovat mahdollisia.

Sarjatunnisteen <seq> (engl. sequence) avulla saadaan helposti luotua esityksiä peräkkäisistä multimediaelementeistä (katso esimerkki 11).

Esimerkki 11. Tunnisteen <seq> käyttö.

<seq repeat="2">
 <video src="matsi.mov" region="peli_tyyli" dur="15min" />
 <img src="loppukuva.gif" region="loppu" 
        dur="10s" begin="1s" /> 
</seq>

Edellisessä esimerkissä näytetään ensiksi videotiedostosta matsi.mov 15 minuutin pituinen osa, jonka jälkeen siirrytään kuvaan loppukuva.gif kymmeneksi sekunniksi, sekunti videopätkän loppumisen jälkeen. <seq>-tunnisteen määreen repeat arvo 2 aiheuttaa kyseisen esityksen toistumisen kahdesti peräkkäin.

Taulukossa 3 on kuvattu <seq>-tunnisteessa käytettävät määreet.

Määre

Arvo

Tehtävä

begin

numero ja h, min, s, tai ms

Kyseisen elementin aloituksen viive edellisen elementin lopusta tai esityksen alusta.

dur

numero ja h, min, s, tai ms

Määrittää, kuinka kauan kyseistä elementtiä esitetään.

end

numero ja h, min, s, tai ms

Elementin loppuaika samaisen elementin alkuun nähden.

id

nimi

Tällä tunnisteella voit linkittää toisen SMIL-elementin käyttöön verkon ylitse.

repeat

numero

Kertoo, kuinka monta kertaa kyseinen elementti toistetaan.

system-bitrate

bittejä / sekunti

Käytettävän verkkoyhteyden nopeus, katso käyttö esimerkeistä 16 ja 17.

system-language

kielen tunnus

Käytettävä kieli, katso käyttö esimerkeistä 16 ja 17.

Taulukko 3. Tunnisteessa <seq> käytettävät määreet.

Esimerkin 11 tapaus toimisi samoin myös ilman <seq>-tunnistetta. <seq>-tunnistetta käytetäänkin useimmiten yhdessä <par>-tunnisteen kanssa, jolloin saadaan luotua monimutkaisiakin yhdistettyjä esityksiä. <par>-tunnisteen käyttö on kuvattu luvussa 5.3 sekä <seq>- ja <par>-tunnisteiden yhdistetty käyttö luvussa 5.4.

5.3. Yhtäaikaa esitettävien elementtien ajoitus par-tunnisteella

Tunnisteen <par> (rinnakkainen, engl.parallel) avulla luodaan samanaikaisesti useampia elementtejä näyttäviä esityksiä. Esimerkissä 12 näytetään kuvaa foto.gif alussa 6 sekuntia ja yhtäaikaa alkaa videopätkä salibandy.mpeg. Esitys loppuu pidemmän näistä esityksistä loputtua.

Esimerkki 12. Tunnisteen <par> käyttö.

<body>
  <par>
   <img src="foto.gif" region="kuva_tyyli" dur="6s" />
   <video src="salibandy.mpeg" region="video_tyyli" />
  </par>
 </body>

Oletuksena <par>-tunnisteessa on siis voimassa asetus, joka lopettaa kyseisen ryhmän näyttämisen vasta, kun pisin elementti (esimerkiksi video) ryhmästä on loppunut. Asetusta voi muuttaa määreellä endsync. Antamalla tälle esimerkiksi arvon first esitys lopetetaan, kun ensimmäinen elementti kyseisestä esityksestä on päättynyt.

Esimerkissä 13 on kuvattu id:n käyttöä endsync-määreessä. Esimerkin esityksessä "tekstivirran" pitka.rt ollessa pidempi kuin video lyhyt.rm toistettuna neljä kertaa, lopetetaan esitys kuitenkin jo lyhyt.rm:n neljännen esityskerran jälkeen.

Esimerkki 13. Määreen endsync käyttö.

<par endsync="id(vid)">
  <video id="vid" src="lyhyt.rm" repeat="4"/>
  <textstream src="pitka.rt"/>
</par>

Taulukossa 4 on kuvattu <par>-tunnisteessa käytettävät määreet.

Määre

Arvo

Toiminta

Abstract

tiivistelmä

Tiivistelmä esityksestä.

Author

nimi

Esityksen tekijä.

Begin

Kokonaisluku ja h, min, s, tai ms

Kyseisen elementin aloituksen viive edellisen elementin lopusta tai esityksen alusta.

Copyright

tekijänoikeustiedot

Esityksen tekijänoikeustiedot.

Dur

Kokonaisluku ja h, min, s, tai ms

Määrittää, kuinka kauan kyseistä elementtiä esitetään.

End

Kokonaisluku ja h, min, s, tai ms

Elementin esittämisen päättymisaika samaisen elementin alkuun nähden.

Endsync

first, last, id

Esityksen lopetusmääre, katso käyttö esimerkistä 13.

id

Elementin nimi

Ryhmä voidaan nimetä, jolloin siihen voidaan viitata muista SMIL-elementeistä.

repeat

numero

Kyseisen elementin toistokertojen määrä.

System-bitrate

bittejä / sekunti

Käytettävän verkkoyhteyden nopeus, katso käyttö esimerkeistä 16 ja 17.

System-language

kielen tunnus

Käytettävä kieli, katso käyttö esimerkeistä 16 ja 17.

title

otsikon nimi

Esityksen nimi.

Taulukko 4. Tunnisteessa <par> käytettävät määreet.

5.4. Tunnisteiden par ja seq yhteiskäyttö

Luvuissa 5.2 ja 5.3 käsiteltyjen tunnisteiden <par> ja <seq> yhteiskäyttö mahdollistaa monimutkaisemmatkin multimedian elementtien esitysrakenteet. Eräs tärkeimmistä ominaisuuksista näillä tunnisteilla on se, että ne kummatkin voivat olla toistensa ns. vanhempia. Tämä tarkoittaa sitä, että esimerkiksi tunniste <seq> voi pitää sisällään yhden tai useamman <par>-ryhmän, mutta myös <par>-tunniste voi sisältää yhden tai useamman <seq>-tunnisteparin.

Esimerkissä 14 video1.mpg näytetään ensiksi. Tämän loputtua aloitetaan videoiden video2.mpg ja video3.mpg esittäminen yhtäaikaa. Näiden molempien loputtua esitetään video4.mpg.

Esimerkki 14. Tunnisteiden <seq> ja <par> yhteiskäyttö.

<seq>
   <video src="video1.mpg"/>
    <par>
      <video src="video2.mpg"/>
      <video src="video3.mpg"/>
    </par>
    <video src="video4.mpg"/>
</seq>

Esimerkin 15 toiminta poikkeaa yllä olevan toiminnasta suuresti. Tähän esimerkkiin on siis edellisestä vain vaihdettu tunnisteiden <par> ja <seq> paikat. Esimerkin 15 toiminta on kuitenkin seuraavanlainen: elementit video1.mpg, video2.mpg ja video4.mpg alkavat samanaikaisesti. Kun video2.mpg on loppunut, alkaa video3.mpg.

Esimerkki 15. Toinen esimerkki tunnisteiden <seq> ja <par> yhteiskäytöstä.

<par>
    <video src="video1.mpg"/>
    <seq>
      <video src="video2.mpg"/>
      <video src="video3.mpg"/>
    </seq>
    <video src="video4.mpg"/>
</par>

Näiden kahden esimerkin lopputuloksesta huomataan tunnisteiden monimuotoisuus ja myös se, kuinka paljon niiden toiminnat eroavat toisistaan.

5.5. Käyttäjän asetusten ja resurssien huomioiminen switch-tunnisteella

SMIL-esityksissä on myös mahdollisuus tietynlaiseen interaktiivisuuteen. <switch>-tunnisteen avulla voidaan määritellä eri kielivaihtoehtoja esim. käyttäjän tietokoneen kieliasetusten mukaan, tai käyttäjälle voidaan tarjota erilaatuiset esitykset riippuen kaistanleveydestä. Myös näytön resoluutio voidaan ottaa huomioon esityksen laatua valittaessa. Esimerkissä 16 otetaan huomioon käyttäjän kieli, ruudun koko ja kaistanleveys.

Esimerkki 16. <switch>-tunnisteen käyttö.

<body>
  <switch>
<!-- suomen kielinen -->
   <par system-language="fin">
     <text src="tekstitys.txt" />     
    <!-- ruudun koon testaus -->
     <switch>
        <text src="800_600_fin.txt" region="koko" 
           system-screen-size="800X600" />
        <text src="1024_768_fin.txt" region="koko"
           system-screen-size="1024X768" />
        <text src="muu_koko_fin.txt" region="koko"/>
     </switch>
    
    <!-- kaistanleveyden testaus -->
     <switch>
        <text src="14000bps_fin.txt" region="kaista"
           system-bitrate="14000" />
        <text src="28000bps_fin.txt" region="kaista"
           system-bitrate="28000" />
        <text src="muu_kaista_fin.txt" region="kaista"/>
     </switch>
   </par>
<!-- englannin kielinen -->
   <par system-language="en">
     <text src="subtitles.txt" />
    <!-- ruudun koon testaus -->
     <switch>
       <text src="800_600_en.txt"
           system-screen-size="800X600" region="koko" />
       <text src="1024_768_en.txt"
           system-screen-size="1024X768" region="koko" />
       <text src="another_size_en.txt" region="koko" />
     </switch>
    
    <!-- kaistanleveyden testaus -->
     <switch>
       <text src="14000bps_en.txt" region="kaista"
           system-bitrate="14000" />
       <text src="28000bps_en.txt" region="kaista"                    
           system-bitrate="28000" />
       <text src="another_bitrate_en.txt" region="kaista"/>
    </switch>
   </par>
  </switch>
 </body>

<switch>-tunniste toimii esimerkissä 16 siis siten, että ensiksi valitaan kieli. Jos asetuskielenä käyttäjällä on suomi, niin valitaan kahdesta valittavasta ominaisuudesta koko ja kaista suomenkieliset versiot. Nämä siis valitaan rivin <text src="tekstitys.txt" /> alla olevista kahdesta <switch>-tunnisteen muodostamasta kokonaisuudesta. Kummastakin valitaan sopiva vaihtoehto, jotka sitten näytetään niille vastaavassa tyylissä (joko koko tai kaista) määrätyssä paikassa (katso tyylin määritys luvusta 4.2).

<switch>- tunnisteessa on mahdollista myös sijoittaa useampia valittavia ominaisuuksia saman tunnisteen alle. Tällöin itse koodia saadaan hieman lyhyemmäksi mutta selkeys tosin hieman kärsii (katso esimerkki 17).

Esimerkki 17. <switch>-tunnisteen lyhyempi versio.

<switch> 
<!-- suomenkielinen ja kaistanleveys yli 14000kbps -->
  <text src="suomi_14.txt" system-language="fin" system- bitrate="14000" />
<!-- suomenkielinen ja kaistanleveys yli 28000kbps --> 
  <text src="suomi_28.txt" system-language="fin" system-bitrate="28000" /> 
<!-- englanninkielinen ja kaistanleveys yli 14000kbps --> 
  <text src="englanti_14.txt" system-language="en" system-bitrate="28000" /> 
<!-- englanninkielinen ja kaistanleveys yli 28000kbps --> 
  <text src="englanti_28000.txt" system-language="en" system-bitrate="14000" />
 
</switch>

Edellisessä esimerkissä joudutaan myös kieli tarkistamaan joka vertailukerralla, mutta hidastumista ei huomaa ainakaan näin pienissä SMIL-pätkissä.

6. Muita tunnisteita ja parametreja

Luvussa kuvataan muutamaa edellisiin lukuihin soveltumatonta, mutta yleisesti SMIL-dokumenttien teossa käytettyä tunnistetta. Luku perustuu lähteeseen [4].

6.1. Tunnistetietojen lisääminen meta-tunnisteella

SMIL-dokumenttiin lisätään esityksestä tarvittava informaatio <meta>-tunnisteen avulla. Haluttuja tietoja esityksestä voivat olla mm. esityksen luoja, tekijänoikeudet tai tekijän yhteystiedot.

Esimerkki 18. Tunnistetietojen lisääminen.

<head>
  <meta name="title" content="LuK-tutkielma"/>
  <meta name="author" content="Janne Korhonen"/>
  <meta name="copyright" content="(c)2001 Janne Korhonen"/>
  <meta name="abstract" content="Tutkielma SMIL-kielestä"/>
  <meta name="email" content="jankorho@st.jyu.fi"/>
</head>

<head>-tunnisteen sisällä olevan metatiedon esityksen katsoja saa käyttöönsä valitsemalla SMILin esitystyökalusta komennon Help-valikon komennon About this Presentation. Tällöin käyttäjälle avautuu erillinen ikkuna, jossa kyseiset tiedot on lueteltu.

Esitykselle voidaan tarvittaessa luoda myös omia metatietomääreitä. Jos käyttäjälle halutaan esimerkiksi antaa esityksen tekijän sähköpostiosoite, luodaan esimerkin 18 mukaisesti määre email, jonka perään content-määreeseen arvoksi laitetaan itse sähköpostiosoite. Tämä tieto näkyy edellisten kanssa samalla tavalla About-dialogissa. Esimerkissä 18 neljä ylintä määrettä ovat SMILin valmiita <meta>-tunnisteen määreitä.

6.2. Linkkien lisääminen esitykseen tunnisteilla a ja anchor

Kuten HTML:ssä, myös SMILissä voidaan luoda hyperlinkkejä esimerkiksi halutuille WWW-sivuille. Hyperlinkkejä voidaan luodaan joko tunnisteella <a> tai <anchor>.

Tunniste <a>toimii kuten vastaava tunniste hyperlinkkejä HTML:llä luotaessa. Esimerkissä 19 esitetään klippi.mpeg -niminen video, jota painamalla avautuu WWW:stä sivu http://www.jyu.fi.

Esimerkki 19. Tunnisteen <a> käyttö.

<a href="http://www.jyu.fi" show="new">   
    <video src="klippi.mpeg" region="basic_region"/>
</a>

Tunnisteessa <a> on käytettävissä esimerkissä 19 esitetyt määreet href ja show. Määreessä href määrätään hyperlinkin kohde ja määreessä show määritetään, missä ja miten kyseinen hyperlinkki avataan.

show voi saada arvot new, pause tai replace. Esimerkissä 19 käytetty new avaa sivun oletusselaimeen, jolloin myös SMIL-dokumentin esitys jatkuu. Arvolla pause avataan samoin oletusselain, mutta nyt SMIL-dokumentin esitys keskeytyy. Oletusarvona määreellä oleva replace avaa sivun samassa ohjelmassa, jossa SMIL-dokumenttia on katsottu.

Tunniste <anchor> on tunnisteen <a> kehittyneempi versio. Tätä käytettäessä hyperlinkki voidaan määrittää näkymään tietyn aikaa, samaan elementtiin voidaan liittää useampi linkki ja hyperlinkin sijaintiinkin ruudulla voidaan vaikuttaa. Erona tunnisteen <a> käyttöön on myös se, että <anchor>-tunniste sijoitetaan elementtitunnisteen (esimerkeissä 19 ja 20 <video>) sisälle, päinvastoin kuin <a>, joka pitää siis sisällään yhden elementtitunnisteen (vertaa esimerkkien 19 ja 20 eroa <video>-tunnisteen osalta).

      Esimerkissä 20 saa ensimmäisen viiden sekunnin aikana ruutua klikkaamalla auki sivun http://www.cc.jyu.fi/~jankorho. Tämän jälkeen ruudulle avautuu linkki sivulle

http://www.mit.jyu.fi/santanen. Tämä linkki on auki, kun esityksen alusta on kulunut viisi sekuntia aina 45 sekuntiin saakka.

Esimerkki 20. Tunnisteen <anchor> käyttö.

<video src="klippi.mpeg">

<anchor href="http://www.cc.jyu.fi/~jankorho" begin="0s"  
        end="5s"/>
<anchor href="http://www.mit.jyu.fi/santanen" 
        coords="10,20,30,50" begin="5s" end="45s"/>
</video>

Määreessä coords määritellään hyperlinkin koko. Linkki on muodoltaan neliö, ja sen koko määräytyy määreessä olevien neljän arvon mukaan. Ensimmäinen arvo kertoo pikseleinä linkin vasemman reunan eron ruudun vasemmasta reunasta, toinen yläreunan eron vastaavasti ruudun yläreunasta. Kolmas arvo määrittää linkkineliölle oikean reunan ja neljäs alareunan paikan. Esimerkissä 20 koko on määritelty vain jälkimmäisenä näytettävälle linkille.

Taulukossa 5 on kuvattu tunnisteen <anchor> sisältämät määreet ja niiden toiminta.

Määre

Arvo

Toiminta

begin

Lukuarvo ja h, min, s, tai ms

Määrittää, milloin hyperlinkki tulee aktiiviseksi.

coords

pikseli tai prosentti (%)

Määrittää hyperlinkin etäisyyden SMIL-dokumenttia esittävän ruudun reunoista järjestyksessä vasen-, ylä-, oikea- ja alareuna.

end

Lukuarvo ja h, min, s, tai ms

Määrittää, milloin hyperlinkki ei ole enää aktiivinen.

href

URL

Määrittää hyperlinkin kohteen.

id

Linkin nimi

Määrittää linkille nimen, joka näkyy ruudun alapalkissa.

show

  • new
  • pause
  • replace (oletus)
  • - new avaa sivun oletusselaimeen, ja SMIL-dokumentin esitys jatkuu.
  • pause avaa samoin oletusselaimen, mutta SMIL-dokumentin esitys keskeytyy.
  • replace avaa sivun samassa työkalussa, jossa SMIL-dokumenttia on katsottu.

Taulukko 5. Tunnisteen <anchor> sisältämät määreet.

7. Yhteenveto

Vaikka kohu SMILin ympärillä ennen sen ensimmäisen version julkaisua oli suuri, ei se ole vielä pystynyt kasvattamaan asemaansa aivan W3C:n kuvittelemalle tasolle. Kehitys SMILillä on kuitenkin ollut johdonmukaista, joten tulevaisuudessa työkalujen lisääntyessä ja myös tarpeen kasvaessa on siitä lupa odottaa kasvavaa multimedian esitystapaa. Eniten SMILin käytön oletetaan lisääntyvän sitten, kun yleisimmistä WWW-selaimista löytyy sille tuki.

SMILillä on siis jo nykyisellään mahdollisuuksia tulla erittäin varteenotettavaksi työkaluksi multimedian luontiin. Multimediassa on kuitenkin jo pitkään ollut ongelmana lukuisat eri tiedostotyypit ja näiden yhteensovittaminen. Varsinkin esitysohjelmien tekijöille eri tiedostotyypit ovat tähän asti olleet ylitsepääsemätön este. Suuri haaste SMILin luojille olisikin kehittää esitysohjelma, joka kykenisi esittämään suurimman osan olemassaolevista multimediatiedostotyypeistä. Tällöin viimeistään SMILillä olisi potentiaalia tulla yleiseksi apuvälineeksi esimerkiksi työpaikoille tai opiskelijoille demonstraatioiden ja esitelmien luontiin.

Itse valitsin SMILin tutkielman aiheeksi jo paljoltikin siitä syystä, että syntaksi on tullut erittäin tutuksi HTML:n ja XML:n käytön myötä. Tutkielmaa tehdessä ja useita SMIL-testidokumentteja luodessa kielestä jäi juuri mieleen sen käytön helppous. Jo pienellä vaivalla esityksistä sai melko monimutkaisia multimediakokonaisuuksia.

Lähteet

[1] INT Media Group, "SMIL File", saatavilla WWW-muodossa

<URL:http://wdvl.com/Authoring/Languages/XML

/SMIL/Intro/smil.html>, 14.12.1998.

[2] Helio, "The SMIL Tutorial", saatavilla WWW-muodossa

<URL: http://www.helio.org/products/smil/tutorial >,

23.8.1999.

[3] Lycos, "SMIL : Multimedia Markup", saatavilla WWW-muodossa

<URL: http://hotwired.lycos.com/webmonkey/

98/23/index1a.html?tw=xml>, 4.6.1998.

[4] RealNetWorks, "Assembling a Presentation with SMIL ", saatavilla WWW-

muodossa <URL: http://www.service.real.com/help/library/

guides/production/htmfiles/smil.htm#100023>, 18.12.1998.

[5] Tomi Kujanpää, "SMIL-ohjauskieli", saatavilla WWW-muodossa

<URL: http://www.student.oulu.fi/~tkujanpa/itv/smil.html>,

Oulun Yliopisto, Tietojenkäsittelytieteiden laitos, 24.2.2000.

[6] W3C, "Synchronized Multimedia", saatavilla WWW-muodossa

<URL: http://www.w3.org/AudioVideo/>, 23.8.2001.

[7] Wilson Michael," SMIL - Synchronised Multimedia on the Web", saatavilla WWW-muodossa

<URL: http://www.dci.clrc.ac.uk/Publications/

1140/mdw/overview.htm>, BITD, viitattu 29.8.2001.

Liite. Yksinkertainen esimerkki SMIL-dokumentista.

<smil> 
  <head>
     <meta name="title" content="DiaShow"/>
     <meta name="author" content="Janne Korhonen"/>
    <layout>
<! Kuvaruudun koon ja värin määritys. -->  
       <root-layout width="400" height="400" 
       background-color="white"/>
<! Tyylien luonti. -->
      <region id="kuva"      left="20"  top="50"/>
      <region id="tekstitys" left="20"  top="120"/>
    </layout>
  </head>
  <body>
    <! Peräkkäin esitettävät elementit. -->
   
     <seq> 
    <! Yhtäaikaa esitettävät elementit. -->
      <par id="kuva1"> 
         <img   src="http://www.y.fi/kuva1.gif" region="kuva"/>
        <text  src="kuva1.txt" region="tekstitys"/>
        <audio src="kuva1.wav"/>
      </par>
    <! Yhtäaikaa esitettävät elementit. -->
      <par id="kuva2">
        <img   src="http://www.y.fi/kuva2.gif" region="kuva"/>
        <text  src="kuva2.html" region="tekstitys"/>
        <audio src="kuva2.wav"/>
      </par>
    </seq>
  </body>
</smil>