De Weer TovenaarImmersive Space

Sjors Buitenhuis | 2e jaar Business IT & Management | HAN Arnhem | 31-03-2013

3

Inhoudsopgave1. Inleiding2. Immersiveness3. Gekozen idee4. De zomer5. Herfst inspiratie6. Winter inspiratie7. De Weer Tovenaar8. Glazen bollen in verschillende vormgevingen9. Definitieve glazen bollen10. Foto opdracht11. ABC Brainstorm12. De Immersive space13. Zomer scene14. Herfst scene15. Winter scene16. Winter moodboard17. Herfst moodboard18. Zomer moodboard19 Mindmaps20. Planning21. Storyboards mindmaps22. Eindresultaat23. Beginscherm24. Zomer25. Winter26. Herfst27. Eindscherm28. Reflectievragen29. Conclusie

Inleiding

Tijdens de herkansing moest ik een nieuwe space bedenken. Ik kwam op het idee van de weertove-naar die ik uiteindelijk met veel plezier maakte. Tijdens de propedeusefase had ik te moeilijk nagedacht over een onderwerp voor mijn immersive space, waardoor ik het vak onverhoopt niet had gehaald in het eerste jaar.

Vorig jaar had ik namelijk een veel te moeilijk idee bedacht, en het verliep moeizaam in de uitvoer-ing. Ik was een heel eind gekomen, maar zag het niet zitten om dit zelfde idee te vervolgen.

Gelukkig had ik hiermee al wel flash geleerd met verschillende technieken, dus daar had ik een voor-sprong mee. Tijdens deze herkansing moest dit een stuk anders verlopen. Ik moest dit jaar wel met een leuk idee komen, wat wel haalbaar was, en ik was me gelijk bewust dat ik hiervoor sneller knopen moest gaan doorhakken. Ik ben gelijk aan de slag gegaan om een nieu-we immersive space te bouwen, en heb de oefeningen toen nog even achterwege gelaten. Hierdoor kwam ik voor mijn gevoel veel sneller op gang.

Het proces met research, het idee en de uitvoering verliepen vrij vlot, en in tegenstelling tot vorig jaar veel sneller knopen doorgehakt zodat het geen obstakels vormde.

Na het zoeken van de verschillende ideeen heb ik uiteindelijk voor het idee van de weertovenaar gekozen. Met dit verhaal had ik al veel ideeen om mee te animeren, en het was niet te ingewikkeld in zijn opzet.

4 5

Immersiveness Zomer inspiratieTijdens de course immersive space leer je over immersiveness en maak je een immersive space. Je zoekt tijdens de course antwoord op de vragen: wat is nou eigenlijk immersiveness? en wat is een immersive space? hoe maak je een immersive space?

Kort maar krachtig:

- Een immersive space biedt een belevenis, je gaat er in op.- Een immersive space is interactief, door invloed uit te kunnen oefenen op het verloop of omdat het uitlokt tot een reactie.

Aan inspiratie heb ik het meeste gehad aan de ABC Brainstorm methode, mijn mindmaps en de research die ik heb gedaan met behulp van Google afbeeldingen.

Op de komende bladzijdes treft u verschillende panorama’s aan van drie seizoenen. Zomer, herfst & win-ter. Deze seizoenen komen ook voor in mijn space.

Ik wilde ze eerst in korten en gebruiken voor de space met de panorama code, maar dit bleek mij in het begin toch te moeilijk. Ik heb toen gekozen voor normale afbeeldingen, waarin ik goed elementen in kon plaatsen.

Eenmaal te horen gekregen dat ik nog wat extra elementen aan de huidige space moest toevoegen, heb uiteindelijk toch de panorama code gebruikt voor de herfst en winter scene, als poging om het geheel nog wat meer immersive naar voren te laten komen.

Bij de zomer was het uiteindelijk niet gelukt om deze code toe te passen, ik had precies dezelfde code gebruikt maar hij gaf alleen bij de zomer errors. Ik heb uren naar de oorzaak zitten zoeken maar kwam later tot de realisatie dat ik erdoor in tijdsnood kwam en heb toen alleen de panoramacode van de zomer overgeslagen.

Bladert u verder.

Deze ruimtes zijn immersive omdat ze mij meeslepen in het gevoel van de zomer, ze veroorzaken een bepaalde emotie van binnenuit. Dit zijn de mooiste zomer panora-ma’s die ik heb kunnen vinden.

