010830000Monimedian työkurssi

Multimedian teknologiatIlmari Laakkonen

Digitaalinen mediaPeruselementit:

Teksti, valokuva, grafiikka, video, animaatio, ääni ja musiikki.

Multimedia: käytetään kahta useampaa

mediaelementtiä.

Hypermedia:Käyttäjällä mahdollisuus tehdä valintoja tai

vaikuttaa median esitystapaan.

Monimedia:Sisältö esitetään useamman

jakelukanavan avulla, esim. lehti, televisio ja internet.

WWW-multimedia

Laajimmillaan WWW-multimedia on vuorovaikutteinen ja sisältörikas liikkuvan ja staattisen kuvan (video, animaatio, valokuvat, grafiikka), äänten (musiikki ja muut äänet) ja tietokantojen yhdistelmä.

Multimedia teknologiat

TekstiKuvaVideoAnimaatio Ääni ja musiikkiOhjelmointitekniikatTietokannatJakelutekniikat

Teksti ja taitto

Taitto on tekstin, kuvien ja muiden graafisten elementtien sommittelua kokonaisuudeksi

Multimediassa taittoa vastaa käyttöliittymän suunnittelu

Lehtitaiton elementitTekstitypografiaTekstimateriaaliKuvat

Tekstitypografia Pääotsikko

Suurin kirjasinkoko, lihavoitu Ingressi, johdantokappale

Leipätekstiä suurempi pistekoko ja ehkä kursivoitu/lihavoitu

Ala- tai yläotsikko Pääotsikkoa pienempi kirjasinkoko

Väliotsikko Leipätekstiä suurempi kirjasinkoko, vasemmalle

tasattuna, erottaa tekstikappaleet toisistaan Leipäteksti

Tekstin perusaines, esim. pistekoko 12, tavallinen teksti, ei tyylejä, tasapalstainen

Kuvateksti Eri kirjasin kuin leipätekstillä tai kursivoitu

Teksti ja typografian perustermit

Kirjasinleikkaus, fontti, kirjasinArial, Helvetica, Times, Courier, Century

Gothic, Verdana, Comic Sans MS

Serif ja Sans serifSerif. Kirjasimet joissa vaakasuuntaisia viivoja

ohjaamassa lukijan silmää.Sans serif. Kirjasimet joissa ei ole

vaakasuuntaisia viivoja

Kiinteä ja vaihtelevaväliset kirjasimet1234567890 Liirum Laarum Lorum. 1234567890 Liirum Laarum Lorum.

Teksti ja typografian perustermitKirjasimen tehokeinotKirjasinkoko

ilmoitetaan yleensä pisteinä (72 pistettä = 1 tuuma)

paperilla yleensä 8-14 pistettäNäytöllä 14-24 pistettä

Teksti ja typografian perustermitVälistys

kirjainvälistyssanavälistysrivivälistys

Tasaus ja palstoitusLeveällä paperilla esim. lehdissä,

palstoitus helpottaa lukemista

Teksti ja näyttötaittoNäytöltä lukeminen hitaampaa kuin

paperiltaMonitorin ominaisuudet ja lukuetäisyysNäytön muoto poikkeaa paperin muodostaNäyttöä ei voi käsitellä samalla tavalla

kuin paperinippuaNäytöllä käytettävä isompaa

tekstikokoa kuin paperillaOtettava huomioon käyttäjien erilaiset

näyttöresoluutiotTekstiä silmäillään, artikkelista ei

jakseta välttämättä lukea kuin pääotsikko ja ingressi.

Tietokoneen kirjasimetBittikarttakirjasimetVektorikirjasimet

TruetypePostscript

Käyttöjärjestelmien mukana tulee perusvalikoima kirjasimia.Lisää saa verkosta lataamalla tai

ostamallaEsim. Microsoft tarjoaa ilmaisen web

kirjasinpaketin.Ei ole takeita siitä että muilla

käyttäjillä samat kirjasimetArial/Helvetica, Courier, Times ovat

varmoja peruskirjasimia

