Het maken van de kinderboeken app De gelukkige olifant

Gepost door Stefan de Groot op 6 oktober, 2011

Begin juni hadden Bert Vegelien en ik een gesprek bij Leopold Uitgeverij met Dania van Dishoeck over het eerste kinderboek van Youp van ’t Hek De gelukkige olifant.
Uitgeverij Leopold  wilde graag van het kinderboek een app laten maken. De gelukkige olifant is een voorleesboek van zo’n 100 pagina’s. We kwamen er al snel achter dat we het boek niet integraal zouden bewerken. De illustraties moesten leidend worden.


Bewerking en concept

Doorloop van het storyboard met Bert Vegelien

Om een goed idee van de omvang van de app te krijgen maakten we eerst een storyboard waarin de hoofdlijnen van het verhaal in 24 beelden werd verteld. In boektermen werd een leesboek een prentenboek. Uitgeverij Leopold had ondertussen ook 24 illustraties uitgezocht en 90% kwam overeen met het storyboard.

App-Script
Op basis van het storyboard schreef de redacteur  Anne-Marie Vervelde van Uitgeverij Leopold  en Youp van ‘t Hek samen het script voor de app. Mijn advies was om een wisselwerking te krijgen tussen de narratieve tekst (de verteller) en de teksten van de karakters uit het verhaal. Een app is geen boek, daarvoor gelden andere regels. Het script werd dus speciaal voor deze app gemaakt. Een script waar de verteller en de dialogen naadloos op elkaar aansluiten.

Functioneel Ontwerp
Op basis van het script maakte we het functioneel ontwerp van de app. Een functioneel ontwerp is een draaiboek waar per scherm alle elementen van de app worden benoemd en aangegeven. Hierin wordt bepaald, hoe de navigatie van de app is, wat voor beelduitsnedes er worden gebruikt,  wat voor animaties er gemaakt moeten worden, wat voor een geluiden er worden gebruikt, wat de interacties zijn en welke stem fragmenten er opgenomen moeten worden.   Na de goedkeuring van het functionele ontwerp begonnen we met de productie van de app.

Stemopname met Youp van ’t Hek

Youp van 't Hek neemt stem op voor De gelukkige olifant app

Youp van ’t Hek kwam langs in de geluidstudio om de stemmen op te nemen. In het boek komen verschillende dieren voor. Eerst namen we de narratieve teksten op. Daarna de losse dieren geluiden. In het verhaal zit een optocht van alle dieren die naar de stad toe lopen. We kregen het idee om de dieren ‘ en we gaan nog niet naar huis’ te laten zingen. Dit betekende dat Youp 16 keer het liedje in de stem van het karakter moest inzingen. Vooral de goudvissen zijn hilarisch geworden!

Geluidbewerking
Na de opname heb ik de beste stukjes geselecteerd en geoptimaliseerd voor iPhone en iPad. Voor de scene met de zingende dieren moest ik alle stemmen mixen. Op het eind van het boek zit ook nog een scene waar de dieren hard moeten lachen. Het bewerken van de stemmen gebeurt in een sound edit programma. Je zet de stemmen op een aparte laag en gaat dan de stemmen mixen, totdat je een goede balans krijgt.

Bewerking illustraties Georgien Overwater

Ivar Waleveld bewerkt de illustraties

De gelukkige olifant is geïllustreerd door Georgien Overwater. De illustraties zijn op papier gemaakt met aquarel. Van Uitgeverij Leopold  kreeg ik de scans van de illustraties. De illustraties moesten bewerkt worden voor de animaties in de app. Dit betekend dat alle karakters moeten worden losgeweekt van de achtergrond. In de achtergrond vallen dan gaten. Deze gaten moeten dan weer worden aangevuld in stijl. Gelukkig had ik hulp van Ivar Waleveld, die de meeste scenes heeft bewerkt. De figuren uit het verhaal moesten ook in beweging worden gebracht. Hiervoor deelde ik de karakters op in losse elementen: losse armen, losse benen, oogjes open, oogjes dicht, verschillende monden standen. Vooral de scene waarin de dieren lopen was zeer bewerkelijk, en de eind scene van het boek, waarin de dieren dansen.

