Ontwerprapport Fabula Umbra | De Novo
In opdracht van: Your Song | Amy van Son 16-01-2014
Danny Weijers Didi Willems Jesse Otten Kyrian Licht Meri Urdaneta Sjoerd Mooi
Inhoudsopgave Inleiding 3 Opdrachtgever 4 Probleemstelling 4 Concept 4 Doel 5 Doelgroep 5 Het verhaal 5 Point of View 6 Protagonist en antagonist 6 Sfeer 6 Uitgangspunten en inspiratie 6 Storyboard 7 Schetsen en alternatieven 8 Vaststellen stijl 8 Kleurgebruik 9 Typografie 9 Ontwerp en realisatie graphics en assets 10 Radio 10 Ontwerp 10 Vogel 11 Fotolijst 12 Achtergrond/omgeving scene muur 15 Muis 17 Olielamp 18 Laptop laden 20 Helikopter 21 Waterfles 22 Vliegende vogels 23 Zonsondergang 23 Geweer 24 Kogel 25 Achtergronden scènes 26 Winter 29 Jungle 31 Meer 32 Uruzgan 34 Huis 35 Ontwerp en realisatie karakters 36 Ontwerp en realisatie karakters 36 Ontwerp en realisatie geluid 37 Ontwerp en realisatie geluid 37 Ontwerp en realisatie navigatie 39 Grafische user Interface 42 Definitieve schermontwerpen 44 Sprint 1 44 Sprint 2 47
2
Inleiding De Hogeschool van Arnhem en Nijmegen te Arnhem, op leiding Communicatie en Multimediadesign, heeft voor het project van het semester CICA drie opdrachtgevers weten te krijgen. De opdrachtgevers zijn ‘Gemeente Arnhem’, ‘Plastic Soup’ en ‘Your Song’. Doormiddel van een eerste keuze en twee selectierondes zijn er uiteindelijk groepen van zes tot zeven personen ontstaan. Deze groepen maken elk een Interactive Communication Application voor de desbetreffende opdrachtgever. Hiervoor zijn acht weken bestemd en is er de mogelijkheid om de opdrachtgever ook daadwerkelijk erbij te betrekken. Onze groep, De Novo, maakt de applicatie in opdracht van Your Song met als opdrachtgeefster Amy van Son. De groep bestaat uit zes projectleden; Danny Weijers, Didi Willems, Jesse Otten, Kyrian Licht, Meri Urdaneta, Sjoerd Mooi en krijgt begeleiding van een aantal docenten. Met als Project Owner: Cindy Vermeulen, als Free Coffee expert: Michel v.d. Wiel, IND-expert: Freek Stegeman, CC-expert: Ger de Vries en Project Begeleider: Hanneke van Bakelen. Met deze mensen werken wij in acht weken een applicatie uit voor Your Song.
3
Concept Opdrachtgever
Namens Amy van Son van Humanistisch Verbond Dienst Geestelijke Verzorging Defensie werken wij, Sjoerd Mooi, Jesse Otten, Meri Urdaneta, Didi Willems, Kyrian Licht en Danny Weijers, van De Novo aan het project genaamd Your Song. “Your Song powered by humanism is een humanistisch project, met verhalen van militairen gezongen door artiesten. In Your Song bezingen artiesten de verhalen van militairen Menselijke verhalen, voortkomend uit de worsteling die het leven soms is, zeker als je militair bent. Hoogtepunten, dieptepunten, vreugde en verdriet en het besef van wat werkelijk van belang is in een leven krijgen hun vorm in allerlei songs, van darkrock tot indierock tot klassieke muziek.” Het verhaal dat uitgewerkt wordt in de applicatie is het verhaal van Frank en Joost in kamp Martello. “Your Song gaat over ontmoetingen en over luisteren naar elkaar Darkrockband My Favorite Scar luisterde ademloos naar het verhaal van sergeant-majoor Frank van de Looy en korporaal Joost Engel over de aanval op hun buitenpost in Afghanistan en wat die verbondenheid op leven en dood met hen deed.” Bron: Your Song powered by humanism. (z.d.). Your songs. Geraadpleegd op 14 december 2013, van http://www.your-song.nl/your-songs.html
Doel
Ons doel is om de verhalen van militairen samen te voegen met bijpassende muziek in één applicatie, zodat zij de mogelijkheid krijgen om met de wereld te delen wat ze meegemaakt hebben.
Doelgroep
De applicatie is bedoeld voor actieve militairen bij defensie. Daarnaast voor ex-militairen, veteranen, hun familie, Nederland en andere geïnteresseerden.
Het verhaal
De gebruiker speelt een fotograaf die verschillende missies meemaakte en overleefde om er vervolgens over te vertellen. Nu deelt hij met jullie zijn verhaal verhalen, waarvan het verhaal Martello nu is uitgewerkt. Jij als gebruiker bent de fotograaf. Je zit in Uruzgan en ervaart, samen met alle betrokken militairen een TIC. Je maakt alles van dichtbij mee en legt belangrijke moment vast in foto’s. Zo redt de militair zijn collega tijdens de TIC. Vervolgens wordt verwezen naar iets dat voor vrijwel elke militair van groot belang is om tot zichzelf te komen: muziek. De zon gaat onder en de nacht breekt aan. Een nacht waarin de gedachtes van de militair worden verbeeld in de sterrenhemel en waarin jij, de fotograaf, de groep militairen fotografeert waarmee je ze de stuipen op het lijf jaagt. Duidelijk naar voren komt het persoonlijke aspect van de militairen waarvan jij als fotograaf hun leven door de camera ziet.
Probleemstelling
Humanisme (zonder religie) is voor veel militairen een onbekend begrip, hoewel de meeste militairen geen religie hebben en dus humanistisch zijn. Your Song deelt het verhaal van de militair door er een lied van te maken, waarbij het vertrouwen op eigen kracht en de medemens centraal staan. Het communicatievraagstuk is dan ook: hoe breng je Your Song in beeld middels interactie? Daarom hebben wij de opdracht gekregen om een interactieve applicatie op basis van Your Song te ontwikkelen. De applicatie biedt ruimte voor meerdere verhalen die tevens in de vorm van een lied terug gezongen gaat worden om de doelgroep te interesseren voor het project, opdat ze mee willen doen en vervolgens verhalen en liedjes gaan delen.
4
5
Uitgangspunten en inspiratie Point of View
Jij vertelt als fotograaf de verhalen van verschillende militairen op een interactieve manier. Het verhaal wordt in een lineaire lijn doorlopen, zodat de verhalen zo goed mogelijk in de oorspronkelijke vorm wordt overgebracht. Je ziet dus door zijn of haar ogen wat de militairen tijdens verschillende missies hebben meegemaakt. Dit maakt dat de applicatie een 1e persoon Point of View bevat.
Storyboard
Protagonist en antagonist
In de applicatie ben jij, de gebruiker, de protagonist of antagonist. Capture every moment of the story and live to tell it, oftewel: doorloop het hele verhaal als fotograaf zijnde, zodat je de militairen de mogelijkheid geeft om hun hele verhaal met jou te delen. Doe je dat, dan ben je protagonist, doe je dat niet, dan ben je de antagonist.
Sfeer
De verhalen die verteld worden zijn vaak dramatisch en hebben in ieder geval een serieuze achtergrond. Daarom is de sfeer niet te vrolijk en zijn er zo veel mogelijk realistische elementen ingebracht. Deze elementen zorgen er voor dat er meer inleving is vanuit de gebruiker en ze zijn ook bedoeld om het verhaal goed te vertellen. De sfeer wordt verder voornamelijk bepaald door de kleur en de zwarte schimmen. Deze maken de applicatie dramatisch.
Moodboard
6
7
Vaststellen stijl Schetsen en alternatieven
Voorafgaand aan de schetsen heeft ieder van de Content Creators een eigen versie van scene Uruzgan gemaakt voor vergelijking in opbouw en stijl. Deze hebben we vergeleken en hierna is er een definitieve schets van de scene Uruzghan gemaakt. Het uitgebreider verslag van deze beslissing is te vinden in de bijlage, “Bespreking Scene Uruzgan”.
Eerste schets Uruzgan
Kleurgebruik
Omdat de stijl bestaat uit silhouetten, is het vanzelfsprekend dat de belangrijkste kleur binnen de applicatie zwart is. Om diepte te geven aan omgevingen, is er niet alleen van echt zwart (# 000000) gebruik gemaakt, maar ook verschillende grijstinten. Het verhaal speelt zich af in een woestijngebied in Uruzghan, deze sfeer moest wel in de applicatie over komen. Daarom is er voor overdag gekozen voor oranje en geel tinten en ’s nachts voor blauw tinten. (zie ook beschrijving Ontwerp en realisatie graphics/assets - Achtergronden scènes) hieronder staan de kleurschema’s voor overdag en ’s nachts.
Definitieve schets Uruzgan
Typografie
Minion Pro is het font dat gebruikt wordt in Fabula Umbra. Het heeft een schreef en ziet er daardoor formeel uit. Toch is het een wat vrijer lettertype dan bijvoorbeeld Times New Roman, omdat het iets rondere vormen heeft. Echter komt er in de versie die nu gemaakt is niet veel tekst voor. Alle taal die er in zit is ingesproken. Waar wel tekst zou komen zijn een aantal gedeeltes in het menu en de informatie over your song die te vinden is in de scene muur. In het menu komt informatie over de applicatie, het volledige verhaal van Frank en Joost en de artiest en titel van het liedje. Deze zal dan worden weergegeven in het lettertype Minion Pro.
8
9
Ontwerp en realisatie graphics en assets Radio
Vogel
Research De asset van de radio zou in eerste instantie een walkietalkie zijn. Maar door research te doen naar welk communicatie middel soldaten werkelijk gebruiken zijn we er achter gekomen dat ze een walkietalkie niet gebruiken. Ze gebruiken een soort radio met afneembaar microfoon stuk, een CB-radio.
Research Er is als eerst onderzoek gedaan gegaan naar de fauna in Afghanistan. Er komen veel soorten vogels voor in dit gebied. Er is gezocht naar een vogel die wat weg heeft van het silhouet die al in de voorbeelden van de applicatie gebruikt is. Het vogeltje dat ‘Afghan Snowfinch’ heet kwam het meest in de buurt.
Afghan snowfinch
Over de manier van vliegen van deze vogel stond deze zin; “The flight is heavy and straight.” Op wikipedia. Hieruit hebben we opgemaakt dat het niet snel vliegt en niet snel met de vleugels beweegt. Dit hebben we meegenomen in het ontwerp. http://en.wikipedia.org/wiki/Afghan_Snowfinch
Een walkietalkie die we als eerst in gedachten hadden en twee CB-radio’s
Het gebruik van communicatie in het leger.
Ontwerp
Uitwerking van de CB-radio
Het uiteindelijke ontwerp is afgeleid van een aantal voorbeelden van CB-radio’s. De minst belangrijke elementen zijn weggelaten om het ontwerp te versimpelen. Het scherm, knoppen en de losse microfoon waren de belangrijkste elementen. Er waren wel nog wat details voor nodig om het apparaat te laten lijken op een CB-radio. Zo zijn er nog wat cijfers, voor de frequentie, en een rood lampje toegevoegd. De radio is niet in schaduw stijl of grijstinten gemaakt, omdat deze zich in de tent bevind. In de tent heeft niet de schimmen stijl, omdat deze een thuisbasis vormt en een veiligere sfeer moet uitstralen. Hieronder staat de uiteindelijke vormgeving van de CB-radio. De animatie hiervan is een zichtbaar geluidsgolfje in het scherm en het lampje dat aan springt.
Ontwerp In de animatie is het de bedoeling dat het vogeltje opspringt en weg vliegt. Omdat dit een gecompliceerde beweging is, is hier ook onderzoek naar gedaan. Er is gekeken naar filmpjes van vliegende vogels en animaties van vogels. Voornamelijk deze twee filmpjes hebben als voorbeeld gediend voor de animatie. http://www.youtube.com/watch?list=PL0E7F99B9F9249ED7&v=F41qG_lfDwU http://vimeo.com/4148073 Is er gekeken naar afbeeldingen voor de stand van de vleugels tijdens het vliegen. Voornamelijk deze twee afbeeldingen waren een goed bruikbaar voorbeeld. De eerste afbeelding is een ‘Afghan Snowfinch’. De tweede afbeelding is een andere vogel, maar geeft wel mooi de uiterste posities van de vleugels weer.
Voorbeelden van vliegende vogels
10
11
De animatie zelf is een schim/schaduw. De vogel is helemaal zwart zonder diepte. De vogel begint in een zittende positie. Vervolgens buigt de vogel zijn poten om op te kunnen springen. Daarna slaat de vogel eerst een aantal malen snel met zijn vleugels om van de grond te komen. Hierna vliegt de vogel weg.
Als eerst is er gekeken naar foto’s van huiskamers die een aantal foto’s als decoratie aan de muur hebben hangen. Hieruit is inspiratie opgedaan van de huiskamersfeer. De eerste foto heeft een verzameling van zwarte lijsten met verschillende vormen. De zwarte kleur zou goed passen in de applicatie. De tweede foto heeft verschillende kleuren en verschillende vormen van lijsten. Dit geeft een speelse en rommelige sfeer, hier zijn we niet naar opzoek.
Fragmenten uit de animatie van de vogel
Fotolijst
Inspiratie foto’s van woonkamers
Research De eerste versie van de fotolijst was te plat, er zat nog geen diepte in. De strakke zwarte lijnen en de gele achtergronden klopten nog niet met elkaar. Wel zochten we naar strakke lijsten met niet te veel details, zodat deze goed in de stijl van de ruimte past. Deze stijl is zoals in de tent scene, omdat dit ook weer een huiselijke en veilige sfeer moet geven.
Vervolgens is er gezocht naar enkele lijsten. Deze moesten niet al te druk of gedetailleerd zijn om in de stijl te kunnen passen. Er waren een aantal lijsten gevonden die geschikt leken te zijn. Deze zijn gebruikt als inspiratie voor de uitwerking.
Eerste versie van de fotolijsten
12
Fotolijsten voor inspiratie
13
Ontwerp De gevonden voorbeeldlijsten zijn uitgewerkt in de scene muur om te kijken of ze het juiste sfeer geven. De eerste twee gaven niet het juiste effect. De eerste was toch te gedetailleerd en de tweede was te donker en te vlak. De derde lijst zag er wel meteen goed uit, rustig toch gedetailleerd genoeg. Met de toevoeging van lichte schaduw randen kregen de lijsten nog wat meer diepte en de witte achtergrond maakte de lijstjes compleet.
Lijsten een en twee.
Achtergrond/omgeving scene muur Research De eerste versie van de achtergrond van de scene muur was een donkere stenen muur. Deze versie werd als vrij somber en akelig beschouwd. Zeker met de gele foto’s hier op werd dit geen prettige sfeer. Daarom zijn we opzoek gegaan naar een huiselijke sfeer. Er is gekozen voor een behang, omdat veel mensen op hun muren behang hebben. We zochten naar een behang dat niet te fel gekleurd was en war aarde tinten bevatte en een huiselijke sfeer had. Een aantal voorbeelden is daarvoor gevonden. Het laatste voorbeeld vonden we het meest geschikt, omdat deze iets meet kleur had dan alleen aarde tinten en wel een vrolijke, huiselijke sfeer gaf.
Eerste versie van de achtergrond
Derde lijst in definitieve vorm Gevonden voorbeelden van behang
14
15
Ontwerp Het laatste voorbeeld is uitgewerkt zodat deze in de stijl van de applicatie paste. Hierbij zijn de kleuren grotendeels overgenomen, maar de vormen zijn aangepast. De eerste versies, met veel gebogen lijnen, werd te speels en niet serieus genoeg. Daarom hebben we er voor gekozen om de lijnen, op een kronkellijn na, van het behang recht te laten. Dit heeft geleidt tot een rustige, huiselijke en vriendelijke sfeer in de scene muur.
Uitwerking van het behang
Muis Research Allereerst is er gekeken naar voorbeelden van dieren die in Uruzgan leven. We hebben toen geconcludeerd dat er muizen leven. We besloten dat we deze in de applicatie wilden toevoegen als een animatie. We hebben toen gekeken naar voorbeelden van geanimeerde muizen. Dit viel nog niet mee. De meeste geanimeerde muizen liepen op twee poten en dit hadden wij niet nodig. Na verdere research is er uiteindelijk toch een goed voorbeeld gevonden die gebruikt kon worden om de muis te gaan animeren. Het voorbeeld dat was gevonden is terug te zien via http:// www.behance.net/gallery/Mouse-Walk-and-Run-Study/8438655. Hierop is een lopende en een renende muis te zien die op vier poten liep. Deze is dan ook gebruikt tijdens het ontwerp van de muis. Nadat deze voorbeeld animatie was gevonden is er nog wel verder gezocht naar andere voorbeelden. Hier is ook niets uitgekomen. Ook hierbij was het merendeel een muis die op twee poten liep zoals in cartoons en dergelijke.
Twee rechtlopende muis animaties
Uitwerking van het behang met de foto’s
16
Ontwerp Het eerste waar mee aan de slag is gegaan waren de poten van de muis. Deze zijn gemaakt aan de hand van het voorbeeld dat hierboven staat. Daarbij is gekeken naar twee standen van de poten. Een waarbij de poten helemaal uit elkaar staan en een waar de poten bij elkaar komen. Aan de hand van deze poten is er gekeken of het enigszins leek op rennen. Dit was het geval en er is toen verder gegaan met het lichaam van de muis. Voor het lichaam van de muis is ook gekeken naar het voorbeeld van de rennende muis. Aan de hand van dit voorbeeld is het lichaam van de muis gerealiseerd. Deze is later samengevoegd met de rest van de muis en is het tot een geheel gevormd. Dit gedaan te hebben is het geanimeerd in Flash. Zo kon er goed bekeken worden of het geheel klopte. Het rennen van de muis zag er goed uit, maar nu moest alleen de staart nog enigszins meebewegen. Hiervoor is opnieuw gekeken naar de voorbeeldvideo. Hierbij is gekeken naar de twee standpunten van de poten en de daarbij behoorde positie van de staart. Deze is toen toegevoegd aan de muis en is toen opnieuw in Flash verwerkt.
17
Na dit verwerkt te hebben is er om goedkeuring gevraagd aan de andere groepsleden. Er is toen besloten dat de muis zo goed was en dat er verder kon worden gewerkt aan een andere animatie.
Olielamp
Uitwerking animatie muis
Ontwerp Gedurende het ontwerp is er vooral gekeken naar het silhouet voorbeeld van de olielamp. Dit vond de groep een goed ontwerp die tevens ook in de applicatie kan worden toegepast. Aan dit voorbeeld is vastgehouden en daarmee is het ontwerp tot stand gekomen. De keuze voor deze lamp was, omdat er weinig detail inzat en dat de kleur al goed paste bij onze applicatie. De lamp is dan ook zo goed als nagemaakt. De lamp moest ook niet al te veel details bevatten, aangezien je deze toch niet ziet in de stijl van onze applicatie. Bij het ontwerpen van deze lamp is dan ook vooral gebruik gemaakt van simpele vormen. De onderdelen van de lamp worden onderscheiden door het verschil in kleurgebruik, zodat het nog wel te zien is dat het een olielamp is. Natuurlijk moet een lamp ook aan kunnen. Hiervoor is besloten om de binnenkant van de lamp een gele kleur te geven met daarom heen een gele gloed. Dit is hiernaast ook te zien. Deze gele gloed is later nog geanimeerd, zodat het lijkt alsof de lamp een beetje knippert. Hierdoor heeft het toch meer weg van een olielamp.
Research Er is allereerst gekeken naar voorwerpen die in de tent konden staan en eventueel ook in het kamp. Al vrij snel kwam een lamp naar voren. Aan de hand hiervan is er gekeken naar soorten lampen die gebruikt zouden kunnen worden in de applicatie. Het leek ons een goed idee om een wat oudere lamp te gebruiken. Je komt dan al snel uit op een olielamp of iets dergelijks. Hier is toen ook naar gekeken. Er is research gedaan naar het uiterlijk van een olielamp en ook al een goed voorbeeld dat we zouden kunnen gebruiken. Er is hiervoor al meteen gekeken naar een goed voorbeeld dat ook al een silhouet was. De gevonden voorbeelden zijn hieronder te vinden. Aan de hand van deze voorbeelden is er gekeken welke het beste gebruikt kon worden in de applicatie. Hiermee zijn we ook aan de slag gegaan om de olielamp te realiseren. Uitwerking olielamp. Definitieve ontwerp
Inspiratie olielamp
18
19
Laptop laden
Helikopter
Research Het idee voor een laadscherm bij de laptop kwam tot stand toen er nagedacht werd over verbinding in Uruzgan. Is er in de woestijn in Uruzgan een goede internet verbinding? De soldaten zitten in een verlaten omgeving en een gebied dat niet zo westers is al Nederland. Er zal dan ook niet overal verbinding zijn. Voorbeeld verbinding logo
Research Bij de meeste militairen missies worden helikopters ingezet als transportmiddel, verdediging of aanvalsmiddel. Ook bij de missies in Uruzgan. De vraag was hoe deze konden worden vormgegeven. De helikopters moeten niet te gedetailleerd zijn vanwege de silhouetten stijl. Door de verschillende soorten helikopters moest er gekeken worden naar welke soort er in de applicatie gebruikt wordt. Er is gekozen voor een aanvalshelikopter omdat deze het duidelijkst vormgeeft dat het om een militair voertuig gaat. Dit komt door de zwarte laag die eroverheen wordt gegoten.
Vervolgens is er gekeken naar hoe dit eruit kan komen te zien. Door te googlen en te brainstormen is er uiteindelijk een keuze gemaakt in hoe dit eruit komt te zien. Op de laptop die iedereen gebruikt is er meestal linksonder te zien hoe het met de internet verbinding gesteld is. Er staan een aantal streepjes in beeld die aangeven hoe goed de verbinding is. Wanneer alle vijf de streepjes wit zijn betekend dit dat er een goede verbinding is. Echter wanneer de verbinding slecht is zal te zien zijn dat het aantal streepjes afneemt. Dit is ook ons uitgangspunt geweest voor de animatie van de internetverbinding. Door de streepjes op en af te laten lopen wordt er duidelijk gemaakt dat er verbinding wordt gemaakt met het internet. Ondertussen is er ook gekeken naar andere laad “momenten”. Wanneer een pagina wordt opgestart is er vaak een cirkeltje te zien die ronddraait of een zandloper. Ook dit wilden we verwerken.
Militaire helikopters
Ontwerp Voor het ontwerp van de helikopter zijn er verschillende afbeeldingen gebruikt waar een zwarte laag overheen gezet is. Zo werd de afbeelding meteen een silhouet. Vervolgens is deze afbeelding bewerkt waardoor deze geanimeerd kon worden. De animatie zal in de achtergrond van scene TIC zichtbaar zijn. Inspiratie laad-icoon
Ontwerp Tijdens het ontwerp is er gekeken naar de animatie van het laden. Hoe gaan we de animatie weergeven en met welke ontwerpen passen we dit toe. Er is gekozen voor een laad animatie met een spinnende cirkel met rechthoeken (zie hierboven – rechter afbeelding). Dit gaf een mooi effect aan het laadscherm en maakt duidelijk dat er een moment is om verbinding te maken. Dit samen met de balkjes die de internetverbinding aangeven.
Silhouetten helikopters, ontwerp
Definitieve ontwerpen
20
21
Waterfles
Vliegende vogels
Research Voor de waterfles is er gezocht naar wat voor flessen water er gebruikt konden worden. In de militaire gebieden gebruiken de soldaten eigen waterflessen die niet gebruikt zijn in de applicatie. Deze zijn niet gebruikt omdat het niet duidelijk werd dat het een waterfles is. Ook de animatie zou dan niet kunnen worden weergeven. Er is uiteindelijk besloten om een doorzichtige waterfles te nemen. Hierdoor kan er een animatie worden gemaakt waarbij het water zichtbaar is. Zo is het voor de gebruiker duidelijk dat het een waterfles is en dat deze leeg loopt.
Research De vogels die op de achtergrond zullen verschijnen, moeten de omgeving levendiger maken. Hiervoor is gezocht naar silhouetten afbeeldingen van vogels. Vogels in de verte silhouetten ontwerp
Ontwerp Deze afbeeldingen zijn opgesplitst in drie verschillende vogels. Deze vogels worden een voor een geanimeerd zodat het lijkt alsof deze wegvliegen in de achtergrond. Hiervoor is er gekeken naar de beweging van de vleugels en deze geprobeerd vorm te geven in de animatie. Door de vogels te verkleinen naar mate de animatie zich voortzet, lijkt het alsof de vogels weg vliegen. Vogels in de verte animatie
Zonsondergang Militaire waterfles & normale waterfles
Ontwerp In flash is vervolgens de waterfles geanimeerd. Er zijn verschillende afbeeldingen gemaakt waarbij telkens iets minder water in de fles zit. Wanneer dit achter elkaar wordt afgespeeld is het duidelijk dat de fles leeg raakt. Voor het water is gekozen voor de kleur blauw die licht transparant is. Water is transparant, alleen is dit niet duidelijk vorm te geven in een animatie. Aangezien blauw vaak geassocieerd wordt met water (zie de zee) is dit een logische keuze.
Research Het onderzoek naar de zonsondergang bestond voornamelijk uit het bezichtigen van youtube filmpjes en afbeeldingen van een zonsondergang. Wat opvalt bij een ondergaande zon is het verschil in licht van voordat de zon onder is en wanneer de zon onder is. Wanneer de zon schijnt is alles helder, licht en goed zichtbaar. Wanneer de zon ondergaat, valt er een duisternis als een schaduw over alles heen. Het licht is minder sterk en uiteindelijk is er alleen nog zichtbaar licht van de maan. Inspiratie, stad timelapse
Twee afbeeldingen van de waterfles animatie
22
23
Ontwerp Wanneer de zon ondergaat moet de rest van de omgeving mee veranderen qua kleur. De omgeving moet donkerder worden. Er is gekozen om de zon op een afbeelding te maken die lang doorloopt (verticaal). Zo is er ruimte om de afbeelding verticaal naar beneden te laten lopen waardoor de zon ondergaat en de avond scene zichtbaar wordt. Vervolgens wordt de omgeving langzaam weggefade waardoor er ruimte komt voor dezelfde omgeving alleen dan in de nacht vormgegeven. Deze fade in. Als laatste wordt de achtergrond met sterren en de maan ingeladen op het moment dat de zon helemaal onder is en de donkere achtergrond zichtbaar is.
Ontwerp Het moest dus duidelijk worden dat er geschoten werd. Bij het ontwerp is er gekeken naar de voorbeelden en aan de hand daar van is er een ontwerp uitgekomen dat aansluit bij de applicatie. Het licht/vuur is natuurlijk niet zwart van kleur, maar heeft de kleur die het ook echt zou hebben (geel en oranje). Hieronder is te zien wat het resultaat is geworden.
Definitieve ontwerp geweervuur
Kogel
Sterrenhemel, Zonsondergang
Geweer Research Tijdens de TIC moet het natuurlijk wel duidelijk zijn dat de geweren ook echt schieten. Hiervoor hebben we besloten om een kleine en simpele animatie toe te voegen d.m.v. een soort vuur wat uit het schietende geweer komt. Er is hierbij gekeken naar voorbeelden die we hebben gevonden op de onderstaande website. Er is dus vooral gezocht naar voorbeelden zoals hieronder staan weergegeven. Het moest een soort van vuur/licht animatie worden waaruit duidelijk wordt dat met het geweer geschoten wordt.
Research In het verhaal werd verteld dat er tijdens de TIC kogels door de tenten heen gingen. Dit gelezen te hebben, wilden we dit ook gaan toevoegen in onze applicatie. Hierbij is gekeken naar het uiterlijk van een kogel en een daarbij passend kogelgat. Bij de kogel is gekeken naar een kogel waarbij het goed en duidelijk herkenbaar was dat het een kogel was, aangezien het maar een kleine animatie is. Het moest dus gewoon een duidelijke vorm hebben zonder al te veel details. Ditzelfde gold voor de kogel gaten. Deze moesten duidelijk te zien zijn en daarnaast ook nog herkenbaar. Er is dus vooral gekeken naar herkenbare en duidelijk voorbeelden die we zouden kunnen gebruiken bij het ontwerp van de animatie.
Bron: http://www.animationlibrary.com/sc/203/Guns_and_Cannons/?page=4
Inspiratie en ontwerp kogel en kogelgat
Inspiratie geweervuur
24
25
Ontwerp Bij het ontwerp van de animatie van de kogels die door de tent heen gaan, hebben we vast gehouden aan de simpele vorm van de kogel. Dit zijn de twee rechtse kogels die hierboven te zien zijn. Deze zijn gebruikt tijdens de animatie. Zoals hierboven ook al te zien is de kogel zwart gemaakt zodat deze past binnen onze toegepaste stijl met silhouetten. Bij het kogelgat is eigenlijk met het zelfde idee besloten. De keuze is hierbij gevallen op het kogelgat recht onderin. Met behulp van deze twee elementen is de animatie tot stand gekomen. Hieronder is een storyboard te zien van het verloop van de animatie.
Inspiratie voor de sfeer
Omgeving van Afghanistan en de woestijn
Storyboard verloop animatie
Achtergronden scènes Research Voor de achtergronden van de scènes is er eerst door iedere Content Creator een voorbeeldgemaakt in de Uruzgan scene. Er zijn drie eerste versies gemaakt om te kijken of er ongeveer hetzelfde uit kwam. Het uitgebreider verslag van deze uitwerkingen is te vinden in de bijlage, “Bespreking Scene Uruzgan”. Hierna zijn er voorbeelden gezocht van de stijl van de achtergrond. Deze moet aansluiten bij de schaduw stijl van de scènes. Van de omgeving van Afghanistan/de woestijn zijn ook voorbeelden gevonden. Tevens hebben we later nog foto’s van kamp Martello ontvangen, hier zaten veel foto’s bij van de directe omgeving van het kamp. De foto’s van het kamp waren erg nuttig voor het ontwerpen van de horizon, zo wisten we dat er wel bergen in de verte waren, maar geen hoge toppen en een afwisseling van spitse en ronde toppen.
26
Eerste versies van de achtergrond
Foto’s van de omgeving van kamp Martello
Ontwerp De kleuren waren vrij lastig goed te krijgen om de sfeer te laten zien, de schaduwen er goed uit te laten komen en toch ook een beetje realistisch is. Hiervoor hebben we veel uitgeprobeerd met de kleuren. Uiteindelijk is het de oranje kleur met gradiants geworden voor de bergen en een gelige ondergrond. Deze kleuren stralen de warmte van de woestijn uit, ook zorgen de gradiants voor een beetje diepte. Door de lichte kleuren komen de zwarte schaduw vormen op de voorgrond ook goed uit. De kleuren zijn ook een beetje een fellere vorm van de werkelijkheid dus is het ook een beetje realistisch. De lucht is een realistische lucht geworden van een foto. Dit omdat het een beetje extra detail geeft en hierdoor de silhouetten ook meer opvallen.
Ontwikkeling van de achtergrond.
27
De scènes die zich ‘s nachts afspelen moesten een andere, donkere, kleur hebben. Eerst is er geprobeerd de kleuren donkerder te maken. Dit werkte niet goed, de silhouetten vielen niet meer genoeg op en de sfeer werd erg grauw. Hierna probeerden we de kleur blauw, na het vinden van een afbeelding waar dit ook te zien is, dit werkte goed. Het had de juiste sfeer en gaf nog genoeg contrast met de silhouetten. Ook hier zijn de gradiants op dezelfde manier meegenomen en heeft deze nacht versie ook een realistische lucht van een foto.
Winter Research De scene winter heeft een sneeuwlandschap. Hier is dus eerst onderzoek naar gedaan. De landschappen hebben vaak hoge bruin/grijze bergen bedekt met sneeuw, de luchten zijn blauw met een beetje bewolking. De ondergrond is wisselend van zand, gras of sneeuw. Deze elementen zijn overgenomen in de stijl van de applicatie voor het ontwerp van de winter scene.
Inspiratie voor nacht kleuren
Voorbeelden van winterlandschappen
De omgeving is vaak bosrijk, er komen naaldbomen in de omgeving voor en ook kale bomen. In de applicatie zal in deze omgeving een militaire missie plaatsvinden. Hier is ook onderzoek naar gedaan. Hiervoor is er een foto reportage als inspiratie gebruikt. Daar werd gebruik gemaakt van een jeep, ook zie je er militairen verscholen onder de sneeuw. Ontwikkeling van de nachtelijke achtergrond
Omgevingselementen. Gebouw, bomen, jeep en een soldaat.
Bron: Royal Military Academy. (2013). Military Training : Winter 1. Geraadpleegd op 7 januari 2014, van http://www.rma.ac.be/Eventpictures/Impressions/Winter1/
28
29
Ontwerp In het ontwerp zijn alle elementen van de research meegenomen. De omgeving is ontworpen naar de stijl van de rest van de applicatie. Zo zijn de soldaten, bomen en de jeep schimmen. Ook is het gebouw in grijstinten net zoals de tenten in de andere scènes. De bergen zijn grijs/blauw gemaakt om toch contrast te geven met de grijstinten bovendien wordt er in de andere scènes ook gebruik gemaakt van kleur in de achtergrond. De lucht is ook hier een foto, deze is gebaseerd op de luchten van de landschappen.
Uitwerking van de scene winter
Jungle Research De scene Jungle vindt plaats midden in een jungle. Er is onderzoek gedaan naar het uiterlijk van de omgeving. In een jungle is het vaak een wirwar aan planten, bomen, dieren, enz. Er zijn veel kleuren aanwezig, maar de kleur die je vooral tegen zult komen is groen. Er is dus een grote diversiteit aan planten en dieren. Hiermee is dus ook rekening gehouden tijdens het ontwerp om de scene zo herkenbaar en levendig mogelijk te maken. Tijdens de research is ook gekeken naar andere voorbeelden van een jungle en dan ook in de stijl van silhouetten. Wat daarbij vooral opviel is dat je veel planten ziet met in het midden een ‘open plek’.
Gevonden voorbeelden tijdens research
Ontwerp Tijdens de ontwerpfase zijn de gevonden elementen vanuit de research meegenomen om zo tot een goed resultaat te kunnen komen. De omgeving is in de stijl van de applicatie gemaakt en bevat dus ook de silhouetten. Deze zijn gebruikt voor de begroeiing, de dieren en ook de soldaten. De achtergrond heeft wel kleur, zoals dat in de applicatie ook gebeurt. De kleurkeuze is gevallen op groen, aangezien dit een kleur is die veel terug komt in de jungle en dus ook de natuur weergeeft. In de scene is te zien hoe vijf soldaten hun zware tocht door de dichtbegroeide jungle maken. Hieronder het resultaat.
30
31
Ontwerp Tijdens de ontwerpfase zijn de gevonden elementen vanuit de research meegenomen om zo tot een goed resultaat te kunnen komen. Ook bij scene Meer is de omgeving zo ontworpen dat deze binnen de stijl van de applicatie past. De begroeiing en de achtergrond zijn silhouetten. Daarnaast zijn ook de soldaten en de boot silhouetten. Dit om het geheel passend binnen de applicatie te maken. Het water en de bergen in de achtergrond hebben wel kleur. Er is gekozen voor een roze gloed. Dit was een van de voorbeelden die tijdens de research was gevonden en tot zeer mooi werd bevonden. Dit is dus ook vastgehouden en hieronder is het resultaat te vinden.
Uitwerking intro scherm jungle
Meer Research De scene Meer speelt zich af rond een groot meer in de bergen. Tijdens de research is er gekeken naar verschillende omgevingen rond om een meer. Om ook deze scene passend te houden binnen de applicatie is er al meteen gekeken naar omgevingen in silhouetten. Hierbij zag je veel speling met diepte door op de voorgrond ook onderdelen te plaatsen. Hierdoor ontstaan er meteen diepte in de scene. Daarnaast is er ook gekeken naar gebruik van kleur. Tijdens de research waren er voorbeelden waarbij de zon onderging. Dit geeft dan een mooi effect of het water in het meer. Uitwerking intro scherm meer
Research meer
32
33
Uruzgan
Huis
Research In de intro mag natuurlijk de scene Uruzgan niet ontbreken. Deze scene speelt zich af een in omgeving met vrijwel alleen maar zand, bergen, rotsen, enz. Voor deze scene heb ik geprobeerd enigszins dezelfde opbouw te hanteren als bij de andere scènes. In Uruzgan is er weinig begroeiing en ligt er vooral een hoop zand. Om te kijken hoe de omgeving rond het kamp eruit ziet ben ik gaan kijken naar foto’s die we hebben gekregen van Amy van Son vanuit het kamp. Aan de hand van deze foto’s heb ik geprobeerd een wereld te maken die goed aansluit bij de rest van de intro.
Research In deze scene komt de cameraman bij zijn huis. Hier loopt de fotograaf naar binnen en komt uit bij de foto muur waar de gebruiker alle verhalen kunt kiezen. Voor deze scene is er gezocht naar een huis dat in silhouet vorm nog duidelijk herkenbaar is als huis. Hierbij kwam al snel naar voren dat het niet makkelijk was om zo’n huis te vinden. Uiteindelijk is er toch een huis gevonden die gebruikt kon worden in de introfilm.
Research huis intro scherm
Research voor scherm Uruzgan intro
Ontwerp Voor het ontwerp heb ik vastgehouden aan de omgeving die al gemaakt was voor in de applicatie. De oranje ondergrond met de donkeroranje bergen. Dit heb ik als basis genomen. Om het in de zelfde opbouw te houden als de andere scènes heb ik een lijn proberen te creëren waar de cameraman voorlangs loopt. Ook heb ik diepte proberen te creëren met behulp van wat rotsen en wat begroeiing in de voorgrond. Op de achtergrond het ik een dorpje gemaakt om de omgeving wat levendig te maken. Hierbij is het dorp in kleur om het herkenbaar te maken. De soldaten zijn zoals overal een silhouet. Hieronder het eindresultaat.
34
Uitwerking intro scherm Uruzgan
Ontwerp Allereerst is het gevonden huis zo gemaakt dat het een silhouet is die in de stijl van de applicatie past. Toen deze in de juiste stijl was is gekeken naar de plaatsing van het huis in de scene. Hier bleek het beter was dat er maar een gedeelte van het huis te zien was en dat de rest omgeving was. Zo paste deze scene ook goed tussen de andere scènes in de intro. De ruimte die nog vrij was is opgevuld als tuin om het toch levendiger te maken. Op de achtergrond in een skyline te zien van de stad. Zo krijg je als gebruiker toch meer het gevoel dat je in een straat van een stad bent. Hieronder is het resultaat te zien.
Uitwerking intro scherm huis
35
Ontwerp en realisatie karakters Ontwerp en realisatie karakters De karakters zijn zwarte schaduwen van personen/militairen. Hiervoor is gekozen, omdat het een verhaal van iemand is. Als een persoon een verhaal zich herinnert, herinnert iemand nooit de details. Vandaar dat niet alles van personen zichtbaar is en dus silhouetten zijn. Als eerste versie hebben we afbeeldingen genomen van verschillende militairen en personen. Dit is al een goede sfeer impressie en de diepte in toch een beetje aanwezig. Echter ging er te veel tijd in zitten om alle karakters te animeren en helemaal zo te maken zoals Nederlandse militairen er in Uruzgan uit zien. Daarom hebben we besloten dit op greenscreen op te nemen. Zo kunnen we spullen verzamelen/aan doen die de Nederlandse militairen daar ook hebben. Ook het animeren is hierdoor niet meer nodig. Ook zorgt deze manier voor nog meet diepte en realisme van de karakters. De scènes/animaties zijn opgenomen en hierna bewerkt zodat alleen het silhouet over bleef.
Ontwerp en realisatie geluid Ontwerp en realisatie geluid
De geluiden die in de applicatie zitten zijn, omgevingsgeluiden, achtergrondmuziek, effectgeluiden en spraak. Door al deze geluiden samen moet de sfeer extra verduidelijkt worden. Er is eerst onderzoek gedaan naar de omgeving. Welke geluiden hoor je in een woestijn en welke geluiden in een kamp. In de woestijn is het voornamelijk natuur. Dit zijn geluiden van wind en dieren. In de applicatie zit een vogel, vliegende vogels en een muis. Deze geluiden zijn gevonden op het internet. In de omgeving van een kamp zijn mensen, die zullen lopen en praten. Er staan gaslampen in het kamp, deze zal de gebruiker ook kunnen horen als deze aan staan. Er vliegen ook helikopters over. Deze geluiden zijn ook gevonden op internet. Verder is de omgeving statisch en maakt geen geluid. Effect geluiden zijn er meer, de schoten, het roken, klikken op knopjes van de laptop, tent open maken, gapen, de camera flits en uit een flesje water drinken. Deze geluiden maken de omgeving echt en realistisch, dit komt ten goede van het inlevingsvermogen van de gebruiker. Een aantal van deze geluiden zijn opgenomen, een aantal gevonden op internet. De muziek van de radio is ook gevonden, hiervoor zijn vier verschillende fragmenten gebruikt. Ieder fragment duur ongeveer 1:30 – 1:50 min. Om het effect van een slecht onvangende radio te maken is er eerst een harde ruis te horen aan het begin van het fragment. Aan het gehele fragment is een ruis toegevoegd en aan het einde een fade-out. De bewerkte en de originele bestanden staan in de map. De spraak is voornamelijk gedachten. De teksten zijn fluisterend ingesproken zodat ze klinken als een gedachte. De teksten zijn afgeleidt, soms (deels) letterlijk overgenomen, uit de twee verhalen verkregen van de opdrachtgeefster. Het volledige script staat in de bijlage. Als laatst is er de achtergrondmuziek, dit bestaat voor deze versie uit vier audio fragmenten, een voor de intro, een voor het hele verhaal, een voor alleen de scene TIC en een voor de scene muur. De muziek is gevonden op het internet. Hierbij is gekeken naar spanning, effect, drama en stijl. De sfeer van de muziek past bij de omgeving waar de gebruiker zich bevindt. De muziek bij de intro zorgt voor spanning en een beetje mysterie. De muziek in de scene muur is rustiger, maar heeft wel de spanning nog. De algemene muziek voor het Uruzghan verhaal is gebaseerd op de omgeving, de muziek is rustig met spannende stukken. Hier is voor gekozen, omdat dit aansluit bij het feit dat in een kamp je ook nooit weet wanneer er een aanval komt. De muziek bij de TIC is het spannendste en het onrustigst, omdat zich hier een actie fragment afspeelt. Bij de keuze is ook gekeken naar de muziek soort, zodat er niet ineens een hiphop beat tussen gitaar muziek zit.
Verschillende soldaat silhouetten
36
37
Ontwerp en realisatie navigatie Fotolijstje en TV In de applicatie van Fabula Umbra moest ook een menu aanwezig zijn. Het idee dat was bedacht kwam uit een eerdere fase. Het idee was om een fotolijst en een TV als menu buttons te gebruiken. Het was hierbij de bedoeling dat je aan de hand van het fotolijstje weer terug zou kunnen naar de foto muur. Hier zou je dan van verhaal kunnen veranderen. Bij de TV zou je een introductiefilmpje krijgen van het thema van de scene waar de gebruiker zich op dat moment bevindt. Hier zou de gebruiker dan ook kunnen kiezen om naar een ander verhaal tegen met hetzelfde thema als de huidige scene. Bij het ontwerp van de Fotolijst en de TV was het de bedoeling dat het fotolijstje er hetzelfde eruit zag als bij de foto muur. Zo was het herkenbaar voor de gebruiker. Voor de TV was bedacht dat het een retrotelevisie zou worden, omdat een gloednieuwe flat screen TV enigszins raar zou zijn, aangezien je toch in een oorlogsgebied zit. Het ontwerp van het fotolijstje en de TV zijn hieronder te zien. Na de ontwerpfase zijn de buttons in de applicatie geplaatst om te kijken of het goed bij elkaar paste. Dit was echter niet het geval. Het sloot niet goed aan bij de rest van de applicatie. Toen is er besloten om de TV ook zwart-wit te maken, maar ook dit pakte niet goed uit. De TV viel weg in de applicatie. Er is toen besloten om een andere vorm van buttons te gaan gebruiken.
Muziek en geluiden
Ontwerpen voor tv scherm
IPod met Fotolijstje Doordat de TV niet toegepast kon worden in onze applicatie is er gezocht naar andere mogelijkheden. Er is hierbij toen gedacht aan een computer, laptop, mobiel, IPod, enz. Tijdens deze korte brainstorm is er uiteindelijk besloten om voor de IPod te gaan. De reden hiervoor was, omdat dit in verband staat met muziek en je er tevens een video kan bekijken. Daarnaast is de kleur van een IPod ook al zwart en zou het dus goed moeten passen binnen de applicatie. Bij het ontwerp van de IPod button is er gezocht naar voorbeelden van de IPod Touch. Het resultaat van de IPod is hiernaast te zien. Deze zou dan in combinatie met het fotolijstje zoals hierboven staat afgebeeld worden toegepast. Ook dit bleek niet het gewenste resultaat. Ook de IPod viel weg en paste ook niet binnen de applicatie. Ontwerp IPod met fotolijst
38
39
Menubalk Na de eerdere pogingen is er besloten om iets totaal anders te proberen, namelijk een menubalk. Deze zou dan in principe niet zichtbaar zijn tenzij er geklikt wordt op de menubutton. Door het op deze manier te doen wordt je in de applicatie ook niet snel afgeleid door buttons die constant in het scherm staan. Daarnaast is door gebruik te maken van een menubalk ook duidelijker waar de buttons voor zijn en het is overzichtelijker voor de gebruiker. Voor het uiterlijk van de menubalk ben ik gaan kijken naar verschillende voorbeelden van navigatie binnen applicaties. Wat daar naar voren kwam was het design van de buttons van Apple op de IPhone en IPod en Windows 8. De buttons zijn niet al te ingewikkeld vormgegeven zodat het voor de gebruiker duidelijk is wat de button inhoudt.
dan ook geen hinder van zal ondervinden. Er is gekozen voor de manier van het inschuiven, omdat de menubalk niet het belangrijkste is van de applicatie. Het is meer een hulpmiddel om bijvoorbeeld terug te gaan naar de foto muur of om het verhaal te lezen. Daarom is er besloten om de menubalk niet constant te laten zien. Dit hangt af van de keuze van de gebruiker. Daarnaast is de menubalk ook niet storend als deze niet te zien is. Het kan afleiden van het verhaal en dit wilden we niet. Daarom kan de gebruiker het menu zelf tevoorschijn halen.
Menubalk research, windows 8 & Apple iconen
Bij het ontwerp van het menu en de buttons is in eerste instantie uitgegaan van het ontwerp van Apple. De buttons hadden net als bij Apple een glans in de button zitten. Hiernaast is het eerste ontwerp te zien van de menubalk. Om vast te houden aan onze stijl is het icoon zwart van kleur. Dit is, omdat er in de applicatie gewerkt wordt met silhouetten die zwart van kleur zijn. Daarnaast is de keuze voor de kleur oranje ook gekomen van de stijl van de applicatie. De scènes in de applicatie bevatten namelijk een oranje omgeving. Hierdoor zal de menubalk goed aansluiten bij de rest van de applicatie. Toch was het menu niet helemaal naar tevredenheid en is er gekeken naar een iets ander ontwerp. Nu is er gekeken naar het ontwerp van Windows 8. Hierbij is het icoon binnen de button wit gekleurd waardoor het er meer uitspringt. Daarnaast is ook de kleur van de button een geheel zonder een glans of iets dergelijks. Met dit voorbeeld is er een nieuwe versie van het menu ontstaan. Deze is hiernaast te zien. De buttons hebben een kleur gekregen i.p.v. een gradiënt en de iconen hebben een witte kleur gekregen. Zo valt het iets beter op en is het ook duidelijker zichtbaar voor de gebruiker. Ook is er voor de scene Nacht een menubalk gemaakt. Deze is hetzelfde alleen is hier de kleur anders. Dit is omdat de omgeving dan blauw kleurt, waar het eerst oranje was. Daarom past de kleur zich dan ook aan zodat het ook in deze scene goed aansluit bij de applicatie. De menubalk zal in principe niet te zien zijn tenzij de gebruiker op de menubutton klikt. Dan komt de menubalk van rechts binnen geschoven en wordt de menubalk geheel zichtbaar. Door weer op de menubutton te drukken zal die menubalk weer verdwijnen zodat de gebruiker daar
40
Verschillende ontwerpen menubalk
41
Grafische user Interface In de applicatie zijn drieverschillende mogelijkheden te navigeren. Als eerste zijn er de fotolijstjes. Deze bestaat uit verschillende fotolijsten waarbij iedere foto lijst leidt naar een ver haal. Als tweede is er de menubalk, deze is zichtbaar in ieder verhaal. Hier kan de gebruiker naar de ‘song’, de muur scene, het verhaal, een ander verhaal of naar de informatie pagina. Als laatste is er de navigatie binnen het verhaal, deze wordt gevormd door verschillende elementen die in het verhaal samen hangen. De fotolijstjes Bij de fotolijstjes, in de scene muur, kan de gebruiker navigeren naar de verhalen door op een van de fotolijsten te klikken. Hierdoor beland de gebruiker in de ruimte van het verhaal dat bij dat fotolijstje hoort. Als de gebruiker na het verhaal terug komt bij de fotolijstjes is de foto in het fotolijstje, van de foto waarop geklikt was, veranderd in een andere foto uit het verhaal. Zo kan de gebruiker zien dat hij dit verhaal doorgelopen heeft. Ook is er een lijstje met het Your Song logo er in, als de gebruiker hier op klikt, komt er een scherm naar voren met informatie over Your Song. Dit scherm kan de gebruiker weer wegklikken en is dan weer in de muur scene.
De button met de tv is de koppeling met thema’s. Door hier op te klikken krijgt de gebruiker een filmpje te zien over het thema van de scene waarin hij zich op dit moment bevindt. Na dit filmpje komt de gebruiker in een ander verhaal terecht, maar wel in een scene met hetzelfde thema. Het informatie icoontje werkt op dezelfde manier als de button van het boek. Alleen krijgt de gebruiker nu informatie over hoe de applicatie werk en wat er van hem verwacht wordt. Inclusief een stukje informatie over de scene waar de gebruiker zich op dit moment in bevind. Deze knop is er dus vooral voor hulp als de gebruiker niet meer weet was hij moet doen of wat de bedoeling is. Het verhaal In het verhaal navigeert de gebruiker doormiddel van elementen in de scène. De gebruiker navigeert door de applicatie door middel van klikken op voorwerpen. Zo gaat de gebruiker de tent in door in de tent te klikken en naar de scene TIC door op het karakter met het wapen te klikken. De verbindingen zijn logisch en dus goed te volgen door de gebruiker. Zo loopt de gebruiker het gehele verhaal door.
De Menubalk In ieder verhaal is de menubalk te vinden. Deze kan worden geopend door op het lijntjes icoontje te klikken. De kleuren van de menubalk zijn in de dag scènes anders dan in de nacht scènes, aangepast aan de omgevingskleuren. (Zie ook beschrijving in ‘Ontwerp en realisatie navigatie’) De button met de muzieknoot kan worden gebruikt om de muziek aan en uit te zetten. Hierbij wordt de spelende achtergrondmuziek afgezet en krijgt de gebruiker de muziek te horen die bij het verhaal hoort, zoals in dit geval het verhaal van Frank en Joost hoort bij het lied van My Favorite Scarr. Als er geklikt is op de button schuift er ook een label uit met daarop de artiest en tittel van het nummer geschreven. Als er nogmaals op de button wordt geklikt schuift de label weer in, wordt de muziek afgezet en start de achtergrondmuziek weer. De geluiden van effecten blijven wel altijd te horen, ook al staat de muziek aan. Door op de button van het fotolijstje te klikken keert de gebruiker terug naar de scene muur. De button met het boek stelt het verhaal voor. Door hier op te klikken verschijnt er een scherm met hierop het volledige verhaal van Frank en Joost. Dit is toegevoegd zodat de gebruiker altijd nog het originele verhaal kan lezen en dus ook meer details te weten kan komen. Dit scherm is weer weg te klikken door op het kruisje boven in de hoek te klikken.
42
43
Definitieve schermontwerpen Sprint 1
Scene Muur
Scene TIC
Scene Uruzgan
Scene Uruzgan nacht
44
45
Scene sterren
Sprint 2
Scene Camera
Scene Muur
46
Scene tent
47
48
49