Kirjasimet www-sivuilla HTML suunniteltu kuvaamaan dokumentin

rakennetta ja tekstielementtejä, ei muotoilemaan dokumentin ulkoasua.

Käytännössä kolme tapaa määrittää haluttu kirjasintyyli <FONT> merkintä

<FONT FACE=”Comic Sans MS, Arial”> Teksti </FONT>

CSS (cascading style sheet) tyylimäärityksetHTML 4 standardin mukainen tapa, tällöin HTML

tiedostossa määritetään vain tekstin rakenne ja tekstin ulkonäkö tyylitiedostolla.

Teksti muutetaan kuvaelementiksi ja kuva sijoitetaan siihen kohtaan jossa tekstielementtiä käytetään <IMG> merkinnällä.

Ongelmana www-sivujen tiedostokoot ja latausajat

Tekstin muotoilu HTML-kielessä

Otsikko tasot <H1>, <H2>, jne.Kappale <P>Rivinvaihto <BR>Loogiset merkinnät <HI>,

<ADDRESS>, <SITE> ja <EM>Fyysiset merkinnät <B>, <I>, <TT> ja

<PRE>Kirjasimen määritys <FONT>

CSS – Cascading style sheetHTML 4 standardin virallinen tapa

tehdä tekstimääritykset.Mahdollistaa tarkan hallinnan

seuraaviin ominaisuuksiin:Kirjasimen ja kirjasintyylin määrityksetTekstin värimääritykset ja taustavärin

määritysTekstin tasausTekstin välistysTekstikehykset

Uusissa selaimissa ja www-hallinta sovelluksissa hyvä tuki.

Valokuva ja grafiikka

Värimallit Additiivinen vs subtraktiivinen

Digitaalinen kuvaBittikarttakuva vs vektorigrafiikka

Kuvien hankintaKamera, skannerit, PhotoCD, kuvakirjastot

TiedostomuodotKuvankäsittely

Valo ja värimallit

Värimallit tietokoneissa

Ohjelmissa voidaan valita mitä värimallia käytetään kuvien ja grafiikan tallennukseen.Jos kuva tai grafiikka menossa näytölle

niin käytetään RGB värimallia.Jos kuva tai grafiikka menossa paperille

niin käytetään CMYK värimallia.

Muunnoksissa värimallista toiseen voi kadota värejä, koska RGB ei pysty näyttämään kaikki CMYK:n värejä ja päinvastoin.

Vektorigrafiikka Kuvan elementit

muokattavia ja kuva aina maksimitarkkuudella lopullisesta mediasta riippumatta

Kuvan elementtien muodot tallennetaan geometrisilla kaavoilla, joihin liitetään värien ja viivojen ominaisuudet.

Yleensä multimedia- ja www-sovelluksissa muunnetaan bittikarttakuviksi lopulliseen sovellukseen.

BittikarttakuvaKuva muodostuu pikseleistä, joilla on

jokin tietty arvoYksi pikseli on muokattava elementti

Yleensä kuvankäsittely- ja piirto-ohjelmissa käsitellään kerralla useita pikseleitä.

Kuvalla on aina tietty värimäärä ja tarkkuus/koko josta määräytyy kuvan viemä tilaesim. kuvan koko 2x4 tuumaa, tarkkuus

100 pistettä tuumalle ja värimäärä 256 väriä (8 bittiä)

- > kuvan koko on 2*100*4*100*8bit = 80000bittiä = 10000 tavua

Bittikarttakuva

Bittikarttakuva, värisyvyysVärisyvyys määrittää

kuinka monta bittiä käytetään yhden pikselin tilan tallentamiseen.Mustavalkoinen kuva (1bit)Harmaasävykuva (8bit)Värikuva

256 väriä (8bit)Tuhansia värejä (64*1024)

(16bit)Miljoonia värejä (24bit)

Tarkempiakin muotoja on olemassaesim. 48bit

Bittikarttakuva, kuvan koko

Kuvan koko voidaan esittää kahdella tavallaPikselikoko, käytetään usein

tietokoneohjelmissa ja www-sivuille tehdyssä grafiikassa.esim. 640*480 tai 1024x768 pikseliä

