Kapittel 8 - Planlegging og utvikling

• Ved å planlegge prosjektet på forhånd, får man som oftest en helheltig også mer oversiktlig design og funksjonalitet på produktet.
• Det er mye mer tidsbesparende å gjøre endringer i noen skisser og stikkord på et ark, enn på måtte skrive om programkode, tegne ny grafikk eller lage nye animasjoner.
• I planleggingsfasen kan man også skrive kode og lage grafikk
• Prototyping = enkle tester på den produktet du jobber med.
• Ideen med prototyping er ikke å lage det ferdige produktet, men å teste at det man gjør under utviklingen vil se slik som man ønsker.
• Systemutviklingssammenhenger, er som i tradisjonelle applikasjonsutviklingssammenhenger ønsker man ofte å ha en modell hvordan det arbeidet fra prosjektet starter til produktet er ferdig.

Lage en god produkt må du følge dette tre skritt:

PLANLEGGING --> UTVIKLING --> TESTING

Hva skal planlegges?

• Kravspesifikasjon: Et liste opp funksjonalitet produktet skal ha. Skrive stikkord om hva vi faktisk ønsker å lage.

• Brukergrensesnitt: Brukeren kan interagere med og få feedback fra. Viktig å designe brukergrensesnittet slik at vi gir brukerne den opplevelsen vi ønsker.

Kapittel 7. Interaktivitet

Interaktivitet: brukeren kan gi input i multimedieproduksjonen, og styre informasjonen.

• Ingen forskjell mellom en interaktivitet multimediaproduksjon og et dataprogram.
• Ulik produksjoner = forskjellig grad av interkativitet.
• Høyre grad av interaktivitet hvis brukeren får valgmuligheter (eks: knapper for å zoome inn og ut, neste & forrige knapper etc).
• Et dataspill er en multimedieproduksjon, har en meget høy interaksjonsgrad
• Interaksjonsgrad og kompleksitetbør tilpasses innhold og formål med multimedieproduksjon. Rettet mot forskjellige Målgrupper. Altså du skal ikke lage et barnespill der det er mye knapper, og avanserte funksjoner som barn ikke forstår.
• Funksjonene bør ha en viss nytteverdi = funksjonene på en annen måte hjelper brukeren til å oppnå noe.
• Formål og innhold: er med på å bestemmer nytteverdien.

World of Warcraft kjent som WOW, er et populært MMORPG spill. Med 11 millioner abonnenter(spillere).

Bildeserie med neste og forrige knapper

Side 137, oppgave 4.

Bildeserie med "neste og forrige" knapper
Jeg har både lagt på deviantart og på min hjemmeside. På deviantart har jeg brukt lyd som spilles rett av flashen, men på hjemmesida mi har du lov til å velge om du vil høre på musikken. Det er bare å klikke på "PLAY-knappen" så hører du. For de som har treg nett kan det ta litt tid før sangen laster opp.

Hjemmesida(flash Nr.2 på hjemmesiden
Klikk på bildet)

DeviantArt:

CupCake by ~YunaTv on deviantART

Preloader

Side 135 - lage en preloader.
En preloader er lurt å bruke, fordi det kan ta litt tid for å laste ned alt opp på en websider, og en preloader viser oss når den kan starte (ferdig med å laste opp).

Min preloader ble mislykka, jeg skjønner ikke hva jeg har gjort galt. Har gjort om og om igjen mange ganger, men det skjer bare det samme. Først av alt det kommer ikke opp 100%, og den bare blinker hele tida. Sjekk min mislykka Preloader under.


Lage en preloader by ~YunaTv on deviantART

VIDEO - Kapittel 6.

Kapittel 6. Side 119.

1. Forklar forskjellen mellom interlacede og progressive bilder.
- Interlacing er et fenomen som stammer fra det å vise video på skjermer med billedrør. For at bildet ikke skal flikke, trenger man altså bare 25 bilder pr. sekund for å få ganske jevne bevegelser, men man trenger flere bilder pr. sekund for å slippe en skjerm som flimrer.

