Mediaelementit. Mirja Jaakkola

Transkriptio

1 Mediaelementit Mirja Jaakkola

2 Sisältö 3. Multimedia 4. Animaatio 7. Gif-animaatio 8. Flash-animaatio 9. Ääni 10.Ääni object-elementillä 11.Video 12.Videon lisääminen www-sivulle 13.Flash-video 16.Lähteet 2

3 Multimedia Multimedialla tarkoitetaan aineistoa, joka koostuu useasta erityyppisestä mediaelementistä, esim. tekstistä kuvista grafiikasta animaatiosta äänestä videosta Multimediassa eri mediaelementtien tulisi tukea toisiaan. Multimedian käyttöä puoltaa se, että ihminen on tottunut näkemään liikettä ja kuulemaan ääni staattisten kuvien ja tekstien lisäksi. Asioita on helpompi kertoa useamman mediaelementin avulla. Usein käyttäjät kokevat multimediaelementit turhiksi www-sivuilla. 3

4 Animaatio Ihmisen huomio kiinnittyy liikkuvaan kuvaan: animaatioon ja videokuvaan Animaatio tuo sivuille eloa, mutta se myös vie käyttäjän huomion pois muusta sivun sisällöstä. Animaation tarkoitus voi olla viihdyttävä tai huomion kiinnittäminen. Animaation toimintoja voi lisätä myös navigoinnin tueksi esim. painikkeen muuttamiseksi toiseksi navigointipalkissa tai kuvakartassa. Animaatiot ärsyttävät suurinta osaa käyttäjistä, erityisesti liikkuvat ja rullaavat tekstit koetaan ärsyttäviksi. Animaatio ei saa jäädä vilkkumaan liian nopeasti vain ärsyttääkseen sivun käyttäjää. Animaatio voi toistua koko ajan tai vain kerran tai jotain tuolta väliltä. Voit myös lisätä taukoja animaation toistokertojen väliin. Älä sisällytä käyttöliittymääsi mainosbannerin tyyppisiä elementtejä, sillä käyttäjät jättävät nämä huomiotta. 4

5 Animaatio Jacob Nielsenin mukaan animaatiota voidaan hyödyntää tehokkaasti seuraavaan seitsemään käyttötarkoitukseen: siirtymien välisen jatkuvuuden osoittaminen eli tilasta toiseen siirtyminen animaation avulla siirtymän suunnan osoittaminen esim. vastakkaisten liikkeiden avulla tai zoomaamalla ajan myötä tapahtuvan muutoksen esittäminen näytön tehokas hyödyntäminen esim. kuvakartassa hypertekstilinkkien yli liikuttaessa graafisten esitysten tehostaminen esim. ikoneiden toiminnan selventämiseksi hiiren tullessa ikonin päälle kolmiulotteisten rakenteiden havainnollistaminen huomion kiinnittäminen 5

6 Animaatio Jussi Luukkonen jakaa animaatiot kolmen käyttötarkoituksen mukaan: 1. Prosessianimaatiot Tarkoitetaan prosessin kuvaamista animaation avulla eli syy-seuraussuhteen havainnollistamista. Kannattaa käyttää silloin kun asia tai ilmiö tapahtuu toisiaan seuraavina tapahtumajaksoina, joiden ymmärtämiseksi on nähtävä kokonaisuus ja ymmärrettävä eri vaihtoehdot ja niiden seuraukset. 2. Animaatioefektit Kiinnittää huomion jos sivulla ei ole liikaa efektejä. 3. Animoidut tarinat Toimivat viihdyttävinä välikkeinä, jopa suvantoina informaatiovirrassa, jos niitä osaa käyttää oikein. Usein myös opettaa paremmin kuin video, koska ei vanhene niin nopeasti. Lisäksi animaatiossa suvaitaan paremmin tietty yksinkertaisuus, kärjistys ja kulmikkuus. 6

7 Gif-animaatio Gif-animaatiot toimivat kaikissa selaimissa joissa toimivat myös gif-kuvat. Gif-animaatiot lisätään sivuille samalla lailla kuin lisäät gif-kuvan eli komennolla <img src="animaatio.gif" alt="animaatio" /> Gif-animaatiot pitää tallettaa gif-muotoon. Gif-animaatiossa toistetaan peräkkäin gif-kuvia, jotka on tehty erikseen. Gif-animaation koko määräytyy näiden kuvien summasta. Voit tehdä gif-animaatioita esim. photoshopin avulla. Window / Animation -komento avaa animaation koostamiseen tarkoitetun ikkunan, jossa voit työkennellä frame-näkymällä tai aikajananäkymällä. Voit muuttaa kuvan elementtien paikkaa, näkyvyyttä (opacity tai tason silmä) ja lisätä tasoefektejä. Tweening-toiminnolla saat automaattisesti haluamasi välikuvat animaatioosi. 7

8 Flash-animaatio Flashin avulla voit tuoda vuorovaikutteisuutta www-sivuille. Flashillä voit toteuttaa pelejä ja virtuaalimaailmoja Flash-animaatio vaatii toimiakseen shockwave-playerin, joka on selaimiin valmiiksi asennettuna. Ongelmana on vanhaa selainversiota uudempi flash-versio, joka vaatii käyttäjältä uuden playerin lataamista Adoben sivuilta: Flashissä piirtämäsi kuvat ovat vektorigrafiikka. Voit toki tuoda flashesitykseen myös muita kuvaformaatteja. Flash-animaatiot ovat huomattavasti kevyempiä kooltaan kuin gifanimaatiot. Voit lisätä flash-animaatioon myös ääntä ja videokuvaa. Flashissä käytetään action script kieltä, joka kuuluu samaan kieliperheeseen, ECMAScript, javascriptin kanssa. Flash kuitenkin poikkeaa Javascriptistä siten, että flashissä on käytössä aikajana, timeline, kun taas javascriptissä käytetään selainikkunaa. 8

