Creating an app for iPad, application development of an interactive picture book

Timo and the Magical Picture Book – About creating an app
In this lesson you will learn all about making the app from the picture book Timo and the Magical
Picture Book. This picture book was written by Rian Visser and illustrated by Klaas Verplancke.

Goal: To learn how a digital picture book is created
Age: Recommended for ages 10 and up

Content
What is an app? 2
What is a digital book? 3
The author and illustrator 4
Paper and digital editions 5
What is an iPad? 6
Animated cartoons 7
Interactive pages 10
Audio 11
Programming 13
Design 14
Trailer 15
Publishing information 16
Creating your own animations 17

E-tutorial for IWB Timo and the Magical Picture Book – About creating an app © Text: Rian Visser, www.rianvisser.nl © Illustrations: Klaas Verplancke, www.klaas.be Page 2


What is an app?
App is is short for
application.

An app has to be installed on
an electronic device (such as a
computer, smartphone, iPod
Touch or iPad) and adds to all
the things you can do with that
device.

An app can be a game, book or
program.

Timo and the Magical Picture Book
is a book app. It is a
book made into a digital file, in
other words a digital book.

Watch the trailer for Timo and the Magical Picture Book on YouTube.



What is a digital book?
Did you watch the trailer for Timo and the Magical Picture Book? What did you notice? Which
differences are there between a paper book and a digital book? What is the same?

Paper book Digital book
• It has a cover (front, spine, back) • You need an electronic device to read it
with paper pages inside • It has text and drawings
• It has text and drawings • Sometimes you can swipe things on the screen
• You flip from one page to the next • Sometimes it has animations
• You read it yourself • Sometimes it has sounds
• Sometimes you can make things happen yourself



The author and illustrator
Rian Visser came up with Klaas Verplancke made the
the Timo story. She has illustrations with the story. He
already written a lot of books first made sketches and then the
for children aged 2 to 14. real illustrations.

© Photo Jan Darthe
Rian Visser Klaas Verplancke



Paper and digital editions
The paper edition
The printed book was on sale in Dutch bookstores only. About
3000 copies had been made. This is called an edition. Sometimes a
book may get a second edition, but Timo and the Magical Picture
Book is no longer available in print. The original book

A digital book from the App Store
Digital books can be bought from digital bookstores,
like the App Store. They can never run out of copies,
so a digital book will always be available.

A digital book can easily be changed, too; to add new
games, for example. Then you can download a new version
of the book from the store. This is called an update.

To read the digital book you need an electronic device,
such as an iPad.
Some children’s books apps on the iPad



What is an iPad?
An iPad is a like a computer and screen put together into one gadget.. This is also called a tablet.

What can you do with it? The story
• View movies Timo gets a picture book from his uncle Nick. Nick
• Play sound, music writes: Do not shake the book, that mixes everything
• Play a game up. Timo shakes the book anyway.
• Surf on Internet
• Touch the screen to make things
on it move In a paper book, the
• Swipe the screen to turn pages drawings are fixed,
• Move the iPad about to make things but on the iPad they
happen; the iPad kind of ‘senses’ it can move.
when you rotate or tilt it When you shake the
• Blow into the microphone to make iPad, plates really
things happen come falling down
• Read a book and mother starts
• Type a note, story or email pouring milk on
• Look at electronic maps and see the plants.
where you are (GPS)

Digibordles Timo and te Magical Picture Book – About creating an app © Text: Rian Visser, www.rianvisser.nl © Illustrations: Klaas Verplancke, www.klaas.be Pag 7


Animated cartoons
In paper books drawings are fixed, but in animated cartoons they move. An animation artist edited the
drawings from the paper book to bring them to life. This scene shows Timo running to the mailbox.

Images from the animation

Drawing from the paper book Step 1: We needed a background without Timo or
the packet. Everything in the foreground was erased
so the background could be recaptured.
Stefan de Groot is an animation
artist. He created the moving
cartoons for Timo and the
Magical Picture Book.