- Progressive bilder, er på de moderne flatskjermene. De viser hele bilder.
To og to bilder blir settes til ett, for å vise en video med inerlacing på slike skjermer.


2. Hva er pikselstørrelsen og bildehastigheten i PAL-standarden?
- Bildehastigheten på 25 Fps, og en vanlig pikselstørrelse er på 720 x 576.


Video i multimedia.
- En video vil som regel inneholde både bilde og lyd.
- Video brukes vanligvis som en del av innholdet i multimedieproduksjonen og ikke som en del av brukergrensesnitt.
- Hvis du ønsker å bruke video, må du ha en god grunn og knytte den til temaet i resten av produksjonen.
- Video innehilder mye imformasjon, og vil dermed gi store filer. Hvis videofilen skal overføres via internett, bør den håndteres slik at den kan streames på samme måte som lyd. (Videoen spiller, før videoen


Vanlige bruksområder for video er:
- Brukerveiledning og informasjon: For eks: Vise hvordan man vasker tallerkene ordentlig, eller hvordan man skal redigere et bilde på photoshop.
- Undervisning: For eksempel en lærer som løser et mattestykke på tavla, eller opptak av folk som snakker annerledes språk.
- Nyheter: Finner man for eksempel på nettaviser (VG), der de viser opptak av viktige hendelser.


Teknisk kvalitet og egenskaper:
- Video består av en serie med enkeltbilder som viser raskt etter hverandre
- Den tekniske kvaliteten → pikselantallet o bildene, fargedybden og hvor mange bilder som vises i pr. sek(bildehastighet). På samme måte som for lyd, kan vi regne den ut en bitrate for video. For eks:
720x576, 24 bit fargedybde og 25 bilder pr.sek → 720x576x24x25 = 248,8 Mbit/sek

Bitrate
Piksel x fargedubde x bilde pr sek
Eks: 720x576x24x25 = 258,8 mbit/s


KOMPRIMERING

MPEG-1
Avleggs for video

MPEG-2
Mest brukte komprimering (typisk DVD kvalitet).

MPEG-4
Inneholder kopibeskyttelse
Divx - langfilmer
quikctime – småfilmer, snutter
blueray – ny format
HD-DVD
Digitale bakkenettet i Norge, baseres på denne standarden

WMV
Av og for Windows
Populær til småsnutter.
Spilles av i for eks: Windows media player

Sorensen
Gammel måte å komrpimere på
Komprimering brukes i eldre Quicktime-formater og i Flash Video

DV
Komprimeringen forandrer ikke bildet, men komprimerer hvert bilde i seg selv
Komprimeres som vanlig videokamera, for eks i en tape
Filen blir større


Codec
Program som komprimerer eller dekomprimerer
Eks: DVD MPEG-2 Codec



Videostandarder
PAL 720x576 - Europa
NTSC 720x480 – Amerikansk


Bredde høyde
4/3 eller 16/9
PAL = 720x576 dvs 5/4
Nye HD-tver blir sreenet riktigsom 16/9


FILMFORMATER

DV/DIF
Videokameraer → opptak på magnetbånd (miniDV-kasetter)
Høy bitrate (25 Mbits/s)
MiniDV-tape kan inneholde HD-video → brukes MPEG-2-komprimering

AVI
Gammel format av Windows
Kan inneholde lyd og video som er komprimert på forskjellige måter(forskjellige codecer)

Quicktime(mov)
Utviklet av Apple
Samme som AVI. Lyd og video, komprimert på forskjellige måter(forskjellige codecer)
Populær format, overføre video på internett
Brukes i Itunes og Ipod

MPEG
Format som vanligvis bruker MPEG-1 eller MPEG-2 komprimering.
Opptak
DV-Tape
Hard disk


Bildeutsnitt og kameravinkler:
- Forteller mye ved å velge ulike bildeutsnitt og kameravinkler
- En lav kameravinkel(froske perspektiv) gjør motviet sterkt, modig eller truende
- En høy kameravinkel(fugle perspektiv) gjør motivet svakt, beskjedent eller uskyldig
- Èn kameravinkel gjennom hele video, virker kjedelig og statisk

Kamerabevegelser
- Best å la kameraet stå stille på et stativ
- Veksle mellom ulike synsvinkler i shotene
- Rotere kameraet eller zoome inn og ut.
- Håndholdt kamera gir mindre stabile bilder, gir spesielle effekter

Styre Lyd

Side 132. Styre en lyd i en MediaDispley-komponentet.
Jeg har brukt timesvis på å sette ut denne flashen på internett med lyd. Først så prøvde jeg å sette ut på Deviantart, men det gikk dessverre ikke. Lyden kom ikke opp, fordi lydfilene ligger på dataen, og ikke på Deviantart. Så tok jeg og la ut Flashen på hjemmesiden min. Det gikk heller ikke, samme problemet.

Deretter tenkte jeg at, for å kunne spille lydene, må jeg også laste opp mine lydfiler på hjemmesida. Voila! Det virket.. MEN det kan kanskje ta litt tid for å laste opp flashen, for de av dere som har treig nett. Men det funker ihvertfall!
Klikk på bildet for å se på den KULE flashen min! (ps: tar litt tid å laste opp. Be patient, please)

Edit (30.09.09):: når du trykker på linken kan du se to flash-videoer. Den siste flash video er fra oppgave 4, på side 137 !

Rakett

Side 118 Flash boka. Vi fikk en oppgave om å "konvertere" en video til Swf-fil. Jeg hadde litt problemer med å sette min swf-fila på deviantart. Flash'en funket ikke (det var bare hvitt bakgrunn), så jeg måtte lage på nytt mange ganger. Men nå har jeg fått det til! :)

Kapittel 5. LYD.

Oppgaver side 104

1. Nevn eksempler på feilaktig bruk av lyd – for eksempel på websider. Har du selv blitt irritert over lyder når du har surfet på nettet?
-Det er noen ganger irriterende at lyden kommer plutselig opp på en hjemmeside, uten at du forventer noen ting. Det gjelder å bruke lyd med varsomhet ettersom unødvendig og utydig lyd kan være svært irriterende. Hvis du kombinerer flere forskjellige lyder, må de ikke slå hverandre ut. Høye lyder av ”pling” og ”boing” når du klikker på knapper og menyer, vil bli slitsomt i lengden.


2. Forklar hvordan lydbølger kan konverteres til digitale data. Hva er det som bestemmer hvor god teknisk kvalitet vi får på dataene.
-For å lagre digitalt må lydbølgene konverteres til tall. Dette skjer ved at vi måler bølgehøyden på lyden regelmessig og lagrer verdiene som en serie med tall. For å få en god teknisk kvalitet på lyden er det avhengig av hvor ofte vi måler (sampler) bølgehøyden, og hvor nøyaktig verdier vi måler (antall bits for hver verdi).

3. Firmaet Lyrikkbua lager multimedieproduksjoner på CD-ROM. De har bedt deg spille inn opplesningen av et dikt og ønsker at lydkvaliteten skal være ”proff”. Du har kun anledning til å bruke en billig PC-mikrofon. Sier du ja til jobben?
- Billige mikrofoner og headset til PC vil i beste fall gi akseptabel lyd. Ja, jeg hadde tatt jobben!

4. Du lager et nettsted hvor brukerne kan laste ned lydfiler. Hvilket filformat bør du velge slik at nedlastingstiden blir kort, i tillegg til at flest mulig brukere kan spille den av?
-Mp3-format ville jeg ha valgt. Det tar lite plass, ved bitrater på 128-192 kbits/s får vi nesten en god kvalitet som CD-kvalitet. Det er praktisk mulig å overføre lyd med god kvalitet på internett også.

Bildeserie med streaming

Vi har kommet til kapittel 5, Lyd. Her skulle vi åpne vår første oppgave, nemlig Bildeserie i flash med lyd. Men denne gangen fikk vi oppgave med å lage vår første bildeserie med streamet lyd, istedet for å ligge innbakt i swf-fila.

Kap. 4. Animasjon

Oppgaver S. 94

1. Nevn noen bruksområder for animasjon i en multimedieproduksjon

• Undersvisning, brukerveiledning osv: En animasjon som viser oss hvordan man skal sette sammen ting. for eks. et flatpakket møbel skal settes sammen.
• Reklame eller for å vekke oppsikt: en animasjon vekker vår oppmerksomhet, enn et vanlig stillbilde. Men det er lurt å være forsiktig ved bruk av animasjon. Spesielt på websider, har det blitt vanlig at folk ikke gidder å lese eller prøver å få med seg hva bildet "prøver å si". Animasjon er på en måte blitt et kjennetegn på noe som ik er viktig.
• Underholdning: Animasjon brukes i dataspill. Brukren kan selv bestemme hvordan han/hun vil styre animasjonen selv.
• Brukergrensesnitt: trykknapper, menyer, linker osv. Kan virke mer interessante hvis de er animert. Da får man mer lyst til å trykke på "det".

2. Hva er forskjellen mellom tegnefilm og stop-motion-animasjon?
I tegne film så tegnes det hvert bilde i animasjon. I tegnefilm blir hvert bilde tegnet i gjennomsiktigark og animasjonen blir delt opp i ulike lag(layer). De samlede bildene består av alle tegeningene som har blitt lagt oppå hverandre.
Fordelen med tegnefilm trenger man ikke å tegne nye tegninger på de delene som ikke skal animeres. En annen fordel med en slik lagdeling, er at man kan animere selve arket.

Disney, Mikke mus & Donald duck. (bilde tatt fra: http://antikewl.com/daily/2008/11/18/happy-80th-birthday-mickey-mouse/).

I stop-motion-animasjon tar man bilder av virkelige objekter (dukker, frukt, modelleire osv.) og flytter litt og litt på objektene mellom hvert bilde. Når vi bruker denne teknikken, kan vi ikke lage nøkkelbilder eller inbetweening. Dette gjør at det kan være vanselig å få kontroll, og det blir vanskelig å rette opp hvis du har gjort feil med poseringene.

3. Hva er fordelen med dataanimasjon i forhold til tradisjonell animasjon? Er det noen ulemper med dataainmasjon?

• Animasjonen blir enklere å redigere. Det blir lettere når du kan sjekke animasjonen, og bla fram og tilbake i animasjonen og endre slik som vi ønsker. Mens tradisjonell animasjon må man tegne på ekstra eller ta vekk for å få det vi vil ha. Derfor er animasjon enklere å redigere.
• Datamaskinen kan automatisk lage animasjon i mellom nøkkelbilder (inbetweening).
• ULEMPE: Dataanimasjon kan være en "dum" inbetweener sammenlignet med et menneske. Animasjonen blir vanligvis dårlig eller direkte feil.

4. Forklar hva vi mener med forventning og overlapping i animasjonsprinsippene?

• Forventning: En bevegelse ved å lage en mindre bevegelse i forkant. Ved å bruke dette prinsippet oppnår vi mer at animasjonen blir mer livaktige og har realistiske bevegelser.
• Overlapping: Er for eksempel en karakter skal kaste en ball, bør armen fortsette bevegelsen etter at ballen har forlatt hånden. Det kalles overlapping. Vi bør alltid ha en viss grad av overlapping for å lage realistiske bevegelser. Hvis vi ikke bruker overlapping, dvs at enten alle bevegelsene starter og slutter samtidig, eller at en bevegelse avslutter før den starter- vil vi få en robotaktig animasjon.

Kapittel 3. Tekst

Skrifttyper
Skriftypen altså Font, bestemmer grafisk utformingen på hver bokstav. Skrifttyper kan deles opp i Serif og Sans serif. Man kan fort se forskjellen på en begge to. Serif har ”pynt” i hver bokstavene. For eks. Se bildet under.
De røde sirklene som jeg har markert, viser dere hva jeg mener "pynt" er.


Mens Sans serif har ingen pynt i seg. Sans serif bør man brukes i korte tekster , overskrifter, logoer, trykknapper, og menyer. O.l



Man kan ha tre forsjellige utseender på en skrifttype, fet (bold), kursiv (skråstilt tekst) eller normal.

Fet: Hei på deg :)
Kursiv: Hei på deg :)

