Ett instrument för att skapa sin egna version av musikvideon alone Ett utforskande examensprojekt av Jonas Sandstedt och Erik Slättberg

Transkript

1 alone Ett instrument för att skapa sin egna version av musikvideon alone Ett utforskande examensprojekt av Jonas Sandstedt och Erik Slättberg Jonas Sandstedt Högskolan för Design och Konsthantverk Examensprojekt HDEX10 Kandidatprogrammet i design 1

2 2

3 Innehållsförteckning Inledning... 4 Mål... 4 Bakgrund... 4 Syfte... 5 Frågeställningar... 5 Avgränsningar... 5 Alone... 5 Genomförande... 6 Research... 6 Analys... 7 Process... 7 Resultat... 8 Inledning... 8 Gränssnitt... 8 Samarbete... 9 Diskussion & Reflektion Betraktare eller användare Det fysiska gränssnittet Segment eller hela spår?..., Vad är ett bra samarbete? Lärdomar från projektet Framtida utveckling Källförteckning Delar ur mitt studiematerial: Bilagor - bilder... 13

4 Inledning Mål En musikvideo kan vara både en visuell tolkning av musiken eller en helt egen berättelse med musiken som ackompanjemang, men filmen som medium är traditionellt en envägskommunikation. För att öppna upp för en kommunikation mellan filmen/ musiken och betraktaren ville jag tillföra ett extra lager i form av interaktivitet. Jag ville genom interaktionen få betraktaren att bli en medskapare av verket: en användare. Detta tror jag ligger i fas med en stor målgrupp som dagligen skapar, snarare än konsumerar innehåll. I projektet ville jag skapa ett gränssnitt som gjorde att användaren skulle uppleva att hen är en del av musikvideon genom att t ex påverka handlingen och berättandet, precis som när man interagerar i ett spel. Mitt mål var att kombinera och fördjupa mig i mina intressen inom rörlig grafik, interaktivitet, berättande och musik. Detta skulle resultera i en fungerande interaktiv musikvideo för en digitalt medveten målgrupp som är intresserad av att själva skapa och forma sin omgivning. Jag ville även utveckla mitt manér inom rörlig grafik. Projektet skulle till stor del gå ut på att konstruera en metod och en struktur för ett samarbete mellan mig och en kompositör där vi skulle kunna inspireras av varandras arbeten och tillsammans skapa verket. Bakgrund Jag har tidigare arbetat med film, rörlig grafik och webbsidor/ interaktivitet/gränssnitt. Under många år utbildade jag mig även till musiker, så nu ville jag sammanföra alla dessa delar i ett projekt. Då kom jag på idén att göra en interaktiv musikvideo. Interaktiva musikvideos är dock ingen ny idé, utan har testats flera gånger tidigare. Interaktionen blir dock oftast en form av effektsökeri utan något egentligt djupare syfte (se exempel på s. 6). Som inspiration ville jag istället utgå från spelindustrin som man skulle kunna säga är experter på interaktivt berättande. Liknande projekt Mobile Evolution - Under min tid som praktikant på informationsgrafikbyrån Golden Section Graphics gjorde jag en rörlig infografik där man kunde navigera genom att klicka på olika årtal. Mjölk - Ett webbprojekt där jag gestaltade artisten och kompositören Cornelia Arvidssons musik i form av en hemsida där man kan navigera runt och kolla på film och bilder samtidigt som musiken spelas i bakgrunden. Inferno (Utforskande projekt, HDK 2012) - Genom att utforska mina gamla mardrömmar från min barndom, försökte jag med animation bygga upp samma känsla som jag fick från dessa drömmar. 4

