Maken van een Prentenboek app voor iPad

Gepost door Stefan de Groot op 22 november, 2010

Sinds kort is het mogelijk om prentenboeken op iPad te lezen. Met de komst van iPad zijn de mogelijkheden om een verhaal te vertellen veranderd. Zelf heb ik al meerdere prentenboeken (waaronder Nijntje) bewerkt als tekenfilm voor TV.  Ik heb een techniek ontwikkeld waarmee de tekenstijl van de illustrator bewaart blijft. Nu we voor de iPad Timo en het toverboek hebben bewerkt, komt er nog interactiviteit bij. In Flash was het natuurlijk al mogelijk om interactieve elementen toe te voegen aan een verhaal. Wat is dan het verschil van internet en iPad?

Het verschil zit erin dat je de iPad op schoot leest en navigeert met je vingers. Het is een zeer directe manier van lezen en komt het dichts bij het lezen van een echt boek. iPad heeft een heel scherp en duidelijk beeldscherm.
Voor Timo en het toverboek hebben we gebruik gemaakt van verschillende mogelijkheden. De iPad heeft, net zoals de iPhone een wentelmechanisme. Voor Timo hebben we daar gebruik van gemaakt. Als je op sommige pagina’s de iPad kantelt dan vallen er bijvoorbeeld borden door het beeld, of schroefjes. Je kan op het scherm met je vinger een vis heen en weer laten vliegen.

Blazen in de microfoon van de iPad

Als je in de microfoon van de iPad blaast en je vinger op het iPad scherm houdt dan blaas je Timo op als een ballon.

Verder zijn de interactieve pagina’s afgewisseld met tekenfilm. Timo is daarmee het eerste Nederlandse prentenboek App voor iPad met tekenfilm!

Hieronder een beschrijving van hoe Timo en het toverboek tot stand is gekomen.

Rian Visser

Auteur Rian Visser

Rian Visser is de auteur van Timo en het toverboek. Ze schreef het boek in 2004. Timo en het toverboek is echt een ludiek boek. Het lijkt of het geschreven is voor iPad. Via Twitter vroeg Rian me of ik ook Apps maakte. Toevallig was ik net in contact gekomen met Jeffrey Snijder, die al meerdere apps had gemaakt voor iPhone. Toen ik de PDF van het boek las (het boek is al jaren uitverkocht) kreeg ik het idee om het verhaal op een andere manier te vertellen. Timo krijgt een pakje van Oom Klaas (Illustrator Klaas Verplancke). Timo mag het pakje niet schudden, dan raakt alles door de war. Timo schudt het pakje toch door elkaar. In het pakje zit een toverboek. Als Timo het boek openslaat wordt hij het boek in getrokken. Het deel voordat hij het boek in wordt getrokken en het deel dat Timo weer uit het boek valt is geanimeerd. Het middelste gedeelte van het boek als Timo in het boek zit is gescript. In dit gedeelte zitten alle interactieve elementen. Alles staat op zijn kop en er gebeuren een hoop rare dingen. Rian schrijft kinderboeken voor kinderen van 4 t/m 14 jaar. Wil je meer over Rian lezen ga dan naar haar site. Naast auteur is zij ook vormgever en maakt zij Digiboardlessen. www.rianvisser.nl

Klaas Verplancke

Illustrator Klaas Verplancke

De vlaamse illustrator Klaas Verplancke maakte de mooie tekeningen voor Timo en het toverboek. Zijn illustraties hebben een ongelooflijk aantrekkingskracht. Klaas is een zeer divers illustrator. Het is daarom ook een feest om met zulk mooi materiaal aan de slag te gaan. Als illustrator begrijp ik hoe gevoelig het ligt als anderen aan je tekeningen zitten. Ik heb geprobeerd de stijl zoveel mogelijk intact te houden in de animaties en de verdere bewerking van het boek.  Klaas Verplancke won in 2001 de Bologna Ragazzi Award, een van de belangrijkste Europese jeugdboekenprijzen. Hij kreeg die voor Ozewiezewoze, een bundel kinderliedjes die hij had geïllustreerd en vormgegeven. Bij dezelfde gelegenheid ontving hij ook een eervolle vermelding voor Jot, het eerste boek waarvoor hij ook de tekst schreef. Voor meer werk van Klaas Verplancke ga naar zijn site: www.klaas.be

Beeld bewerking

Originele illustratie Timo

