De WeerfabriekSchetsen, Storyboard, Interactie, Animatie, Character Design, Sound, Video, Greenscreen

Research Design Realisatie

Naam: Emily de VogelDocent: Dhr. G. de Vries

Semester CICA Oktober 2011Hogeschool Arnhem en Nijmegen

2

ResearchWat altijd eerst gedaan moet worden bij het ontwikkelen van een applicatie is onderzoek of research naar het onderwerp van het project, de opdrachtgever, het doel- en de doelgroep.

De opdracht voor dit project is het ontwikkelen van een weerapplicatie waar de gebruiker op ludieke wijze verschillende weersomstandigheden kan genereren. De opdrachtgever wil een app die vermakelijk is en gebruikers aan het lachen maakt. Tegelijkertijd moet de applicatie aantrekkelijk zijn voor een brede groep gebruikers, van verschillende leeftijden en achtegronden. Het doel van de

applicatie is het entertainen en vermaken van de gebruiker met komische en ludieke elementen. De doelgroep is bestaat dan ook uit jonge mensen in de leeftijd van 12-35, die interesse hebben in online applicaties en spellen. Dit kunnen scholieren of studenten zijn, maar ook werkenden en hoger opgeleiden.

De opdrachtgever van dit project is een bedrijf genaamd SoftInc.

SoftInc distribueert onder andere e-learning applicaties en promotiefilmpjes speciaal gemaakt in een luchtige en vrolijke stijl, vaak simpel getekend en met verschillende personages. Soft Inc schaft maar een klein budget voor deze opdracht. Het is dus noodzakelijk dat de applicatie in een korte tijd met een krap budget gebouwd wordt

Het weerZon

Regen

Wind

Storm

Sneeuw

Wit

Geel

Strand

Warm

Koud

Water

Somber

Dreigend

Blij

Modder

Stralen

Paraplu

Bliksem

Nat

Elektrocutie

IJsGlad

VriezenSchaatsen

SkieenVlokken

Zonnebrand Blauwe lucht

Wolken

Grijs

- Afmetingen van de applicatie zijn 1024x576 pixels

- De applicatie moet een kort achtergrondverhaal en een hoofdpersonage bevatten

- De navigatie van de applicatie moet ‘intuitief ’ werken, de gebruiker moet zonder teveel tekst en uitleg gebruik kunnen maken van de functionaliteiten

- De gebruikerservaring dient interactief en uitdagend te zijn

- De applicatie zal volledig worden ontwikkeld in Adobe Flash

- De duur van het project is maximaal 8 weken

Voorwaarden van dit project

Het eerste concept voor deze opdracht is een Weerfabriek, waar de gebruiker extreme weersomstandigheden kan loslaten op een personage. Er zijn verschillende weersomstandigheden te selecteren en verschillende attributen waarmee het personage zichzelf tegen het weer kan beschermen. De gebruiker kan zelf bepalen of hij het poppetje helpt tegen het extreme weer of niet.

De applicatie zal getekend worden in een simpele stijl, en zal vooral aantrekkelijk zijn voor jonge gebruikers die op zoek zijn naar een vermakelijke weerapp.

Eerste conceptversie

3

DesignIn de ontwerp fase worden personages en omgevingen uitgebreid uitgewerkt. Dit betekent character design, animation studies en op zoek gaan naar een consequente vormgeving en stijl. En veel schetsen!

Moodboard, sfeer, inspiratie

Allereerst is het belangrijk om op zoek te gaan naar een bepaalde sfeer waarin de applicatie zich gaat afspelen. Dit betekent weer een stukje onderzoek naar bijvoorbeeld tekenstijlen, maar er kan ook direct gezocht worden naar beelden uit een fabrieksomgeving. In het geval van de weerfabriek spelen de lopende band en het hoofdpersonage een grote rol. Hier is dan ook het meeste schetswerk op gebaseerd: de fabriekselementen en het poppetje.

Tijdens het ontwerpen moet er niet alleen rekening worden gehouden met het personage en de omgeving, maar ook met de functionaliteiten van de applicatie en de dingen die de gebruiker kan doen. Deze elementen zijn ook door het design proces gehaald, beginnende met research,

Schetsen, Schetsen en Schetsen!

gevolgd door schetsen en uiteindelijk uitgewerkt op de computer.

Wat kan de gebruiker doen? 1. Het recreëren van 5 verschillende weersomstandigheden (regen, windstorm, sneeuw, donder en bliksem en zon)

