Ontwerpdocument icc moja schuring (513192) cica by Moja Schuring

Ontwerpdocument

Student: Moja Schuring Studentennummer: 513192 Klas: CICA-A Docent: Bart Auceps Datum: 03/04/2014

Inhoudsopgave | Inleiding 3 De opdracht 4 Het verhaal 5 Vormgeving 6 Storyboard 10 Audio 15 Karakterontwikkeling 17 Ontwerpproces ruimtes 24 Animatieproces 30 Flowchart 33 Bijlagen 36

Inleiding | Op school volg ik het vak Interactive Content Creation (ICC). Hiervoor heb ik de opdracht gekregen tot het realiseren van een interactieve applicatie. Deze moet gerealiseerd worden in Adobe Flash. De opdracht heeft de titel â&#x20AC;&#x2DC;upcycling scrap heapâ&#x20AC;&#x2122; gekregen. Dit houdt in dat er op het gebied van vormgeving van de applicatie gebruik moet worden gemaakt van (gerecycled) afval. 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 en verschillende animaties. In het eerste hoofdstuk is de opdrachtomschrijving nog eens uitgebreid beschreven. Daarna is het document is als volgt opgebouwd: het eerste deel gaat over het concept voor de applicatie. Hierin worden onder andere de missie en structuur beschreven. Hierna wordt er verder op de vormgeving ingegaan. Vervolgens zijn de eerste ontwerpen van de applicatie te zien in de vorm van een low fidelity storyboard, waarna het high fidelity storyboard ook aan bod komt. Verder worden de verschillende keuzes die gemaakt zijn bij het ontwerpen en het realiseerproces getoond in de hoofdstukken over audio, karakterontwikkeling en animaties. Als laatste is er een flowchart van de applicatie toegevoegd, waarin te zien is wat de gebruiker allemaal kan beleven in de ruimtes. In het ontwerpdocument worden alleen relevante schetsen uit het schetsboek aangehaald.

De opdracht | De opdracht is het ontwerpen van een interactieve content en een gebruikersinterface aan de hand van een eigen geschreven interactief verhaal. Een hulpmiddel hiervoor zijn Rory’s Story Cubes. Dit zijn dobbelstenen met afbeeldingen erop die de creativiteit stimuleren, wat wellicht tot een verhaal kan leiden. Het eindresultaat van de opdracht is een applicatie gemaakt in Adobe Flash. Het product wordt opgeleverd als een .swf bestand. De opdrachttitel ‘upcycling Scrap Heap’ zegt het eigenlijk al: gevonden / afvalmaterialen zijn de basis voor de invulling van de vormgeving. Het is hierbij niet de bedoeling deze materialen te tekenen, wat de student en toe zet om gebruik te maken van fotografische elementen. De bedoeling is dat de interface intuïtief wordt. Dat betekend dat er het gebruik van knoppen en pijlen niet is toegestaan. Uiteindelijk zou dit zorgen voor een optimale gebruikersbeleving. Om de interactiemogelijkheden te realiseren en deze zo spannend mogelijk te maken wordt er gebruik gemaakt van ActionScript 3 (codetaal van Adobe) en FreeCoffee (programma ontwikkeld door studenten van de Hogeschool van Arnhem en Nijmegen). In eerste instantie was het de bedoeling de applicatie zou worden gerealiseerd binnen een scherm van 1024 x 576 pixels. Dit schermformaat is aan het begin van het semester echter bijgesteld tot 1280 x 720 pixels. Dit om te voldoen aan de moderne maatstaven. Er zijn een aantal onderdelen die verplicht in de applicatie horen, waaronder een geanimeerd character en een gefilmd character (green screen). Daarnaast zal er in de applicatie gebruik worden gemaakt van audio, geluidseffecten en typografie (indien gewenst).

Het verhaal | Concept Lily is jarig en om dit te vieren organiseert ze een tea party voor haar vriendjes en vriendinnetjes. Hiervoor heeft ze een grote hoeveelheid cupcakes gebakken. Maar… ojee! De draak, die dol is op cupcakes, komt onuitgenodigd naar Lily’s theetuin en neemt alle cupcakes mee. Dit is natuurlijk een ramp, want zonder de cupcakes kan het feestje niet doorgaan. Er is maar een manier om het feestje te redden, en dat is om de draak achterna te gaan en de cupcakes zelf terug te halen!

voordat de gebruiker bij de draak kan komen. De derde locatie is de grot van de draak, waar deze vredig ligt te slapen met een beschermende houding naar de cupcakes toe. In elke scene zullen verschillende cupcakes te vinden zijn. De gebruiker moet ze allemaal vinden om de applicatie uit te spelen.