Stefan de Groot

Step 2: Next, Timo’s image had to be cut from the background.
The computer program Photoshop was used for this.
The picture below shows it when it was partly completed.
Step 3: Then Timo’s image was
split into parts.


Step 4: The animations were created using the program Anime Studio Pro.
The various parts of Timo’s image were fixed to a sort of outline frame. The picture below
shows this outline in red lines. The animator could now make Timo move and film that.

That is how the animation came
to be. Watch it on YouTube.



Interactive pages
Apart from the cartoons, there are pages in Timo and the Magical Picture Book where
you can make things happen by yourself. By blowing into the iPad’s microphone you
can make Timo’s belly grow as big as a balloon. Just like for the other animations,
drawings had to be cut and split apart, and background images recaptured.



Audio
Reading out loud
You can choose whether you want to read Timo and the Magical Picture Book yourself or
listen to it. The book is in English and Dutch. The Dutch narrator is Siebe Meijer.
He is a presenter, filmmaker and voice actor. The Dutch text was translated into English
by Jo Hughes. The English narrator is John Chapman.

Microphone Siebe Meijer



Sound Effects
There are lot of sounds in the book. Most of them the animator made himself. Some sound
effects were bought from professional sound effects companies.

When Timo rattles the packet,
you will hear the sound of little
things smashing.
The clattering sound was made by
rattling a chess piece inside a small
cardboard box.

His baby brother drops his The animator made the cow’s
dummy, then burps. mooing sound.
We won’t tell you who burped in
real life. When mother pours milk onto
the plants, the actual sound you
hear is that of a glass of water
being emptied into a bucket.



Programming
Once the animations and sound effects had been completed, programmer Jeffrey Snijder
could start putting everything together. He did this by writing codes in a computer
language called Objective C. This is called scripting. It makes it possible, for instance,
to click on the right hand side of each page to continue to the next. Jeffrey also scripted
the games, like the one where you can create drawings with the knitting yarn.

When you click on Timo’s head, he starts
shaking it and the knitting yarn around him
Jeffrey Snijder disapears.


Design
An ordinary book has a cover which you The designer chooses the type and size
it can recognize. of letters (typography) for the app and decides
The app has an icon. what pages and buttons should look like and
In the App Store of Apple such an icon is always which colours to use. On the page shown
square with rounded. Here you see the icon of the below you can choose which language to use
free app TimoLite. by clicking on one of the red boxes.

Icon Digital Book Icon Digital Book



Trailer
When the app was finished, a short video – called a trailer – was made to show
what using the app would look like. The girl you see in the video is programmer
Jeffrey Snijder’s daughter. Of course she already knew the app very well, but she still
enjoyed using it again and again.
The trailer on YouTube.
The trailer was filmed and edited by filmmaker Siebe Meijer and animator Stefan de
Groot. Editing means they put together the best bits of video and then added some
nice music to it.

Trailer Editing the trailer


Publishing information
Timo and the Magical Picture Book was published by Books2download, a company run by
Rian Visser and Bert Vegelien. Animator Stefan de Groot and programmer Jeffrey Snijder set up
a company together called Appsmakers.
On both companies’ websites you can learn more about the app.

www.books2download.nl www.appsmakers.nl



Creating your own animations
A few websites.

Animationish Pivot Stickfigure Scratch Digicel Flipboek Xtranormal
www.toonboom.com/ Animator scratch.mit.edu www.digicelinc.com www.xtranormal.com
products/animationish www.snapfiles.com/
getstickfigure.html

Flipbook
Take an empty notebook and
make a drawing on every page.
Movie on YouTube


Creating an app for iPad, application development of an interactive picture book

Recomendados

Recomendados

Más contenido relacionado

Destacado

Destacado (8)

Similar a Creating an app for iPad, application development of an interactive picture book

Similar a Creating an app for iPad, application development of an interactive picture book (6)

Último

Último (20)

Creating an app for iPad, application development of an interactive picture book