6 7

Herfst inspiratie Winter inspiratie

Kenmerkend voor de herfst zijn natuurlijk de oranje/rode bladeren die van de boom af vallen. Dit komt goed naar voren in de bovenstaande panorama’s.

De winter geeft een ijzige, koude sfeer mee. Deze panorama’s laten dat ook goed zien.

Bij de bovenste en onderste panorama komt dit extra goed naar voren doordat de zon met een warme (ten opzichte van de koude kleuren) kleur weerspiegeld wordt.

Ik heb inspiratie gehaald uit deze glazen bollen bij het bedenken van de definitieve glazen bollen op de volgende pagina. Ik kwam als eerste op het idee om de glazen bol links-bovenin de hoek van het animatiefilmpje te plaatsen met een hand zoals hiernaast weerspiegelt. Echter leek dat teveel op knoppen om van de ene naar de andere ruimte te komen. Toen ben ik daarna op het idee gekomen, en met overeenstemming van mijn begeleidster om de glazen bol te verstoppen in de ruimtes.

8 9

De Weer TovenaarGlazen bollen in verschillende vormgevingen Vormgevingsoefeningen

De personage (hoofdrolspeler) in mijn flash movie is Gandalf the Grey uit de Lord of The Rings.

Ik heb specifiek gezocht naar speelgoed-poppetjes van dit personage omdat deze een hoge resolutie hebben en omdat de achtergronden vaak ook al wit waren. Dit was een stuk makkelijker en mooier om te gebruiken ten opzicht van af-beeldingen, omdat deze bijna altijd eerst uitgeknipt moesten worden

Definitieve glazen bollen

Dit is een close-up van het slotje, de focus ligt duidelijk op het slot en de tekst op het slot. De omgeving is blurry, en niet goed zichtbaar.

Dit is het slotje van ver af, de kleuren in de afbeelding zijn allemaal warm. En het slotje ook, waardoor het minder zichtbaar is voor

De definitieve glazen bollen. Ik heb afbeeldingen van de verschillende seizoenen gepakt en deze vervolgens in de bollen geplaats in lagen. Dit kwam er uit.

Het was de bedoeling om het slotje te vinden in de flash movie om de schatkist op de eindscene open te maken om bij het eindscherm te belanden. Echter is dit uiteindelijk niet gelukt door tijdsnood.

Foto opdracht

Dit is het slotje met vooraanzicht en een glare. De kleuren zijn warm.

Dit is het slotje van linksboven, met koude kleuren omdat het licht uit staat.

Dit is het slotje wat op een kussen ligt, de omgevingsk-leuren zijn donker.

Dit is het bovenaanzicht van het slotje. De foto heeft geen focus en de kleuren zijn koud.

Dit is het slotje met de camerahoek rechtbovenin.

Dit is het slotje met zij-aanzicht en een pixel effect eroverheen.

Dit is het slotje met het zich van onderen, er is naast de focus op het slotje ook geprobeerd om de rest eromheen te verduisteren.

Dit is het slotje van bovenaf, er is extra focus op het slotje en de muur, de rest eromheen is blurry.

14 15

16 17

ABC Brainstorm Veertig Immersive Space vragen

18 19

20 21

De Weer Tovenaar en de omgeving - Synopsis De immersive space gaat over de weertovenaar, het gekozen personage die deze rol inneemt is “Gandalf the grey” uit Lord Of The Rings. De weertovenaar beschikt over krachten om zichzelf met zijn glazen bol te teleporteren naar drie seizoenen: de herfst, zomer en winter. Hij is echter zijn 3 glazen bollen kwijt en moet hiervoor op zoek naar de verschillende seizoenen om hem terug te vinden. Met behulp van de glazen bol kan hij teleporteren naar de andere ruim-tes.

Zodra de weertovenaar de glazen bol heeft gevonden in een van de ruimtes komt er een nieuwe glazen bol tevoorschijn die hem naar de andere ruimtes teleporteert.

De omgeving