Missie Om Lily’s verjaardagsfeestje te redden moeten de cupcakes terug gestolen worden van de draak. Deze bevindt zich in zijn grot. Om daar te komen moet er een avontuurlijke route worden afgelegd. Hierbij blijkt dat de draak slordig is omgegaan met de cupcakes: ze zijn overal! Het is aan de gebruiker om alle cupcakes terug te vinden en zo Lily’s tea party te redden. Structuur Het verhaal is opgebouwd uit een introductie waarin de missie voor de gebruiker duidelijk wordt gemaakt, een midden stuk van drie scènes die interactief zijn, en een eindscene die voor de gebruiker dient als beloning voor het redden van Lily’s tea party.. Point of view De gebruiker is degene die voor Lily de cupcakes gaat verzamelen, om zo het feestje te redden. De gebruiker is hierbij gewoon zichzelf, wat maakt dat de applicatie vanuit zijn perspectief doorlopen wordt (dus een 1st person point of view). Scènes Het verhaal bestaat uit drie scènes, die in de applicatie terug te zien zullen zijn. Dit zijn drie compleet verschillende locaties. De eerste locatie zal de theetuin van Lily zijn. Dit is waar ze haar verjaardagsfeestje wil houden. De tweede locatie is een tussenruimte. Hierin is de omgeving te zien die doorgelopen moet worden

Vormgeving | Moodboard Op de volgende pagina is mijn moodboard voor de applicatie te zien. Hierin komt duidelijk naar voren dat ik nijg naar een getekende stijl. Dit wil ik graag doorzetten aangezien ik tijdens deze opleiding nog geen eindproduct heb gerealiseerd dat ik helemaal zelf heb getekend. Bij deze stijl is het echter wel lastig om afvalmaterialen als vormgeving door te zetten, voornamelijk omdat deze materialen niet letterlijk getekend mogen worden (zoals een getekend colablikje). Na wat brainstormen kwam ik op het idee om het thema â&#x20AC;&#x2DC;scrap heapâ&#x20AC;&#x2122; te verwerken in de vormgeving door middel van het gebruik van texturen. Denk hierbij aan oud behang, piepschuim, breiwerkjes en jutte zakken.

Vormgeving | Kleurgebruik De applicatie bestaat uit drie verschillende scènes. Elke scene heeft een kleurenthema. Zo bestaat de eerste scene, de feestlocatie, uit roodtinten. De tweede scene, onderweg naar de grot, bestaat uit groentinten en de derde scene, de grot van de draak, uit blauwtinten. Door gebruik te maken van deze drie kleurenthema’s probeer ik de sfeer aan te brengen in de scènes. De themakleuren gaan in elke scene samen met verschillende grijstinten. Het kleurenschema aan de hand van de drie ruimtes is op de volgende pagina te bekijken.

Typografie In de applicatie zelf (de drie scènes) zal er geen gebruik gemaakt worden van typografie. Dit omdat het inde opdracht gaat om een intuïtieve interface. Tekstgebruik hierin zal het intuïtieve niveau van de applicatie verminderen. Wel zou er voor conversatiepunten gebruik gemaakt worden van tekst, maar in deze applicatie is daar geen sprake van.

Wel wordt er gebruik gemaakt van tekst in het intro en outro van de applicatie. In het intro dient de tekst voornamelijk om de gebruiker te informeren over de missie. De tekst in het outro dient Scene 1:Roodtinten als beloning voor de gebruiker. Het font dat hiervoor gebruikt Dit is de locatie van de tea party. Een tea party gaat samen met wordt is YummieCupcakes. Dit is een handgeschreven font. In het zoete hapjes. De kleur die geassocieerd wordt met zoetigheid is intro en outro zal deze worden gebruikt om korte briefjes mee roze. Voor deze scene heb ik gebruik gemaakt van die associatie. te maken. Het lettertype is speels, wat ook past bij de gehele applicatie. Natuurlijk past de naam van het font er ook perfect bij. Scene 2: Groentinten In deze scene bevindt de gebruiker zich op de weg richting de Voor de cupcake-teller die terug te zien is in de applicatie wordt grot van de draak. Om duidelijk te maken dat de gebruiker zich het font Arial gebruikt. Dit is een strak schreefloos font dat prima hier in de natuur bevindt heb ik er voor gekozen hierbij gebruik te lezen is. Ondanks dit lettertype alleen wordt gebruikt voor cijte maken van het cliché: groen als de natuur. fers is het toch belangrijk dat deze goed leesbaar is. Scene 3: Blauwtinten Deze scene moet de grot van de draak voorstellen. Er valt vrijwel geen licht naar binnen wat maakt dat alles in de grot in de schaduw valt. Schaduw wordt geassocieerd met kou, evenals de kleur blauw. Vandaar dat ik voor deze scene kozen heb voor blauwtinten.

Storyboard | Low fidelity Het low fidelity storyboard bestaat uit schetsen van de drie verschillende ruimtes. Deze geven een eerste indruk van de vormgeving en interactiemogelijkheden. De navigatiemogelijkheden en interacties zijn in de schetsen groengekleurd. Navigatiemogelijkheden In het low fidelity storyboard verloopt de navigatie tussen de drie verschillende ruimte via een vogeltje. Deze is dus ook in elke ruimte terug te vinden. In de tweede ruimte is er ook de mogelijkheid via de wegwijzer terug te gaan naar scene 1. Daarbij kan de gebruiker de grot binnengaan door in scene 2 erop te klikken. In scene 3 kan de gebruiker op het theekopje klikken, waardoor hij weer teruggaat naar de eerste scene. Interacties In de eerste scene krijgt de gebruiker de mogelijkheid om thee te zetten, het gaat hier immers om een tea party. Zo kan er water, melk en suiker in een kopje gedaan worden. In de tweede ruimte zullen verschillende cupcakes te vinden zijn. De gebruiker moet deze verzamelen om zijn missie te volbrengen. In deze ruimte zal ook een vogeltje te zien zijn die wegvliegt. In de derde ruimte kan de gebruiker pas interacties ondernemen nadat de fakkel is aangestoken, het gaat hier namelijk om een donkere grot. Zodra het licht aan is ziet de gebruiker een slapende draak. Deze beschermt de gestolen cupcakes. De gebruiker moet deze verzamelen maar hierbij wel oppassen dat de draak niet wakker wordt, wat zal gebeuren na een hoeveelheid van mouse-overs.

