Making a groundbreaking animated and interactive children’s storybook
This article is by Ken Jones of Circular Software. Ken is running the Understanding eBooks day on 25th April 2018.
I’ve been involved in making beautiful and interactive fixed layout ebooks since before there was a standard for such things. But trust me, this one is different… It is truly the finest example of interactive children’s story telling I have ever seen, it contains custom movies on every spread, background audio, professional narration and read aloud text highlighting, placed web code, personalisation, interactive animations and puzzles!
I do count myself lucky that I worked in publishing for quite a while before I started developing publishing tools for Circular Software. But even whilst working at a large publishing house I was often frustrated at the pace that things (didn’t) happen. For those who come to publishing tech from outside the industry they cannot believe just how slooooow things are.
I was often frustrated at the pace that things (didn’t) happen in publishing houses.
This is just one reason why I have been very happy to work closely with UK design and animation studio Tapocketa, as Technical Supervisor, to advise and develop their magnificent hand crafted digital book – Galdo’s Gift.
Tapocketa has been set up by artists Eleanor Long & Trevor Young and they come to publishing with a refreshing lack of baggage. With a strong style (beautiful, if slightly silly, hand drawn medieval characters, pencil on paper and hand crafted textures with a 2D puppetry style of animation) they were not wedded to or limited by any particular approach, software tools or even output format. They had a good idea of what they wanted to achieve but their lack of a preconceptions of what couldn’t be done combined with my problem solving tenacity meant that together we found the freedom to do something new.
I advised against making an app
They had been producing short quirky animations for some time and had been encouraged to produce a longer children’s story. Armed with a self written story featuring well formed characters of their own they wanted to combine their unique animations with music, sound effects, recorded speech and interactivity. I advised against making an app. As well as the higher costs of production and ongoing support, books as apps really need to be offered for free to succeed and even then are lost in a world of games.
EPUB3 is built on the modern open standards of the web
I explained that everything they wanted to achieve was already supported in the fixed layout EPUB3 standard, and when I mentioned my experimentation with personalisation and adding other widgets and puzzles they were satisfied that this was the best route to take. As EPUB3 is built on the modern open standards of the web (HTML5, CSS3 and JS) it is possible to add and adapt existing web code that already exists and to custom build additions more easily if necessary.
Unfortunately, there is a big PR job to be done on ebooks. I blame Amazon’s really poor fixed-layout ebook format for the preconception that ebooks suck. The word ebook conjures up a dated image of a grey page full of text on a clunky proprietary ereader. Tapocketa like to refer to Galdo’s Gift as a ‘Boovie’ saying this is not a book, it’s not a movie, it’s a Boovie! – a book in motion.
There is a big PR job to be done on ebooks
I welcomed the recent news that Apple are once again looking to revitalise the image of ebooks. This could be a real boost for beautiful interactive ebooks… I do hope so as I still believe there is true potential for more ebooks as good as Galdo’s Gift.
So, we decided to make the best ebook we could. One that might even redefine the format. There were some restrictions that we had to incorporate and through early tests on the iPad we determined that only one autoplaying and looping video was supported per two page spread. This dictated the format choice of one large animated image on each left hand page, with the narrated story being placed on the right.
Each of the twenty-eight main spreads of the sixty-three page book was to feature a sumptuous handmade animation. Every one is beautifully and humorously illustrated and has a great use of timing to seamlessly loop every four seconds.
Tapocketa began to digitise their hand drawn, hand animated characters and then combine them with similarly created background scenes. The brilliant and open source Blender was used for modelling, rigging (constructing the skeleton ready for animation), tracking (the motion of the video taken as Eleanor moved the paper puppets), lighting and rendering. Affinity Photo was used to prep all the colour and texture applied to the 3D models.
With the story proofread and finalised, the veteran UK actor TV’s Brian Murphy was chosen as the somewhat irreverent narrator ‘King Galdo’ and the experienced Barry Gibson of sQuarish productions did a great job directing the recording session and subsequent editing and balancing. Later in the process Eleanor added suitable subtle sound effects.
Text and page layouts were designed and laid out in Adobe InDesign. As well as the main story, over 250 word definitions were added. Each was to be shown if tapped by the reader and each had a reveal and hide animation applied using in InDesign animations. I wrote some custom scripts to help prepare the 500+ animations and their buttons. Some hand coding of the animation JS was required to connect the hiding of one definition with the revealing of any subsequent one.
Every word of the story was to be highlighted in time with the narration
Every word of the story was to be highlighted in time with the narration using EPUB3 read aloud ‘media overlays’ which I quickly added using CircularFLO.
Where the required animations were too complex Trevor built HTML animations using Tumult Hype – recording Eleanor’s handmade animations as she moved the mouth of the King Galdo character along with the narration. This was then mapped into naturalistic animation movements.
An ‘ambient soundtrack’ is a neat feature available in iBooks which is actually outside of the EPUB standard. We used this to provide an uninterrupted musical background which pleasantly plays under the narration and other sound effects and continues as the reader moves between pages.
This time, it’s personal…
When reading Galdo’s Gift on an iOS device the reader is prompted to enter their name on page three. This name then appears on page five as part of the introduction and later in the story too. You’ll have to buy the book to see where!
This was achieved by using ‘local storage’ and this technique is used again at the back of the book where an option to remove all the word underlines throughout the book is given. These are two simple examples of how the reader making choices can affect both the story and the design. This has some really powerful potential uses for future projects.
As a little extra challenge, numbers are hidden within four of the large animations and the reader is challenged to find and add these numbers to a combination lock on the last spread. Successful entries then unlock further hidden features. The code for the interactive combination lock, along with a final scrolling credits page, was sourced and adapted from the social development site Codepen.
The ambient soundtrack, HTML animations and web code were all added to the main InDesign document using CircularFLO and exported out to a fixed layout EPUB3. From there some extra hand coding was required to combine the narration animations with the read aloud highlighting and to add the personalisation.
InDesign can be overly heavy in its output and further optimisation of some of the code and imagery was needed to get the final working well on older iPads.
The entire EPUB weighs in at 75.1MB
The entire EPUB which includes 63 fully illustrated pages, 29 videos, 32 character animations and over 7 minutes of audio all weighs in at 75.1MB.
The final valid fixed layout EPUB3 can work online and with other niche ebook readers that can handle interactive fixed layout EPUB but in order to reach a mass market the only real option currently is Apple iBooks.
I recommend anyone involved or interested in the future of children’s story telling to get Galdo’s Gift – The Boovie which goes on sale today.
I recommend anyone involved or interested in the future of children’s story telling to get Galdo’s Gift – The Boovie.
I really enjoyed being involved in this project. Thanks Eleanor and Trevor at Tapocketa… you have achieved something to be proud of here. We have learnt a lot during the process and the next one will be so much easier… 😉
See Eleanor and Trevor discuss the project in more detail here Animated Children’s Books : The Process and How it Helps Children Learn
© all images and videos copyright of Eleanor Long & Trevor Young at Tapocketa