De omgeving moet een ‘realistische fantasieomgeving’ worden. Realistisch omdat het in photo-shop gebouwd wordt, want de omgeving is niet cartoony. Alhoewel de foto’s die gebruikt worden echt zijn, het is en blijft wel een fantasiewereld, vandaar dat het een realistische fantasie-omgev-ing is. De fantasie elementen die er in voorkomen zullen ook afbeeldingen zijn. Het geheel moet goed bij elkaar passen, het design moet consistent zijn.

Navigatie naar alle ruimtes

De namen van de gedeeltes zijn winter, zomer en herfst. De drie glazen bollen zullen tijdens de movie gevonden worden na het klikken op de verschillende animaties, en zal gebruikt worden voor het navigeren naar de drie verschillende ruimtes/seizoenen. Klik op de desbetreffende gedeeltes op de bol om naar de verschillende ruimtes te worden geteleporteerd. Een animatie dat hij in de lucht verdwijnt en weer in een andere ruimte tevoorschijn komt is mogelijk.

Wat zie je?

Je gaat drie verschillende ruimtes tegenkomen met drie verschillende seizoenen. De weersomstandigheden zijn extreem en typisch voor de seizoenen die je tegenkomt. In de winter zal het hard gaan sneeuwen, in de zomer zal de zon zeer fel schijnen en in de herst zullen er veel oranje bladeren te zien zijn.

Wat gebeurt er?

Terwijl de weertovenaar zichzelf naar de verschillende seizoenen transporteert door te klikken op een van de seizoenen op de glazen bol, verandert zijn kledingstijl en de sfeer die hij daarmee meebrengt ook.

Wat is het doel?

De weertovenaar kan het weer niet meer controleren doordat hij zijn 3 glazen bollen kwijt is geraakt. Hij moet naar de verschillende seizoenen om de zijn glazen bol terug te vinden, zodat hij de macht weer in eigen hand heeft. De glazen bollen zijn allemaal uniek.

- In de winter vindt hij een glazen bol met twee afbeeldingen; zomer en herfst- In de zomer vindt hij een glazen bol met twee afbeeldingen; herfst en winter- In de herfst vindt hij een glazen bol met twee afbeeldingen; winter en zomer

Beginscherm

In het begin scherm tref je het gezicht van Gandalf aan met een glazen bol als startknop, de hoofdpersonage uit de animatie. In het beginscherm wordt het verhaal en probleem van de weertovenaar uitgelegd.

De glazen bol in het startscherm heeft drie ruimtes waar hij naartoe kan, die de startlocatie bepalen en hem vervolgens naar drie seizoenen transporteert waar hij zijn glazen bol zelf kan terugvinden.

22 23

Nadat er op het zomer gedeelte van de glazen bol is geklikt op het startscherm begint de weertovenaar in de zomer scene. De weertovenaar bevindt zich nu in een zeer zomerse omgeving, met een grasmat en zomerse elementen.

Vormgeving & visie De elementen die voorkomen in een zomer zijn typisch felle kleuren, zoals een felgroene grasmat, een felblauwe lucht en een felgele zon. De kleuren moeten er uitspatten, en dit heb ik dan ook geprobeerd te creeeren in de bovenstaande scene.

Sfeer & acties Hier treft hij een felblauwe lucht aan met een paar wolken die in de lucht bewegen. Een felle zon, waarbij de zonnestralen eromheen draaien is ook duidelijk aanwezig. Het achtergrondgeluid wat je hoort zijn typisch zomerse geluiden zoals fluitende vogels met een ander achtergrondgeluid. Animaties

- Wolken die in de lucht bewegen- Zonnenstralen - Wespen in de boom- Koe die in het weiland loopt en die de glazen bol verborgen heeft

Geluiden

- Zomers achtergrondgeluid- Fantasiegeluid bij de zonnenstralen- Geluid van de wespen- Scheet geluid waarna de glazen bol tevoorschijn komt

Zomer De herfstomgeving is een zeer oranje/bruine omgeving, uiteraard met veel bomen en herfstbladeren.

Vormgeving & visie De vormgeving hoort echt herfstachtig te zijn, ik heb daarom ook goed gebruik gemaakt van rode/bruine/gele kleuren die de herfst weerspiegelen.

Sfeer & acties

Er zijn diverse klikbare elementen beschikbaar, waaronder meerdere paddenstoelen die een geluidje maken zodra je er op klikt. Achtergrondgeluid zijn fluitende, tjirpende vogels. Animaties - Bootje dat onder de brug door vaart- Halloween gezicht in de boom die oplicht- Paddenstoellen die bewegen- Tovenaar die tevoorschijn komt achter de boom