Storyboard | High fidelity Het high fidelity storyboard bestaat uit het uiteindelijke ontwerp van de drie scènes. De navigatie- en interactiemogelijkheden staan hieronder beschreven.

nen (na een klik zweven deze even en onthullen ze een verstopte worm) en de wegwijzer ‘dragon’ (deze wiebelt op zijn plek).

Scene 3: De interacties in de laatste scene, de grot van de draak, kunnen pas worden uitgevoerd wanneer de gebruiker op de fakNavigatiemogelijkheden kel heeft geklikt. Hierdoor wordt deze ontstoken en belicht zo De navigatie via het vogeltje is aangepast. Dit gaf de gebruiker de grot. Wanneer de gebruiker op het zwarte draadje dat naast namelijk het idee dat hij een vogel is en dat is niet helemaal de de fakkel hangt klikt, komt er een spin te voorschijn. Zoals snel bedoeling. De basisnavigatie tussen de drie verschillende scènes duidelijk wordt zijn er in deze ruimte acht cupcakes om te verzal nu via de zijkant van de scene gaan. De gebruiker kan navi- zamelen. Wanneer de gebruiker deze wilt oprapen, maar hierbij geren met simpelweg een enkele klik. Dit is doorgevoerd in alle (per ongeluk) op de draak klikt, dan wordt deze wakker en wordt drie de scènes om het voor de gebruiker zo makkelijk mogelijk de gebruiker weer naar ruimte 1 genavigeerd. Hij heeft de missie te maken. In de tweede scene is er ook de mogelijkheid terug niet in 1x gehaald. te gaan naar de eerste scene door op het Tea Party-bordje te klikken. Daarbij kan de gebruiker naar de derde scene door op de grot te klikken. Zodra de gebruiker de missie heeft voltooid, wordt hij automatisch doorgenavigeerd naar het outro. Interacties De interacties in het uiteindelijke ontwerp komen redelijk overeen met die uit het low fidelity storyboard. Er zijn echter wel een paar kleine aanpassen, evenals uitbreidingen bij elke scene. Scene 1: De gebruiker kan op de theekan klikken, waarna deze thee inschenkt in het kopje wat ernaast staat. Wanneer de gebruiker op het zwarte theekopje klikt, valt deze op de grond aan scherven. Er rolt een cupcake uit. Achter de struik links onder zit een konijntje verborgen. Deze komt voorbij huppen als er op de struik wordt geklikt. Dit konijntje laat een tweede cupcake achter. De gebruiker kan de cupcakes verzamelen door erop te klikken. Deze worden opgeteld door de teller (cupcake links boven). Scene 2: Ook in deze scene zijn twee cupcakes verstopt. De gebruiker kan deze vinden door op de vogel en om de wegwijzer ‘upwards’ te klikken. Verdere interactiemogelijkheden zijn de ste-

Storyboard | Intro & outro Om de gebruiker een duidelijk begin en einde van de applicatie aan te bieden zijn er een intro en outro ontworpen. Beide ontwerpen bestaan uit Lily (de organisator van de tea party) en een bericht van haar. In het intro wordt het probleem medegedeeld en wordt er aan de gebruiker gevraagd of hij het probleem wilt oplossen. De gebruiker kan hier op ingaan door op de play-knop te klikken. Hierdoor wordt hij direct naar de eerste ruimte genavigeerd. Ook zijn in het intro een hele hoeveelheid cupcakes te zien. Dit geeft de gebruiker een goed idee van dat waar hij naar opzoek moet. Zodra de gebruiker alle cupcakes in de drie ruimtes heeft gevonden wordt hij automatisch doorgestuurd naar het outro. Hierin wordt hij gefeliciteerd met het volbrengen van zijn missie, en als beloning uitgenodigd voor de tea party.

Audio | Geluidseffecten In de applicatie wordt gebruik gemaakt van geluidseffecten. Dit om de beleving van de gebruiker positief te beïnvloeden. De meeste geluidseffecten zijn gebaseerd op de realistische werking van de verschillende objecten. Zo hoor je het geluid van stromend water wanneer er thee wordt ingeschonken en het breken van glas wanneer er een kopje op de grond kapot valt.

De snurkende kat is hier te beluisteren: https://www.freesound.org/people/sagetyrtle/sounds/77267