Resoluutio, käytetään kun tiedetään kuvan viemä tila tavallisina mittoina ja näyttölaitteen resoluutio.esim. kuvan koko on 10*15 tuumaa ja

näyttölaitteen resoluutio 100 pistettä tuumalle-> kuva jonka koko on 1000x1500 pikseliä

Näyttölaitteiden resoluutiotNäytöt, 70-100dpi (dots per inch)

bittikarttakuvan tarkkuus sama kuin näytössä

Laser- ja mustetulostimet, 300dpi bittikarttakuvan tarkkuus 100ppi (pixels per

inch)

Sanomalehdet, 600dpibittikarttakuvan tarkkuus 150-200ppi

Esitteet ja aikakausilehdet, 1200dpibittikarttakuvan tarkkuus 200-266ppi

Taidepainotyöt vielä suuremmat resoluutiotbittikarttakuvan tarkkuus yli 300ppi

Kuvien hankinta

DigitaalikameraTavallinen kamera

Filmi -> valokuva -> skanneri eli kuvanlukija

Filmi -> Photo CDFilmi -> dia-/filmiskanneri

KuvakirjastotTuotetaan kuva tietokoneella

Piirto-ohjelmatKaaviotMallinnusohjelmat

TiedostomuodotBittikarttakuvat

Ohjelmien omat (Photoshop, Corelpaint, jne.)TIFF (hyvä muoto ohjelmien väliseen

siirtoon)GIF (web)JPEG (web)PNG (web)

VektorigrafiikkaOhjelmien omat (illustrator, CorelDraw, jne.)EPS (hyvä muoto ohjelmien väliseen siirtoon)WMF (windows metafile)SVG (web, plugin)Flash (web, plugin, animaatiomuoto)

Tiedostomuodot, GIF

256 väriä, yksi väreistä voidaan määrittää läpinäkyväksi

Soveltuu vähän värejä sisältävän grafiikan esittämiseen bittikarttamuodossa ja käyttöliittymä elementteihin

Kuvasta ei hävitetä informaatiota kuten JPEG-muodossa

Selaimet tukevat ilman plugineja

Tiedostomuodot, JPEG

256 harmaasävyä tai miljoonia värejäEi läpinäkyvyyttäSuunniteltu valokuvien

tiedostokokojen pienentämiseenKuvasta hävitetään informaatiotaSelaimet tukevat ilman plugineja

Tiedostomuodot, PNG

Tukee useita värimääriä, myös läpinäkyvyyttä

Suunniteltu korvaamaan GIF siinä olevien tekijänoikeusongelmien takia

Ei kadota kuvainformaatiota, eli suurilla värimäärillä kuvista tulee isokokoisia.esim. valokuvat, ei suunniteltu JPEG:in

korvaajaksi

Selaimet tukevat ilman plugineja

Tiedostomuodot, SVG

Virallinen www-vektorigrafiikkamuotoTukee linkkien sijoittamista kuvan

elementteihinTällä hetkellä selaimet eivät tue ilman

plugin:iaIlmainen plugin saatavilla esim. Adobe:n

www-sivuilta

Useimmista vektorigrafiikka piirto-ohjelmista voidaan tallentaa SVG-muodossa.

Tiedostomuodot, Flash

Animaation esitysmuoto Tällä hetkellä selaimet eivät tue ilman

plugin:ia, mutta osa selainten valmistajista toimittaa sen selaimen mukana. Ilmainen plugin saatavilla Macromedian www-

sivuilta.

Animaatio pohjautuu vektorigrafiikaan ja tätä voidaan käyttää animaation sijasta myös kuvien esittämiseen.

Voidaan käyttää myös käyttöliittymäelementeissä, koska kuvan elementteihin voidaan liittää linkkejä ja erilaisia tapahtumia hiiren toiminnoista.

Kuvankäsittely

Tarkoitetaan yleensä bittikarttakuvan käsittelyä tietokoneella ennen sen sijoittamista multimediaesitykseen tai taittoon.