Det finnes veldig mange forskjellige skrifttyper fra løkkeskrift til ”stempelskrift”. (Denne hjemmesiden finner du veldig mange type skrifttyper som man kan laste ned og bruke det, http://www.dafont.com/). Jeg vil anbefale dere å ikke bruke disse spesielle skrifttypene til vanlig eller i en lang tekst. Leserne vil da bli forstyrret med skrifttypene, og kan bli vanskeligere å lese hva det står i teksten.

Typografi: Det er å bestemme utseendet på teksten.

Størrelse
Størrelsen på teksten måles i punkter. Et punk er 1/72 av en tomme. En brødtekst (selve hele teksten) bør være på størrelse 9-13 punkter. Blir den mindre er det vanskelig å se, blir den større ser den ut som et overskrift, og det blir få ord per linje og lesingen blir mindre effektiv.

Linjeavstand
Linjeavstand som også blir kalt ”leading”. Med en linjeavstand på 0 får linjene akkurat plass, uten at teksten koliderer. Har vi for eksempel linjeavstand på -2, vil teksten kollidere litt. Og det blir vanskeligere å lese, enn hvis vi har linjeavstand på 5. Det vil bli enklere å lese, og større avstand mellom linjene, og mer luftigere blir det i teksten.

Farger
Farger er viktig for at leserne skal kunne klare å lese hva de ser. Mørk tekst mot lys bakgrunn er vanlig. Som for eksempel i en avis. Hvit bakgrunn, og svart brødtekst. For å få blikkfang, bruker man et mørkt bakgrunn med lyst tekst. Man bør også være forsiktig med farger, dette kan fort irritere leserne hvis det blir for mye av det.

Lys bakgrunn med mørk tekst:

Mørk bagrunn med lys tekst:


Dette her er "no-no", Irriterende eller hva?



Tekstformater med formatering
RTF
RTF står for Rich Text Format og er et tekstformat som inneholder informasjon om formatering.

HTML
Er et markeringsspråk for formatering av nettsider som kan vises i en nettleser. De fleste illustrasjonsprogrammer og tekstbehandlingsprogrammer kan åpne html-filer og vise dem med formatert tekst.
Et eksempel på en HTML-format(print screen av min hjemmeside):



Microsoft Word (doc)
Microsoft Word er et mye brukt tekstbehandlingsprogram produsert av Microsoft. Filene herfra kan åpnes i mange andre programmer. Filene har etternavn doc, eller docx. Microsoft Word er et profesjonelt tekstbehandligsverktøy som gir store muligheter til sideredigering.

Open Office (odf)
Open Office er en gratis program med forskjellige programmer, som tekstdokument, presentasjon, database osv.
Her er hva Open Office har å tilby.





Bildene har jeg laget selv (print screen).

Ballsprett

Her er fotballen min som jeg har brukt Motion-tween animasjon!
Motion Tween får ballen til å sprette. :)

