safaamoussaaa-blog

[safaamoussaaa-blog]

Week 7 | Eindanimatie + geluid

Voor de eindanimatie heb ik verschillende soorten geluiden toegevoegd, namelijk: ingesproken stem, geluiden bij interactie, geluiden bij beweging en achtergrond muziekje. 

Daarnaast heb ik gelet op de timing tussen beeld en geluid. Het mooiste is natuurlijk om alles goed in elkaar te laten overlopen.

Ik heb ervoor gekozen om zelf de tekst in te spreken in mijn animatie, ondanks dat de conducteur een man is. Ik heb namelijk geëxperimenteerd met de ‘Pitch Shifter tool’ in Adobe Premiere om mijn stem te verlagen. Als resultaat dat het niet veel uit maakt of je nou een mannelijke of vrouwelijke stem gebruikt. Het verschil is niet heel opmerkelijk. 

Ook heb ik gekozen voor een achtergrond muziekje. Wel heb ik die best laag gezet, zodat die niet overheersend is. De focus ligt namelijk op de interactie geluiden en geluiden van bewegingen. Het achtergrond muziekje geeft sfeer en vrolijkt de animatie op. Daarnaast past het goed bij de doelgroep.

Bronnen:

Achtergrond muziekje: Buddy - Royalty Free Music - gepubliceerd op 22 maart 2018 - https://www.bensound.com/royalty-free-music/track/buddy

Andere achtergrond geluiden: bronnen zijn eerder vermeld in vorige posts.

Cursor: LaDamadelaOscuridad - Geen datum - Puntero - gepubliceerd op 23-03-2018 - https://www.google.nl/search?q=muis+cursor+wit&tbm=isch&tbs=rimg:CUMvXm2Xc8fPIjj0S7AKRsWurZXHjoAIXiRpZYwnGcsAG-eJFNtoLrbrgoh1gAKqSWs55Wmd6Cacl2YCn_1rky2Lw8ioSCfRLsApGxa6tERU_1z1bfoQ-LKhIJlceOgAheJGkRnMH9aKgVy4EqEglljCcZywAb5xG2qALeWuxhKyoSCYkU22gutuuCEdufDfhEm6lVKhIJiHWAAqpJazkRhqrLw4A4bc0qEgnlaZ3oJpyXZhHhGheXBouGJCoSCQKf-uTLYvDyEcrzKLXsHRoq&tbo=u&sa=X&ved=2ahUKEwjfypH_04PaAhUNL1AKHXhtDPsQ9C96BAgAEBs&biw=1280&bih=615&dpr=2#imgdii=NqoWO_SBsUdkVM:&imgrc=KEI9W7rnzKpiVM:

[safaamoussaaa-blog]

Week 7 | Aankomst in dierentuin

In deze scène komt de trein aan op bestemming. Om duidelijk te maken dat de gebruiker op bestemming is aankomen, heb ik een wegwijsbord geïllustreerd. 

Deze heb ik vervolgens toegepast in de animatie.

[safaamoussaaa-blog]

Week 6 | Inchecken

De scène na de tijdsweergave is het inchecken. Voor deze scène heb ik een illustratie gemaakt van een incheckpaaltje en een treinkaartje.

Deze illustratie heb ik toegevoegd in de animatie. Om op te laten vallen dat je op het incheckpaaltje moet klikken (interactie) heb ik een knipperlicht toegevoegd om de button heen om duidelijk te maken dat er daar op gedrukt moet worden. 

Poging 2: Als er op de button gedrukt wordt, verschijnt er een hand met een treinkaartje die incheckt. 

Bronnen:

Incheckpaal geïnspireerd op: 13-12-2017 - Geen naam - Alert voor vergeten check-out bij alle vervoerders - Gepubliceerd op 16-03-2018 - https://www.google.nl/search?q=incheckpaal+ns&tbm=isch&tbs=rimg:CVX1cvSgTBCHIjjgI-0vYnJrnbkG3zau_1kDsUg1dZGGE61jnAy0Lr4lcB5TixSpN7tuQsMjE5RdzMP179W9WNNaR-ioSCeAj7S9icmudETqigOehrsaWKhIJuQbfNq7-QOwRmKS8fSjpR0cqEglSDV1kYYTrWBHUIJwRxkHhpSoSCecDLQuviVwHEYsksg4ZXFMwKhIJlOLFKk3u25AR4fxMCTVk96cqEgmwyMTlF3Mw_1RE10Lpcub1bdioSCXv1b1Y01pH6EUpyVuOSBgWM&tbo=u&sa=X&ved=2ahUKEwiCh_Ghn_3ZAhURZlAKHcg_BpwQ9C96BAgAEBs&biw=1280&bih=659&dpr=2#imgrc=-ZJsZGA63DUo-M:

Ov-chipkaart logo: Trans Links Systems - Geen datum - OV-chipkaart - gepubliceerd op 16-03-2018 - https://www.google.nl/search?biw=1280&bih=659&tbm=isch&sa=1&ei=pS-yWr-FHITRwAK8iYzICQ&q=ov+chipkaart+logo+png&oq=ov+chipkaart+logo+png&gs_l=psy-ab.3...961960.964908.0.965050.21.14.0.7.7.0.93.981.14.14.0....0...1c.1.64.psy-ab..0.18.807...0j0i67k1j0i24k1j0i10i24k1j0i30k1.0.aRcTxh3P2Jc#imgrc=GJj3r37_cpHiWM:

NS logo: bron vermeld in vorige post.

[safaamoussaaa-blog]

Week 6 | Tijdsweergave

De scène na het kopen van een kaartje is de tijdsweergave op het scherm dat in het station hangt. 

Van de tijdsweergave bord heb ik een illustratie gemaakt. 

Poging 1: Deze illustratie heb ik toegevoegd in mijn animatie. Het bord zo alleen in beeld vond ik niet zo interessant en het beeld was nogal leeg.

Poging 2: Om het beeld wat interessanter te maken om naar te kijken, heb ik de guide-character aan deze scène toegevoegd. Die verteld namelijk wat over wat er op dat bord allemaal te zien is. 

[safaamoussaaa-blog]

Week 6 | Kaartje kopen

De eerste scène na het hoofdmenu is het kopen van een kaartje. Voor dit beeld heb ik een illustratie getekend van een NS automaat. 

Ik heb bewust gekozen voor een rustige achtergrond, zodat de focus ligt op de automaat. Vervolgens heb ik de automaat toegevoegd in mijn animatie. De knop met ‘koop een kaartje’ vond ik hieronder te klein en het was onduidelijk dat je op deze button moet klikken. 

In de tweede poging heb ik de button groter gemaakt.

Naar mijn idee miste er nog iets. Het was namelijk nog niet duidelijk genoeg dat je op de button moet klikken. Dit heb ik aangepast in mijn animatie door een soort van knipper licht om de button heen te plaatsen. 

Het knipperende licht om de button heen, maakt de interactie duidelijker voor de gebruiker. 

Bronnen:

NS automaat geïnspireerd op: 2 september 2015 - Kaartautomaten - geraadpleegd op 15-03-2018 - https://www.google.nl/search?q=ns+kaartje+kopen&source=lnms&tbm=isch&sa=X&ved=0ahUKEwixm4HJsf7ZAhXEKewKHRkABmQQ_AUICygC&biw=1280&bih=659#imgrc=YTh4pdZM4oEsUM:

NS logo: Nederlandse spoorwegen - 1968 - Logo van de Nederlandse Spoorwegen - geraadpleegd op 15-03-2018 - https://www.google.nl/search?biw=1280&bih=659&tbm=isch&sa=1&ei=8iiyWo-CNIb5kwX7-pfgBQ&q=ns+logo+png&oq=ns+logo+png&gs_l=psy-ab.3..0j0i8i30k1.1670332.1672319.0.1672434.11.10.0.1.1.0.60.444.10.10.0....0...1c.1.64.psy-ab..0.11.446...0i30k1.0.jYiZTCO7nQY#imgrc=ajJjurRj1RRp_M:

[safaamoussaaa-blog]

Week 6 | Wegwijsbord

Als de gebruiker op het hoofdmenu kiest om naar de dierentuin te gaan, dan verschijnt de illustratie van de dierentuin in het groot met daarvoor een rijdende trein (Zie onderstaand filmpje).