Om een bestaand prentenboek te bewerken moet je eerst een plan maken wat er in een iPad versie moet gebeuren. Dat vergt een goede planning vooraf. Gelukkig had ik al verschillende prentenboeken bewerkt als tekenfilm voor TV en DVD. Ik kreeg van Rian Visser hoge resolutie scans van Klaas Verplancke’s illustraties. Je moet eerst bepalen welke elementen er moeten bewegen. Als voorbeeld neem ik de openingsscène van Timo en het toverboek. Er valt een pakje door de brievenbus. Timo loopt naar de deur en pakt het pakje op. De illustratie laat het eindbeeld zien. Timo zit geknield op de deurmat en pakt het pakje op. De eerste paar pagina’s van het boek zijn geanimeerd. Ook deze scene. Om deze scene om te zetten als tekenfilm moet eerst Timo worden losgeweekt van de achtergrond. De achtergrond waar Timo eerst zat heeft nu een gat. Dit gat moet worden opgevuld in de stijl van de illustrator.  Al deze bewerkingen  doe ik in Photoshop. Je pakt elementen uit de illustratie en vult het gat op. Hier en daar teken ik elementen bij in de exacte stijl van de illustrator.

Stappen van bewerking in Photoshop

De kunst is om dit op zo’n manier te doen dat je geen stijlbreuk krijgt en het niet opvalt. In de scene valt het pakje door de brievenbus. Het pakje moet ook worden losgeweekt van de achtergrond en de brievenbus wordt in een aparte laag gezet, zodat het pakje ook daadwerkelijk uit de brievenbus op de mat neerploft. Nu is de achtergrond klaar voor opname, maar Timo moet wel naar de deur toe lopen en het pakje oppakken.

Timo wordt opgedeeld in losse ledematen voor de animatie

Om Timo te kunnen laten lopen, moet hij helemaal gedemonteerd worden. Zijn hoofd, ogen, bovenarmen, onderarmen, handen, zijn shirt, zijn bovenbenen, zijn onderbenen en schoenen moeten allemaal los worden geweekt en waar nodig worden aangevuld. Al deze lagen: de achtergrond en alle onderdelen van Timo importeer ik in het animatieprogramma Anime Studio Pro. Deze scene bestaat uit 20 verschillende lagen. Voor Timo maak ik een geraamte aan waarmee ik Timo kan laten bewegen. Het bewerken van een bestaand prentenboek is daarom zeer tijdrovend! Gelukkig kreeg ik hulp van Rian Visser met het bewerken van de pagina’s. Het zou heel veel werk schelen als illustratoren al rekening gaan houden met de meerdere publicatiemogelijkheden. Een boek bewerkt als tekenfilm, als app, als digiboardles, als spelletje. Als bijvoorbeeld de figuren al los getekend worden van de achtergrond, dan zou het sneller omgezet kunnen worden in deze nieuwe publicatievormen!


Geluidseffecten
In Timo en het toverboek zitten ook allerlei geluideffecten. Het pakje valt door de brievenbus, een koe die geluid maakt, vogeltjes die fluiten, borden die vallen, Timo die door een rietje slurpt. Een hoop verschillende geluiden. Sommige geluiden kan je zelf moeilijk opnemen, zoals het fluiten van vogeltjes. Deze geluiden kan je inkopen. Maar het slurpen van Timo, de koe, het schudden van het pakje, de brief die door de brievenbus valt, water dat stroomt heb ik allemaal zelf opgenomen. Het opnemen van water is makkelijk. Je pakt een emmer en een glas water en giet dit in de emmer. Of het boe geroep van een koe, kan je zelf nabootsen. In het opnemen van je eigen geluiden moet je creatief zijn. Meestal kan je geluiden nabootsen met voor de hand liggende objecten. Het schudden van het pakje heb ik nagebootst door een lege chocolade doos te vullen met speelpionnen van een bordspel. De geluiden kan je ook bewerken en samenvoegen en mixen, totdat je het juiste effect hebt bereikt.

Verteller

Siebe Meijer stemacteur

Timo en het toverboek wordt voorgelezen door de verteller Siebe Meijer. Ik heb met Siebe aan meerdere projecten mogen samenwerken. Siebe is presentator/filmer/stem-acteur en weet de kijker altijd te boeien. Hij heeft een zeer prettige stem en betrekt de lezer/kijker/luisteraar direct bij het verhaal. Ik probeer  tijdens het opnemen van een stem altijd een goede sfeer te creëren. Bij het vertellen van een verhaal moet je de spanning erin zien te houden. Siebe had het script nog niet gelezen. Hij ging er onbevooroordeeld in. Op die manier houd je de spontaniteit in het voorlezen. In het boek komen verschillende  komische situaties voor, waardoor Siebe ook verrast werd en dit is terug te horen in de opnames! Het is fantastisch om met zo’n talent te mogen samenwerken en ik hoop hem nog voor vele projecten te kunnen inzetten.  We zijn op het moment bezig met de Engelstalige versie voor Timo, hiervoor hebben we de Engelse Voice-Over John Chapman ingeschakeld. De voorleesstem en de geluidseffecten worden samengebracht in 1 soundtrack. Op deze soundtrack kan het maken van de tekenfilm beginnen. Dat heeft  met timing te maken. In het boek leest moeder een brief voor. Haar mond beweegt in sync met de gesproken tekst. Dit is alleen goed te timen als de soundtrack er eerst is.