Achtergrondmuziek Ook bevat de applicatie achtergrondmuziek. Deze moet qua sfeer passen bij de vormgeving: het moet een vrolijk deuntje zijn, kinderlijk, een beetje uptempo, en minimalistisch (dus gebruik van Echter niet alle geluiden zijn zo nauw genomen met de realiteit, veel verschillende instrumenten is uitgesloten). Daarbij was een al zijn deze wel zo doorgevoerd dat het realistisch overkomt op persoonlijke eis dat de achtergrondmuziek instrumentaal is. Dit de gebruiker. Bijvoorbeeld wanneer het wegwijzerbordje ‘dra- om de aandacht van de gebruiker gericht naar de applicatie te gon’ wiebelt, hoort de gebruiker een rat piepen. sturen in plaats van hem af te leiden door songteksten. Tijdens deze zoektocht kwam ik uit bij de Rode Schoentjes. Deze muziek Het geluidseffect dat door de gehele applicatie terugkomt is het hoort bij het gelijknamige sprookje dat in het sprookjesbos van cupcakeverzamelgeluid. Dit geluidje komt in veel bekende spel- de Efteling te bekijken is. Het nummer begint al te spelen in het letjes terug (bijvoorbeeld in Sonic). Hiermee wordt de gebruiker intro van de applicatie. duidelijk gemaakt dat hij op de goede weg is. De muziek van ‘de Rode Schoentjes’ is hier te beluisteren: Het cupcakeverzamelgeluidje is hier te beluisteren: https://www.youtube.com/watch?v=ZMsxfPj5F9Y h t t p s : / / w w w. f r e e s o u n d . o r g / p e o p l e / b r a d w e s s o n / sounds/135936/ Voor het outro van de applicatie is andere achtergrondmuziek gebruikt. Zodra de gebruiker hier is belandt heeft hij de missie Achtergrondgeluiden volbracht. Hier hoort vrolijke uptempo muziek bij waarop geIn de applicatie komen twee achtergrondgeluiden voor. Het sui- danst kan worden. De eis van instrumentale achtergrondmuziek zen van de wind (inclusief tjilpende krekels) is toegevoegd aan is hierbij aan de kant gezet. Er is gekozen voor een fragment van scene twee. Met dit geluid zou de omgevingsbeleving van de ge- het nummer ‘Tea Party’ van Kerli. Dit nummer past qua titel, bruiker versterkt worden. songtekst en sfeer perfect bij het outro van de applicatie. Je zou kunnen zeggen dat het nummer dient als beloning voor het volHet geluidsfragment van de wind is hier te beluisteren: brengen van de missie. https://www.freesound.org /people/Leandros.Ntounis/ sounds/163607/ Het nummer ‘Tea Party’ van Kerli is hier te beluisteren: https://www.youtube.com/watch?v=rrXnPaY4OQA In de derde scene, de grot, ligt de draak heerlijk te slapen. Hij is hierbij luidruchtig aan het snurken. Natuurlijk heeft nog nooit iemand het snurken van een draak opgenomen, vandaar dat ik het snurken van een kat hiervoor in de plaats heb gebruikt.

Audio | Eigen geluiden Voor de applicatie ben ik zelf met een zoom naar buiten gegaan. Het doel was om het suizen van de wind op te nemen zodat ik deze kon gebruiken in de tweede scene. Het waaide op dat moment echt zo hard het opgenomen geluid erg kraakte. Hierdoor werd het onbruikbaar. Als oplossing heb ik een passend geluidsfragment van het internet geplukt. Bewerking De gebruikte geluidseffecten komen allemaal van de website Freesound.org. De geluidseffecten zijn zo nodig bewerkt met het programma Audacity. Hierin zijn bewerkingen verricht als het verkorten van geluidsfragmenten en het invoegen van fade-in en fade-out effecten. Op deze manier heb ik ervoor gezorgd dat de fragmenten gelijk lopen met de animaties in de applicatie. Lijst van geluidseffecten Hieronder is een lijst van de gebruikte geluidseffecten. Hierin is aangegeven bij welke scene het geluid hoort en bij welke interactie deze voorkomt in de applicatie. Daarbij is de bron toegevoegd. Scene 1 De theepot – het inschenken van thee. h tt p s : / / w w w.f re e s o u n d . o rg / p e o p l e / u w e s o u n d b o i z / sounds/60394 Het zwarte theekopje – het breken van glas. https://www.freesound.org/people/avakas/sounds/144115 Scene 2 De vliegende vogel – het getjilp van de vogel. htt ps : / / w w w.f re e s o u n d . o rg / p e o p l e / W i l l yzw b 4 t wa n / sounds/51721/

Wegwijzer ‘upwards’ – een vuurpijl die de lucht in schiet en afgaat. h t t p s : / / w w w. f r e e s o u n d . o r g / p e o p l e / c r o s b y c h r i s / sounds/213082/ Het schudden van de berg – het geluid van een aardbeving. https://www.freesound.org/people/Reitanna/sounds/217657 Het neerkomen van de stenen – een ‘plop’ geluid. https://w w w.freesound.org /people/SoundCollectah/ sounds/158468 Het wiebelen van de ‘dragon’ wegwijzer – een piepende rat https://www.freesound.org/people/Zabuhailo/sounds/143125/ Scene 3 Wanneer de fakkel is aangestoken – het knetteren van vuur h t t p s : / / w w w. f r e e s o u n d . o r g / p e o p l e / b a r r y g u s e y / sounds/134907/

