Interview: Creating Interactive Storybooks with Hanneke & René of Somoiso

Noa & Ladybird

Noa & Ladybird

I’m pleased to share a conversation with Hanneke & René, creators of the Noa series of children’s books built for the iPad with Tumult Hype & Cordova. Hanneke & René, also known as Somoiso, hand paint, illustrate, and animate their stories themselves, and their children help create each character’s sounds for the story.

I asked Hanneke & René to introduce themselves and talk about how they got started creating interactive books:

Hanneke & René: Hanneke is a part-time art director and creates several magazines. René is a part-time composer and sound designer. When we’re not working, we’re both looking after our three children: a two-year-old boy, four-year-old girl, and a ‘big’ five-year-old brother. We started our first interactive book ‘Noa & Ladybird’ in the summer of 2011. We’d just bought a house when the housing-market collapsed in the Netherlands and were almost forced out of our house, so we started making interactive storybooks. We had never done this before, so we first had to do a lot of research. We asked ourselves early on: “Can we do this in native Objective-C/Xcode or can we pull this off in HTML5?” We are big fans of Vladstudio, who produced an interactive storybook “Who stole the moon?” in HTML5. When we saw how powerful HTML5 was, we set out to focus on HTML5 ourselves. There are not many HTML5 web apps out there, so it was obvious we would use Tumult’s Hype and the Cordova-template to embed it in a iOS app.

There were still a few things to tackle: we were using Hype 1 at that time which lacked any audio support. We used a Cordova-plugin that works as a bridge between native objective-c code and simple JavaScript code. While Hanneke was drawing everything by hand, René was learning Hype and JavaScript.

Daniel Morgan: What kinds of things did you learn from real-world testing? How did you adapt the book to work better for kids & smaller hands?

TestingHR: We’ve tested the app with our own children and they had a lots of ideas on what would have to move or make sounds when they touched it. Since the hands of children are smaller, we needed to have smaller buttons and things that grown-ups couldn’t test properly.

DM: I’m interested in how you integrated sound (specifically multi-channel sound). I imagine you had to do some adjustments when iOS7 came out.

HR: Since we used a Cordova plugin (LowLatencyAudio by Andrew Trice) for managing multichannel-sounds, we didn’t need to adjust everything for iOS7. The nice thing about iOS upgrades is that there’s no need to get nervous about keeping the app working. Every major iOS upgrade supports html5 better than before, so with every iOS upgrade, our apps are working more smoothly. We will investigate on moving all audio to Hype, when iOS supports playing audio events not triggered by the user.

Noa’s Stars Initial Screen

DM: I was amazed to learn that Noa & Ladybird is available in Dutch, English, German, French, Spanish and Chinese. How did you structure your document to support multiple languages?

HR: We wanted the users to have a really good experience, and not have to think about settings in the app. We use JavaScript and a Cordova plugin for native settings that detects the language settings of the device. While the language settings are kept in a global variable (JavaScript) the narrator audio and text are loaded dynamically. For every language there’s a text-box, so we just make the right one visible.

DM: What part of making the book was the most fun?

HR: We had the most fun with recording sound-effects and voices for the characters. Our daughter Nima recorded all the sounds that Noa makes and our eldest son Isin (pronounce Ie-sin, not Ai-sin) for Ladybird and Ida (from Noa’s Stars). But the real fun was when a drawing was scanned, Photoshopped and Hyped and placed in the app for the first time. It’s like magic when a drawing comes to life when you touch it!

DM: I like that new verb: Hyped!

Could you share a few quick tips or tricks that made your workflow easier (or more fun)?

HR: ’Noa & Ladybird’ was done in one big Hype document–every single page was in a Hype scene. When we started with ‘Noa’s Stars’ we had to adjust our approach since this story has more pages and pictures that didn’t fit in the iPad’s memory. At first we wanted to cut things up in four or five pages, but this wasn’t working very well with a chapters page. Now every page is a single Hype document, when you want to flip a page, you’re actually moving to another html page. This way we could not use the build-in page transitions, instead we use a fullscreen box that moves over the page and fades from 0 to 100% transparency just before you exit to the next or previous page.

Noa's Stars

Noa’s Stars

DM: What’s coming next?

HR: We’re still not making much money with our storybooks. There was just enough money made with our first book to invest in two actors for ‘Noa’s Stars’. But we really enjoy making these interactive storybooks, so we’re already working on a few other projects. At first there’s Little Witch. Hanneke already made a real book about her and sold a few (that’s an analog book, you know, with paper and all) :) . The story works quite well with children aged 4 and up. We are looking into adapting this story to an iOS book. It could be an iOS book for iBooks, but we think it deserves its own app. And there are three other storyboards we’re working on, one for a new Noa story, one that will make kids laugh (we hope), and one fairy-tale-like story about a little boy and his dreams.

DM: What advice would you give someone starting on a project like this?

HR: Some advice and tips for people who want to create interactive storybooks with Hype:

  1. Start with a good story and storyboard this first so you know what you’re working on.
  2. Keep all the things you can do with animation and interactivity in mind and give these features a useful place in the storyline.
  3. Create your original drawings (by hand or digital) on a very high resolution, better to resize it to smaller sizes than to blow everything up.

DM: Thanks very much! We’re all looking forward to what’s coming next.

download-example

Visit Somoiso.nl to learn more.

You may recognize characters on this page from the ‘Noa’s Stars’ document shared in our gallery. Noa’s Stars follows the Noa & Ladybird storybook.

To play around with one of the pages Hanneke & Rene designed, download this file with Tumult Hype. If you’re new to Hype, we have a 14 day unrestricted trial available here.

 

noa

An animated Star from Noa’s Stars