Alleen naar mijn idee miste er iets. Het scherm was zo leeg en de trein die kwam random in beeld. Daarom heb ik een extra bevestiging aan het scherm toegevoegd, zodat de gebruiker weet dat de trein richting de dierentuin rijdt. Ik heb een wegwijsbord toegevoegd. 

Het wegwijsbord geeft een extra bevestiging dat de trein naar de dierentuin rijdt. Daarnaast ziet het er leuker en speelser uit. 

[safaamoussaaa-blog]

Week 5 - Animatie met geluid

Ik heb geluid toegevoegd aan het openingsscherm en het hoofdmenu. 

Het is mij nog niet gelukt om een schermopname te maken, waarin te zien is dat als je ergens op klikt, een geluid te horen is. Maar hier zal ik de komende week aan werken.

Het eerste interactie geluid is als de gebruiker de deuren sluit van de trein (0:10). Ik weet alleen niet zeker of dit geluidje wel geschikt is voor deze interactievorm, maar hier zal ik de komende week mee gaan experimenteren.

Het tweede interactie geluid is in de hoofdmenu. Als de gebruiker een locatie kiest door op de button te drukken, komt er een ‘blieb’ geluidje (0:18 en 0:19). Daarentegen vind ik het geluid bij deze interactie wel toepasselijk en duidelijk.

Bronnen:

Interactie geluid: https://freesound.org/people/fins/sounds/146721/

De bronnen van de andere geluiden zijn vermeld in een eerder geplaatste post in week 2.

[safaamoussaaa-blog]

Week 5 | Openingsscherm + hoofdmenu

In het onderstaande filmpje zie het openingsscherm en hoofdmenu. Deze lopen goed in elkaar over door een extra element die ik eraan heb toegevoegd. Namelijk een trein die uit het openingsscherm rijdt en vervolgens binnenrijdt in het hoofdmenu. 

[safaamoussaaa-blog]

Week 4 | Uiteindelijke openingsscherm

Hieronder zie je de uiteindelijke geanimeerde versie van het openingsscherm zonder geluid. Ergens in het midden zie je dat het wat langer duurt tot de animatie weer verder gaat. Dit omdat de conducteur op dat moment iets gaat zeggen. Het geluid ga ik zo snel mogelijk aan de animatie toevoegen. 

[safaamoussaaa-blog]

Week 5 | Illustraties & animatie hoofdmenu

Het animeren van het openingsscherm heeft mij veel tijd in beslag genomen. Vandaar dat ik wat later ben begonnen aan het animeren van het hoofdmenu. Op het hoofdmenu heeft de gebruiker de keuze naar welke locatie hij of zij verder wilt reizen. De twee locaties waaruit de gebruiker kan kiezen is dierentuin of pretpark. 

Ik ben gaan kijken naar een passend achtergrond voor in de hoofdmenu. De eerste achtergrond die ik heb gemaakt is een simpele achtergrond.

Deze achtergrond vond ik toch niet zo geschikt voor mijn animatie, omdat de illustraties zwart zijn. Aangezien ik een vrij jonge doelgroep heb, vind ik het leuker als de achtergrond speels en vrolijk is. Het moet dus verschillende kleuren bevatten.

Nadat ik wat inspiratie heb opgedaan op het internet, heb ik een achtergrond geïllustreerd die erg goed bij mijn animatie past. De achtergrond is speels, heeft verschillende kleuren en is aantrekkelijk voor kinderen. 

Op deze achtergrond komen twee buttons met dierentuin en pretpark erop. In het midden zie je de guide-character met zijn handen gericht naar de buttons.

Dit is dus hoe mijn uiteindelijke hoofdmenu eruit komt te zien. Uiteraard heb ik dit ook geanimeerd. Zie het onderstaande filmpje.

Bronnen:

Gebaseerd op:

Afbeelding pretpark: Geen naam/maker - geen datum - Ilustración de vector de paseo en el parque de atracciones rollercoaster - https://es.vecteezy.com/arte-vectorial/190874-ilustraci-n-del-vector-de-la-monta-a-rusa