Geluiden

- Water geluid als het bootje onder de brug door vaart- Herfstachtig geluid in een bos met tjirpende vogels- Geluid bij het klikken op de paddenstoelen- Fantasiegeluid bij tovenaar die achter de boom tevoorschijn komt

Herfst

24 25

Nadat er op het winter gedeelte van de glazen bol is geklikt op het startscherm begint de weertovenaar in de winter scene.

Vormgeving & visie

De bedoeling is om een koude, grouwe omgeving te creeeren. Het weer moet hevig zijn, het sneeuwt hard. Naar mijn mening straalt dit het beste een winter uit in een immersive omgeving.

Sfeer & acties

De weersomstandigheden zijn streng, het sneeuwt hevig. De sneeuwvlokken vallen met bakken uit de lucht en je ziet de koude winterse lucht van links naar rechts bewegen. Op de achtergrond hoor je het geluid van deze koude winterse lucht.

In deze omgeving treft de weertovenaar een sneeuwpop, een huis en een slee aan. Hij heeft de mogeli-jkheid om de hoed van de sneeuwpop te laten lanceren, en als hij vervolgens nog een keer op de hoed klikt dan komt er een konijn uit. Als hij dan op de konijn klikt dan poept hij de glazen bol uit.

Als je op het licht van de ramen klikt vliegt de glazen bol over de dakranden naar de grond.

Hierna is de scene uitgespeeld, hij kan zich nu naar de volgende ruimtes teleporteren door op de glazen bol te klikken van de zomer of de herfst.

Animaties

- Sneeuwpop met konijn- Hoedje van hoofd sneeuwpop teleporteren- Konijn komt uit de hoed- Maan die het laat sneeuwen

Geluiden

- Winters achtergrondgeluid met koude winterse lucht dat blaast- Klik geluid op de sneeuwpop- Konijnengeluid- Licht ramen die aanklikken

Winter Winter Moodboard

Tijdens het maken van de moodboards heb ik veel inspiratie opgedaan voor de elementen die in de ruimte moesten komen.

Hierboven het winter moodboard, zoals rechtsboven aangegeven. Tijdens het maken van dit moodboard moest ik weer even inkomen met photoshop, en heb ik geprobeerd om het winters uit te laten stralen.

26 27

Herfst Moodboard

De herfst moodboard, je raad het al, moest de herfst uitstralen. Daarom is er gekozen voor een herfstachtig plaatje met herfstachtige elementen. De paddenstoelen en de kabouter passen hierbij.

Zomer Moodboard

De zomer moodboard moest een zeer zomerse sfeer uitstralen. Daarbij hoorde volgens mij een strand met palmbomen en kokosnoten bij.

Ook een schatkist vond ik bij het plaatje passen die iets van piraten-achtigs uitstraalde.

De ideeen die hieruit voortvloeide was dat de tovenaar een schatkist zou vinden voor het eind-scherm

28 29

MindmapsFlash criteria

Planning

30 31

Storyboards mindmaps - Brainstorm Sessie

32 33

Beginscherm Zomer scene

34 35

Winter scene Herfst scene

36 37

Eindscherm ReflectievragenIdeefase:

1. Welke manieren werken voor jou het beste om op ideeën voor een productie te ko-men?

Brainstormen met behulp van een mindmap. Met de herkansing kwam ik al gauw op nieuwe ideeen die ik in een mindmap heb uitgewerkt. Ik werk over het algemeen veel met mindmaps, daarom zie je er ook veel in dit werkboek.

2. Hoe ben je tot je uiteindelijke beslissing voor een onderwerp gekomen? Welke argu-menten had je daarvoor?

Ik heb tijdens het eerste jaar veel te moeilijk nagedacht over een onderwerp, perfectionis-tisch als ik ben bleef ik hetzelfde (veel te ingewikkelde) idee nastreven.

Eenmaal niet de deadline gehaald te hebben, had ik besloten om met de herkansing een nieuw onder-werp te bedenken, dit keer iets waar veel designmogelijkheden bij mogelijk waren terwijl ik het idee niet te moeilijk zou maken.

3. Wat was de visie op je onderwerp en waarom heb je deze gekozen?