5 Syfte Att engagera och involvera människor i verket har som syfte att skapa ett starkare band mellan användaren och musikvideon, att göra det lättare för användaren att tolka musiken. Jag hoppas med den här musikvideon få människor att stanna upp och slukas upp för en kort stund och bara glömma bort allt runtomkring dem. Jag hoppas att personer som upplever det här verket får de känslor jag vill förmedla och verkligen känner sig delaktiga i upplevelsen, att de lever sig in i berättelserna om ensamhet och kampen att komma ifrån den. Frågeställningar Hur kan ett gränssnitt se ut och fungera för att få användaren att bli medskapare av musikvideon? Hur kan jag skapa ett bra samarbete med en kompositör där båda kan inspireras av varandras arbete? Avgränsningar Jag ville i mina avgränsningar undvika att skapa någon ny teknisk lösning, då det skulle ta för mycket tid i ren programmering, utan planerade att hitta smarta sätt att använda befintlig teknologi som jag var bekant med. Min primära målgrupp var en skapande människa, är datorvan, redan gillar musikgenren och är musik- och spelintresserad. Men efter tester så kunde jag se att den målgruppen endast gällde för en typ av användning av verket. Som ett resultat av att verket är ett instrument finns olika svårighetsgrader som tilltalar olika målgrupper. Allt från att veta exakt hur man kan kombinera olika segment med varandra och jobba musikaliskt, till att bara köra igenom ett spår i sin helhet. För att underlätta användartesterna valde jag att endast testa på människor i min omgivning. Jag fokuserade inte heller på marknadsföring av verket eller andra saker runt omkring. Andra avgränsningar var att endast testa runt 2-4 olika gränssnitt och ett par olika visuella manér för att bäst se vad som kunde fullfölja mina mål, samt att det färdiga verket endast skulle innehålla omkring 6min material med alla variationer. Detta för att jag skulle kunna fokusera mer på gränssnitt och metodutveckling Alone Resultatet av mitt projekt blev det interaktiva instrumentet Alone. Temat för verket var färden mellan ensamhet och gemenskap samt ordet periferi (i kontexten att det kan finnas människor runt omkring en ensam person som den inte ser). Det här temat tror jag många kan känna igen sig i, alla har vi säkert någon gång känt oss ensamma, även om vi kanske inte riktigt varit det. I verket finns mycket symbolik som går att tolka och diskutera omkring, så verket skulle kunna fungera som en språngbräda för en fortsatt diskussion kring temat, då vi i norden inte är så bra att prata om vare sig ensamhet eller depression. Mer om resultatet kan du läsa på sidan 8. Projektet i sig var av en utforskande karaktär, där jag undersökte hur jag med en metod kunde skapa ett bra klimat mellan mig och en extern kreatör, där båda kunde inspireras av varandras skapelser och tillsammans skapa verket. Resultatet blev olika segment där vi tolkade varandras material och lät på så sätt verket byggas upp tillsammans av oss båda. Läs mer om metoden under Samarbete på sid 9. 5

6 Genomförande Research Jag började mitt arbete med att undersöka vilka liknande projekt som redan existerar. Det visade sig finnas en hel del interaktiva musikvideos, och många har producerats under de senaste åren. Till höger finns några exempel. Parallellt med att hitta exempel på interaktiva musikvideos letade jag även inspiration bland spel, traditionella musikvideos och appar. Exempel på inspirationskällor är spelet LIMBO med dess underbart vackra miljöer, musikvideorna Thriller av Michael Jacksson och The Raven that Refused to Sing av Steven Wilson, den interaktiva musikvideon Carry Me ( tv) samt Robin Daveys svartvita GIF-animationer ( ly/1mnmrb7). Jag passade även på att läsa på om Gamification, eller spelifiering som är den svenska termen, om olika spelmekanismer och hur de påverkar användarens upplevelse av produkten. Där fastnade jag främst för belöningar i form av inre motivation (det ska vara kul att använda verket) och att det finns olika svårighetsnivåer (desto bättre du lär dig de olika delarna desto större kreativt kan du uttrycka). Exempel på interaktiva musikvideos: The Wilderness Downtown Detta är en musikvideo där du kan skriva in din adress där du växte upp och genom en blandning av olika tekniker se dina gamla kvarter mixas med animationer och videos. Bob Dylan - Like A Rolling Stone En sida där du kan växla mellan olika påhittade TV-kanaler med personer som mimar till Bob Dylans låt. Just A Reflector Genom att synkronisera filmen med en smartphone kan man styra vad som händer på datorskärmen genom att vinkla och vrida mobilens skärm som är riktad mot datorns webbkamera. Pharrell Williams - Happy Här får man följa olika personer som mimar låten Happy under alla dygnets 24h, där användaren själv kan bläddra runt bland de olika tiderna. En stor del i projektet blev även att läsa på och förstå tekniken bakom webbstandarderna för HTML5-video och ljud. 6

