Raise The Alarm

”Raise The Alarm” – En interaktiv musikvideo

Åben RTA.html for at se projektet

Interaktive Multimedier (DIAM-E2010)

v/ Kevin McLean og Hans Asmussen

Nina Baun Jeppesen – nije. 010984

Stefan Verner Jokumsen – sver. 080881

Indhold

1.Indledning 3

4.1. Produktionsplan, overblik og sketching 5

5.2.1. Caurina-tweener 7

5.2.2. AddChild og WhileLoop 7

5.2.3. ”Add Popper” 9

5.3. Det visuelle udtryk 10

6. Usability testing 11

6.1. Testresultater 11

8. Konklusion 12

9. Kildefortegnelse 14

Hjemmesider 14

Litteratur 14

Bilag 1 15

Storybord 15

Bilag 2 15

1. Indledning

Vi vil i denne rapport redegøre for vores overvejelser og valg undervejs i udviklingen af den interaktive, animerede musikvideo til sangen “Raise The Alarm” af gruppen Polypotion. Vores overvejelser vil gå på de tekniske løsninger, herunder hvordan vi har anvendt ActionScript, samt det visuelle udtryk.

1. 
   Indhold på CD
   

På CDen ligger følgende filer:

• 
  RTA.html (åben denne for at se projektet)
  
• 
  RTANinaG6.fla
  
• 
  RTANinaG6.swf
  
• 
  Caurina (mappe)
  
• 
  FlashRapport.docx
  
• 
  FlashRapport.pdf
  

2. Præsentation af problemfelt


I dag udkommer mere end 1200 musikudgivelser årligt alene i Danmark (www.gramex.dk). Ny teknologi gør det nemmere og billigere selv at producere musik i høj teknisk kvalitet, og distribution via internettet gør det nemt at dele med en stor skare af folk. Det skærper kravene til, hvordan musikere skal brande sig selv. Synlighed og nytænkning er altafgørende for musikere og bands, der vil trænge igennem og tiltrække opmærksomhed til deres projekter på det overspækkede marked den danske og europæiske musikbranche befinder sig i. At kunne kommunikere via flere forskellige platforme og medier er nødvendigt for at nå en varieret gruppe af potentielle lyttere.