Uiteindelijk ben ik op het idee van ‘de weertovenaar’ gekomen, omdat ik hiermee grafisch mooie om-gevingen mee kon ontwerpen waarbij de animaties ook makkelijker te realiseren waren.

4. Wat zou je de volgende keer anders doen?

De volgende keer zou ik het sneller aanpakken zodat ik niet meer in de stress zit. Het is flink hard werken geweest binnen een korte tijd.

5. Hoe zou je nu het begrip ‘immersiveness’ willen definiëren?

Een immersive space is een fantasieruimte die bij elke ruimte die je tegenkomt een nieuw gevoel, emotie tot resultaat heeft. Dit heb ik dan ook geprobeerd te creeeren in mijn space. Alhoewel graf-ische vormgeving niet mijn allersterkste kant is heb ik toch geprobeerd het beste ervan te maken. Ik hoop dat het bij andere mensen ook in de smaak valt.

Ik had het eindresultaat wel wat realistischer willen maken, daar zou ik de volgende keer meer aan-dacht aan besteden.

38 39

Vormgeving 1. Wat is voor jou het moeilijkste bij het vormgeving en hoe overwin je die moeilijkheden

Het moeilijkste aan grafische vormgeving is voor mij het begin maken van iets. Indien ik al iets in zijn basis heb vormgegeven dan is het voor mij makkelijker om daarop verder te gaan. Ook heb ik in het verleden veel moeite gehad om knopen door te hakken, dit heb ik veel sneller gedaan bij de huidige space waardoor ik het op tijd afkreeg.

2. Hoe heb je ‘immersiveness’ proberen te bereiken en is dat gelukt (in hoeverre wel, in hoeverre niet)

Ik wilde bij elke ruimte de omgevingen goed naar voren laten komen door goed gebruik te maken van kleuren en elementen die er voor mijn gevoel bij hoorde. Dit is voor mijn gevoel prima gelukt. Ik ben alleen geen grafisch wonder (ook al had ik het mooier kunnen maken als ik meer tijd had) en ik heb dit goed geprobeerd te maken door extra en verschillende flash animaties te realiseren met verschil-lende technieken.

3. Hoe heb je geprobeerd om je visie over te brengen in je movie en is dat gelukt (in hoeverre wel, in hoeverre niet)

Ik ben enthousiast over de sfeer die meegebracht wordt bij de movie, maar dat komt natuurlijk omdat ik het zelf gemaakt heb. Dit is dus voor mezelf in ieder geval goed gelukt. Hopelijk ervaren andere mensen dit ook.

4. Hoe bereik je het effect dat een gebruiker niet het gevoel heeft in een applicatie-interface terecht te zijn gekomen, maar in een omgeving.

Door de gebruiker zelf te laten ontdekken en navigeren. Niet zomaar navigeerknoppen gebruiken. Ik heb daarom ook in overleg ervoor gekozen om de glazen bol te verstoppen in de ruimte, en naderhand op het klikken van de elementen deze tevoorschijn te laten komen.

5. Welke aspecten van je vormgeving zijn gelukt en welke niet? Hoe zouden de niet-gelukte aspecten kunnen worden verbeterd

De glazen bol is mooi tot zijn recht gekomen, waarmee je jezelf naar de drie ruimtes kan teleporteren. De ruimtes ben ik ook tevreden over, ze stralen de sfeer van de seizoenen naar mijn idee prima uit. Hij had alleen iets realistischer mogen worden, ik vind dat hij er nu te kinderachtig uit ziet.

6. Wat heb je bij de vormgeving gehad aan de research? Kun je dat aanwijzen?

De research heeft eigenlijk alles bepaald voor de space. Met alle plaatjes heb ik veel inspira-tie opgedaan voor alle objecten en acties die uiteindelijk gerealiseerd zijn.

7. Wat zou je de volgende keer anders doen?

Sneller het project oppakken en nog mooiere omgevingsplaatjes maken, zodat het geheel meer immersive naar voren was gekomen.

De movie 1. Kan de gebruiker zelf zien/ontdekken welke onderdelen van je ruimte interactief zijn?