Afbeelding dierentuin: Geen naam/maker - geen datum - Giraffe and rhino in the zoo - https://www.freepik.com/free-vector/giraffe-and-rhino-in-the-zoo_884598.htm

Beeldcitaat:

Leeuw vector: Clker-Free-Vector-Images- geen datum - geen titel - https://pixabay.com/nl/leeuw-silhouet-zoogdier-42536/

Olifant vector: Geen naam/maker - geen datum - OLIFANT CLIP ART- http://www.clker.com/clipart-4351.html

Giraffe vector: gdakaska - geen datum - geen titel - https://pixabay.com/nl/giraffe-dier-het-silhouet-safari-2257771/

Achtbaan vector: tzunghaor - 14 augustus 2011 - roller coaster - https://nl.vector.me/browse/268656/roller_coaster

Draaimolen vector: Geen naam/maker - geen datum - Business, buildings, Big Wheel, Ferris Wheel, entertainment, fair, Amusement Park, Funfair icon - https://www.shareicon.net/business-buildings-big-wheel-ferris-wheel-entertainment-fair-amusement-park-funfair-846643

[safaamoussaaa-blog]

Week 4 | Fluitende guide-character

Voor de animatie van het openingsscherm heb ik iedere beweging van een fluitende conducteur (guide-character) geanimeerd. 

Deze heb ik verwerkt in mijn animatie:

[safaamoussaaa-blog]

Week 4 | Interactie openingsscherm

Het is belangrijk dat de interactie duidelijk is in de animatie. Daarom ben ik gaan experimenteren met verschillende manieren om duidelijk te maken dat de gebruiker op een button/knop moet drukken. 

Deze twee manieren vond ik het duidelijkst. Maar natuurlijk moet je het eerst testen om te kijken welke het beste van toepassing is. 

Deze twee manieren heb ik allebei verwerkt in mijn animatie. 

Vinger:

Knipperen:

Persoonlijk vind ik de manier van aangeven door te knipperen, dus zonder vinger, het fijnst. De vinger/hand komt een beetje opdringerig over. Ik kreeg het gevoel alsof ik snel moest drukken, anders zou het scherm afsluiten. Het knipperen alleen komt rustiger en duidelijker over. Wel zou ik het iets langzamer laten knipperen, zodat het nog wat rustiger is.

Knipperen langzamer:

[safaamoussaaa-blog]

Week 4 | Openingsscherm deel 2

Nadat ik het eerste deel van het openingsscherm heb geanimeerd, ben ik aan de slag gegaan met het tweede deel van het openingsscherm. In het tweede deel van mijn openingsscherm openen de treindeuren, komt de conducteur in beeld die gaat fluiten en hij vraagt of de gebruiker wil meereizen. 

Als eerst heb ik de treindeuren die opengaan geanimeerd:

Vervolgens heb ik er een fluitende conducteur aan toegevoegd:

[safaamoussaaa-blog]

Week 4 | Openingsscherm deel 1

Deze week ben ik van start gegaan met het animeren van het openingsscherm. Het openingsscherm heb ik overigens een beetje aangepast. Voordat de conducteur in beeld verschijnt, zal eerst een beeld te zien zijn van een trein die aan komt rijden. Hier heb ik bewust voor gekozen, omdat de conducteur anders gelijk in beeld verschijnt. Dit is een beetje random.

Animeren:

De eerste stap die ik heb gezet is de achtergrond laten bewegen. Ik heb gekozen voor een simpele achtergrond met zachte kleuren. Zo zal de kijker zich meer richten op de kern van de animatie en niet teveel worden afgeleid. 

Poging1: Vervolgens heb ik een trein aan de animatie toegevoegd die aan komt rijden. Hier zie je dat de trein in volle snelheid aankomt rijden en dat het bordje met ‘s-Hertogenbosch uit het niets op beeld verschijnt. 

(Mijn excuus voor de slechte kwaliteit, er was iets misgegaan tijdens het renderen). 

Poging 2: In het onderstaande filmpje zie je een verbetering van het bovenste filmpje. De trein komt op een constante/normale snelheid aanrijden en het bordje met ‘s-Hertogenbosch komt langzaam in beeld. 