Med en baggrund som uddannede, udøvende og skabende musikere kender vi en del til den udfordring det er, at få “taletid” i musikbranchen. Det driver musikere til forskellige kreative tiltag. Flere af de tiltag handler om præsentation af musikken gennem kreative musikvideoer som f.eks. bandet OK go’s meget simple og billigt producerede video( http://www.youtube.com/watch?v=dTAAsCNK7RA ), der bragte det ellers ukendte band til næsten 10.000.000 youtube visninger.

Der ses i dag enkelte eksempler på interaktive musikvideoer. Archade Fire’s video til “The Wilderness Downtown” har fået særlig meget opmærksomhed i forbindelse med lanceringen af html5 og dets nye muligheder. Der findes også andre bud på interaktive musikvideoer, som er lavet i flash f.eks.http://www.brokenbells.com/october/ oghttp://soytuaire.labuat.com/. Den interaktive musikvideo giver mulighed for at lave noget anderledes pr for musikken og skabe opmærksomhed omkring en udgivelse. Med email og spredning via sociale medier vil man kunne nå ud til et stort publikum, uden store økonomiske omkostninger. Derudover skal videoen være anderledes nok til at den har potentiale til at blive delt og videreformidlet af de mennesker der støder på den via de sociale medier (facebook, twitter, osv).

Vi vil med afsæt i et af Ninas musikprojekter - Elektropop-duoen POLYPOTION - integrere computerspillets interaktion med musikvideoens præsentation af musikken. På den måde får lytteren en mulighed for at tage del i musikvideoens handlingsforløb, hvorved tanken er at gøre oplevelsen større eller i al fald anderledes underholdende.

   
2.1. Problemformulering

Vi vil gennem produktionen af en Flash-baseret interaktiv musikvideo forsøge at give et konkret bud på en alternativ, billig og bevidst branding på nettet.

Vi har yderligere opstillet to krav til videoen:

1. 
   Videoen skal indeholde et tidsbegrænset og enkelt spil.
   
2. 
   Grafikken skal understøtte sangens handling med ønsket om at forstærke fortællingen.
   

3. Målgruppe

Målgruppen for denne video svarer som udgangspunkt til målgruppen for Polypotions musik, da det primære produkt er musikken, og videoen kun er et middel til distribution af musikken. Målet med musikken er at blive spillet på spillesteder og klubber med et yngre klientel, festivaller og radio airplay på mainstream radio som f.eks. DR’s P3. Målgruppen afgrænses således overordnet til brugere af disse steder, og på baggrund af research på nettet samt eget kendskab til disse, fastslår vi at operere med en aldersgruppe på 15-35 år.

Derudover vil de første aftagere af videoen typisk være mennesker, der i forvejen kender Polypotion eller dets medlemmer Nina Baun og Magnus Friis. Idéen er at videoen deles og distribueres først via bandets eget website og Facebook profil, og dernæst deles ud i gennem netværket af venner og venners venner. Der er derfor tale om at målgruppen er aktive brugere af internet baserede sociale netværk.

Som vi skriver i problemformuleringen, ønsker vi at få musikken spredt ud til mennesker, der i forvejen ikke kender den. På den måde kan man sige, at Polypotions fans’ venner, der ikke kender Polypotion, er den primære målgruppe.

Hvad angår oplevelsen når folk prøver “Raise The Alarm”-videoen, ønsker vi først og fremmest, at de skal blive underholdt og tildels opslugt. Videoens kunstneriske udtryk skal gerne understøtte sangens og tekstens indhold, således at den huskes bedre!

4. Produktionsprocessen

Udgangspunktet for projektet var idéen om, at udnytte Flash teknologiens muligheder i en relativt ny sammenhæng, nemlig i musikvideoen. Vi var fra starten meget optagede af idéen om at man med en interaktiv flashbasseret musikvideo, kunne give brugeren mulighed for selv at bestemme eller ha indflydelse på indholdet af videoen. Vi forestillede os at de forskellige muligheder i musikvideoen ville være så mange, at en bruger ville kunne se, eller nærmere prøve musikvideoen flere gange og stadigt få helt nye oplevelser ud af det.

Den givne tidsramme for projektet, gjorde det nødvendigt for os at prioritere i vores produktionsplan. De mange funktioner og animerede muligheder viste sig hurtigt at være for stor en mundfuld for os, og vi måtte skære drastisk ned i vores forventninger til projektet. Vi lavede et storyboard (se bilag 1) med idéer til hvad vi mente var realistiske at lave. Som vi så det, havde vi mulighed for enten at fokusere vores produktion på udvalgte scener og stykker i sangen og udarbejde en færdig version af eksempelvis 2. vers med spil og finjusterede animationer. Eller vi kunne vælge at fokusere på den overordnede ramme og altså animere den fulde version af sangen, for til gengæld at nedprioritere detaljerne.

Det interessante ved vores problemstilling, mener vi, består i den overordnede ramme: sangen med dens fortælling og afgrænsede varighed, og i udfordringen der ligger i at skabe en sammenhængende fortælling, der samtidig spiller sammen med sangens tekstlige og musikalske aspekt. Derfor faldt vores valg på at illustrere hele sangen, og altså ikke prioritere finjusterede movie clips og detaljerige scenarier.  

4.1. Produktionsplan, overblik og sketching

I timerne har vi øvet os på at samle animationer og koder i enkelte frames på main time line, så man på den måde kommer ud over at skulle afspille tidslinien i ”øverste” scene. Vores projekt krævede det modsatte idet vi placerede audiofilen i sin fulde længe i et lag på main timeline, så vi hele tiden kunne sammenholde animationer og indhold. Sangen udgør vores overordnede ramme for produktionen og al animation og kode skal afvikles uden at det påvirker afspilningen af main time line. Det giver os imidlertid en main time line på 5624 frames svarende til sangens længde. Movie clips som vi i øvelserne har ladet ”loope” i det uendelige eller indtil man ved interaktion, har forespurgt noget andet, skal vi i vores projekt hele tiden styre i forhold til framenumrene i main timeline. Det er en andeledes tankegang end den, vi har ”øvet” os på i timerne. Dertil kommer den meget lange time-line og naturligvis alle underliggende lag, som vi skal administrere. Det stod derfor klart fra start, at en af vores store udfordringer ved projektet ville bestå i at bevare overblikket. Derfor forsøgte vi os som det første at danne os et overblik over produktionen.

Vi inddelte først sangen i afsnit, som vi ønskede skulle indeholde forskellige scener. Inddelingen skete ud fra den gængse formanalyse indenfor rytmisk musik (http://www.musikipedia.dk/formanalyse :2010):

intro, 1. vers, 1. omkvæd, 2. vers, 2. omkvæd, kontrastykke*

og 2 x omkvæd.

*benævnes ”B-stykke” i denne rapport samt i Flash-filen
Herpå udarbejdede vi et skriftligt baseret storybord, hvor vi noterede handlingsforløbet i videoen; så vidt muligt inklusiv tekniske løsninger i forhold til kode og animation (Se bilag 1).

Vi udarbejdede desuden en prioriteret to-do-liste opdelt i forhold til undervisningen for at sikre, at vi ville få udført det nødvendige arbejde for at blive færdige.

5. “Raise The Alarm”

– opbygning, teknik og grafik

Vi vil i dette afsnit omtale selve indholdet af animationen. Vi vil komme ind på de valg, vi har truffet i forhold til animationens tekniske løsning, herunder brugen af ActionScript, samt den æstetiske dimension; hvorfor videoen ser ud, som den gør.

5.1. Den overordnede struktur

Lydfilen ligger som nævnt i main time line og definerer samtidig længden af videoprojektet. På main time line ligger også grafik linket direkte til bestemte takter i sangen (frames i Flash). Som eksempel kan nævnes overgangene til omkvædene illustreret ved den voksende alarm, eller lynene der i andet vers slår ned samtidig med lydeffekter i sangen. Derudover ligger alle baggrundslagene samt et lag til SH ude i main time line, 1. scene.

I første samt andet vers anvendes movie clipet bgStreet. Inden i dette movie clip har vi anbragt movie clipene Villain og OldMan.
Himmelen består i tre movie clips, hhv. et gradient-lag, som indeholder planeter og en meget svag gradient, et stjernelag med små stjerner og et stjernelag med større stjerner. Disse tre lag har en konstant bevægelse med forskellig hastighed, hvorved vi opnår en effekt af dybde. Når vi bruger piletasterne øges hastigheden på baggrundslagene og det giver en illusion af SH bevæger sig hurtigere.
5.2. ActionScript
Vi har selv skrevet al koden og har primært baseret den på stof dækket i timerne og slidesne. Som supplement har vi brugt tutorials fra Lynda.com. Vi vil herunder kommentere på udvalgte eksempler fra koden.

5.2.1. Caurina-tweener

I Introscenen ser vi Super Hero (SH) flyve over nattehimlen. Billedet er zoomet helt ind på SH, hvorefter der zoomes ud i et totalbillede og derefter zoomes ud på SH og på byen i baggrunden. SH er tweenet vha. motiontween animation i main timeline. Byen er derimod tweenet med følgende kode:
Tweener.addTween(bgStreet1, (scaleX: .2, scaleY: .2, y: 750, time: 4, transistion:”linear”, delay: 6));
Koden fortæller movie clipet bgStreet, at det på 4 sekunder skal skalere ned til 20% af dets oprindelige størrelse til y-positionen 750. Transformationen er ”linear”, hvilket betyder at der ikke er tilføjet nogen form for easing. Transformationen indtræder med en forsinkelse på 6 sekunder, som vi har tilpasset således, at den synker med nedskaleringen af SH. Vi kunne have valgt at kode alle tweens, men da vi først relativt sent i processen blev bekendt med denne mulighed, lod vi den allerede etablerede grafik stå.

5.2.2. AddChild og WhileLoop

I omkvædet indtager en hel hær af SH stagen. Det har vi gjort ved først at skabe variablen army_mc, der indeholder de nye movie clips tilføjet på stagen. En timervariabel sørger for hvert andet sekund at afvikle funktionen newArmy. Funktionen newArmy placerer et eksemplar af klassen ShArmy på stagen, og de placeres med en afstand af 75. Animationen der får hæren til at bevæge sig ned over stagen og skalere op er placeret inde i movie clippet shArmy. Se kodeeksempler nedenfor.


Kode fra 1. omkvæd (scene 1.a, frame 1015)


Kode fra 1. omkvæd (scene 1.a shArmy, frame 1015)

5.2.3. ”Add Popper”

I B-stykket har vi anvendt en funktion, som blev afdækket i undervisningen under navnet ”addPopper”. Funktionen omdanner musen til en form for tegneredskab, hvor vi skaber den grafik, der tegnes. Vi har kombineret to slags grafik: henholdsvis en som fremkommer ved mouse click (dalende snefnug i tilfældige farver, ”Popper2”) og en ved at trække musen (en rosa stribe i en tilfældig vinkel o glængde, ”Popper”). Til ”Popper” har vi tilføjet en ”random rotation” samt ”scale”, hvorved den rosa stribe placerer sig i en tilfældig vinkel og længde. Inde i snow-movie clippet har vi tilføjet en colorTransform-funktion, ligeledes afdækket i materiale fra undervisningen.

Kode fra B-stykket. (scene 1.a, frame 3148)

5.3. Det visuelle udtryk

Æstetikken er holdt i en farverig, enkel og “sjov” stil. Ligesom sangen foregår i et tegneserieunivers med superhelte og skurke, har vi valgt at gøre animationen tilsvarende fantasifuld. Alt er tegnet i flash, og det valgte vi at gøre, dels fordi vi blev rådet til det og dels for at holde en vis konsekvens i stilen og undgå et rodet udtryk. Konsekvensen af dette valg kan siges at være, at animationerne får et karakteristisk ”Flash”-look. Det giver en helt signifikant stil som vi har valgt at dyrke som en del af det lidt naivistiske udtryk i videoen. Ikke mindst fordi vi begge endnu er relativt nye brugere af programmet, og selv enkle animationer tager meget lang tid for os. Udarbejdelsen og tegningen af samtlige “frame-by-frame”- og tweenanimerede movie clips har været et meget tidsomfattende arbejde, og der har været naturlige grænser for, hvor grundige vi har kunnet være og samtidigt nå vores målsætning om at lave en hel sammenhængende video i hele sangens længde.

6. Usability testing

To gange undervejs i processen har vi foretaget en ”informal usability test” (Gregersen, Ole & Wisler-Poulsen, Ian: 2009 Usability. Grafisk Litteratur: Copenhagen). Vi har testet videoen på i alt tre personer med fokus på parametrene funktionalitet, tilfredsstillelse og effektivitet. Alle tre testpersoner var på forhånd bekendt med videoens interaktive aspekt.

6.1. Testresultater

Overordnet syntes alle testpersoner, at det var sjovt at se og afprøve videoen, men udfordringen var ikke høj. Og de mente også enstemmigt, at omkvædene manglede et interaktionselement. En testperson udtrykte særlig høj begejstring for selve idéen, og kunne sagtens se potentialet og udviklingsmulighederne. Hun mente, ligesom os, at se et Blue Ocean i den interaktive musik video.
Testene viste os blandt andet, at instruktionsboksenes daværende udformning ikke var optimal. To af testpersonerne troede, at infoboksene var knapper, man skulle trykke på. Den sidste bemærkede dem slet ikke.

Instruktionsboksens oprindelige udformning

Selve det tekstlige indhold i infoboksene var tilsyneladende heller ikke optimalt. Dette gjaldt mest boksen i B-stykket, hvor der oprindeligt stod ”Use Mouse to control the laser sword”. Dette var ifølge testen ikke tilstrækkelig information, til at testpersonen vidste, man også skulle klikke på musen, før der skete noget. Vi justerede efterfølgende teksten samt farver og font, så instrukserne blev klarere og mere læsevenlige så brugeren med det samme vidste, hvad man skulle foretage sig.
De nye ændringer havde vi ikke på samme måde mulighed for at følge op på og teste grundet projektets tidsramme.

Vi observerede en fælles reaktion hos testpersonerne, at der var en umiddelbar begejstring når der blev præsenteret et nyt element i musikvideoen. Der synes på en måde at være en go sammenhæng mellem det at lytte og forholde sig aktivt til en grafik. Der var blandt testpersonerne derimod en klar enighed om, at udfordringerne og mulighederne var for få igennem videoen. Desuden var vi - jævnfør 4. Produktionsprocessen - fra projektets begyndelse godt klar over, at vi ikke var i stand til at implementere samtlige af de funktioner, animationer og den grafik, som vi kunne ønske os, for at fuldende brugeroplevelsen. Dermed kom testpersonernes respons på netop dette punkt ikke bag på os.

7. Videreudvikling og fremtidsaspekter


Vi har en række idéer til, hvordan videoen kan udvikles videre og tilføres flere elementer og interaktion.
Første vers ønsker vi skal indeholde en række flere movie clips med små animationer, end hvad tilfældet er i produktet. Computerspillet ”Crappy Cat” (http://crappycat.com/game/) er baseret på hitTestObject-funktionen og formår at skabe et underholdende univers med denne relativt simple kodning. Dog omfattende animationsarbejde. Vi forestiller os at vores video kan rumme mere i den stil.
I projektets brainstormfase fik vi en ide om, at man i B-stykket skulle flyve ind i billedet igennem universet. Denne effekt havde vi set i en anden interaktiv musikvideo. Ideen var, at man fra SH perspektiv skulle flyve ud i rummet og eliminere forskellige objekter enten ved et skydespil eller en simpel hitTestObject-funktion. Det lykkedes os at finde noget gratis ActionScript til ”tunnel-effekten” (http://www.freeactionscript.com), men det viste sig at være skrevet i en syntax til en ældre version af programmet. I stedet forsøgte vi på egen hånd at eksperimentere med brug af z-aksen i B-stykket. Det lykkedes os at bevæge os ”ind” i billedet, men kun indtil vi var passeret de to stjernebesatte baggrundslag. Herefter var baggrunden bare sort. Vi er overbeviste om, at havde vi haft lidt mere tid, havde vi knækket koden. Det er således et element, vi vil udvikle videre på.
Sangens omkvæd skal på sigt have implementeret et interaktivt element og desuden have en grad af variation omkvædene imellem. Vi forestiller os, at SHene i shArmy kan udskiftes med forskellige varianter, så de bevæger hovedet eller armene i forhold til sangens rytme.

8. Konklusion

Vi har produceret en interaktiv, animeret musikvideo til ”Raise The Alarm” i sangens fulde længde. Videoen indeholder tre scener med forskellig interaktivitet, hvoraf den ene er et simpelt spil konstrueret ud fra ”hitTestObject”-funktionen. Videoen indeholder adskillige eksempler på direkte illustrationer af sangens handlingsforløb.
Vi har endnu ikke lagt videoen ud til deling på nette. Til det synes vi endnu blandt andet ud fra testpersonernes udsagn, at der mangler for mange detaljer. For at videoen får den tilsigtede effekt og mulighed for at skabe ”hype”, tror vi, det er vigtigt, at den eksempelvis har en stærkere grafisk profil samt en større ”game”-mæssig udfordring.
Der er ingen tvivl om at der er muligheder i idéen om en flash-basseret interaktiv musikvideo. Både ud fra vores erfaringer med dette projekt og ud fra testpersonernes udtalelser vurdere vi at hvis indholdet udvikles, er der go chance for at det vil få den tilsigtede effekt på spredningen af musik via de sociale medier.

9. Kildefortegnelse

Hjemmesider

http://www.musikipedia.dk/formanalyse

http://soytuaire.labuat.com/

http://www.youtube.com/watch?v=dTAAsCNK7RA

http://www.brokenbells.com/october

www.gramex.dk

www.Lynda.com

http://crappycat.com/game/

Litteratur

Gregersen, Ole & Wisler-Poulsen, Ian:(2009). Usability.

Grafisk Litteratur: Copenhagen

Bilag 1

Storybord

Intro: Støj	00:00 - 00:08	Blafrende kappe/ild/luft i vinden Fylder hele billedet	zoom out
1.vers	00:09 - 00:43	Totalbillede. Kvindelig superhelt (SH) flyver over byen om natten. SH follows mouse eller piletaster? En form for hale efter SH, når hun flyver. Background bevæger sig.	controll superhero (SH) speed with arrows. Flying on a city background
1. (1/2) omkvæd	00:44 - 01:00	Overgang: En rød alarm vokser ud af billedet og signalerer overgang til ny scene. Colors! interaktion?? Idéer: - Alarm-knap. Ved klik kommer SH flyvende. - “stjernetunnel”. Flyve gennem universet “ind i billedet” med forskellig movieclips passerende forbi. Kode?	Object “alarm”: eventlistener. Mouse click. gotoAndPlay: MC: SH flies on stage.
2. vers	01:01 - 01:36	SPIL I gadeplan. Bekæmpe “villain” med lasersværd. http://www.freeactionscript.com/page/9/ Hvilket perspektiv skal vi bruge? Spil gennemført efter 15 fuldtræffere. En form for instruks på skærm.	“hitTestObject”: laser sword smashes in the air. Ved vundet spil: gotoAndPlay: animation of SH “evaporation”
2. omkvæd	1.37 - 2.10	Samme som 1. omkvæd. Dobbelt så langt.
B-stykke	2.11 - 2.45	Farver. Interaktion? Kan vi flyve IND i skærmen?? Tunnel-effekt igennem universet. Idéer: - hale efter mus - tegne med mus
2xOmkvæd	2.46 - 3.55	Samme som 1. & 2. omkvæd. Evt. tilført ekstra feature.

Bilag 2

Raise The Alarm - tekst
by POLYPOTION (Nina Baun Jeppesen & Magnus Friis )

Floating on top of the city

in my gaudy costume
It’s my duty to uphold the peace here
And I never miss a single thing

Scanning the streets below me

With my eagle eye nothing gets by me
Fighting city culprits is like child’s play to me

Raise the alarm and I’ll be there
‘cause I’m the long arm of the law around here
You’ll be safe with me in the vicinity
So you can feel safe at night

Keeping a look out on a villain

trying to rob an innocent old man
with lightning speed I’m at the crime scene
And fighting with my laser sword

Movements so fast

it’s impossible to parry my attack
And then I evaporate
Up into thin air

Raise the alarm....

You might be foolhardy and think you can tempt fate

but just remember what goes around comes around
just when you think you’re all alone and want to pilfer some goodies
I’m breathing down your neck
and will make you pay the prize

Raise the alarm...