Myggen min! Animasjon nr.2

Vi fikk oppgave om å lage en mygg, Ved å bruke Adobe Flash CS3. Den ble søt syns jeg!
Veldig gøy å jobbe med flash. Neste oppgave skal vi lage en fotball, med Motion Tween-animasjon, på Adobe CS3. GLED DERE!!! :)

Her er myggen min :D

Tegne en Isbjørn S.57-59

Jeg har brukt 2 timer for å lage disse to isbjørnene. Jeg har brukt tegneverktøyene i Flash, og Adobe Flash CS3 Pro.
Jeg hadde litt problemer med å avrunde beina og snuten på isbjørnen, men fikk selvfølgelig hjelp av læreren. Jeg syns jeg har jobbet bra med dette her. Veldig spennende, og det er første gang jeg har tegnet med Line Tool, og den har hjulpet meg veldig mye med å tegne bjørnen min.

Blå isbjørn


Grønn isbjørn

Mitt første flash-film

Jeg har da brukt ca. 1-2 skoletimer for å jobbe med dette. Jeg har da laget en flash som er bilder av meg og min kjære for lenge siden.
Jeg har brukt Paintshop med å tegne alt sammen. For å vise hva jeg har gjort, så er det best å lage det til en animasjon(GIF), eller Flash.