7 Analys Gemensamt för de exempel på interaktiva musikvideos på föregående sida, och för många andra verk jag testade, var att det var mycket experimenterande med olika tekniker för att manipulera det visuella men att man inte kunde styra musiken. Detta anser jag leder till ett mer kontrollerat användande, men samtidigt finns det stor potential i att låta användaren få en större frihet. Därför bestämde jag mig för att även musiken skulle gå att påverka. Efter att ha läst på om tekniken för hur man implementerar HTML5-videos och ljud insåg jag att det inte finns några liknande lösningar som jag ville använda mig av, så därför beslutade jag mig för att skriva min egna kod med hjälp av några färdiga skript jag hittade. Process En stor del i mitt projekt bestod av att skapa ett bra samarbete med en kompositör som jag valde att samarbeta med. Där byggde jag upp ett system för att tolka varandras material, se vilka segment vi skulle jobba med och hur mycket som var kvar totalt att göra. Utvecklingen av gränssnittet bestod till största delen av att testa olika tekniska lösningar och koppla det till de fysiska knapparna på ett vanligt tangentbord på olika sätt. Dessa olika gränssnittsvariationer testades sedan på personer i min omgivning, framförallt på personer som stämde in i min målgrupp. Ett av de problem som dök upp under projektets gång var användare försökte klicka på de beskrivande symbolerna på startsidan för att interagera (se bild 1). Då testade jag att använda enbart text som beskrivning (se bild 2), men det resulterade i att personen inte läste instruktionen. Istället gjorde jag mindre symboler samt lät mer förklarande text dyka upp ifall användaren klickar på symbolerna. Mest tid tog dock själva video-materialet. Jag hade bestämt mig för att utgå från stilen i ett 30s klipp som jag gjorde under ett tidigare utforskande projekt i tvåan på HDK. Detta var en stil som byggde på frame-by-frame animationer, med i mitt fall en hastighet på 12 bilder per sekund. Detta ledde till att varje tiosekunders-segment tog omkring 8h, eller totalt 104h av total 293h som jag hade på mig i projektet. Detta ledde till att jag inte kunde lägga lika mycket fokus på att utforska lika många olika gränssnitt som jag velat. Stilen bidrog däremot till att förstärka temat om ensamhet genom att skapa kontraster mellan de stilla miljöerna och den fladdrande figuren och objekten, som om den var de var de enda levande objekten. Denna teknik gjorde även att man fokuserade på dessa objekt, och gjorde att stilla scener fylldes med liv. I de scener med personen i har jag använt mig av referensvideor på mig själv som springer, ramlar, rör i kaffe etc som jag sedan målat ovanpå för att kopiera naturliga rörelser. Detta var ett sätt att snabba på arbetet då jag inte hade så mycket tidigare animeringserfarenhet från människor som rör sig. Bild 1: Startskärmen - version 1 Bild 2: Startskärmen - version 2 7

8 Resultat Alone är namnet på det verk jag skapat tillsammans med kompositören Erik Slättberg. Jag har ansvarat för allt förutom själva musiken. Vi har även tillsammans diskuterat fram tema, vad vi vill förmedla och utbytt idéer. Verket är en webbaserad interaktiv musikvideo/instrument där man med piltangenterna kan bläddra mellan olika spår, där varje spår har en egen berättelse, en egen video och egen musik. Samtidigt hör alla delar ihop och användaren kan mixa dem som den vill för att skapa något nytt. När verket började blir färdigt insåg jag mer och mer att det vi skapat inte är en interaktiv musikvideo, utan snarare ett musikaliskt och visuellt instrument. Detta gör att upplevelsen av verket, precis som när en DJ skapar sina verk, påverkas av vem som spelar. Användaren kan välja att inte byta spår alls, eller att byta hela tiden vilket ger en helt annat resultat. Gränssnitt Det första målet med projektet vara att skapa ett gränssnitt där betraktaren kan bli en användare och en medskapare av musikvideon. Det gränssnitt jag främst jobbat med är det vanliga tangentbordet, dels för att det är lätt att jobba med ur en utvecklingssynpunkt, och dels att jag planerar att publicera verket på internet. För att göra interaktionen så lätt som möjligt begränsade jag mig till endast piltangenter och mellanslagstangenten (se bild 3). För att starta musikvideon så trycker man på mellanslagstangenten ( ), detta är en tangent som används som standard för att starta en video, både på webben och på datorer. För att sedan bläddra mellan de olika spåren använder man piltangenterna ( ). & växlar mellan spår 1, 2 & 3, medans tillåter användaren att mixa de andra spåren tillsammans genom att lägga två videos på varandra. Startskärmen (se bild 4) består av en titel, en enklare beskrivning av gränssnittet samt en copyright-text. När personen klickar på eller dyker små indikationer upp på vilket spår man valt för att ge en tydlig koppling till vad som händer. Dessa dyker endast upp på startskärmen och under de 10 första sek. av verket. Trycker man på första gången så startas filmen, därefter kommer man tillbaka till startskärmen varje gång man pausar filmen (bild 4). När verket har nåt slutet (som händer efter 2 min och 10 sek) kommer användaren till en slutskärm där personen kan välja Bild 3: Mellanslagstangenten och piltangenterna fungerar som det fysiska gränssnittet. (Större bilder kan ses längst bak) Bild 4: Startskärmen 8

