Ontwerpdocument van
Kelly Soumeru (509355) Moja Schuring (513192) Klas: CICA-A Docent: Bart Auceps Datum: 12/06/2014
Inhoudsopgave Inleiding 3 De opdracht 4 Het concept 5 Look & Feel 6 Karakterontwikkeling 12 Audio 19 Sceneontwikkeling 20 Video 39 Animaties 43
2
Inleiding De Plastic Soup Foundation zet zich in voor de bestrijding van plastic afval, en in het bijzonder plastic afval in onze zeeën. Plastic Soup is een complex probleem maar biedt ‘mooie’ mogelijkheden voor visuele uitleg. De foundation is op zoek naar aansprekende multimedia ‘producten’ om dit complexe probleem uit te leggen. Nu zijn wij, studenten van de Hogeschool van Arnhem en Nijmegen, gevraagd om een interactieve applicatie te ontwikkelen voor de Plastic Soup Foundation die gericht is op middelbare scholieren (12-18 jaar). Het doel is om deze doelgroep te informeren over het probleem. In dit ontwerpdocument is terug te lezen hoe het gehele ontwerpproces is aangepakt en verlopen. Hierbij wordt aandacht besteed aan onder andere de sfeer van de applicatie, de mogelijke interacties en navigaties, de vormgeving, de geluiden en de animaties. Daarbij worden de hoofdstukken aangevuld met relevante beeldmateriaal.
3
De opdracht De Plastic Soup Foundation (PSF) heeft aan studenten van de Hogeschool van Arnhem en Nijmegen gevraagd om een interactieve applicatie te ontwikkelen. Deze applicatie moet gericht zijn op middelbare scholieren (12-18 jaar) en informeren over het complexe Plastic Soup-probleem. Er zitten geen vaste eisen aan de opdracht vast, maar de PSF heeft wel een aantal suggesties gedaan van wat ze graag terug zouden zien. Zo zouden ze het erg leuk vinden als Captain Moore (de ontdekker van de Plastic Soup) terug te zien is in de applicatie. Daarbij zou het ook worden gewaardeerd als de vormgeving aansluit bij de huisstijl van de PSF. De organisatie staat echter geheel open voor eigen invulling van de studenten.
4
Het concept De applicatie vertelt het verhaal van drie plastic flesjes: Jack, Jill en Hector. Wanneer Jack en Jill elkaar tegenkomen op de lopende band van de flesjesfabriek is het liefde op het eerste gezicht. De jaloerse Hector ziet dit gebeuren en zorgt ervoor dat Jack en Jill van elkaar gescheiden worden. Jack zal er alles aan doen om Jill terug te vinden. Zijn zoektocht wordt echter gesaboteerd door Hector. Doel Het doel van de applicatie is het informeren van de doelgroep dat plastic slecht is. Daarbij moet er duidelijk worden wat Plastic Soup is. In de applicatie volgt de gebruiker plastic flesje Jack waarbij hij/zij zich aan die karakter zal gaan hechten. Aangezien het hier gaat om plastic is dat echter geen goed idee. Om dit goed af te laten lopen zal Captain Moore Jack en Jill uiteindelijk omtoveren in glazen flesjes. Op die manier vertelt de applicatie dat het gebruik van glas veel verstandiger is en beter voor het milieu. Missie In de applicatie is het aan de gebruiker om Jack te helpen met zijn zoektocht naar zijn liefje Jill. Gedurende deze zoektocht zal de gebruiker een aantal hints ontvangen waardoor hij zijn missie tot een goed einde kan brengen. Point of View Jack kan in de applicatie bestuurt worden door de gebruiker. Dit maakt dat er gebruik wordt gemaakt van een 3e persoon perspectief. Op deze manier zal de gebruiker extra kunnen meeleven met Jack om zo de missie positief af te ronden. Scènes Gedurende zijn zoektocht is het voor de gebruiker/Jack mogelijk om zes scènes te bezoeken. De eerste scene is de fabriek. Dit is waar Jack en Jill worden geproduceerd en elkaar voor het eerst ontmoeten. Vanuit hier is er 90% kans dat Jack in de vrachtwagen komt, en 10% kans dat hij in de prullenbak beland en zo op de vuilnisbelt terecht komt. In de vrachtwagen heeft Jack beperkte tijd om hieruit te ontsnappen. Lukt dit binnen die tijd dan belandt hij op de
5 straat, zo niet dan belandt hij in de winkel. Na het doorlopen van de winkelscène komt hij uiteindelijk toch bij de straat terecht. Vanaf de straat is het mogelijk op de vuilnisbelt te komen of juist gelijk in de plastic soup, waar Jack Jill terugvindt.
Look & Feel Moodboard Hieronder is het moodboard voor de applicatie te zien. Hierin wordt duidelijk dat de gehele applicatie zal worden gerealiseerd in een getekende stijl. Het kleurgebruik zal hierbij een belangrijk element zijn aangezien dit invloed heeft op onder andere de dieptewerking en sfeer. Daarbij zal het ook invloed hebben op dat wat de aandacht trekt van de kijker, het zicht wordt namelijk getrokken naar lichte vlakken of voorwerpen. De scènes zullen op een schetsachtige wijze worden gerealiseerd, dus geen erg nette strakke lijnen. Hiervoor is gekozen om een nieuwe tekenstijl te ontdekken en daarbij ook meer te richten op het kleurgebruik. Stijl De stijl die in de applicatie is aangehouden bestaat uit zwarte schetslijnen die zijn ingekleurd met pastelkleuren. Er is voor deze stijl van lijnen gekozen omdat het speels overkomt. Het maakt een minder serieuze indruk wat goed past bij de doelgroep. De doelgroep zijn tieners tussen de 12 en 18 jaar. Er is in de applicatie voor pastelkleuren gekozen omdat deze voor rust zorgen. Als er gebruik werd gemaakt van harde felle kleuren, dan zou het al snel te druk worden. De pastelkleuren zijn rustgevend en passen goed bij het onderwerp. Felle kleuren kunnen al snel als vrolijkheid worden opgevat en dat is niet de emotie die de applicatie moet opwekken. Het onderwerp van de applicatie is zeer zeker serieus. Achter de amuserende en entertainende factor is er ook een informatieve kant. Er zijn met drie standaard brushes gewerkt. Voor de zwarte schetslijnen zijn, een ‘Hard round, pt. 4’ en een ‘Round point stiff, pt. 4’ gebruikt. Het inkleuren van de assets en de achtergronden is gebeurd met de ‘Hard round pressure oppacity’ brush. Hierin verschillen de groottes waarmee is gewerkt.
6
7
Look & Feel Kleurgebruik De assets die in de verschillende scènes zijn getekend hebben allemaal een kleurverloop. Er wordt door middel van donkere pastel tinten en lichtere pastel tinten een overloop gecreëerd waardoor de 2D tekeningen diepte verkrijgen. Er wordt veel gespeeld met de opacity en met donker en licht. Elke scene heeft een eigen achtergrond. Hier wordt ook met pastelkleuren en opacity gewerkt. De meeste scènes hebben een donkere of industriële uitstraling dit wordt doorgevoerd in de achtergrond. Nadat een lijntekening is afgerond, wordt er eerst een basis onder laag aangebracht. Dit is de standaard tint. Met opacity en het donker/lichtere maken van de brush wordt er een verloop in de tekening gebracht. Er is hier ook gebruikt gemaakt van de ‘smudge tool’. Deze tool zorgt ervoor dat kleuren geleidelijk in elkaar kunnen overlopen. Typografie In de gehele applicatie is er gebruik gemaakt van het lettertype Code Bold. Er is voor dit lettertype gekozen omdat het er strak, modern en duidelijk uitziet. De lettertypes zijn gebruikt in het intro en het outro scherm.
8
9
10
11
Karakterontwikkeling De applicatie vertelt het verhaal van Jack, een plasticflesje. Jack wordt in de flesjesfabriek gescheiden van zijn liefje Jill. Het gemene flesje Hector is hier de oorzaak van. Tijdens Jack zoektocht naar Jill doet Hector er alles aan om de boel te saboteren. In de laatste scene van de applicatie, wanneer Jack zijn liefje Jill heeft teruggevonden heeft Captain Moore een verrassing voor ze. Met zijn magische krachten veranderd hij Jack en Jill in glazen flesjes, met nog eens extra nadruk op de boodschap van de Plastic Soup Foundation dat plastic slecht is. Hector vlucht weg omdat hij het niet verdient deze verandering te ondergaan. De karakters Jack, Jill en Hector zijn gerealiseerd in 3D-Max. Hiervoor is gekozen zodat de karakters extra opvallen in de scènes. In de applicatie zijn ze echter ingevoegd als 2D-afbeeldingen waarbij ze van verschillende aanzichten te bekijken zijn (zijkant, voorkant). Voor er met het ontwerpproces van de verschillende karakters kon worden begonnen is er eerst onderzoek gedaan naar verschillende flesjes. Dit onderzoek is te zien in het moodboard (zie hiernaast). Na het onderzoek is de schetsfase gestart. Er zijn een hoop schetsen gemaakt om tot het uiteindelijk ontwerp van de karakters te komen. De schetsen zijn te bekijken op de volgende pagina.
12
13
14
Karakterontwikkeling Jack Jack is de protagonist van de applicatie. De gebruiker volgt Jack gedurende zijn avontuur. Dit maakt dat de applicatie wordt bekeken vanuit een 3e persoon perspectief. De gebruiker helpt Jack verder te komen met zijn zoektocht door een uitweg te vinden in elke ruimte. Jack is hierbij een speelbaar karakter. De gebruiker kan hem laten lopen door middel van de pijltjestoetsen. Op deze manier zal er snel worden meegeleefd met het karakter. Dit maakt dat gebruiker Jack graag wil helpen en zo de applicatie zal uitspelen. Vorm Belangrijk bij het ontwerp van Jack is dat hij voor de gebruiker herkenbaar is als plasticflesje. Hiervoor is eerst onderzoek gedaan naar verschillende flesjes met verschillende vormen (zie moodboard). Aan de hand hiervan zijn er een aantal schetsen gemaakt. Als conclusie is eruit gekomen
15 dat een plastic flesje voornamelijk herkenbaar is aan verschillende deuken die in de vorm zitten. Daarentegen is een glazenflesje geheel recht. Jack draagt een groen petje. Wanneer Captain Moore zijn magische krachten loslaat op Jack veranderd hij van plastic in glas. Deze glazen versie van Jack heeft dezelfde karakteristieken als de plastic versie, alleen de vorm is aangepast. Deze is nu geheel recht, met een lange dunne hals. Dit is herkenbaar voor een glazen flesje. Kleur Om duidelijk te maken dat het hier gaat om een mannelijk plasticflesje is er voor gekozen om Jack blauw te maken. Dit komt overeen met de kleurassociatie die mensen hebben bij het mannelijk geslacht. In dit geval kan blauw ook geassocieerd worden met een waterflesje.
Karakterontwikkeling Jill De applicatie draait om het vinden van Jill. In de eerste scene ziet de gebruiker dat Jill uit de flesjesmachine komt. Dit is waar Jack haar kwijt raakt als gevolg van een sabotageactie van Hector. Jill komt in de plastic soup terecht. Dit is dan ook waar de gebruiker/Jack haar weer terug zal vinden. Vorm Ook in het geval van Jill is het belangrijk dat ze herkenbaar is als plasticflesje. Dit wordt voor de gebruiker duidelijk in de eerste scene, doordat Jill uit dezelfde machine komt als Jack. Jill is een vrouwelijk plasticflesje, daarom is bij het ontwerp ervoor gekozen om het typerende zandloperfiguur te gebruiken. Jill heeft ter versiering een grote bloem op haar dopje.
16 Wanneer Captain Moore zijn magische krachten loslaat op Jill veranderd zij, evenals Jack, van plastic in glas. Deze glazen versie van Jill heeft dezelfde karakteristieken als de plastic versie. Op deze manier blijft het karakter wel herkenbaar voor de gebruiker. De glazen versie van Jill heeft dezelfde vorm als de glazen versie van Jack. Kleur Om duidelijk te maken dat het hier gaat om een vrouwelijk plasticflesje is er voor gekozen om Jill roze te maken. Dit komt overeen met de kleurassociatie die mensen hebben bij het vrouwelijk geslacht. Doordat er bij Jill ook lichtgeel is gebruikt, lijkt het net of ze een roze jurkje draagt.
Karakterontwikkeling
17
Hector Hector is de antagonist van het verhaal. In de fabriek zorgt hij ervoor dat Jack en Jill gescheiden worden. Gedurende Jacks zoektocht doet Hector er alles aan om te voorkomen dat Jack zijn geliefde Jill terugvindt.
Kleurgebruik In eerste instantie was het ontwerp van Hector gebaseerd op de Mexicaanse cultuur. Zo werden de kleuren rood, groen en geel gebruikt. Daarbij had Hector een sombrero op. Uiteindelijk zijn we van deze ontwerpkeuzes afgestapt. Dit omdat het ontwerp de Mexicaanse bevolking in een slecht daglicht kan stellen. Uiteindelijk is ervoor gekozen om Hector donkerrood te kleuren. Deze kleur wordt vaak geassocieerd met het kwaad, wat in dit geval aansluit op Hectors rol als antagonist.
Vorm Ook Hector is een plasticflesje. In eerste instantie had het ontwerp de vorm gekregen van een rechte fles met een lange hals. Dit is uiteindelijk aangepast omdat deze vorm te veel leek op dat van een glazen fles. Uiteindelijk is voor dit ontwerp dezelfde vorm gebruikt als bij Jack. Op deze manier is de vorm herkenbaar voor de gebruiker en zal hij zelf de link leggen dat Hector ook van plastic is. Hector draagt een rood petje.
Karakterontwikkeling
18
Captain Moore Kapitein Charles J. Moore is de ontdekker van de plastic soup. In de applicatie komt Moore uit een doosje (het ‘Jack in the Box’ principe). Hij geeft de gebruiker een hint over de uitweg in elke scene. In de laatste scene van de applicatie heeft Captain Moore een speciale rol, hij zorgt namelijk voor een plottwist.
Kleurgebruik Ook het kleurgebruik is afgeleid van de levensechte Captain Moore. De kapiteinshoed is wit met geel en het pakje lichtblauw met gele lapjes. Op deze manier is wordt het de gebruiker duidelijk dat het hier gaat om een kapitein. De gebruiker hoeft daarvoor niet per se te weten wie Captain Moore is.
Vorm Het ontwerp van Moore in the Box is gebaseerd op de levensechte Captain Moore. Zo heeft hij een kapiteinshoed opgekregen, een passend pakje aan en een mooie grijze baard. De vorm van Moore is gebaseerd op een Jack in the Box. Zo lijkt Moore meer op een lappenpopje dan op een realistisch persoon.
audio Geluidseffecten In de applicatie wordt gebruik gemaakt van geluidseffecten. Dit om de gehele beleving van de gebruiker positief te be誰nvloeden. Alle geluiden die in de applicatie te horen zijn, zijn zelf opgenomen. Grotendeels is dit gebeurt door geluiden te maken met de mond (Bijvoorbeeld: ZOEF!) maar ook zijn er voorwerpen als een plastic mesje, een dienblad, een whiteboard en een deurklink ingezet. De geluiden zijn zo gemaakt dat ze realistisch overkomen op de gebruiker. De keuze om de geluiden zelf op te nemen is gemaakt om de geluiden aan te laten sluiten bij de vormgeving. De vormgeving is schetsmatig en dit wilden we laten terugkomen in de geluiden. Achtergrondgeluiden Ook is er in elke scene een specifiek achtergrondgeluid te horen. Deze geluiden zijn bedoeld om de omgevingsbeleving van de gebruiker te versterken. De achtergrondgeluiden zijn deels zelfgemaakt en deels van externe bronnen. Het achtergrondgeluid van de winkel is hier te beluisteren: https://www.youtube.com/watch?v=ZnVapZ2lCpc Het achtergrondgeluid van de vuilnisbelt is hier te beluisteren: https://www.youtube.com/watch?v=2RFzkyxg3Yo Het achtergrondgeluid van de plastic soup is hier te beluisteren: https://www.youtube.com/watch?v=R8hqOyKiaZU Voice-over In de laatste scene (de plastic soup) legt Captain Moore door middel van een dialoog nog eens extra de nadruk op het feit dat plastic slecht is. Deze dialoog is opgenomen als een voice-over.
19 Bewerking De gemaakte en gebruikte geluidseffecten zijn zo nodig bewerkt met het programma Adobe Audition. Hierin zijn bewerkingen verricht als het verkorten van geluidsfragmenten en het invoegen van fade-in en fade-out effecten. Op deze manier is ervoor gezorgd dat de fragmenten gelijk lopen met de verschillende acties in de applicatie.
sceneontwikkeling Storyboards Het low fidelity storyboard bestaat uit een schets van de scene. Deze geeft een eerste indruk van de vormgeving. Daarbij zijn de voorwerpen waar interactie mee mogelijk is te zien aangezien deze sowieso moeten terugkomen in het high fidelity ontwerp. Het high fidelity storyboard bestaat uit het uiteindelijke ontwerp van de scene, ofwel exact hoe deze te zien zal zijn in de applicatie.
20 Intro In het introscherm van de applicatie is de fabriek te zien van scene 1. Er is van alles te zien. Er komt rook uit de schoorstenen van de fabriek. Als de gebruiker even wacht dan komt Hector tevoorschijn vanachter de boom. Hij laat zijn gemene lach horen terwijl hij naar de tortelduifjes op het grasveld gluurt. Jack en Jill zitten verliefd op het picknickkleed en de hartjes vliegen er van af. Na een bepaalde tijd komt er een vrachtwagen uit de fabriek. Op de zijkant van de vrachtwagen is de naam van de applicatie te zien.
Interacties De meeste interacties worden uitgevoerd wanneer de gebruiker met de muis op het onderdeel klikt. Bij elke scene staat een lijstje van de verschillende onderdelen met een Het introscherm is gemaakt om de gebruiker te verleiden de korte uitleg over de actie die eraan gekoppeld zit. applicatie te spelen. Het geeft een klein inzicht in de stijl van de applicatie en wat er gaat gebeuren. Als de gebruiker op Er zijn drie voorwerpen die in alle scènes terugkeren met start klikt dan komt er een instructie scherm naar beneden een mogelijke actie: vallen. Hierop staat de missie en wordt de besturing van de applicatie uitgelegd. De gebruiker moet nogmaals op start 1. Moore in the Box: In elke scene komt Captain Moore voor. drukken en dan wordt dan naar de eerste scene gestuurd. Hij zit voor een halve minuut verstopt in zijn doosje, waarna hij eruit sprint. Wanneer er dan op hem geklikt wordt krijgt Hiernaast is de schets, evenals het uiteindelijke introscherm de gebruiker een hint te zien over de uitweg in de scene. te zien. In de laatste scene (de plastic soup) komt Captain Moore helemaal uit zijn doosje waarbij hij de gebruiker in de vorm van een voice-over informatie verschaft. 2. Televisie: Wanneer de gebruiker op de televisie klikt komt deze vergroot in beeld waarna het PSF news (video) wordt afgespeeld. In de laatste scene (de plastic soup) is de TV echter kapot en is er dus geen filmpje te zien. 3. Rugzak: De rugzak dient als inventaris. Verschillende voorwerpen die in de scènes gevonden kunnen worden zullen hierin verschijnen. In een latere scene kan dit voorwerp gebruikt worden voor interactie.
21
sceneontwikkeling Fabriek De eerste scene van de applicatie is de plastic flesjes fabriek. Hier worden Jack en Jill gemaakt en komen achter elkaar uit de machine. Het is liefde op eerste gezicht. Hector ziet dit gebeuren en wilt hier een stokje voor steken, hij scheidt de twee tortelduifjes en hier begint Jack zijn zoektocht naar zijn ware liefde. Interacties Hieronder staat een lijst met de verschillende onderdelen waar een actie aangekoppeld zit: 1. Machineknop: Met een muisklik verandert de knop van kleur en wordt Jill gemaakt. Een tweede muisklik zorgt ervoor dat de loopband verschuift en dat Jack gemaakt wordt. 2. Hector: Met een muisklik op Hector wordt Jill de grote loopband op geduwd en verdwijnt zij door het gat in de muur. Klikt de gebruiker weer op Hector dan wordt Jack de band opgeduwd en gaat hij in tegengestelde richting het beeld uit. Hij komt dan uit in de vrachtwagen scene. 3. Schaar: Klikt men op de schaar dan wordt deze verzameld en verschijnt deze in de inventaris. (De rugtas) 4. Prullenbak: Er is 10% kans dat Jack in de prullenbak valt als hij erlangs heen rolt.
22
23
sceneontwikkeling
24
Vrachtwagen Nadat Jack uit beeld verdwijnt in de fabriek, komt hij uit bij de vrachtwagen. De is de tweede scene van de applicatie. De vrachtwagen rijdt richting de winkel om daar zijn goederen af te leveren. Nu is het aan Jack om te ontsnappen uit de vrachtwagen of hij blijft en eindigt in de winkel.
7. Linker fles: Met een muisklik op de linker fles, wordt er een domino effect geactiveerd.
Interacties Hieronder staat een lijst met de verschillende onderdelen waar een actie aangekoppeld zit:
9. Tekst op de muur: Met een muisklik op de tekst veranderen de woorden.
8. Motortje: Als de gebruiker op de linker fles heeft geklikt, dan komt er een motortje uit het rooster vallen. Met een muisklik gaat deze rijden en zoeft het scherm uit.
10. Dopjes: Als de gebruiker op de dopjes klikt van de 1.Kurk van champagnefles: Door met de muis op de flessen die in de kratten staan. Dan schieten deze omhoog champagnefles te klikken, wordt deze omgegooit. De en zweven ze naar beneden met een parachute. Als de champagne komt uit de fles en zet de hele vrachtwagen dopjes op de grond liggen dan kan de gebruiker deze onder. Hector komt langs in zijn bootje en de kratten oppakken en verschijnen ze in de inventaris. De parachutes beginnen te drijven. De gebruiker moet nu wachten totdat kunnen in een andere scene gebruikt worden. de vrachtwagen bij de winkel arriveert. (uitweg 1) 2. Champagnefles: Met een muisklik op de flessendop wordt de fles geschud en uiteindelijk schiet de dop eraf. Door de kracht van de dop worden de kratten verschoven en is er een trap gemaakt naar de hendel van het luik. 3. Deurhendel: Met de pijltjes toetsen moet de gebruiker op de verschoven kratten klimmen. Als Jack op het bovenste krat staat dan staat hij op de hoogte van de hendel. Met een muisklik op de hendel wordt het luik opengeschoven en kan Jack ontsnappen (uitweg 2). 4. Schakelaar 1: Met een muisklik op de eerste schakelaar wordt het licht uitgedaan. 5. Schakelaar 2: Is het donker en wordt er op de tweede knop geklikt, dan komt er een discobal uit het plafond naar beneden. 6. Middelste fles: Met een muisklik op de middelste fles valt er een zelfde fles eronder uit.
25
sceneontwikkeling Winkel De winkel is de derde scene van de applicatie. De gebruiker komt in deze scene terecht wanneer hij niet binnen de tijd uit de vrachtwagen is ontsnapt. Wanneer dit wel binnen de tijd is gelukt, dan wordt de winkelscène geheel overgeslagen. Interacties Hieronder staat een lijst met de verschillende onderdelen waar een actie aangekoppeld zit: 1. Muis: Na een muisklik wiebelt dit muisje met zijn staart. 2. Raketijsje: Deze actie kan alleen worden uitgevoerd wanneer Jack naast het ijsje staat. Na een muisklik vliegen Jack en het ijsje de lucht in, waarna Jack bovenop het winkelschap belandt. Deze actie is noodzakelijk voor het ontsnappen uit de scene. 3. Rugzak: Wanneer de rugzak wordt opgepakt verschijnt de inventaris weer. 4. Wc-rol: Een muisklik maakt dat de wc-rol uitrolt, waarna Jack via het wc-papier het winkelwagentje in kan glijden. 5. Parachutedopjes: Deze zijn te vinden in de inventaris. De gebruiker kan hier alleen bij na het oppakken van de rugzak. Door op de dopjes te klikken (deze moeten opgepakt zijn in de vrachtwagenscène) verschijnt er een dopje met een parachute eraan. Hiermee vliegt Jack naar beneden de winkelwagen in.
26 6. Winkelwagen: Wanneer Jack in de winkelwagen belandt (via de wc-rol of parachutedopjes) rijdt hij in het winkelwagentje de winkel uit. Via deze weg komt Jack in de volgende scene (de straat) terecht. 7. Vissenvoer: Wanneer het vissenvoer wordt opgepakt verschijnt deze in de inventaris. 8. Wasmiddel: De gebruiker kan op twee flessen wasmiddel klikken, waarna deze in de winkelwagen vallen. Wanneer de flessen uit het schap zijn verdwenen komt Moore in the Box in beeld.
27
sceneontwikkeling
28
Straat De straat is de vierde scene van de applicatie. Wanneer de 10. T-shirt: Met een muisklik valt het t-shirt van de waslijn, gebruiker binnen de tijd uit de vrachtwagen is ontsnapt dan direct in de vuilnisbak. Deze actie kan alleen worden komt hij op de straat terecht. In het andere geval komt de uitgevoerd wanneer de klep van de vuilnisbak open staat. gebruiker vanuit de winkel in de straat terecht. 11. Sleutel: De sleutel komt in beeld wanneer het t-shirt is Interacties gevallen. De gebruiker kan de sleutel oppakken, waarna Hieronder staat een lijst met de verschillende onderdelen deze in de inventaris verschijnt. waar een actie aangekoppeld zit: 12. Deur: De deur kan alleen geopend worden wanneer de 1. Haar van oma: Het haar van oma veranderd van geel sleutel is opgepakt. Wanneer Jack voor de deur staat gaat naar rood naar zwart in meerdere muisklikken. deze automatisch open, waarna hij naar binnen kan. 2. Bloempot: Na een muisklik groeit er een bloem in de pot. 3. Rook: Uit de schoorstenen van de huizen komt rook. 4. Klapraam: Het klapraam van het roze huis gaat open wanneer Jack hieronder staat. Hector is te zien achter het raam. 5. Kistje: Het kistje wordt naar beneden gegooid door Hector. 6. Vis: Met een muisklik verlaat de vis zijn hangbord en belandt hij in het water. 7. Dakpan: Met een muisklik valt de dakpan naar beneden. In zijn val neemt hij het bord waar de vis op stond mee. 8. Bord: Deze wordt door de vallende dakpan naar beneden gehaald. Hierna belandt hij schuin tegen het hekje, waarna Jack hier overheen kan lopen en in het water belandt. Dit brengt Jack naar de volgende scene: de plastic soup. 9. Vuilnisbak: Met een muisklik wordt de vuilnisbak geopend. Met nog een muisklik valt de klep van de vuilnisbak weer dicht.
13. Vuilniswagen: Wanneer Jack door de deur is gegaan komt hij via het balkon in de vuilnisbak terecht, waarna de vuilniswagen de scene in komt rijden om de vuilnisbak te legen. Zo wordt Jack meegenomen naar de vuilnisbelt.
29
sceneontwikkeling Vuilnisbelt De vuilnisbelt is de vijfde scene van de applicatie. Deze scene is op twee manieren te bereiken. De eerste manier (en meest waarschijnlijke) is via de straat. Wanneer Jack in de vuilnisbak verdwijnt wordt hij in de vuilniswagen afgevoerd naar de vuilnisbelt. De twee manier is dat Jack in de fabriek in de prullenbak belandt en zo op de vuilnisbelt terecht komt. De kans dat dit gebeurt is echter maar 10%. Interacties Hieronder staat een lijst met de verschillende onderdelen waar een actie aangekoppeld zit: 1. Vuilniszak: Van boven verschijnt er een haak die de vuilniszak optilt en deze op een berg afval gooit. Daardoor valt de kast om waardoor er een bordje met een knop erop verschijnt. 2. Rioolknop: Met een muisklik veranderd de knop van rood naar groen en na een halve seconde weer naar rood. Het indrukken van de knop heeft als gevolg dat de klep van de rioolbuis linksboven dichtvalt. Dit heeft weer als gevolg dat de rioolbuis rechtsboven trilt waarna er smurrie uitkomt die de olievaten naar links toe doet rollen. 3. Orka: De orka beweegt op zijn plaats waardoor het lijkt dat hij met de golven meebeweegt. Na een muisklik sproeit de orka water de lucht in waardoor de olievaten naar links rollen en uit het scherm verdwijnen. 4. Appel: Na ĂŠĂŠn muisklik verdwijnt er een hap uit de appel. Met een tweede hap verdwijnt er nog hap, waarna er een klokhuis overblijft. 5. Vis: Na een muisklik veranderd de vis in een vissengraat.
30 6. Meeuw: Er is 35% kans dat wanneer Jack voor de rioolbuis rechtsboven staat hij wordt meegenomen door een meeuw. Zo komt hij direct in de plastic soup terecht. 7. Rioolbuis: Wanneer Jack de rioolbuis rechtsboven inloopt, dan komt hij er rechtsonder weer uit, waarna hij in het water ligt. Hierna drijft hij het beeld uit waarna de gebruiker hem terugziet in de plastic soup.
31
sceneontwikkeling Plastic Soup Dit is de laatste scene van de applicatie. Jack zit op de bodem van de oceaan terwijl er boven hem een dikke laag Plastic Soup drijft. Hector is hierop te zien. In het water drijven stukken plastic en er zwemmen veel verschillende vissen. In het net aan de rechterkant van het scherm is Jill te zien. Zij zit gevangen in het net en Jack moet haar bevrijden zodat ze weer samen kunnen zijn. Interacties Hieronder staat een lijst met de verschillende onderdelen waar een actie aangekoppeld zit: 1. Bovenste Zeester: Met een muisklik op de bovenste zeester, vliegt deze als een ninja ster op de plastic soup af. Een stuk plastic valt naar beneden en een nieuwsgierige vis gaat erop af. Hij eet het plastic op en sterft daarna door verstikking. 2. Middelste Zeester: Klikt men op de middelste zeester, dan vliegt deze weg en snijdt een deel van het zeewier weg. Hierachter zit een sleutel verborgen. De gebruiker kan deze sleutel oppakken. 3. Onderste Zeester: Met een klik op de onderste zeester, verandert ook deze in een ninja ster en vliegt op het net af waar Jill in zit. Het net gaat kapot en Jill wordt bevrijdt. 4. Gemuteerde vis: Mits de gebruiker vissenvoer heeft gepakt in de winkel. Dan kan men de gemuteerde vis genezen. Een klik op de groene vis zorgt ervoor dat deze het gezonde vissenvoer opeet en dan veranderd in een gezonde vis. 5. Gemuteerde lantaarnvis: Net als de gemuteerde vis, kan men op de lantaarnvis klikken. Met vissenvoer wordt de lantaarnvis weer gezond en zwemt hij vrolijk verder.
32 6. Schildpad: De schildpad zit gevangen in plastic en wilt ontsnappen. Met een klik op de schild wordt deze losgeknipt en zwemt hij verder. 7. Televisie: De televisie is kapot gegaan en kan daarom geen video’s meer afspelen. Als de gebruiker op de televisie klikt dan komt er stroom uit de uithangende kabels. 8. Sleutel: Met de gevonden sleutel (doormiddel van de middelste zeester) kan de gebruiker de kist openen. De kist springt open en het kistje van Captain Moore is te zien. De gebruiker klikt nog een keer op de box van Captain Moore en de doos gaat open. Captain Moore springt eruit en verteld een dialoog over de schadelijkheid van plastic. Daarna tovert hij Jack en Jill in glazen flessen en worden deze weer bij elkaar gebracht. De applicatie is afgelopen en het scherm springt over naar de outro scene.
33
sceneontwikkeling Outro Nadat in de laatste scene Captain Moore zijn praatje heeft gehouden en zijn magische krachten heeft losgelaten op Jack en Jill wordt de gebruiker automatisch doorgestuurd naar het outro. Deze kan gezien worden als een beloning voor de gebruiker na het doorlopen van de applicatie. In deze scene zijn de glazenflesjes Jack en Jill te zien. Ze zijn helemaal gelukkig samen. Ze bevinden zich op het strand. De duikboot van de PSF zwemt rond in een mooie schone zee. Op deze manier wordt er nog eens nadruk gelegd op hoe het kan zijn zonder al dat zwervende en zwemmende plastic. Ook vliegt er een meeuw rond. In deze scene wordt ook de aftiteling getoond.
34
35
sceneontwikkeling Hints In elke scene (behalve de plastic soup) reikt Captain Moore de gebruiker een hint aan. Een hint gaan over de mogelijke uitweg in de scene. Om de vormgeving van de hint passend te maken voor een kapitein hebben we ons laten inspireren door schatkaarten. De zelfgetekende achtergrond van elke hint bestaat uit oud verkleurd papier met gerafelde randen. Voor de hint zelf zijn de lijntekeningen van de scènes gebruikt. Op deze manier is de afbeelding herkenbaar voor de gebruiker. Om de nodige actie te verduidelijken is er in elke hint een rode pijl te zien. Deze verwijst naar een actie die gebruiker moet uitvoeren om de scene te kunnen verlaten.
36
37
38
video In de applicatie is gebruik gemaakt van video. In elke scene is een televisie te vinden. Als de gebruiker hierop klikt, wordt de televisie vergroot en er zal een video afspelen. In elk van de gemaakte video’s zal een van de projectleden te zien zijn als de reporter van PSF news. Er is hiervoor gekozen omdat de projectleden een eigen stempel op de applicatie kunnen zetten. PSF News De opzet van de video is erg simpel. Er is gebruik gemaakt van een tafel met een stoel erachter is een witter achtergrond te zien. Het moet de indruk wekken alsof de gebruiker naar een journaal kijkt. PSF news staat voor Plastic Soup Foundation news. De teksten die de reporter presenteert zijn informatieve/grappige dialogen. In deze dialogen zit een hint verborgen. Als de gebruiker deze oppikt dan kan het handig zijn in latere scènes. Stijl De TV die in elke scene (muv. de Plastic Soup) van de applicatie klikbaar is, is een ouderwets apparaat. Dit is
39 doorgevoerd in de video’s. Elke video is zwart/wit gemaakt. Dit geeft de indruk dat het gaat om oud filmmateriaal. Daarnaast is er voor zwart/wit gekozen omdat het geen stijl afbreuk geeft. Het zorgt voor rust. Logo Het logo voor PSF News bestaat uit een aantal onderdelen van het echte Plastic Soup Foundation logo. De P en de S zijn hiervan gebruikt. De F is gecreëerd door de L in stukken te breken. Het logo is geplaatst aan de linker kant van de reporter. Bewerking De video’s zijn elk bewerkt in Adobe Premiere. Elk van de video’s was gefilmd op 1080p. Deze moesten geschaald worden naar de afmetingen van de televisie zodat deze erachter geplakt konden worden. De afmetingen van de video’s nu zijn, 633x465. In Adobe Premiere zijn ook de nodige effecten over de video heen gegooid om de gewenste stijl te creëren.
40
41
42
Animaties In de applicatie worden er verschillende onderdelen geanimeerd. Als de gebruiker op een bepaalde onderdeel klikt dan krijgt diegene een actie te zien. Een voorbeeld hiervan is wanneer de gebruiker klikt op de dop van de champagnefles in de vrachtwagen. Het systeem reageert hierop door de dop van de fles te laten ploppen, waarna de fles omvalt. Een moment later wordt de vrachtwagen gevuld met bruisende champagne. Systeem De applicatie werkt op actionscript 3.0. en bestaat volledig uit code. Er is amper gebruikt gemaakt van animaties op de Flash Adobe tijdlijn aangezien dit in combinatie met de codes problemen kan opleveren. De graafmachine is het enige onderdeel dat geanimeerd is op de tijdlijn. De verschillende onderdelen van de graafmachine zijn als losse PNG bestanden opgeslagen zodat deze individueel van elkaar kunnen bewegen. Elk onderdeel heeft zijn eigen tijdlijn.
43
Animaties Frame to Frame Er zijn naast gecodeerde animaties ook ‘frame to frame’ animaties gemaakt. Een ‘FTF’ animatie zijn verschillende plaatjes, achter elkaar geplakt, waar de beweging in is getekend. Een ‘FTF’ animatie maakt het beeld minder statisch. Het is aantrekkelijk voor de gebruiker. Hieronder is er een voorbeeld te zien. Er zijn ‘FTF’ animaties gebruikt voor een aantal objecten zoals de schildpad, muis, Moore in the Box en de schatkist. De meeste animaties bestaan uit 2 of 3 frames. Besturing De gebruiker maakt gebruik van de pijltjestoetsen om Jack door de scènes te laten lopen. Als de gebruiker Jack naar links en rechts beweegt, krijgt hij Jack van de zijkant te zien. In de fabriek en de Plastic Soup is dit niet het geval. Naast de pijltjes toetsen kan de gebruiker ook op bepaalde assets klikken met de muis. Hierdoor worden acties in werking gezet. Meer hierover in het hoofdstuk ‘Scèneontwikkeling’.
44