[safaamoussaaa-blog]

Week 3 | Versie 2 (verbeterde) storyboard

Mijn storyboard was nog wat onduidelijk en onoverzichtelijk. Daarom heb ik een nieuw, verbeterde storyboard gemaakt. Het storyboard heb ik digitaal uitgewerkt, omdat dit duidelijker en overzichtelijker is. 

1. Openingsscherm: Conducteur fluit en vraagt aan gebruiker: “Hey! Reis jij met mij mee?” De gebruiker kan met ‘Ja’ antwoorden door op de deurknop te drukken die is aangeduid. Vervolgens sluiten de treindeuren. 

2. Hoofdmenu: Conducteur stelt zich voor aan de gebruiker (guide-character). Vervolgens vraagt de conducteur waar de gebruiker naar toe wil reizen. De gebruiker heeft de optie om uit 2 locaties te kiezen (het pretpark of dierentuin), door op één van de buttons te drukken.

3. Er wordt uitleg gegeven over waar (en hoe) je een kaartje kunt kopen.  

4. Er wordt uitgelegd waar je de treintijden kunt bekijken. Zowel op de schermen op het station als via de NS app.

5. Uitleggen dat je eerst moeten inchecken voordat je aan de reis begint. Interactie: De gebruiker kan inchecken door op de button te klikken op het scherm. 

6. Uitleg over het openen van de treindeuren. Interactie: De gebruiker kan de deuren openen door op de button te klikken op het scherm. 

7. Uitleg over waar de schermen in de trein voor dienen.

8. Aankomst op bestemming.

9. Conducteur (guide-character) neemt afscheid van de gebruiker: “Ik ga weer verder aan het werk. Veel plezier in de dierentuin (of pretpark)! Tot gauw. Interactie: de gebruiker kan de treindeuren sluiten door op de deurknop button te klikken. 

10. Als laatst wordt er aangegeven dat je moet uitchecken voordat je het station verlaat. Interactie: De gebruiker kan uitchecken door op de button te klikken op het scherm. 

[safaamoussaaa-blog]

Week 3 | Illustraties

De afgelopen dagen ben ik bezig geweest met de eerste illustraties. Hieronder heb ik een schets gemaakt van de trein (intercity). 

Deze trein heb ik verder getekend in illustrator. Ik heb bewust gekozen voor de intercity en niet voor de sprinter, omdat de vormen en kleuren van de intercity het beste passen bij mijn animatie. 

Daarnaast ben ik bezig geweest met het illustreren van de openingsscherm.

Digitale uitwerking

De openingsscherm is nog niet af. Dit is alvast een begin. 

Bronnen:

Trein is geïnspireerd op: ProRailInternet - 17 juni 2014 - 150 jaar Spoor ProRail animatie - https://www.youtube.com/watch?v=5ucddiE-HXI&t=5s

[safaamoussaaa-blog]

Week 2 | Eerste audio

Geluid is uiteraard een belangrijk onderdeel van de animatie. Daarom ben ik alvast opzoek gegaan naar geluiden die ik goed kan gebruiken. Daarnaast zal ik in de komende weken zelf ook geluiden opnemen van onder andere het in-en uitchecken.

Geluiden die ik heb kunnen vinden zijn: Train passing by en treindeuren die openen en sluiten. Deze audio’s passen goed bij mijn animatie, omdat dit de geluiden zijn die het meest overeenkomen met de treinen hier in Nederland.

*Omdat de tekst niet weergegeven wordt in combinatie met audio in één post, zal ik van iedere audio een aparte post plaatsen. Hieronder alvast de bronnen vermeld. 

Bronnen:

- Security Beep sound (treindeuren openen en sluiten 1) - 29 Augustus 2016 - geraadpleegd op 18-02-2018 - http://www.orangefreesounds.com/security-beep-sound/

- Train passing by - 6 februari 2018 - geraadpleegd op 18-02-2018 -http://www.orangefreesounds.com/train-passing-by/

- Opening and closing the train door (treindeuren openen en sluiten 2) - 8 december 2013 - geraadpleegd op 18-02-2018 - https://freesound.org/people/jrosin/sounds/209969/