9 mars 2014 nas jobbar med ik jobbar med Track 1 Track 2 Track 3 148j 148je 148j 149ej 149ej 149ej 150ej 150ej 150ej 151je 151je 151je 152e 152e 152e 249ej 249ej 249ej 250je 250je 250je 251e 251ej 251e 252je 449e 449e 449e 450je 450je 450je 451e 451e 451e 252j Stat: 14 segment / spår = 2.3m Totalt: 42 segment = 7min Färdiga segment: 6 st Kvar att göra: 36 st (85% Bild 5: Slutbild - välj att spela om eller att dela Bild 6: Utkast på flödesschema Bild 7: Struktur med 10s-segment med allt material som gjorts fram till 22 mars 2014 Bild 8: Segments-namn Fler samt större bilder kan ses längst bak att spela om verket eller att dela det till andra (se bild 5). Samarbete Projektets andra mål var Hur kan jag skapa ett bra samarbete med en kompositör där båda kan inspireras av varandras arbete? Genom mailkonversation och skype-möten kom jag och kompositören Erik gemensamt fram till temat för verket som var en färd mellan ensamhet och gemenskap samt ordet periferi (i kontexten att det kan finnas människor runtomkring personen som den inte ser). Metoden som jag utvecklade bestod i att projektet delades upp i 10sekunder långa segment fördelat på 3 spår (se bild 6 & 7). Dessa delades in och namngavs med hundratal. Från början hade vi 4 olika hundratal som alla startade mitt i: 150, 250, 350 samt 450 (efter ett tag försvann 300 segmentet då vi ansåg att det inte behövdes). Vi började med att skapa två segment var, så Erik började med segment 150 samt 350 och jag med 250 samt 450. Därifrån började vi tolka varandras segment, jag gjorde video till hans musik och han skrev musik till min video. När vi tolkat varandras segment fortsatte vi att lägga till ett segment som den andra kunde tolka. Vi hade valmöjligheten att gå antingen uppåt eller nedåt i segmentens talsserie när vi tolkade. Ex om Erik började med 150 som jag sedan tolkade, så kunde jag fortsätta med 151 eller 149. Filerna döptes efter segmentsnummer samt en ändelse beroende på vem som skapat segmentet. j för Jonas, e för Erik, je om Jonas börjat och Erik sedan tolkat samt ej om Erik börjat och Jonas sedan tolkat (se bild 8). För spår 1 och 3 som vi gjorde efter att det första spåret (spår 2) var färdigt, bestämde vi att vi skulle testa att göra hela spåret på en gång. Så Erik komponerade hela spår 3 som jag sen tolkade och jag skapade spår 1 som Erik sedan tolkade. Denna metod med segment och tolkningar ledde till att vi hade en intressant kommunikation med visuella och musikaliska uttryck och tillsammans skapade verket och inspirerade varandra att göra saker vi inte skulle ha gjort själva. Detta är min definition av ett bra samarbete, när man tillsammans kan skapa något större än vad man skulle kunnat göra själv. Under projektets gång dokumenterade vi varandras tolkningar i skrift för att sätta ord på vad vi såg och hörde i den andres verk, men utan att på något sätt värdera den andres arbete, bara vad vi upplevde och hur vi tolkade det. 9

10 Diskussion & Reflektion Betraktare eller användare Ett av mina mål med projektet var att få en betraktare att bli en användare och medskapare av en musikvideo. Lyckades jag med det? För att svara på det behöver jag först fråga mig vad en medskapare är och vad en musikvideo är. Enligt Mikael Askander (källa 1) har musikvideon traditionellt används för marknadsföring och som ett konstnärligt uttryck för det som ska kommuniceras. Så med en ursprunglig beskrivning är det inte en musikvideo jag gjort då jag inte marknadsför något. Ser man till andra interaktiva musikvideos som finns ser man även att musiken i sig inte kan påverkas. I Alone kan man som användare både påverka musiken och det visuella. Som jag skrivit tidigare så kanske det jag skapat inte är en interaktiv musikvideo, utan snarare ett instrument eller ett verktyg med många möjligheter till kreativt uttryck men med tydliga begränsningar i vad man kan göra. Det enkla gränssnittet med enbart piltangenter och spacebar, gör det lätt för betraktaren att börja interagera med verket. Men frågan är om man måste kunna påverka mer än att byta mellan tre olika spår för att verkligen bli en medskapare av verket? För att vara en medskapare tänker jag att man måste känna en tillhörighet till verket, att upplevelsen är något man själv skapat, så det är nog väldigt individuellt. En del personer jag testat på har verkligen gått in i verket och testat allt och skapat sina egna verk, medans andra mest har observerat och inte interagerat i samma utsträckning. Så om jag lyckats med mitt mål eller inte är helt beroende på vem användaren är och vad den upplever. Det viktigaste jag lärt mig från mina användartester är att det finns kopplingar mellan hur användaren interagerar med gränssnittet, och personens kunskap, erfarenheter och intresse för teknik och musik. Det resulterar i att en användare förstår precis hur hen ska interagera medans en annan behöver mer vägledning. Det fysiska gränssnittet Det fysiska gränssnittet jag skapat har både för och nackdelar. Fördelen är att det finns på alla datorer och är välkänt av min spelintresserade målgrupp. Nackdelar är att det inte funkar på pekskärmar och att man tvingar användaren till att använda ett tangentbord när denna kanske helst navigerar med en mus eller pekplatta. Det finns heller ingen tydlig koppling mellan piltangenternas riktning och vad som händer på skärmen, mer än att de positiva berättelserna (spår 1 & 2) är uppåt och den mer negativa (spår 3) är nedåt. Segment eller hela spår? För det första spåret (spår 2) använde jag och Erik oss av 10s segment som vi skickade till varandra för tolkning. För spår 1 och 3 valde vi istället att skapa ett helt spår på en gång. Den senare metoden ledde till att spåret inte kändes lika uppklippt, att det var mer flyt i övergångar och i handlingen. Den gick även fortare att göra. Sen beror antagligen det på att vi redan hade gjort ett spår och hade mycket material och erfarenhet gratis. Det första spåret vi gjorde blev dock mer av en konversation mellan oss, och vi fick mer inspiration från varandra som drev på utvecklingen och handlingen. Så båda metoderna hade sina fördelar. Det hade varit intressant att testa om man kunnat använda båda dessa metoder samtidigt 10

11 och ta till vara bådas styrkor, genom att exempelvis endast skicka grova skisser till varandra för tolkning. Därefter hade vi kunnat producera var sitt spår som vi sedan bytte och tolkade igen. Vad är ett bra samarbete? Mitt andra mål var att skapa ett bra samarbete där vi fick inspiration av varandras skapande. Det är något jag tycker vi lyckats med riktigt bra, dock är det nog till stor del beroende på att vi kände varandra sedan tidigare och kommer från liknande bakgrund. Min handledare (källa 2) pratade om vilka roller, mandat och ansvar vi haft i vårt samarbete, och det är något som har varit underförstått. Då jag initierade projektet fick jag mer av en organisatorisk roll, men båda drev på och kom med nya idéer. En viktig sak att det fungerade så bra var nog att vi gav varandra utrymme och var noga med att analysera och betrakta snarare än att kritisera. Om den andra inte gav de reaktioner man önskat så inser man själv att något är fel och kanske behöver ändras. Vi har även alltid vetat vem som ska göra vad tack vare systemet med segment och filnamn. Det var även väldigt effektivt att jobba från flera håll samtidigt så vi alltid hade något att jobba med. Men det viktigaste var nog den täta dialog vi förde med flera Skype-möten och de omkring 40 mail vi skickade med tolkningar och tankar. Lärdomar från projektet Då hela projektet varit ett sorts utforskande av en metod till att skapa ett verk tillsammans, har jag framförallt lärt mig att den här speciella typen av samarbete faktiskt funkar. Tidigare har jag mest jobbat enskilt i projekt, men det är spännande att jobba tillsammans med någon som har helt annan kompetens än mig, och som gör att resultatet blir så mycket bättre än om jag skulle försökt göra det själv. Även rent tekniskt har jag utvecklats, även om det inte var ett del av mitt projekt så har jag utvecklat hela den tekniska plattformen. Så det har gett mig en större förståelse för webbstandarder och saker som bakomliggande renderingsmotorer i webbläsare, samt bättre kunskap inom HTML5 och JavaScript. Det känns även som jag har blivit snabbare på att animera. Under mitt utforskande projekt i 2an gjorde totalt 30s film med samma miljöer och figurer jag använt i detta projekt. Då tog det omkring 2 veckor att animera dessa partier, idag kan jag göra samma sak på under 3 dagar. Dock tog materialproduktionen mycket mer tid än jag planerat. Framtida utveckling Under ett samtal under examinationen började vi diskutera olika framtida tillämpningar och andra intressenter. Jag har tidigare testat att byta ut videorna till helt andra, och insett att man kan använda detta tekniska verktyg till en rad olika tillämpningar. Allt från att kunna kolla på en intervju och kunna välja vilken vinkel man vill se, till att bygga upp ett helt spel med hjälp av film där man hoppar fram och tillbaka i ett långt klipp och påverka vad som händer. Även metoden i sig skulle kunna användas i ett kommersiellt sammanhang där en kund presenterar ett tema som jag och en kompositör eller annan kreatör tolkar och bygger fram. 11

12 Källförteckning Källa 1: Källa 2 (muntlig källa): Sofia Wallner, handledare, HDK Delar ur mitt studiematerial: Gamification: Spelifiering i lärande Gamification: Gaming can make a better world mcgonigal_gaming_can_make_a_better_world.html Om ljud och video i HTML5 view/everything-you-need-toknow-about-html5-video-andaudio/ Exempel på klassiska musikvideos och information om dess historia Music_video 12

13 Bilagor - bilder Bild 1: Startskärmen - version 1 Bild 2: Startskärmen - version 2 13

14 Bild 3: Mellanslagstangenten och piltangenterna fungerar som det fysiska gränssnittet Bild 4: Startskärmen - färdigt verk 14

15 Bild 5: Slutbild - välj att spela om eller att dela Bild 6: Utkast på flödesschema 18 mars 2014 Track 1 Stat: 14 segment / spår = 2.3min Totalt: 42 segment = 7min 148j 149ej 150ej 151je 152e 249ej 250je 251e 449e 450je 451e Track 2 Färdiga segment: 6 st Kvar att göra: 36 st (85% kvar) 148je 149ej 150ej 151je 152e 249ej 250je 251ej 252je 449e 450je 451e 252j Track 3 148j 149ej 150ej 151je 152e 249ej 250je 251e 449e 450je 451e Jonas jobbar med Erik jobbar med Bild 7: Struktur med 10s-segment med allt material som gjorts fram till 22 mars

16 Eriks arbetsplats samt gränssnitt (nedan) Bild 8: Segments-namn 16

17 För spår 2 arbetade jag med snabba storyboards varje segment för sig då jag inte visste vad som skulle hända i nästa segment efter Eriks tolkning. Under spår 1 och 3 kunde jag som ovan skissa på ett storyboard för hela spåret. All kod för projektet: Totalt 428 rader CSS, 88 rader HTML och 408 rader JavaScript, totalt 924 rader eller tecken (16 A4-sidor) 17

18 Segment no 149 track 2 Segment no 150 track 2 Segment no 250 track 2 Segment no 449 track 2 Segment no 149 track 1 Segment no 449 track 1 Segment no 452 track 1 Segment no 251 track 3 18

19 19

20 20