2. Attributen toekennen aan het poppetje(Vooralsnog zijn dit een paraplu en regenlaarzen, ski’s , een boom, een anker, en een spiegel.

Verder kan er mogelijk geklikt worden op verschillende onderdelen en objecten binnen de fabriek, maar die hebben verder geen functie behalve een geluidseffect en of korte animatie.

4

Design1. Opening: Poppetje komt langs op lopende band 2. Gebruiker selecteert een weersomstandigheid

3. Het begint te regenen, poppetje wordt zeiknat 4. Poppetje is ongeiukkig en verdwijnt links uit beeld

5. Er verschijnt een nieuw poppetje 6. Gebruiker selecteert een attribuut (paraplu)

7. Gebruiker selecteert wederom weersomstandigheid Poppetje is deze keer beschermd door de paraplu

8. Poppetje is blij en verdwijnt links uit beeld

Krant lezenOp horloge kijkenStaan en rondkijken

De opzet voor de greenscreen storyboards was eenvoudig. Het idee was om een personage te gebruiken dat op een random moment voorbijkomt op de lopende band. Om dit te filmen moest de acteur op stil blijven staan, maar wel bewegen op plaats, dit bijvoorbeeld door om zich heen te kijken, de krant te lezen, de tijd te checken of door te telefoneren. Deze instanties zijn uitgevoerd tijdens de greenscreen sessie en later bewerkt in Adobe After Effects.

Storyboards zijn een verzameling uitgetekende shots van scènes. In het geval van deze applicatie laten de storyboards de animaties maar ook de interacties tussen gebruiker en systeem zien. Hoe navigeert de gebruiken en wat zijn de gevolgen van zijn acties? Hiernaast staat een kort storyboard scenario van een van de interacties binnen de applicatie.

Flowcharts brengen op schematische wijze de achterliggende structuur van de applicatie in beeld. Het is verstandig om dit te doen omdat het in een oogopslag duidelijk maakt hoe de applicatie in elkaar zit, wat voor keuzes en interacties er moeten worden uitgewerkt, en hoe deze structuur uiteindelijk in Flash moet worden geplaatst.

5

RealisatieDe realisatie fase betekent in feite veel animeren en het verwerken van de greenscreen beelden en audio opnames. Daarna wordt alles in Flash met Actionscript aan elkaar gekoppeld, met als eindresultaat een interactieve en avontuurlijke Weerapp!

Greenscreen personage staand op de lopende band Greenscreen personage telefonerend

Greenscreen personage schrikt/verrast Greenscreen personage leest de krant

Greenscreen personage kijkt rond Greenscreen personage bewerkt in After Effects

De gehele applicatie is zoals in onderstaand screenshot vormgegeven in een zeer eenvoudige stijl. Items die klikbaar zijn lichten op wanneer de gebruiker er met zijn muis overheen gaat. Deze mouse-overs zijn in verschillende kleuren om accent te leggen op het belang van de klikbare voorwerpen en onderscheid aan te geven tussen de verschillende voorwerpen. Elk voorwerp heeft zjin eigen scenario.

Er zijn in totaal 10 scenario’s, zoals ook naar voren komt in het flowchart:1. Regen 6. Regen BLIJ2.Bliksem 7. Bliksem BLIJ3. Wind 8. Wind BLIJ4. Sneeuw 9. Sneeuw BLIJ5.Zon 10. Zon BLIJ

De eerste vijf komen voor wanneer de gebruiker geen atribuut selecteert wat het poppetje tegen het weer beschermt.

De laatste vijf komen voor wanneer de gebruiker uit de kast een attribuut uitkiest wat het poppetje wel tegen het extreme weer beschermt. Deze voorwerpen zijn soms een logische oplossing voor het weer (zoals een paraplu tegen de regen) tot onlogisch en ludiek (zoals een anker tegen de wind, of een spiegel tegen de zon).

6

Realisatie

7

Geluid speelt ook een belangrijke rol in de applicatie. Zo is er gebruik gemaakt van:- Een serie fabrieksgeluiden voor op de achtergrond.

- Geluidseffecten voor de attributen, zoals bijvoorbeeld de fohn, blikseminslag en de kast deur die opengaat.

- Reacties van het poppetje (zoals gillen, juichen en verbaasde geluiden).

Ook de geluiden binen de applicatie accentueren het belang van bepaalde acties en objecten.

Ook is het green screenpersonage in de app verwerkt. Als de gebruiker op de rode knop in beeld drukt komt het personage voorbij op de lopende band.

Het is de bedoeling dat gebruiker aangenaam verrast wordt door de ‘cameo’ van het green screen personage die nonchalent de krant staat te lezen.

Maar het allerbelangrijkste blijft natuurlijk het poppetje en zijn bewegingen en reacties op wat hem allemaal overkomt. Het accent ligt op zijn gezichtsexpressies, ondanks de simpele tekenstijl.

Het concept heeft zich ontwikkeld tot een applicatie waarin (wellicht) op ludieke wijze gespeeld wordt met de verwachtingen van de gebruiker. De attributen maar ook de opgewekte ‘weersomstandigheden’ hebben soms niks te maken met daadwerkelijke weersomstandigheden (een fohn die wind genereert en een sneeuwbalmachine die een sneeuwstorm voorstelt), vandaar dat de naam de Weerfabriek ook een beetje misleidend is.

Maar juist deze misleiding moet de gebruiker verassen en nieuwsgierig maken naar wat de applicatie te bieden heeft.

8