Enjoy! :D

18.August 2009.

Punktgrafikk

Rastergrafikk
Rastergrafikk som er også kjent for BITMAP, er et digitalt bilde som består av mange Pixler(Pixler er biter som samler seg og presenterer et bilde foran dataen/tv'en etc.)

• Ulempe med BITMAP: en BMP-fil/format tar mye mer plass enn en JPEG-format, og må ovte komprimeres.

• Kvalitet på bilde: Avhengig av antall pixler pr. tomme og hvor mange farger hver pixel kan vise. Jo flere pixler er i et bilde, jo bedre kvalitet er bildet og den bruker mer plass.
  Fargedybden - 1 Pixel kan ha 16 millioner farger. Flere farger en pixel kan ha, blir kvaliteten på bildet mye bedre.

Filformater

JPEG.
JPEG-formaten blir hele tida komprimert. Jobber du med et bilde som er allerede et JPEG-format og deretter skal du lagre det over igjen, kan du risikere for at bildet blir dårligere enn den var før. JPEG-format er mest kjent bilde-format som de fleste bruker nå idag. JPEG tar også lite plass.

GIF.
GIF har et spesiell farge som er gjennomsiktig (opacity). Finner du bilder på internett som beveger på seg(animasjon), er bildet som oftest en GIF-format(siden den blir mest brukt idag). Fil størrelse på GIF, er relativt små. Og har bare max 256-fargedybde for hvert bilde(Forskjellige farger, eller samme farge, men mange nyanser).

Et gammelt GIF som jeg har laget.

PNG.
PNG er en format som jeg pleier å bruke når jeg lager/redigerer på bildene. Kvaliteten på bildet blir ikke dårlig. PNG kan sammenlignes med GIF. Men PNG har 24 bit. farger altså 16 millioner farger, (GIF = 256 farger). PNG-format kan både ha blanding med gjennomsiktighet og farge, mens GIF er enten en farge enner gjennomsiktig. Ulempe: Ingen animasjon.

TIF.
TIF kan bli store og kan sammenlignes med JPEG, men mister ikke informasjon(kvalitet) som JPEG. Bildet blir ikke dårlig selvom du har redigert bildet og lagret, mens JPEG gjør.

RAW. RAW som betyr Rå på norsk. RAW-filer finner du stort sett i en god speilrefleks kamera. Når du tar bildet blir den ikke komprimert til en JPEG-format. RAW, er ikke behandlet og derfor tar den mye mer plass enn en vanlig JPEG bilde (ca 10 ganger så mye).


Vektorgrafikkformater

Vektorgrafikk består av linjer og kurver som er definert matematisk. Filformater for vektorgrafikk er derfor mer knyttet til spesifikke programmer og produsenter. De mest vanlige er:

• SWF - Flash adobe
• PDF - Adobe. Filene kan leses i adobe reader
• AI - Adobe illustrator

Grafisk design
- Det er ingen faste regler for at det skal se pent ut.

Kontraster
Som skaper til en helhet.

• Farge
• Form
• Materialer
• Balanse

Det gyldne snitt
Det gylne snitt bygger på en harmonisk deling av et matematisk linjestykke (3:5)