Be confident and make an eBook #1

David Fox has opened up his wonderful engine that was used in his Be confident eBook, one that sold quite well and topped a couple of charts. Apart from all those technical accomplishments, the content was well presented and helped a lot of teenagers. The code was provided by David, but we had to wait till it was officially released by Ansca, Today, 11th November 2011 (here in Australia) surprisingly; exactly one year after the original comic book code was released by Ansca. That code had issues where the pages that were loaded were not released and memory management was hmmmm, horrible. We can finally dissect the code from David and see what's inside.

Files included

So what are the files that are included in the package. The important ones are
balloons.lua has a series of coordinates for use
coordinates.lua has a series of coordinates for use
cover.lua
frames.lua has a series of coordinates for use
main.lua
reader.lua
sound.lua
ui.lua

The files that have a series of coordinates basically populate a table that is used by the app for displaying the frames, the balloons, etc. There are also the pageNN.lua and the pageNN@2x.lua that define each page. promote.lua is a library that allows for iTunes promotion, basically connects to the iTunes storee and allows for rating the app.

Terminology

What exactly is a Frame, a Panel, a Balloon, etc..?

This is a frame

This is a panel

Thia is Balloon

If you look at the hierarchy, you will see that Each page is a series of panels, Each panel can have a single or multiple frames that allow for zooming onto the important stuff in that panel. Each frame has a balloon, a bubble that holds the text denoting speech/thought.

David has a wonderful pdf document accompanying the source that explains all of these in more detail on to how the frames are to be laid out, etc.

Why this code?

Some of the things to note here are that the images quality used on the images were double the iPad screen resolution, so *if* a retina iPad is created, this will run normal on that. The other reason is that even if you zoom in quite a bit the image will not display strains of pixellation available in apps otherwise. The balloons are added based on the frame concept, so the text is always high-res and sharp.

From a personal experience while I was working on Bruno The Bandit comic book, I realised that because the graphics provided by Ian McDonald were images, I did not have to apply text for the basic reasons, that Ian has rendered text. There was no point in replicating that and the style used by Ian could not be obtained via font embedding. The size of the app was a concern and therefore when the app was executed on different devices most of them crashed and died. So in this case one can use, but many might prefer a pre-rendered image
with the text and all.

given the multitude of files and functions available, it requires a bit more time to trove through the code and try to write a tutorial on that. So we thought that we'd get you started and then in our other follow-up tutorials, we will try to get some code to display the frame, page and/or the speech balloons.

Impressions

David has done a wonderful job here, about a year ago, the functionality available in the framework was limited and in David's words, which I would echo as mine too, everybody was learning, so the code might not be the most elegant, but then it is a year old. In our next tutorial, we shall try to look at the same in pieces and we shall start with the cover. On how the various elements are animated to form the cover and then we will try to look at each of the pages and panels, frames, etc.