Our feature this week is presented by a children’s author and app developer from the Netherlands. They explain the step-by-step process to create Timo and the Magical Picture Book, while addressing the topic of how interactive features can add depth and extension to the storytelling experience. FYI, Timo will be specially priced for our App Friday promotion on June 24th.
Books2download is a small publishing company started by the Dutch children’s book writer Rian Visser and me, her manager Bert Vegelien. In 2010 we decided to transform one of Rian’s paper picture books into an interactive picture book for iPad. Recently, we also launched the iPhone version in the App Store.
The picture book is about a boy called Timo, who receives a magical picture book from his uncle Nick. Once he opens it, he will be inside the book. His uncle writes that Timo should not shake the book, because then everything will be mixed up. Although the story was written for a paper book, the magical aspect made it perfect for interactive devices like iPad or iPhone. The only material we had, however, were the high resolution scans of the paper book drawings.
Transforming a paper picture book into an interactive picture book
We decided to start the app with movies of Timo getting his present. Then, when he opens the book, all the pages are scripted and children can interact with the story by clicking on figures, starting animations, shaking the iPad or iPhone, and blowing into the microphone. When the book has fallen shut, the animations start again.
Creating the movies
To create the movies, we used the original illustrations from the picture book and retouched them with Photoshop.
Step 1: From each scene we needed the background without the character or the packet. So everything in the foreground was erased so the background could be recaptured.
Step 2: Next, the character had to be cut from the background. The picture below shows when it was partly completed.
Step 3: Then the character was cut up into parts.
Step 4: The animations were created using the program Anime Studio Pro.
The various parts of the character were setup in the animation software with bones to move all the separate parts. The picture below shows the bones in red lines. With these bones the animator could animate Timo. Here is a video that shows how this part of the book was created:
The scripted pages
When Timo tumbles inside the picture book the reader enters the scripted pages. Again we had to use Photoshop to cut the characters from the background. We did a lot of retouch, for example, on the birthday cake. Mother gets it out of the washing machine, so we needed to see the whole cake.
In the scripted pages children can really participate in the story. They can make plates fall from a cupboard, blow up Timo’s belly, draw with balls of knitting yarn and much more.
How we decided on the kind of interactivity?
We found it very important that in the movie portion, children can manually swipe pages, just like in any normal picture book. This makes it possible for parents to pause and ask questions to their children about the story.
In the interactive pages we added a lot of funny animations and activity, but our main purpose was that it had to strengthen the story. They had to be logical and relevant to the storyline.
We also found it important to give the option of having the story read to you, or reading it by yourself.
A PDF presentation on our methodology
When the app was finished, we made a free presentation (pdf) about it. It is mostly visual with only short explanations, which makes it suitable to be shown to large groups. This e-tutorial can be used in classrooms to show children on the interactive whiteboard how an app is made. Depending on the age of the children, the teacher can create his own lesson around it. At the end we give suggestions about easy-to-use programs for children to create their own animations.
We also use this presentation to show to teachers, librarians, media coaches, publishers and colleagues. They often have questions about how much work is involved in creating an interactive app.
Was interested but it is a bit expensive and not a universal app.
What a great app. I love the setup of the app! Great animations and interaction. I don’t find it expensive at all! Great priced for an app with lots of features. Keep up the good work!