Karakterontwikkeling | De draak Het verhaal draait voornamelijk om de het terughalen van de cupcakes die gestolen zijn door de draak. Hoewel deze alleen in de derde scene te zien is kan hij wel als een hoofdkarakter worden beschouwd. De draak vervult de rol van geanimeerd karakter. Brainstorm & research Het idee van de cupcake-draak komt voort uit de grote brainstormfase. In deze fase ontstond het idee van het ‘tea party’ onderwerp. Ik bedacht me dat een verhaal meestal een slechterik bevat. Dit wilde ik laten terugkomen in mijn verhaal, wat mij uiteindelijk tot het idee van de draak bracht.

de draak in de applicatie zal slapen versterkt deze knuffelbehoefte. De draak heeft echter wel een beschermende houding naar de cupcakes toe, hij ligt om de cupcakes heen gekruld. Kleurgebruik & textuur Ook is er bij de vormgeving van de draak geëxperimenteerd met het kleurgebruik. Draken worden vaak gekoppeld aan de kleur groen. In het ontwerp heb ik dit uitgeprobeerd maar uiteindelijk heb ik dit niet doorgezet. Ik wilde van deze associatie af. Uiteindelijk ben ik op de kleur paars uitgekomen. Dit is een vredelievende kleur die bij het karakter van de draak past.

Voor het ontwerp van de draak heb ik eerst gekeken naar verschillende afbeeldingen van draken. Hierbij kwamen alle verschillende soorten draken langs met verschillende karaktereigenschappen. De een met een lief onschuldig uiterlijk, de ander juist groot en griezelig. Een collectie van mijn research is samengevoegd in het moodboard (zie volgende pagina). Karaktereigenschappen & vormgeving Het idee om de draak een gemeen uiterlijk te geven is gelijk aan het begin van de tafel geschoven. Normaal worden draken gezien als moordlustige, vuurspuwende wezens. De draak van mijn applicatie heeft het echter gemunt op heerlijke cupcakes, wat vrij onschuldig is (al wel vervelend voor Lily natuurlijk). Na het schetsen van een aantal verschillende draken kwam ik uiteindelijk op een ontwerp waar ik tevreden over was (zie schets). Bij het ontwerp van de cupcake-draak heb ik verschillende uiterlijke eigenschappen uitgeprobeerd (zoals rugstekels/strikjes en verschillende koppen), evenals verschillende houdingen (bijvoorbeeld liggen en vliegen). Uiteindelijk heb ik ervoor gekozen zo min mogelijk vreemde uiterlijke elementen toe te voegen. De draak moet er namelijk knuffelbaar uit blijven zien. Het feit dat

Karakterontwikkeling | Verder is er geĂŤxperimenteerd met de textuur van de draak. In eerste instantie wilde ik iets origineels, ofwel geen schubben. Zo heb ik onder andere een bloementextuur uitgeprobeerd (zie afbeelding). Hoewel dit leuk was maakte het voor mij de draak toch wat te zacht. Dat de draak de cupcakes heeft gestolen maakt duidelijk dat hij ook wel een brutale/harde kant heeft. Vandaar dat ik uiteindelijk toch bij een schubbentextuur ben uitgekomen. De vleugels hebben echter wel een bloementextuur behouden, voor de afwisseling. Animatieproces Hieronder is de tijdlijn van de draak te zien zoals deze is gemaakt in Adobe Flash. De animatie maakt dat je ziet dat de draak ademt in zijn slaap. Dit is gedaan door zijn bolle buik op en neer te laten gaan. Dit is gerealiseerd door de buik als een los object in te voegen, dus zonder de poten, kop, staart en vleugels. Door de buik in de verschillende hoofdframes steeds iets te transformeren (indrukken, uitrekken), en door deze achter elkaar te zetten, krijg je het effect dat de buik op en neer gaat en de draak dus lijkt te ademen. Om dit iets realistischer te laten verlopen bewegen de vleugels mee. Dit betekend dat wanneer de buik iets omlaag gaat, de vleugels net zover mee omlaag bewegen. De animatie blijft zich herhalen waardoor de draak rustig door blijft ademen.

Karakterontwikkeling | Geanimeerde karakters Om de applicatie interessanter te maken op het gebied van animatie heb ik ervoor gekozen om naast de draak nog wat diertjes uit te werken. Dit is natuurlijk ook een goede oefening voor het tekenen van frame voor frame animaties. Hierbij heb ik ervoor gekozen om een vogel te laten vliegen en een konijntje rond te laten huppen. Vogel Wanneer er naar de animatie van de vogel wordt gekeken is te zien dat hierbij alleen de vleugel beweegt. Voor de animatie is deze steeds een stukje geroteerd. Om de animatie van de vogel realistischer te maken heb ik ervoor gezorgd dat deze tijdens het vliegen nog wat op en neer beweegt, geen enkele vogel vliegt namelijk in een rechte lijn. Ofwel, de gehele vogel gaat een klein stukje omhoog wanneer de vleugel naar beneden beweegt, en hij daalt een stukje wanneer de vleugel omhoog slaat. Hieronder is de tijdlijn van de vogel te zien zoals deze is gerealiseerd in Adobe Flash. De animatie van de vogel beweegt door het gebruik van een klassieke tween. Hierbij staat op elk hoofdframe dezelfde vogel met een andere houding van de vleugel. De klassieke tween zorgt ervoor dat de overgang tussen de verschillende frames soepel verloopt. Alle frames achter elkaar ziet er uiteindelijk zo uit als op de foto hiernaast. Hierin is goed te zien hoe de vogel op en neer gaat in de lucht.

