14.4.2004
Tik-111.350 Multimediatekniikka: laboratoriotyö
Miro Lahdenmäki, Tik
Toni Laitinen, Tik
Teknillinen korkeakoulu
miro.lahdenmaki [at] iki.fi
tplaitin [at] cc.hut.fi
Työssämme keskityimme tutkimaan SVG:n käyttöä flashin tapaan multimedia-esityksessä.
Jouduimme käyttämään projektin alussa paljon aikaa SVG:tä tukevien ohjelmien etsimiseen ja niihin tutustumiseen. SVG-tuki on tällä hetkellä Adoben varassa. Heidän SVG Viewer plugin:insa tuorein kolmos-versio tukee SVG:tä varsin kattavasti. Itse plugin toimii Microsoftin Internet Explorer selaimissa versiosta 4 alkaen ja se toimii Windowsin lisäksi myös Macin OS X:ssä. Myös Linuxilla plugin toimii jo auttavasti. Se ei vielä toimi muissa yleisissä selaimissa, kuten Operassa, Mozillassa tai Netscapessa. Myös RealPlayer sisältää nykyään SVG-tuen, mutta tuki ei ole aivan yhtä kattavaa kuin Adobella. Java-platformille löytyy Batik, joka samaten sisältää vajavaisen SVG-tuen. Mozilla-selaimelle ollaan jo kauan kehitelty suoraa SVG-tukea, mutta vielä sitä ei ole lisätty selaimeen.
SVG-esitysten luomiseen ei löydy vielä mitään vakiintunutta yksittäistä ohjelmaa. Sille kuitenkin löytyy tukea jo monista tutuista kaupallisista tuotteista tai tuottajista, kuten Corel Draw, Adobe Illustrator ja Jasc Webdraw. Useat uudet yrittäjät tuovat omia SVG:tä tukevia ohjelmiaan markkinoille edullisesti tai ilmaiseksi. Tällaisia ovat mm. MayuraDraw, Sodipodi, Vector Eye, ImageMagic, Sketsa ja Inkscape. Vektoripiirto-ohjelmia, jotka tukevat SVG:tä, löytyy siis jo nyt paljon yksinkertaisista ja ilmaisista ohjelmista aina laajasti tunnettuihiin kaupallisiin tuotteisiin. Myös vektorigrafiikan konvertoiminen SVG-muotoon onnistuu usealla ohjelmalla. Samoin bittikarttagrafiikan trace:aaminen SVG-grafiikaksi. Flashin tasoista multimedia-esitysten tekoon keskittynyttä ohjelmaa ei vielä löydy SVG:lle, joten tässä on huima markkinarako. Jasc Webdraw on ehkäpä lähinnä tällaista ohjelmaa. Se sisältää Flash:stä tutun aikajanan ja suhteellisen hyvän käyttöliittymän. Se ei kuitenkaan tue vielä SVG:tä tarpeeksi laajasti ja on keskittynyt animointiin. SVG on kuitenkin XML:ää ja ihmisen luettavaa koodia. Sitä on helppo kirjoittaa ja editoida. XML-luonteesta johtuen mallia on helppo ottaa julkisesti levitetyistä SVG-dokumenteista.
Aloitin noin yhden opintoviikon laajuisen työn tutustumalla ensin työsuunnitelmassa mainitsemiimme ohjelmiin. Melkein heti kävi ilmeiseksi, että Adoben GoLive –ohjelmaa ei työssä juurikaan tarvita. Jasc Webdraw –ohjelman sen sijaan totesin käyttökelposeksi.
Ensimmäinen varsinainen tehtävä oli Miron webistä hankkiman
ja esikäsittelemän klubi-kuvan muokkaaminen itselleni käyttökelpoiseen
muotoon. Tämän tein Adoben Photoshopilla. Kokeilin muuttaa kuvaa myös
vektorimuotoon Vector Eye –ohjelmalla, mutta tulos oli varsin karkea,
joten päätimme lopulta käyttää klubi-kuvan rasteri-versiota
(club_bluemist.jpg). Hienomman ulkoasun lisäksi ratkaisu toi
myös yhden ylimääräisen SVG:n ominaisuuden (rasterikuvien
käytön) työhömme.
Seuraavaksi siirryin Webdraw:n puolelle ja avasin Miron tekemän club.svg-dokumenttipohjan.
Kävi ilmi, että Webdraw ei ymmärtänytkään kaikkia
dokumentissa tehtyjä määritelmiä, joten jouduin muokkaamaan
sitä ohjelman ymmärtämään muotoon. En siis vielä
ollut valmis hylkäämään Webdraw:ta (vähänkin monimutkaisemman
vektorigrafiikan ja animaation koodaaminen pelkällä tekstieditorilla
on mielestäni hullun hommaa).
Sain dokumentin melko vähällä vaivalla Webdraw:n ymmärtämään muotoon ja aloin tekemään ensimmäistä hahmoa ja animaatioita. Huomasin heti, että Webraw ei hyväksynyt edes svg:n perusominaisuuksiin kuuluvaa animaatioiden ketjutusta (tai tunnus.end/tunnus.begin –trikkerien käyttöä) , joka mahdollistaa looppaavien animaatioiden ja toisistaan riippuvien animaatioiden tekemisen. Päädyinkin lopulta käyttämään Webdraw:ta ainoastaan hahmojen piirtämiseen ja animaation alulle panemiseen. Animoinnin hienosäädön suoritin tekstieditorilla.
Työn alkuvaiheessa jouduin vähän väliä kääntymään googlen puoleen ja hakemaan tiettyjä ominaisuuksia käsitteleviä tutoriaaleja (w3:n monisatasivuisen speksien käyttö ainoana lähteenä ei houkutellut). Monimutkaisempia SVG:n ominaisuuksia käsitteleviä selväkielisiä tutoriaaleja näytti olevan melko huonosti saatavilla (yksinkertaisia animointeja kuten neliön tai ympyrän liikuttelua kyllä löytyi). En onnistunut löytämään yhtä kattavaa tutoriaalia, vaan työn edetessä oli suoritettava aina uusia hakuja, mikä vei myös melko suuren osan työajasta. Tutoriaalien huono saatavuus kielii luultavasti itse tekniikan uutuudesta.
Vähä vähältä SVG:n ominaisuudet alkoivat kuitenkin selkiytymään ja tutoriaalien etsimiseen meni aina vain vähemmän aikaa. Lopulta pystyinkin jo tekemään työtä pelkän Webdraw:n ja tekstieditorin turvin. Tekemäni dokumentin koodiin jäi alkuvaiheiden (ja myös hieman loppuvaiheiden) kankeuksia ja epäjohdonmukaisuuksia. Päätin keskittyä ainoastaan siihen miltä työ selaimella katsottuna tulee näyttämään. Seuraavassa kappaleessa on lyhyt kuvaus tekemäni dokumentin toiminnallisuudesta.
SVG-dokumentti club_mist.svg on tikku-ukkojen yökerhon tanssilattiapuolta
esittävä 799x375-kokoinen näyttämö. Dokumentin taustakuvana
on samankokoinen club_bluemist.jpg-rasterikuva. Taustamusiikkina
soi Elwoodin taannoinen hittibiisi Stompin Little Scouts. Liikkuvia objekteja
on pyritty kuulopohjalta synkronoimaan musiikin rytmiin. Dokumentti sisältää
neljä erilaista vektorigrafiikka-objektia, joista kaksi ovat interaktiivisia.
Näyttämön alareunassa keskellä on ukko, joka reagoi kosketukseen.
Ukolle voi tehdä suurempaa kiusaa painamalla sitä hiuksista. Ukko
myös näennäisesti reagoi näkökenttänsä edessä
heiluvaan naispuoliseen tanssijaan ja tanssijan edessä heiluvaan miimikkoon
kommentoiden tämän olemusta. Miimikko on dokumentin toinen interaktiivinen
objekti, joka häiriintyy, kun sitä koskettaa hiiren osoittimella.
Dokumentin kaksi muuta objektia eivät reagoi käyttäjän toimiin,
mutta osallistuvat kuitenkin meininkiin. Näyttämön oviaukon kohdalla
on kuitenkin linkki josta pääsee yökerhon ”chillailutilaan”.
Aloitin työn hakemalla SVG:tä tukevia ohjelmia ja käytin aikaa niihin tutustumiseen. Hain myös club-aiheeseemme sopivaa taustamateriaalia, jota voisimme käyttää työssämme. Muokkasin löytämiäni kuvia Jasc Paint Shop Pro:lla ja tämän jälkeen testailin Vector Eye -ohjelmalla erilaisin asetuksin bittikarttakuvien trace:aamista vektorigrafiikaksi. Vector Eye osoittautui erittäin helppokäyttöiseksi ja hyödylliseksi ohjelmaksi konvertointiin. Sillä saa bittikarttakuvista helposti tyyliteltyjä vektorigrafiikkakuvia ja samalla sillä on helppo etsiä kompromissi yksityiskohtien ja kuvan viemän tilan välillä.
Musiikiksi etsin vapaasti levitettävää musiikkia. Oman ääniraidan tekeminen olisi vienyt liikaa aikaa tässä työssä, jossa oli pääasiassa tarkoitus tutustua SVG:hen. Halusimme kuitenkin musiikkia mahdollisuuksien mukaan mukaan työhön, sillä onnistuuhan sen lisääminen myös flash-dokumentteihin. Adobe SVG Viewerin kanssa on mahdollista käyttää mp3- wav- sekä realmedia-otteita. Valitsimme mp3-formaatin, koska se pakkautuu pieneen tilaan ja on helposti muokattavissa. Niin isoille otteille, kuin mitä me käytimme, suositellaan käytettävän SVG:n yhteydessä RealMedia-formaattia, jota voi stream:ata, mutta meillä ei ollut RealMedia-otteiden tekoon tarvittavaa ohjelmistoa.
Tein seuraavaksi kokeellisen SVG-dokumentin, jossa testasin bittikarttagrafiikan ja äänen käyttöä SVG-dokumentissa. Testi osoitti, että tekniikka toimii, ja kykenimme siirtymään eteenpäin. Internet Explorer -selain kylläkin kaatui minulla aina dokumenttia sulkiessa, mikä aiheutti hämmennystä. Sama ei kuitenkaan tapahtunut parillani eikä myöskään minulla uudelleen asennetun käyttöjärjestelmän kanssa, mikä oli helpotus.
Oli ollut alusta asti tarkoituksemme tehdä SVG-dokumentti, joka skaalautuu selaimen ikkunan ja resoluution mukaan. Onhan tämä yksi skaalattavan vektorigrafiikan eduista. Tämä ei kuitenkaan onnistunut aivan yksinkertaisesti, vaan ohjeita piti hakea, kuten lukemattomia kertoja työn aikana, hakuohjelman avulla netistä. Ratkaisuksi löytyi tarkoitukseen varta vasten tehty viewBox-javascripti. Sen käyttöönotto ei ollut kuitenkaan aivan suoraviivaista, mutta onnistui lopulta ottamalla mallia viewBox-esimerkistä.
Jaoimme työn siten, että toinen meistä tekisi toisen huoneen ja toinen toisen. Minä tein Chilling-huonetta. Tarvitsimme myös esittelysivun, ja tässä näin mahdollisuuden kokeilla SVG:n filttereitä. Otin mallia eräästä SVG-mallidokumentista, ja tuloksena oli erittäin graafisen näköistä tekstiä, jonka voi silti maalata hiirellä ja kopioida helposti tekstinä. Lisäsin vielä esittelysivulle Vector Eye -ohjelmalla trace:atun esimerkin hyvin vektorigrafiikaksi muuntuvasta kuvasta. Kaikki esittelysivulla on vektorigrafiikkaa.
Chilling-huoneen taustana käytin Vector Eye:lla trace:attua kuvaa. Alalaitaan
lisäsin vektoreiksi konvertoidun tytön, johon testasin erilaisia interaktioita
(onclick, mouseover, mousein, mouseout). Kesti vähän aikaa ennen kuin
löysin, miten animaation saa jatkumaan alusta loppuun keskeytymättömänä
restart="whenNotActive" parametrilla. Korostin objektin
interaktiivisuutta muuttamalla sen läpinäkyvyysarvoa hiiren ollessa
sen päällä. Myöhemmin lisäsin erillisen napin, jolla
objektia voi liikuttaa. Dokumentin ympärille oli lisättävä
taustanväriset peittävät tasot, jotta objektit eivät olisi
astuneet ulos kuvasta. Huoneeseen astumiseen lisäsin häivytyksen sinisestä
läpinäkyväksi. Objekti piti kuitenkin erikseen asettaa tämän
jälkeen näkymättömäksi asettamalla attributeName="visibility"
to="hidden". Muuten mitään alla olevista objekteista
ei olisi voinut klikata. Seuraavaksi tarkoituksenani oli luoda interaktiivinen
tikku-ukko. Havaitsin, ettei Jasc Webdraw soveltunut hommaan kovin hyvin ja
päätin jatkaa koodaamista käsin. Tikku-ukon piirsin aluksi Sodipodilla,
josta sain sen suhteelliset koordinaatit. Yksinkertaisten animointien lisääminen
tikku-ukkoon oli helppoa <animate> elementillä, mutta
monimutkaisempien liikkeiden animointi käsin tuntui tuskaisalta. Päätin
kokeilla javascriptillä koodaamista laskemalla tikku-ukon kontrollipisteitä.
Näin olisi myös helppo pakottaa tikku-ukon eri osien alkavan aina
samasta pisteestä. Yritin vielä lisätä tikku-ukon kontrollipisteet
taulukkoon avainarvoiksi. En kuitenkaan saanut taulukkoa toimimaan SVG-dokumentissa
ja loppujen lopuksi luovutin yrittämästä. SVG:lle tarvittaisiin
parempia animointityökaluja. Etenkin kontrollipisteiden lukitseminen toisiinsa
tai liittäminen yhdeksi pisteeksi olisi mainio ominaisuus.
SVG vaikuttaa varsin pätevältä tekniikalta jo nyt moniin tarkoituksiin multimediassa. Tukea alkaa löytyä, mutta varsinainen killer-softa sille vielä puuttuu. Siihen voi kuitenkin tutustua jo nyt, sillä SVG on varsin helppotajuista koodina.
Onnistuimme mielestämme melko hyvin sisällyttämään (ja jopa sisäistämään) työsuunnitelmassamme työlle asettamamme tavoitteet. Ainoastaan polkua pitkin animointi jäi kokeilematta, mutta se listattiinkin tehdään-jos-ehditään –periaatteella.
Yhden opintoviikon perehtymisen jälkeen SVG näyttää melko lupaavalta yksinkertaisen vuorovaikutteisen grafiikan kuvauskieleltä. Ominaisuuksia on todella paljon. Tekniikan käyttöönottokin sujui suhteellisen vaivattomasti: Ylimääräistä plugien asentelua ei välttämättä tarvita lainkaan, selain saattaa pystyä heti näyttämään SVG-dokumentteja. Olisimme kuitenkin vielä toivoneet monipuolisempaa valmisohjelmaa, jolla olisi voinut hoitaa sekä vektorigrafiikan piirtämisen että animoinnin. Webdraw tuntui varsin kankealta käyttää ja se näytti myös tuottavan tarpeetonta koodia. Seuraavaksi aiommekin tutustua Adoben Illustrator ohjelmaan, joka käsittääksemme ymmärtää SVG-kieltä ja jolla myös pystyy SVG-dokumentteja tuottamaan.
Zip-paketti (3.8Mt) suosittelemme tätä, jollet asu TKK:n kampuksella. Lisähuomio: Käytä selainta full screen -moodissa tai avaa SVG-tiedostot sellaisenaan, sillä muuten SVG-tiedosto voi pätkiä. Tämä on bugi selaimessa tai Adobe SVG Viewerissa.
Varoitus työtä ei ole optimoitu hitaille yhteyksille. SVG-dokumentti sisältää linkin neljän megan musiikkitiedostoihin. Sitä ei ole myöskään tarkoitettu perheen pienimmille. K18.