Animatie

Alle elementen worden samengebracht in het animatiepakket Anime Studio Pro

Voor de animatie van de eerste scene heb ik alle bewerkte elementen geïmporteerd in het animatiepakket Anime Studio Pro. Nu kan het maken van de tekenfilm beginnen. Per seconde zijn er 25 beelden. Elk beeld wordt per frame  aangepast. In de foto boven zie je rode balkjes door het lijf van Timo lopen. Met deze balkjes kan ik Timo laten bewegen.  De balkjes zitten vastgeplakt (digitaal) aan alle ledematen. Verder zit er een camera in het animatiepakket, hiermee kan ik Timo volgen, of in- of uitzoomen. De openingsscène duurt 13 seconde. Dat is 25 x 13= 325 beelden.

Hieronder de uiteindelijke scene:

3D animator Erwin Kneppers zet Timo en het toverboek om in 3D

Niet alle tekenfilm scenes zijn in 2D gemaakt. Het moment dat Timo in het toverboek wordt getrokken moest natuurlijk een magisch moment worden. Ik had in mijn hoofd dat Timo het boek vast heeft en dat het uit zijn handen schiet en om hem heen draait. Dat is een mooi effect, maar dat is haast niet te doen in 2D. Voor dit effect heb ik de hulp ingeroepen van 3D animator en visualizer Erwin Kneppers . Erwin maakt prachtige 3D animaties en ik heb al aan meerdere opdrachten met hem samengewerkt. Hij heeft de cover van Timo en het toverboek en de pagina’s waarin Timo uiteindelijk belandt in het 3D model gezet en geanimeerd. Om de stijl van Klaas Verplancke te bewaren moest ik wel zo’n 100 illustraties bewerken met de inktlijn van Klaas, zodat je geen stijlverschil ziet!

Programmeren

Jeffrey Snijder programmeren voor iPad

En last but not least! Om een prentenboek voor iPad te ontwikkelen heb je een goede programmeur nodig. Alles wordt geprogrammeerd in de SDK voor iPad. De programmeertaal is Objective C. Gelukkig heb ik een goede programmeur gevonden die al meerdere Apps (applicaties) voor iPhone heeft gemaakt. Samen met de programmeur, Jeffrey Snijder heb ik gewerkt aan Timo en het toverboek voor iPad.  Alle elementen; voorleesstem, geluidseffecten, tekenfilm en de gescripte pagina’s worden door Jeffrey samengevoegd. Met de iPad navigeer je met je vingers. Ook al deze functies moeten worden geprogrammeerd.   In het boek kan je ook Timo opblazen, als je in de microfoon van de iPad blaast. Sommige pagina’s reageren ook als je de iPad kantelt. Timo vliegt dan bijvoorbeeld door de lucht. Al deze effecten worden gescript. We zijn nu bezig met de Engelse versie van Timo. Hiervoor komt er weer een update voor de Timo app. Als je de app eenmaal gekocht hebt, dan kan je alle updates gratis downloaden.

Dit is alleen nog maar het begin van wat er mogelijk is voor de nieuwe verhaalbeleving voor iPad.

Ondertussen zijn we alweer bezig met nieuwe kinderboeken om te zetten als app!

Tags: , , , , , , , , , , , , , ,

5 reacties to “Maken van een Prentenboek app voor iPad”

  1. Geweldig goeie en mooie blogpost Stefan en het eindproduct is er dan ook naar. Diepe buiging voor wat jullie kunnen en hebben laten zien.
    Zou alleen de tag van Rian even aanpassen 😉
    mzzltv

  2. Bedankt Bert! De tag van Rian Visser heb ik aangepast!

  3. Thanks Robson! This is only the beginning! More childrenbook apps are coming soon!
    Stefan

  4. […] het maken van de Timo en het toverboek app is een samenwerkingsverband met de auteur Rian Visser, de Developer Jeffrey Snijder en de uitgever Bert Vegelien. Het is leuk […]

  5. Negeso CMS

    mooi artikel !

Geef een reactie