Ja, maar ik heb het geprobeerd om het zo gebruiksvriendelijk mogelijk te maken. Voor sommige animaties heb ik een button gemaakt en voor andere een movieclip. Ik heb over het algemeen alles uitgeprobeerd en dit werkte ook het beste voor mij om flash te leren. De glazen-bol die je naar de andere ruimtes brengt moet eerst gevonden worden waarna je duidelijk drie seizoenen erop ziet die je naar de andere ruimtes brengen.

2. Is de navigatie naar de andere ruimtes duidelijk?

De glazenbol waarmee je naar de andere ruimtes kan teleporteren is makkelijk te vinden en duidelijk zichtbaar. Het lokt een reactie uit.

3. Welke geluiden/muziek heb je gebruikt en had dit het bedoelde effect?

Ik heb op stock websites afbeeldingen en geluiden gezocht die ik kon gebruiken. Vervolgens heb ik deze opgeslagen in een duidelijke mappenstructuur om ze later te gebruiken voor de movie.

4. Wat zou je de volgende keer anders doen?

Sneller beginnen en meer moeite besteden aan de vormgeving en research van de ruimtes. Zodat de ruimtes er mooier en realistischer uit zien, en dat het fantasy aspect nog iet meer overdreven naar voren komt.

Op de een of andere manier krijg ik het elke keer weer voor elkaar om vrij laat te beginnen, waardoor ik bijna altijd in tijdnood kom te zitten. Als ADD’er zit dit jammer genoeg wel in mijn aard, waardoor ik vaker dingen vergeet of te laat op merk. Ik hoop ook op uw begrip hiervoor. Het heeft ook zijn voordelen om later te beginnen. Je gaat automatisch harder werken en je hakt een stuk sneller knopen door waardoor je niet oneindig aan het twijfelen bent over je idee, zoals ik vorig jaar deed. Maar dat je gewoon sneller met flash aan de slag gaat. Het filmpje komt naar mijn idee ook nog niet realistisch genoeg over. Ik had het graag iets realis-tischer gewild, als het ware de sfeer die een lord of the rings/star wars film. Realistisch beeld met een fantasy-aspect. Alhoewel het aardig gelukt is met alle flash internet tutorials had ik toch graag de lessen willen bijwonen, dit had een hoop problemen kunnen voorkomen die ik later tegenkwam in de movie. Ik liep tegen het probleem aan dat het geluid begon te buggen, maar later had ik gelukkig een nieuwe code gevonden die dit probleem oploste. Ook werkte de zomer panorama niet helemaal vlekkeloos want ik kreeg hem niet aan de praat, dus die heb ik weg gelaten.

De andere panorama’s werken wel gewoon uitstekend, en er zitten geen errors in de movie op eentje na waarvan ik uren heb geprobeerd om deze op te lossen maar dat is desondanks niet ge-lukt. Echter veroorzaakt deze error geen enkel probleem, dus ik denk niet dat het een probleem is.

Bedankt voor het kijken!

40 41

In het begin toen ik een nieuwe space moest maken keek ik hier op tegen, maar eenmaal begonnen viel het allemaal reuze mee, en uiteindelijk vond ik het ook ontzettend leuk om te bouwen. Op de errors na dan, die ik halwervege en tegen het einde van de movie tegenkwam en waar ik mijn nek bijna mee gebroken heb.

Was ik maar eerder naar de lessen gegaan dacht ik op dat moment. Maargoed, ik heb uiteindelijk wel iets ge-maakt waar ik tevreden mee ben en ook met een goed gevoel kan inleveren. Dit is echter weer een enorm leermoment voor me geweest. Volgende keer als ik weer iets voor school op pak wordt ik hopelijk pijnlijk herrinert aan het moment dat ik binnen 3 weken moest zwoegen om de space af te krijgen. Ik heb wel het gevoel dat ik het maximale uit mijn tijd heb gehaald in deze drie weken, en dat het dan uiteindelijk lukt om alles op tijd af te krijgen geeft mij voldoening.

Hiermee sluit ik ook mijn schoolperiode op de HAN af en ben van plan volgend jaar te beginnen aan de RU in Nijmegen. Dit keer geen multimedia design maar een informatica opleiding.

Heb desondanks met veel plezier op de HAN gezeten, en kijk met plezier terug op de tijd die ik op de hoges-chool heb doorgebracht.

Mijn speciale dank gaat uit aan elke docent die mij les heeft gegeven of heeft begeleid tijdens deze periode!

Conclusie