Kuvaa käsitellään myös perinteisessä pimiötyöskentelyssä, mutta silloin esim. valotuskemikaaleilla ja valotuksella.

Kuvia on käsitelty ennen tietokoneitakin, mutta se on ollut erittäin työlästä.

Yleisimmät kuvankäsittely toiminnot

Kuvan rajaus ja koon muutosVärikorjaus

kuva liian tumma tai vaaleaKuvan sävyalueen muutos

Terävöitys/pehmennysPölyn ja naarmujen poistoKuvaelementtien poistaminen ja lisäysTekstin lisääminenKollaasin, eli kokoelmakuvan

muodostaminenErilaiset tehostesuotimetKäyttöliittymän elementtien käsittely

Kuvat www- sivuilla

Www-selaimet tukevat ilman plugin:ia käytännössä GIF-, JPEG- ja PNG- muotoja ja muut vaativat lisäohjelmia

Kuvat sijoitetaan www-sivuille <IMG> merkinnällä

Digitaalisen videon käyttö Multimedia ohjelmat

pieni koko ja huonompi kuvanlaatu kuin televisiossa

Introt, asioiden havainnollistaminen, elävöittäminen

Video internet verkossa Hidas latautuminen, streaming auttaa

Digitaali TV Useampia kanavia samalle kaistanleveydelle interaktiivinen kaksisuuntainen yhteys, katsojalla

mahdollisuus vaikuttaa lähetykseen

DVD-levyt (Digital Versatile Disc) Levitys formaatti elokuville ja peleille. Hyvä kuvan ja äänen laatu, erikieliset tekstitykset

Videon tuotantoprosessiEnnakkosuunnittelu

Idea -> käsikirjoitusKäsikirjoitus -> budjetti ja aikataulu

KuvauksetToteutetaan käsikirjoituksen mukainen

kuvausTekniset ongelmat lähinnä valaistuksessa

ja äänen taltioinnissa.

EditointiKuvattu materiaali koostetaan

kokonaisuudeksi.Lisätään grafiikka, äänitehosteet , musiikki

ja selostus.

Videon käyttö multimediassaHyvä video on havainnollinenVideo vakuuttaa ja luo mielikuviaKäyttäjän tulee voida kontrolloida

videota. Interaktiivisuus.Lähikuvat toiminnoista ja ihmisistä

soveltuvat pieneen ruutuunVideoleike ei saa olla liian pitkä. Alle

minuutissa kerrotaan jo paljonVideo on yleensä kompressoitu

liikkuvan kuvan vaatiman suuren tilantarpeen vuoksi.

Videon laatu

Videomateriaali vie paljon tilaa ja sen käyttö multimediassa ja internetissä on aina kompromissi laadun ja tiedostojen koon välillä.Videokuvan koko, resoluutio?Monta kuvaa sekunnissa näytetään?Videokuvan pituus?Mitä videoformaattia käytetään?Kompressiomuoto ja laatu?Mihin videota tallennetaan? Millä laitteilla niitä katsotaan?

Videokuvan kokoPAL videokuvan tarkkuus 768*576CCIR 601 standardin tarkkuus 720*576

Digitaalivideokameroiden PAL signaalin tarkkuus.

PAL kuvassa näytetaan 25 kuvaa sekunnissaNäyttämällä puolikas kuva kerrallaan saadaan

näennäinen piirto taajuus vastaamaan 50 kuvaa sekunnissa -> Kuvan lomitus. (interlace)

Televisiossa käytetään videokuvan lomitusta, tietokoneissa ei.Valitaan videoeditointiohjelmassa kun

tiedetään mihin lopputulos menee.

KompressointiPAL kuvan koko digitaalikamerassa

720*576, kuvia näytetään 25 sekunnissa ja jokaiselle pisteelle on varattu 24 bittiä pisteen tilan esittämiseen.-> tarvitaan levytilaa n. 30 Mtavua sekunnissa

Tarvitaan valtavat määrät levytilaa videon käsittelyyn

Kompressiolla pienennetään käsiteltävien tiedostojen kokoa.Digitaalivideokamerat käyttävät 5:1

