creating an app for ipad, application development of an interactive picture book

About creating an app

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

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 createdAge: Recommended for ages 10 and up

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

http://www.rianvisser.nl

http://www.klaas.be



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 thatdevice.

An app can be a game, book orprogram.

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

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


http://www.klaas.be

http://www.youtube.com/watch?v=TSOP7T48paY



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• It has a cover (front, spine, back)

with paper pages inside• It has text and drawings• You flip from one page to the next• You read it yourself

Digital book• You need an electronic device to read it• It has text and drawings• Sometimes you can swipe things on the screen• Sometimes it has animations• Sometimes it has sounds• Sometimes you can make things happen yourself


http://www.klaas.be



The author and illustrator

Klaas Verplancke made the illustrations with the story. He first made sketches and then the real illustrations.

Klaas VerplanckeRian Visser

Rian Visser came up with the Timo story. She has already written a lot of books for children aged 2 to 14.

© P

hoto

Jan

Dar

the


http://www.klaas.be



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 PictureBook is no longer available in print.

A digital book from the App StoreDigital 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

The original book


http://www.klaas.be


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?• View movies• Play sound, music• Play a game• Surf on Internet• Touch the screen to make things

on it move• Swipe the screen to turn pages• Move the iPad about to make things

happen; the iPad kind of ‘senses’ it when you rotate or tilt it

• Blow into the microphone to make things happen

• Read a book• Type a note, story or email• Look at electronic maps and see

where you are (GPS)

The storyTimo gets a picture book from his uncle Nick. Nickwrites: Do not shake the book, that mixes everythingup. Timo shakes the book anyway.

In a paper book, the drawings are fixed, but on the iPad they can move. When you shake the iPad, plates really come falling down and mother starts pouring milk onthe plants.

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


http://www.klaas.be



Animated cartoonsIn 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.

Drawing from the paper book

Images from the animation

Stefan de Groot is an animation artist. He created the moving cartoons for Timo and the Magical Picture Book.

Stefan de Groot

Step 1: We needed a background without Timo or the packet. Everything in the foreground was erased so the background could be recaptured.


http://www.klaas.be



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.


http://www.klaas.be



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.


http://www.klaas.be

http://www.youtube.com/watch?v=Okw2udGuVmE

http://www.youtube.com/watch?v=Okw2udGuVmE



Interactive pagesApart 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.


http://www.klaas.be



AudioReading out loudYou 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


http://www.klaas.be



Sound EffectsThere 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.

The animator made the cow’s mooing sound.

When mother pours milk onto the plants, the actual sound you hear is that of a glass of waterbeing emptied into a bucket.

His baby brother drops his dummy, then burps.We won’t tell you who burped in real life.


http://www.klaas.be



ProgrammingOnce 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.

Jeffrey Snijder

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


http://www.klaas.be



DesignAn ordinary book has a cover which youit can recognize.The app has an icon. In the App Store of Apple such an icon is always square with rounded. Here you see the icon of the free app TimoLite.

The designer chooses the type and size of letters (typography) for the app and decides what pages and buttons should look like and which colours to use. On the page shown below you can choose which language to use by clicking on one of the red boxes.

Icon Digital Book Icon Digital Book


http://www.klaas.be



TrailerWhen 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 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

The trailer on YouTube.


http://www.klaas.be

http://www.youtube.com/watch?v=TSOP7T48paY



Publishing informationTimo and the Magical Picture Book was published by Books2download, a company run byRian 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


http://www.klaas.be

http://www.books2download.nl

http://www.appsmakers.nl

http://www.books2download.nl

http://www.appsmakers.nl



Creating your own animationsA few websites.

Scratchscratch.mit.edu

Animationishwww.toonboom.com/products/animationish

Pivot Stickfigure Animatorwww.snapfiles.com/getstickfigure.html

Xtranormalwww.xtranormal.com

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

Digicel Flipboekwww.digicelinc.com


http://www.klaas.be

http://scratch.mit.edu

http://www.toonboom.com/products/animationish/

http://www.toonboom.com/products/animationish/

http://www.snapfiles.com/get/stickfigure.html

http://www.snapfiles.com/get/stickfigure.html

http://www.xtranormal.com

http://www.youtube.com/watch?v=EGggKaR5lRA

http://www.digicelinc.com/

creating an app for ipad, application development of an interactive picture book

Education

picture book timo

paper book digital book

digital picture book

book orprogram

magicalpicture book

te magical picture book

original booka digital

iwb timo