9 Ääni Äänellä voidaan tuoda lisäarvoa ja ohjeistaa toimintoja. Äänellä voidaan luoda tunnelmaa sekä mielikuvia. Ääni voi olla musiikkia, puhetta, tehosteääniä tai hiljaisuutta. Ääni ei ole riippuvainen käyttäjän näytöstä. Näkövammaisille, lukutaidottomille ja lapsille voidaan teksti korvata äänellä. Huonokuuloisille voidaan tarjota ääni myös tekstinä. Laadukkaan äänen tuottaminen vaatii erikoisosaamista ja siten lisää kustannuksia. Selaimet tukevat parhaiten pakkaamattomia ääniformaatteja au ja wav Selaimet tukevat parhaiten pakatuista äänitiedostoista mp3-formaattia Helpoin tapa liittää ääni www-sivulle on tavallisen linkin avulla: <a href="musa.mp3">lataa musa.mp3-tiedosto (koko 1,55 Mt)</a> 9

10 Ääni object-elementillä Voit lisätä äänen ja videon W3C:n suosituksissa olevan object-elementin avulla. <object type="audio/mpeg" data="musa.mp3" width="200" height="50"> <param name="src" value="musa.mp3" /> <param name="filename" value="musa.mp3" /> <param name="type" value="audio/mpeg" /> <p>selaimesi ei osaa toistaa MP3-äänitiedostoa. Voit ladata tiedoston: <a href="musa.mp3">musa.mp3</a> </p> </object> Object-elementin ongelma on se, ettei osa selaimista tunnista sitä. Tarkemmat tiedot: 10

11 Video Videon avulla voidaan dokumentoida, havainnollistaa ja viihdyttää. Video etenee lineaarisesti, mikä edellyttää käyttäjän pysähtymistä seuraamaan videota. Videoiden tuotantokustannukset ovat suuret. WWW-sivuilla käytetään paljon flash-videoita, joiden tiedostotyyppi on.flv tai uudempi.f4v. Muita www-sivuilla käytettyjä videotyyppejä ovat pääasiassa MPEG, avi ja quicktime. Eri videotyyppejä varten on useita erilaisia pakkausmenetelmiä, joiden teho ja laatu vaihtelee. Videon ja äänen voi toteuttaa myös suoratoistotekniikalla, streaming, jossa video siirretään push-tekniikalla käyttäjän koneen puskurimuistiin. Tämä mahdollistaa videon katselun ja äänen toiston jo ennen kuin tiedosto on kokonaan siirretty käyttäjän koneelle. Puskurimuisti tyhjenee kun video tai ääni on toistettu loppuun asti. 11

12 Videon lisääminen www-sivulle Videotiedostot ovat yleensä hyvin raskaita. Kun lisäät videotiedoston wwwsivulle, anna käyttäjän aina itse päättää haluaako hän videon ladattavaksi. Yksinkertaisinta on lisätä videotiedosto linkin päähän. Tällöin on hyvä kertoa tiedoston koko, jotta käyttäjä voi arvioida kauanko lataaminen kestää. <a href="video.avi">lataa video.avi-tiedosto (koko 3,12 Mt)</a> MPEG-videon lisääminen www-sivulle object-elementin avulla: <object data= video.mpg" type="video/mpeg" width="400" height="300"> <p>selaimesi ei tue MPEG-videota. Voit ladata videon: <a href="video.mpg">video.mpg</a> </p> </object> Quicktime-videon lisääminen www-sivulle: 12

13 Flash-video Video voidaan upottaa www-sivulle helposti flashin avulla. Flash on kehittänyt oman video-formaatin.flv (vanhemmat versiot) ja.f4v (CS4). Voit muuttaa oman videosi flashin video-formaattiin esim. Adoben Media Encoderilla: Tuo videosi Media Encoder-ohjelmaan Add-komennolla. Muunna sitten videosi joko.flv/.f4v -muotoon Start Queue - komennolla ja tallenna queue File/Save-komennolla. 13

14 Flash-video jatkuu Avaa Flash ja tuo video sinne File/Import/Import video -komennolla. Hae videosi Select video-kohdassa. Valitse videollesi haluamasi kontrollipainikkeet Skinning-kohdassa. 14

15 Flash-video jatkuu Videosi on nyt flash-esityksessä ja kontrollipainikkeet toimivat kun testaat videota komennolla ctrl + enter tai valitsemalla komennon Control / Test Movie. Jos testattaessa kontrollipainikkeet eivät näy, korjaa flash-esityksesi koko videolle sopivaksi: Muokkaa Flash-esityksen näyttämön (stagen) kokoa niin, että video mahtuu kokonaan stagelle. Suurenna / pienennä tarvittaessa esityksen kokoa (stage) Modify / Document -komennolla tai properties-ikkunassa. Voit myös muokata videon kokoa properties-ikkunassa. Stage näkyy flashissä valkoisena laatikkona harmaalla pohjalla ja videosi tulisi mahtua laatikkoon. Julkaise File / Publish -komennolla ja testaa selainikkunassa File / Publish Preview / HTML. Flash-esityksesi on.swf-tiedostossa (tekee Publish-komennolla), joten siirrä.swf,.flv-tiedosto ja.html-tiedosto www-julkaisua varten haluamaasi kansioon. 15

16 Lähteet Jakob Nielsen: WWW suunnittelu Jussi Luukkonen: Digitaalisen median käsikirjoitusopas Äänipään sivut: 16