kompressiosuhdetta -> alle 6 Mtavua sekunnissa

Vielä liian isoja CD-levyille ja internettiin -> lisää kompressiota -> koon ja laadun pienennys

Kompression laadun parannus kuvausvaiheessa

Hyvä kamera, mieluummin digitaalinen

Oikein valotettu kuva, valoa riittävästi -> terävämpi kuva.

Käytä jalustaa, pidä kameran liikkeet tasaisina ja rauhallisina

Tausta yksinkertainen, muuttumaton tai tausta pidetään epäterävänä.

Kuvassa mahdollisimman vähän yksityiskohtia

VideoformaatitTuotantovaiheessa videot yleensä AVI-

tai Quicktime muodossaMolemmissa on useita videon kompressio

tapaa, codecEditoinnin aikana kompressio on vähäistä

että kuvan laatu pysyy mahdollisimman hyvänä

Lopullinen video tallennetaan suuremmalla kompressiollaVideo for windows, AVIWindows MediaRealVideoQuicktime, AppleMPEG

MPEG kompressiotekniikat

M-JPEG, perustuu JPEG- kompressioonMPEG, videon että äänen

kompressioonMPEG- videomuodot

MPEG-1, VHS-laatuMPEG-2, CCIR601, DVD ja HDTVMPEG-4, kuva-, matkapuhelimet, multimedia

interaktiivisuus ja mediaelementtien hallintaMPEG-7, tuleva standardi mediatiedostojen

hakupalveluiden parantamiseksi

DV, digitaalivideokamerat

Internet streamingHTTP-protokolla ei ole tehokas isojen

video- ja äänitiedostojen jakelussa internetissä

Video ja äänimateriaalin jakeluun on kehitetty useita streaming protokollia

Yleisimmät video ja äänijakelu formaateilla on omat ratkaisunsaRealMedia serverWindows Media serverQuicktime streaming server

Haittana sitoutuminen tiettyihin ohjelmistovalmistajiin.Sitoo myös loppukäyttäjän.

Animaatio

Käytöllä sama tavoite kuin videon kanssa.Tehostaminen, mielikuvien luonti ja

havainnollistaminen

Yleisimmät animaation esitysmuodot:GIF-animaatioShockwaveFlashRealmediaAnimaatio muutetaan johonkin

videoformaattiin

GIF- animaatio

Kuvatiedosto joka sisältää useita eri kuvia joista kukin muodostaa yhden animaatioruudun.

GIF-animaatioon voidaan asettaa aika kuinka kauan mitäkin kuvaruutua näytetään.

Sijoitetaan www-sivuille samalla tavalla kuin normaali GIF-kuva.

Käytetään yleisesti www-mainoksissa ja bannereissa

Toimii käytännössä kaikissa www-selailimissa

Shockwave ja FlashMacromedian kehittämät

animaatiomuodotShockwave on laajempi muoto, sillä

voidaan tehdä jopa ohjelmia. Tehdään Director ohjelmalla.

Flash on vektorigrafiikkapohjaista animaatiota, jota voidaan tehdä Flash tai Livemotion ohjelmilla.

Molemmille löytyy hyvä tuki eri käyttöjärjestelmille ja erityisesti Flash on aika turvallinen valinta animaatioihin

Selaimet eivät tue ilman plugin:ia, mutta se on hyvin saatavilla.

RealMedia

Animaatiomuoto joka on osa Real-yhtiön kehittämään mediamuotoa.

Animaatiota tuotetaan Real:in omilla sovelluksilla ja realmedialle on hyvä tuki eri käyttöympäristöihin.

RealMedia tukee ääntä, videota ja animaatiota.

Selaimet eivät tue ilman plugin:ia, mutta se on saatavilla lähes kaikille selaimille.

Animaatio videomuodoissa

Muunnetaan animaatio johonkin videomuotoon,

Voidaan näyttää samoilla ohjelmistoilla kuin muutkin videot.

Voi syntyä isoja tiedostoja.

Ääni ja musiikki

