Blog → "Who Stole The Moon?" — the interactive book for iPad written in... HTML?!
Hello! We are Windy Press, a team of enthusiasts, united by a common idea — creating interactive e-books of the highest quality for children and their parents. Since the company was founded in 2010, our principles have been… Bla-bla-bla! This is a blog post, not a press-release!
In the beginning was the Word
Or rather, a small story, written several years ago by Helen Stratton-Would from the UK for her 2-year-old son, Bertie. Far far away from her, lived a young designer named Vlad Gerasimov, and his job was designing websites, computer graphics, icons, and illustration. He had no idea what an adventure was about to come into his life!
Once upon a time, I got an email from a woman in the UK who wrote, "Vlad, you draw beautiful pictures! How about illustrating a story I wrote?" And what a coincidence - I had been wanting to try my hand at illustrating a book for a while, so I figured it would be a good start.
So it began. Then, it continued. Then… Long story short, after a while, a book was illustrated, printed and put for sale!
Hey, are we talking about the iPad book?
At the same time, on the other side of the world, in Chicago, lives Yuri Mezenko, a writer who grinds his teeth on the “traditional” book publishing business. We got to know each other several years ago, when I helped him with the website for a wonderful book illustrated by Vladislav Yerko, "The Snow Queen" (www.snowqueen.us), and we found that illustrated books were a shared common interest of ours.
Like many people at this time, we were impressed by the first famous interactive book for the iPad — “Alice in Wonderland” by Atomic Antelope. We found — another coincidence! — that we were both looking for a way to try our hands at creating interactive books. Nice! I had material — the fresh illustrations for “Who Stole The Moon?”. Yuri had a deep knowledge in the world of publishing, and the contacts necessary to start a business. Well, we thought, it won’t be easy but it sure is worth it!
So, it began. Then… you see what I mean :-)
Messy details
Everyone who decides to create an interactive book has to make a lot of important decisions. The main one of them being, in short — HOW?! The most common approach is to target only the iOS audience, and develop the app using Objective-C language, using Cocos-2D framework. In our team of two brave men, I was responsible for all the technical decisions. And unfortunately, my own developing skills are limited to web standards - HTML / CSS /Javascript. I honestly bought some books and started learning Objective-C and Cocos-2D, but I quickly discovered that we were not really meant for one another. I called for support, and my developer friend volunteered to help — Grig Uskov from St. Petersburg. A third member in our team! Alas, it turned out that he was not meant for Cocos-2D either!
If you keep an eye on modern trends in game developments, you have probably seen things like “HTML5 and Mobile are the Future of Gaming” or “HTML5 Rocks!”. Products like PhoneGap or Appcelerator are tempting you to use your existing HTML skills to produce native mobile apps. For many reasons, this direction was most appealing to me. Of course I also considered many other options (for example, Ansca Corona based on Lua language). And after many discussions, we decided we’d go with HTML!
We started to develop our own “framework” for interactive e-books. It's based on PhoneGap, the languages are HTML and Javascript, and we used a lot of Webkit's specific features. In the end, was it the right decision? Well no one would know what would've happened otherwise! I believe it was the right way to go, because chances are if we had gone the traditional way, the project would never have taken off at all.
As you can see, we were not looking for the easiest route! Another complication was that everyone in the team had a day job, and only worked on the e-book project in their spare time. It was clear we’d need another developer, besides just myself. We searched, searched again, and then we found — Alex Polischuk from Kiev! Our fourth team member. By the way, as the project evolved, Yuri used his magical skills of communication to attract world famous childen’s singer, Susie Tallman, as well as a composer, lyricist, sound director, animators, translators — too many to count! (Actually, some of them are indeed counted on our "Team page"). If you look at the “Credits” page of our book, there are almost 50 people there!
Fun fact: our “core” four has never met offline. All communication goes through Skype and email. We live in interesting times!
More messy details
Making animations with HTML is quite fascinating and certainly not boring. So many challenges to solve! Here is only one example.
When you click on an image on a webpage, the click event does not consider whether the clicked part of the image is transparent or not. This is fine from a technical point of view, but we could not leave it as is. For example, this moon image is mostly transparent, and when you click a star inside the moon shape, you expect the star to react, not the moon.
Don’t panic! We've replaced all img HTML elements with a canvas and wrote a universal click function that finds the topmost object with non-transparent pixels located where the click happened. (Because with the canvas, we can get pixel data from an image).
But what if a clicked element is inside another element (which is inside another element)? And one of them (or all of them) are scaled, rotated, skewed, moved? Don’t panic! We needed to calculate the “absolute” location of the clicked pixel. To do that, I had to forget all I knew about Photoshop, take some math books and learn transformation matrices. It was, well, challenging. But you never forget the moment when the function suddenly works the way you want it to!
Curiouser and curiouser!
Suddenly, we found that we had not only a book, but 8 original songs! (just kidding - it was not sudden, of course. Rather, our friends, composer Alina Krasowskaya and lyricist Anastasiya Mezenko worked really hard!) What can be better than book characters who sing? Now, to turn melodies and poems into songs, we needed someone to actually perform and arrange them. We searched, searched again, and then we found a wonderful singer, Susie Tallman, and her colleague Richard Pleasance from Australia, who arranged all of the songs, and also performed a couple of them.
If you have hired a programmer before, but never hired a musician — well I can tell you the experience is completely different! Musicians are like magicians. You give them directions and then wait for the magic to happen. Luckily, in our case, it indeed happened. Susie and Richard never gave us reason to be dissapointed. Judging songs is usually a matter of taste, but we appreciate having songs like ours.
It was also clear that the books would need to be translated. In what languages? As many as we can do, we thought. We ended up with fifteen. While we are here, I’d like to sincerely thank all the translators and narrators. Many of them volunteered simply because they liked what we did! Special thanks to Scott Ross — his magical voice is used in the English version of the book, for all the animals and promotional videos.
Murphy laws in action
When you start working on something completely new and unfamiliar, you need to be aware of these Murphy laws:
- Nothing is as easy as it looks.
- Everything takes longer than you think.
We proved these laws many times :-) During the project, my daugther Alice was born! It did not help my productivity at work, of course. But seeing how she laughs in happiness when Bertie waves his hand at her, and she waves in return — it is worth all the efforts!
P.S.
And finally, this happened. All the texts have been translated and narrated. All the images are sliced, combined into pages and animated. All the songs were performed, edited, installed into the book. All the mini-games have been designed and developed. All the beta testers sent their reports. All the bugs have been fixed, new bugs found and fixed, and again and again. All the sound effects are in their places. Promotional videos are mixed. The Windy Press website has been designed and filled with content.
We take a deep breath - and send the app for release!
As I type this, the app is awaiting approval on the App Store. Time for me to relax for an hour or two, drink another coffee — and back to work! My team is waiting for me — now including authors working in Hollywood! It is time for our second book — the first ever interactive e-musical, “Puss in Boots”! More than twenty original songs! Unique illustrations by outstanding artist Anton Lomaev!
But this will be another story…