Georgien Overwater en Stefan de Groot in overleg

Voor sommige scenes misten we elementen. Georgien Overwater kwam langs om te kijken wat voor een illustraties er nog nodig waren. We liepen het hele functioneel ontwerp door en Georgien maakte kleine schetsnotities. Later stuurde Georgien de scans van de losse illustraties op, zodat ik ze kon verwerken in de animaties.

Animaties

Stefan de Groot animeert De gelukkige olifant

Voor elke scene maakte ik een setup in Photoshop, met alle lagen van de karakters en achtergronden. Deze importeerde ik in mijn animatie software. Hierin importeerde ik tevens de stemmen van Youp. Het is altijd beter om op het geluid te animeren. Je kan de figuren dan laten praten op het tempo van de stem, zodat alles synchroniseert.  De scene met de wandelende karakters was de meest intensieve scene. Een karakter definieer je door de manier waarop hij/zij loopt. De karakters moesten ook nog eens zingen. Per karakter maakte ik eerst de loopjes, daarna voegde ik de animaties van de karakters bij elkaar. Het nijlpaard Nellie is een vrolijke tante, dus die huppelt. De olifant is verdrietig, die loopt dus erg traag en wordt ingehaald door de andere dieren. De goudvissen blubben er vrolijk op los. Het vogeltje vliegt pittig door het beeld. De giraf neemt hele grote gracieuze stappen en hoeft niet zo hard te lopen. De leeuw zakte een beetje door zijn benen. De slang sleept zich voort. De tijger maakt een hink-stap-sprong. De eenden en de zwanen waggelen vrolijk door het beeld. De kraaien  dansen springend door het beeld. De eekhoorns zijn klein, zij moeten twee keer zo hard lopen.  Lars rent door het beeld en komt later weer in beeld.

Programmeren

Scripten in Xcode voor De gelukkige olifant

Nadat de animaties, losse beelden, geluiden en stemmen klaar zijn begint het technische gedeelte van de app. Alle losse elementen moeten worden samengevoegd. Daarvoor heb je een goede programmeur nodig. De gelukkige olifant is een universele app die geschikt is voor iPhone 3GS, iPhone4, iPod Touch en iPad. Bij het programmeren moet je rekening houden dat de app op elke apparaat goed draait.  Onze programmeur Jan-Paul Stegeman heeft een prachtig en stabiele app gemaakt, die op alle devices goed werkt.

Testen van de app
Het is heel belangrijk om een app te laten testen door mensen die de app nog niet eerder hebben gezien.  Op die manier kom je dingen tegen die jezelf over het hoofd ziet. Het testen van de app duurde twee weken.  Alle op- en aanmerkingen hebben we verwerkt in de uiteindelijke app.

Een echte Youp app!
De gelukkige olifant
is een echte Youp-app geworden! Hij is mogelijk gemaakt door een nauwe samenwerking met Uitgeverij Leopold  en Youp van ’t Hek en alle andere specialisten die hun steentje hebben bijgedragen. Ik heb er met veel plezier aan gewerkt en hoop dat mensen er veel plezier aan zullen beleven!

Tags: , , , , , , ,

5 comments on “Het maken van de kinderboeken app De gelukkige olifant

  1. Ongelooflijk goed werk! Alle animaties zien er zo mooi en natuurlijk uit. Het is een hele grappige, esthetische en verzorgde app geworden.

  2. Heel leerzaam en interessant om te zien hoe jullie te werk zijn gegaan. En tot een prachtig resultaat zijn gekomen! Gefeliciteerd met de nr 1 positie op de App Store.

  3. Erik on said:

    Lijkt me een leuke app, jammer dat universeel beperkt blijft tot alleen Apple. Komt er ook een universele Android / Blackberry versie?

  4. Voorlopig zal het bij een Apple app blijven.

Geef een reactie

Your email address will not be published. Required fields are marked *

*

HTML tags are not allowed.