Varoitus ja huomioäänetKäyttöjärjestelmän tai ohjelman

perusääniä, jotka pyrkivät kiinnittämään käyttäjän huomion.

MusiikkiViihdyttävä elementti, joka luo tunnelmaa

tai toimii aikaa ja paikkaa ilmaisevana keronnallisena elementtinä.

Ääni ja musiikki

PuheAsiasisältö, mutta lisäksi luo mielikuvan

puhujasta ja hänen suhteestaan asiaan.Tietoa-antava, Ohjaava opas,

kommentaattori, asiaan johdattava puhuja.

TehosteetTukevat kuvaa tai kertovat kuvan

ulkopuolisia asioita.Korostaa tapahtumaa ja luo tunnelmaa.

Ääni ja musiikki

ReaktioäänetOhjaavat käyttäjän toimintoja ja antavat

palautetta.Ääni-ikoni

TaustaäänetÄänisilmukka, jota voidaan soittaa vaikka

kuinka kauan.Käytetään kun ei tiedetä etukäteen kuinka

kauan käyttäjä viipyy ruutunäkymässä.

Ääni ja musiikki

VideoäänetLiikkuvaan kuvaan yhdistetyt äänet, jotka

pysyvät tahdissa kvan kanssa.Nauhoitetaan kuvauksen yhteydessä tai

lisätään jälkikäteen

Puhesyntetisaattori ja puheohjausPuheohjauksella voidaan ohjata sovellusta.Puhesyntetisaattorilla voidaan muuttaa

kirjoitettu teksti puhutuksi ääneksi.

Ääni tiedostomuodot

WAV, AIFFWindows mediaQuicktime audioRealMedia/RealaudioMPEG audio

MP2, MP3

MIDI

Äänitiedoston ominaisuudetNäytteenottotaajuus

8000Hz, puhelinstandardi11025 Hz, neljäsosa CD-äänilevyn

näytteenotosta, sopii puheelle ja internet sivuille

22050 Hz, puolet CD-äänilevyn näytteenotosta, soveltuu hyvin multimedia tuotantoon

44100Hz, CD-äänilevyn näytteenottotaajuus

Äänen resoluutio, 8 bit vai 16 bit?8 bit 48dB dynamiikka

C-kasetti 48dBAvokelanauhat 72dB

16-bit 96dB, CD-äänilevy

Äänitiedoston koon vertailuNäytteenottotaajuus HZ

16-bit stereo Mt

16-bit mono Mt

8-bit stereo Mt

8-bit mono Mt

44100 10 5 5 2,5

22050 5 2,5 2,5 1,26

11025 2,5 1,26 1,26 0,63

8000 1,8 0,91 0,91 0,45

5000 1,1 0,57 0,57 0,29

Ääni – Mikrofonit

ToimintaperiaateDynaaminen, halvempi yleismikrofoniKondensaattorimikrofoni, erittäin herkkä

SuuntakuvioPallo, haastattelutKardioidi (hertta), puhe, tehosteet,

akustiikkaKahdeksikko, haastattelutHaulikko, tehosteet (suuntamikrofoni)

Ääni – Nauhurit

DAT-nauhuriDigitaalinenKäyttää nauhoja, 30-120minAmmattilaiskäytössä

MinidiscDigitaalinenKäyttää magneto-optisia levyjä, 74 minEdullinenKäyttää ATRAC-kompressiota

Multimediaohjelmointi

Visual BasicDelphiMacromedia DirectorHyperstudioToolbookScalaAuthorware

Verkko-ohjelmointi HTML CSS Javascript DHTML XML VBScript VRML SMIL Java CGI ASP ActiveX

Jakelutekniikat

CD-levyCD, CD-R(W), VCD

DVD-levyDVD video, DVD-audio, DVD-R(W),

DVD+R(W), DVD-ROM/RAMTietoverkot

Lähiverkot, internetTeleverkot

Lankapuhelinverkot, matkapuhelinverkotRadio- ja televisioverkot

Radiolähetys, Kaapelitelevisio, televisiolähetys ja satelliittilähetys