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!