Konijn Ook het konijntje dat in de eerste scene vrolijk voorbij komt hobbelen is een frame voor frame animatie. Hiervoor is het konijntje in vijf verschillende opvolgende houdingen getekend. Deze zijn vervolgens in Adobe Flash achter elkaar gezet, op dezelfde manier als bij de vogel. Om de animatie soepeler te laten verlopen is ook deze animatie omgezet in een klassieke tween (zie afbeelding van Flash tijdlijn). De animatie van het konijntje is gemaakt met bijgevoegde schetsen als voorbeeld. Dit voorbeeld heb ik echter gewoon gevonden op het internet (bron: http://gemlwhart.blogspot.nl/2010/03/ animation.html).

Karakterontwikkeling | Overige karakters In de applicatie komen ook nog verschillende karakters voor die niet geanimeerd zijn. Toch is hier zodanig de aandacht aan besteedt dat ze toch de moeite waard zijn hier te noemen. Lily Dit lieve meisje is de organisator van de tea party. Lily is alleen te zien in het intro en outro van de applicatie, maar aangezien ze wel gezien kan worden als een hoofdpersonage verdient ze toch de eer hier genoemd te worden. Lily is degene die de gebruiker de missie van de applicatie meegeeft. Ze is een lief meisje die het zelf wat te eng vindt om op bezoek te gaan bij de draak. Aangezien Lily verder niet voorkomt in de drie ruimtes is ervoor gekozen haar niet te animeren. Wel is hiernaast een schets te zien van Lily, evenals de gedigitaliseerde versie. Willy de worm Dit vrolijke beestje is Willy de worm. Hij houdt van verstoppertje spelen. In de applicatie kan de gebruiker hem vinden onder een paar stenen in de tweede scene. De stenen worden even opgetild en onthullen zo Willy de worm. De spin Sebastiaan Dit is de spin Sebastiaan. Het is niet goed met hem gegaan. Luister! Nee, stop daar maar gelijk. Sebastiaan wou aan een web beginnen, maar in de applicatie heeft hij de perfecte locatie gevonden, namelijk de grot van de draak. Hier hoeft hij niet bang te zijn opgeveegd te worden.

Green screen Aan de opdracht zat het verplichte onderdeel van een gefilmd karakter (green screen) gekoppeld. In heb lang vastgezeten op het punt hoe ik dit zou willen invullen. Om een gefilmd karakter in mijn applicatie te stoppen was voor mij eigenlijk uitgesloten, aangezien dat totaal niet bij mijn getekende stijl past. Om dit op te lossen heb ik ervoor gekozen om de film te monteren in de outro. In het outro heeft de gebruiker de missie van de applicatie behaald, dus het feestje kan beginnen. Vandaar dat de gefilmde personen dansen. De groene achtergrond is in Adobe After Effects weggefilterd door middel van het Keylight effect en de pen-tool. Nu kan de nieuwe achtergrond achter de dansende personen geplakt worden. De volgende stap was om de personen om te toveren tot een silhouet. Dit heb ik gedaan door het gebruik van het Curves-effect, waarna de personen helemaal wit waren. Om de personen compleet zwart te maken heb ik de tint aangepast. Zodra dit allemaal gedaan was, dus de dansende silhouetten geplaatst voor de uiteindelijke achtergrond, is het resultaat geĂŤxporteerd als een png-sequentie. Dit betekend dat alle losse frames worden opgeslagen als .png bestanden. Al deze losse afbeeldingen zijn in Adobe Flash toegevoegd als hoofdframes. Wanneer dit wordt afgespeeld ziet de gebruiker de film zoals deze er eerder in Adobe After Effects uitzag. Hierbij een speciaal bedankje gericht aan Rosanne Hoogeveen, Guus Holtkuile en Edwin Hakemulder. Omdat jullie zo mooi hebben gedanst voor mijn applicatie.

Ontwerpproces ruimtes | Zodra het verhaal van de applicatie duidelijk was, kon ik beginnen met het ontwerpproces. In deze fase moeten er drie ruimtes worden ontworpen voor de applicatie. Dit kan fotografisch of getekend. Wat voor mij vrij snel duidelijk werd is dat ik nijg naar een getekende stijl (zie moodboard). Bij het ontwerp van de drie ruimtes heb ik proberen te letten op de dieptewerking. Daarbij moet elke ruimte in dezelfde stijl gerealiseerd worden om het tot een geheel te maken. Aan het gedigitaliseerde ontwerp van de ruimtes gaan een hoop schetsen vooraf. Deze zijn te bekijken in mijn schetsboek. Voor het ontwerp van de ruimtes heb ik besloten de omgevingen qua vormgeving vrij eenvoudig en strak te houden. De omgevingen zelf bestaan voornamelijk uit grote vakken van een kleur. Ik heb er voor gekozen dit zo te doen omdat na het invoegen dan de texturen de ruimtes er al een stuk gedetailleerder uitzien. Ruimte 1 De eerste ruimte omvat de locatie waar de tea party georganiseerd wordt. Voor het vormgeven van deze ruimte heb ik research gedaan naar thee tuinen, terrasjes en blossom bomen. Hier bijgevoegd is ook het proces te zien van mijn eerste ontwerp tot het uiteindelijke resultaat. Hierin is te zien dat ik aan het begin nog wat aan het stoeien was met de dieptewerking. Een ontwerpprincipe voor dieptewerking is dat de achtergrond altijd lichter is dan de voorgrond. Dit heb ik uiteindelijk terug laten komen in alle drie de scĂ¨nes. Zodra ik tevreden was over de vormen en kleuren van de ruimte kon ik de texturen gaan toevoegen op de vormen. Hiervoor wilde ik graag texturen gebruiken die er lief en zacht uitzagen. Zo ben ik gekomen bloemetjes voor de boom en struiken, een breiwerkje voor de boomstam en wolken en veertjes voor de achtergrond. De vloer was echter iets lastiger, het gaat hier namelijk om een terras en een terras is niet zacht. In eerste instantie heb ik dit wel proberen te verwerken door badschuim te gebruiken als textuur.

Dit had echter niet het gewenste effect, wat maakte dat ik toch ben overgestapt op een tegeltextuur. Door het perspectief van deze textuur iets aan te passen werkt dit ook mee op de dieptewerking van de ruimte. Het ontwerp is duidelijk een doorkijkje geworden waarbij je op het terras uitkijkt. Als laatste detail, om dit effect te versterken en om nog een bijdrage te leveren aan de dieptewerking, heb ik een slagschaduw toegevoegd aan de eerste laag (de boom en de struiken).

Ontwerpproces ruimtes |

Ruimte 2 De tweede ruimte omvat een landschap. Het gaat hier om de tussenscene tussen de thee tuin en de grot van de draak. Het was dus van belang dat de grot hierin al zichtbaar zou zijn, zodat de gebruiker doorheeft hoe hij zijn missie kan volbrengen. Ik heb een tijd lopen stoeien met hoe ik die grot eruit wilde gaan laten zien, eveneens of er een weg naar toe loopt of niet. Hiervoor heb ik een hele hoop schetsen gemaakt van de ruimte, met mogelijke heuvels, bergen en bossen. Daarbij heb ik, op verschillende punten dat ik was vastgelopen en niet meer wist wat ik nou met de ruimte aanmoest, een aantal schetsen uitgewerkt in Adobe Illustrator. Dit om te zien hoe het eruit zo komen te zien en om mezelf verder te helpen in het ontwerpproces. In de eerste twee ontwerpen (zie volgende pagina) is duidelijk te zien dat ik op bepaalde ontwerppunten bleef hangen. Zo wilde ik graag een specifieke grot, een paadje erheen en bossen. Toen dit niet het gewenste ontwerp opleverde, heb ik dit idee totaal aan de kant gezet en ben ik weer bij het begin begonnen. Zo kwam ik bij het uiteindelijke ontwerp met de berg en heuvels. Hierbij heb ik nog wat zitten experimenteren met de kleuren en mezelf afgevraagd welke sfeer ik wil aanbrengen in de ruimte: dreigend (ontwerp met gele achtergrond) of toch wat zachtaardiger (ontwerp met groene achtergrond). Ik ben uiteindelijk voor het ontwerp met de groene achtergrond gegaan. Dit omdat de erge dreiging die de gele lucht met zich meebrengt niet bij de stijl van de applicatie past, evenals bij het verhaal. Daarbij ziet het ontwerp met de groene achtergrond er een stuk frisser uit, wat de gebruiker hoop kan geven.

passen. Om de berg wat dreigender naar voren te komen (en omdat dit ondertussen een ontwerpprincipe is gekoppeld aan de applicatie) heb ik deze een slagschaduw meegegeven. Ruimte 3 Het ontwerp (zie 2 paginas verder) voor de grot van de draak was ik vrij snel over uit. Ik heb dan ook niet te veel tijd besteed aan het schetsen hiervan. Hierbij heb ik wel een klein onderzoek gehouden naar lichtinval in een grot, aangezien een grot voornamelijk bestaat uit schaduw. In mijn ruimte heb ik de lichtinval in het verloop in de achtergrond proberen te verwerken. Hierdoor zou de gebruiker kunnen weten dat links de uitgang is. De vormgeving van de grot is voornamelijk puntig. Dit is afgeleidt van stalagmieten en stalactieten. Het ontwerp is een doorkijkje geworden naar het deel van de grot dat de draak in beslag heeft genomen. De voorgrond heeft de ondertussen bekende slagschaduw gekregen voor de extra dieptewerking. Het doel van het textuurgebruik in deze ruimte was het maken van een gezellige woonruimte voor de draak. Zo is op de achterwand een oubollig behangetje geplakt over een dikke verflaag. Ook is er gebruik gemaakt van een breiwerkje en verkreukeld papier. De voorgrond bestaat uit piepschuim. Dit om de voorgrond zachter te laten lijken dan de figuren doen denken.

Zoals de texturen uit de eerste scene voornamelijk zacht zijn, wilde ik in deze scene juist ruwere texturen gebruiken. Zo wordt voor de heuvels op de voorgrond een jutezak als textuur gebruikt en voor de berg een cementlaag. Voor de achtergrond is de textuur van een blad gebruikt, om het natuurelement meer toe te

Ontwerpproces ruimtes |

Animatieproces | Zodra de drie ruimtes geheel ontworpen en in elkaar gezet waren kon ik beginnen met het realiseren en plaatsen van de nodige objecten die in de ruimtes horen. Aan deze objecten zitten verschillende animaties gekoppeld. Van elke ruimte heb ik een animatie gekozen om hier het realisatieproces van uit te leggen. Scene 1 â&#x20AC;&#x201C; Theekan Wanneer de gebruiker op de theekan klikt schenkt deze het kopje vol met thee. Om dit te bereiken zijn er drie verschillende korte animaties gemaakt. De tijdlijn hiervan zoals deze in Adobe Flash eruit ziet is hier bijgevoegd. Hierin is te zien dat de animatie van de theekan als eerste op de tijdlijn staat. Deze theekan is frame voor frame iets omhoog verplaatst en geroteerd. Zodra de theekan op het frame is belandt dat hij in de lucht blijft hangen, komt de thee eruit gestroomd. De thee is gerealiseerd door het invoegen van meerdere afbeeldingen, de volgende steeds weer iets groter dan de vorige. Op die manier krijg je het effect dat de thee echt uit de kan loopt. Hierbij wordt het theekopje gevuld. Het kopje wordt door middel van het aanpassen van de transparantie gevuld. Dit is gedaan door het invoegen van een motion tween. Zodra de transparantie hiervan op 100% is aangekomen, wordt de theekan weer terug op de tafel gezet.

Scene 2 – Wegwijzer Wanneer de gebruiker op de wegwijzer met de tekst ‘upwards’ klikt, gebeuren er een aantal acties achtereenvolgend. Het eerste wat gebeurt is dat het bordje wordt afgeschoten. Het bordje knalt in de berg en verdwijnt er vervolgens achter. Door de impact van het bordje begint de berg te schudden, waardoor er een mini lawine ontstaat en er een cupcake naar beneden komt rollen. Nu het verhaal hoe ik dit gerealiseerd heb. De animatie van het vliegende bordje is een motion tween. Het bordje zie je uiteindelijk verdwijnen achter de berg. Om dit te realiseren heb ik een stukje van de berg (zo groot als nodig om het bordje te doen verdwijnen) gedupliceerd. De laag van de berg zelf ligt namelijk achter het bordje, wat het onmogelijk maakt deze te gebruiken om het bordje achter te doen laten verdwijnen. Om ervoor te zorgen dat de animatie van de berg begint te spelen zodra het bordje is verdwenen heb ik op mijn eigen amateuristische manier laten werken, namelijk door het gelijk aantal frames op de tijdlijn van de berg leeg te houden als de animatie van het bordje duurt. Zoals in de tijdlijnen te zien is zijn dat 25 frames. Het derde deel is de cupcake die van de berg afrolt. Deze moet al beginnen met spelen terwijl de animatie van de berg nog niet is afgelopen. Hiervoor heb ik ActionScript3 gebruikt (zie afbeelding). Door deze code wordt de animatie van de cupcake aangestuurd om af te spelen. Deze animatie bestaat uit een motion tween.

Animatieproces | Scene 3 â&#x20AC;&#x201C; Fakkel Wanneer de gebruiker op de fakkel in de grot klikt gebeuren er twee dingen: er komt vuur uit de fakkel de duisternis verdwijnt. In flash zijn hier dus drie onderdelen voor nodig: de fakkel, het vuur en een laag die alles verduisterd. Dit is gerealiseerd door het plaatsen van lege keyframes. In het geval van het vuur willen we dat deze eerst afwezig is, vandaar dat deze met een leeg keyframe begint. Bij de donkere laag daar en tegen, willen we dat deze juist eerst aanwezig is en na de klik verdwijnt. Ofwel bij het duister is het eerste keyframe gevuld en de tweede leeg. Wat er nu gebeurt wanneer de gebruiker op de fakkel klikt is dat de tijdlijnen van beide onderdelen verspringen naar een volgend frame.

Flowchart | De flowchart van de applicatie is relatief simpel. Er is sprake van een gemoduleerde plotstructuur. De gebruiker kan recht toe recht aan het verhaal doorlopen, of ervoor kiezen om kleine omwegen te maken met en zo alle interactiemogelijkheden te ontdekken. Een goed voorbeeld hiervan is het inschenken van de thee. Dit is een interactie die invloed heeft op het entertainmentniveau, maar het helpt de gebruiker niet om zijn missie te voltooien. De flowchart is te bekijken op de volgende pagina.

Bijlage | Als bijlage alle getekende objecten die in de ruimtes terug te vinden zijn, alleen dan zonder texturen. Hierbij is ook deels het ontwerpproces betrokken.