Hurrah for the Mud Monster! And some thoughts on picture book apps

In my last blog post I wrote about my latest children's picture book app, "The Mud Monster". To my great delight it was recently listed in Kirkus' best book apps of 2013 ('A story that is as happy as a clam at high tide'). I am tickled pink and still blushing with pride!

what will our 3 friends find in this giant sea shell?

Looking back at The Mud Monster, it makes me think about picture book apps in general. I was recently interviewed for BBC Wiltshire regarding picture book apps and one question that keeps on following me, is whether book apps are good for children and would it give them the same experience as a printed book?

I think there will always be a place for printed picture books. They are beautiful, a real joy and I am an avid collector. They make lovely gifts and are a treasure to have. But I also think there is a valid place for picture book apps. Most of all because it is about the story. Whether this story is on an iPad or other tablet or on paper, does not matter so much. What matters that it is a good story. 

Then there are the illustrations, how do they enhance the story, what delights do they bring? I think the same thing applies there, it does not matter whether they are on a printed page, or whether they are on a tablet, what matters is that they are good, enjoyable illustrations that can be explored by the children and parents together. What is important about a picture book or app is that it engages children and that parents and children can interact with it and enjoy it.

In all my picture book apps (and I think in most book apps) there is the option to switch of the reading voice so that parent can read the story to their children, or so the children can read the stories themselves. The same way they can from a printed book.
Any music and sounds can be switched off (or on) through a touch on the screen. You can go backward and forward or jump around in the story as much as you wish. All the same as in a printed book.

But the nice thing about a picture book app is that you can do more! You can touch the illustrations and things will happen! How exciting is that! You can blow in your tablet to create storms (as in Finn's Paper Hat), you can shake your iPad and a mouse will swing from a tree (as in Fierce Grey Mouse), and you can make plenty of bubbles when 3 animal friends are having a bath in "The Mud Monster". And to help early readers learn reading, there is word highlighting, where the words enlarge and highlight along with the reading voice. Again a function that can be switched off and on as you please.

will you make some more bubbles for our 3 friends?

Last, but not least, there is also the matter of price. Often a picture book app is less than a quarter (or even a tenth) of the price of a printed book. An opportunity to get many, many stories and hours of fun reading or being read to!

our 3 friends from The Mud Monster on their way to buy a book? Or will they find a boat and roam the sea and go fishing instead?

Now of course I am biased in my views, as 3 of my children's picture books have been published by Tizio BV as interactive picture book apps. What do you think about this topic? I'm really curious what your thoughts are around picture books and picture book apps.

Fierce Grey Mouse; how a picture book became a fully interactive App!

Finally the promised blog post about Fierce Grey Mouse and how he became an App for iPad, iPod and iPhone. He is almost ready for itunes now and the geniuses at Tizio are working on their last bits of magic to finish him so he can be sent off into the weird and wonderful world of Apple Apps. 

Creating the animations and amending the art work to fit an App rather than a book was a challenge and a lot of work, but also a lot of fun! So how did it all start?


The first thing we did was brainstorm ideas for each page. What can be done with each picture in the book? Can we animate pieces? And what should it do if it is animated? Does it need sounds? Is it suitable for a mini-game? When we had a full list ready, we also came up with some ideas of extra things we could offer. We decided to go for a memory game at 2 levels (an open and a closed one) and 2 colouring in pictures that you can save. 


So then we had a long list of ideas and a paper based picture book. Hmmmm, yes.......


We started with separating Little Grey Mouse and his friends Edie and Kay out from the background and fix those backgrounds. This was necessary, so we could animate them without there being white holes in the background. Sounds strange? Well, because the pictures were hand-painted and scanned in, they ended up as bitmaps. Therefore, if for example the mouse would move his arm up, in the space that his arm was before, you would find a white gap in the background. And indeed on the mouse himself! This is what that looks like:

before moving the arm

after moving Little Grey Mouse's arm

The lucky thing is that Photoshop CS5 has a wonderful new function, you can fill an area "content aware". To do this you select the area that needs filling, then choose edit > fill > content aware > ok. This function saved us a lot of time!

After the backgrounds were fixed time had come to animate the mouse and his friends. I started with a little hand drawn animation test to see how I could make him move.

Now, that was not the cleverest way of doing things as it would mean drawing and painting every single bit of movement and all the movements in between. Eg. if he would raise his arm, it would take 4 or 5 different drawings and paintings that needed to be exactly the same apart from the position of the arm. Which is virtually impossible. A cleverer way had to be thought of. The solution came through Adobe Photoshop and Flash.

First I dissected each mouse in photoshop (don't worry, no cartoon or real animals were hurt for the making of Fierce Grey Mouse). And fixed his bits that got missing in the dissecting process:

1 dissected 2 all fixed!

Then I imported all Little Grey Mouse's body parts into Flash, each limb on a separate layer, so that I could move each body part individually. The nice thing about Flash is that you do not have to fill in all the bits in between one state and the next. It does that for you through "tweening". Next to making it a lot easier and faster to do, it also makes it really smooth and even.

To check that I animated it all correctly I could export it as a .swf and see the animation. However, because Apple does not allow Flash, I had to export the Flash file into a series of .png's that the wizards at Tizio could use for recreating the animations for the App in the right format. You end up with series and series of this kind of thing (12 pictures to make an arm go down and a foot go forward):

But we were still not completely there yet! Because we wanted to give the same cut out collage feel to the app as the picture book has, we needed to put the white edge back around each mouse.

And put him back in his home, the right way round.

Now that the mouse and all his friends were animated, the story needed to be read. We thought it would be nice to have the story read in a variety of local English accents. We were lucky to find some lovely British English (a mother and child team), American English, Australian English, Irish English and New Zealand English readers (Thank you Jane, Daisy, Victor, Martin, Jim and Mark!). And we translated the story in Dutch (thank you Sieneke, Tine and Marga!) and Spanish (thank you Lenore!). We found some lovely readers for those languages too (thank you Tine and Lenore!). 

Then Pascal from Tizio suggested that the animals needed their own noises too and could I possibly make some animal noises...... Well, an afternoon practising my best mouse, duck, pig, squirrel, rabbit, chicken and hedgehog noises in between giggling fits, resulted in sounds being there for each little animation. I am especially proud of my chicken noise (only the brave should click that link ; 0)  I have to admit I was very happy that the neighbours were out when I practised and recorded all those sounds! I know the dogs both had worried looks on their faces that day...


With all the animations done, there were a few other things that needed doing. Menu and Options and Games pages needed to be designed and an icon created. Colouring in pictures needed drawing and the memory game needed cards. We designed all the menu and option pages in the same style as the mouse story. Also we used the characters from the story in the memory game and the colouring pages.This way we kept a consistent style throughout the app.

back side of the memory game

you cannot cheat with this picture ; 0) - the memory game is shuffled each time you play it!

With all these ingredients: the designs, the drawings, the animations, all languages read and animal noises made, the guys at Tizio are creating true magic. They are finishing the final bits and pieces for the app at the moment and it should be available in the itunes store very soon. Of course I will let you know when it is available to download, so that you can find out what happens when Little Grey Mouse decides to be FIERCE for a day!

In the mean time, if there is anything you would like to know about Fierce Grey Mouse, you can leave a comment in the comment box and I'll tell you all about it!

Till the next blog!