When people hear that I have written two children’s book apps, a common response I get is “I have an idea for a children’s book, could you help me turn it into an app?”
And today I’m going to show you exactly that – how to turn your book idea into an iOS or Android app. And the best part is, the way I’m going to show you doesn’t involve writing any code!
This makes this tutorial especially great for non-programmers or designers. Programmers might enjoy this tutorial too, because you can create a pretty feature-rich eBook in this manner far more quickly than you could via code!
In this tutorial, you’ll create a three-page, interactive eBook using Adobe Photoshop, Kwik 2 Photoshop plugin, Audacity, TexturePacker, and CoronaSDK. The book will contain read-to-me narration, text highlighting, physics, animations, and a navigation menu.
You can run this tutorial on either Windows or the Mac, since all of the required tools are cross-platform, however this tutorial was written for the Mac so there may be some slight differences.
You don’t need any prior experience with any of these tools to go through this tutorial, but you do need to be comfortable with learning new things and have a bit of an artistic side! :]
First, download and install all of the software you’ll need for this tutorial (all of which are free or have free trials):
- Adobe Photoshop (CS5+)
- Kwik 2 Photoshop plugin (2.beta9a+)
- Audacity (2.0.2+)
- TexturePacker (3.0.0b18+)
- CoronaSDK (2012.894+)
For Texture Packer, make sure you download the latest beta version, which has support for Kwik 2.
Don’t use “Kwik” – this tutorial specifically references “Kwik 2″! While it is the same company, is compatible etc., the directions given here won’t match.
If you don’t currently have Photoshop or an Adobe ID, you will need to sign up for an Adobe ID to the “Adobe Creative Cloud”; from there you will download an “Adobe Download Manager”, which in turn will download an “Adobe Application Manager”, then FINALLY you will be able to download a trial version of Photoshop (which takes about 45 minutes to install). It’s a lot of hoops to jump through, but it will be worth it! :]
After you install Photoshop, you can use the Adobe Extension manager to install Kwik 2:
It’s true, this tutorial will require a bit of software installation and initial set up of the tools, but once you’re done, you won’t have to go through those steps again. Adobe Flash is a great choice for creating illustrations and animations, but you can use any software you’re comfortable with that is capable of publishing .png files.
After you finish installing all the tools, download the resources for this tutorial. It includes all of the artwork and audio you’ll need for this tutorial.
Applications and tools installed? Sample artwork and audio downloaded? All right, time for some eBook magic! :]
Introducing Kwik 2
Kwik 2 is a plugin for Photoshop that makes it very easy to create interactive eBooks without having to write any code.
Basically, you lay out each page the way you like in Photoshop, and then you can use Kwik 2 to make various elements on the page interactive.
For example, you could convert an arrow into a button that takes you to the next page, or make a sprite animate when you tap it.
You use Photoshop and the Kwik plugin to create your book, and then you tap a button to publish and it creates a Corona SDK project for you. So it can create eBooks for both iOS and Android!
Free trials are available for both of these tools, but the full version of Kwik 2 costs $249.99 and the full version of Corona costs $199/yr (for iOS only).
Preparing the Project
Let’s start by creating a directory structure for your eBook.
In your Documents folder, find the folder named “Kwik”. Create a new folder inside “Kwik” named “eBook”. Unzip and drag the “images” and “audio” folders from the resources for this tutorial into this new eBook folder.
Now that you have the folder hierarchy set up, you need to prepare the animations for your book. The images folder has two subfolders – “Bored” and “Talker” – with separate files for each frame of two different animations you will play in the book. You need to put these into a sprite sheet so that you use them with Kwik 2 and your app – and for this you will use TexturePacker.
Open TexturePacker from your applications. Change Data Format to “Kwik 2 (image sheet)”, Data File to “/Users/~username/Documents/Kwik/eBook/images/Bored/bored.lua” and Texture File to “/Users/~username/Documents/Kwik/eBook/images/Bored/bored.png”.
Now drag all of the .png images from the “Bored” folder into TexturePacker. By doing this, TexturePacker will compile them into a single sprite sheet image, which saves space and memory. Now click “Publish” and File > Close. When prompted, save your TexturePacker file as “Bored.tps” into the Bored folder.
You may get dialogs notifying you about the Pro features available to you if you purchase Kwik 2 — just continue on; for this exercise you don’t need them.
Now create a new TexturePacker file, but this time use the “Talker” folder. Browse to the “Talker” folder and save the file as “talker”.
Drag the five .png images from the Talker folder into TexturePacker and click “Publish”. Once again, save the “Talker.tps” file into the Talker folder and close TexturePacker.
Okay, at this point you have the animations prepared for the book! It’s time to prepare the audio narration files.
The Hills are Alive, with the Sound of… Audio Files :]
The audio folder contains all of the audio files you’ll need for this tutorial, but the next few steps will show you how you can create your own audio files – just in case you don’t like the sound of my voice ;]
If you have a microphone hooked to your computer or if it has a built-in microphone, you can record your voice in Audacity and apply text labels to the recording. If you don’t have a microphone, or don’t want to use your voice, you can use the page2 and page3 .wav and .txt files provided.
Open Audacity and select your microphone from the drop down list. Next, click on the red Record button at the top of the window and speak the following passage into the microphone: “Here is an example of physics that can be utilized. Drag and drop the ball and square.”
When you’re finished speaking, click the yellow Stop button.
Now here is the tricky — yet incredibly important — step that will make your audio ready for the eBook! Click and drag to highlight a portion of the audio wave, trying to only highlight the part of the audio wave that contains the first spoken word. You can press the spacebar to hear a preview of the section you’ve highlighted.
Once you are satisfied with your selection, press Cmd+B to insert a Label Track and type the word “Here” without quotation marks. Repeat this step for every word in the recording: highlight one word at a time, press Cmd+B, and type that word as the label — including the punctuation.
You can View > Zoom In if you’d like the audio wave to be larger to see what you’re highlighting.
If you’re happy with your recording and labeling, save the project into the sound folder as “page2″. You can also use File > Export Labels and save your labels as “page2.txt” in the sound folder to overwrite the file that provided. Then use File > Export and save the audio as “page2″ with the “WAV (Microsoft) signed 16 bit PCM” option.
The section above demonstrated how to set up narration audio files for text highlighting. The exported text file indicates the exact moment each word is spoken. If you take a look at the .txt file that was generated, you’ll see that it just lists the start and end times for each word:
Kwik will use this text file to automatically set up the text highlighting in the eBook for you. You might imagine that you could develop your own app that reads these files as well! :]
For the rest of this tutorial, you can just use the .wav and .txt files provided to save a little bit of effort. At this point you don’t need Audacity anymore, and can close the app.
Setting up ‘Shop
Start up Photoshop. You’ll be greeted with a Kwik 2 welcome screen, which will be similar to the one below depending on which version is available at the time you work on this tutorial.
Note: Don’t see this screen? Just go to Window\Extensions\K2 and it should appear.
Follow the splash screen recommendations and change the Flash settings by clicking the Setup button. You’ll be taken to the Flash Player Help page.Click Edit Locations… > Add location > Browse for folder.
From there, locate your Photoshop folder in your Applications (this tutorial was prepared using Photoshop CS6) and then navigate to Plug-ins > Panels > K2. With the K2 folder highlighted, click Open and make sure “Always allow” is checked.
That’s it for the Flash settings! That was done in a…flash, wasn’t it? :]
Now switch back to Photoshop, and click OK on the dialog if you haven’t already. It will then display the Kwik Settings window with the “General” tab selected. Click browse for your CoronaSDK simulator.
If you’re using a Macintosh, it most likely will be in Applications > CoronaSDK > Corona Simulator. You’ll also need to browse for your default project folder, which in our case will be in Documents > Kwik > eBook. Finally, you might want to set up the checkboxes the way I have here.
In the Export tab, make sure Export images and Export sample icons are checked.
Click OK and you’re done. Enough prep work, you’re probably itching to get this eBook started!
Creating the eBook
Click the New Project button in the Kwik 2 panel. If you don’t see the Kwik panel in Photoshop, go to Window > Extensions > K2.
Name your project “eBook” on an iPad device, leave the orientation in landscape mode, and click Create.
If a popup appears, click OK to dismiss it.
Then open your images folder, which should be found in Documents > Kwik > eBook, and drag page1.png into your Photoshop project. Place the image and adjust it so it fits perfectly onto the canvas (it may fit already, since the image supplied is the correct iPad resolution).
Note: If Photoshop and the Kwik 2 window become unresponsive, it could be that you are stuck in an edit mode in Photoshop. In particular, if you see the size gadgets on your new page and you can’t click anything, hit Return — the size gadgets should go away and you will be able to once again work with your image!
Find the layers panel on the sidebar of Photoshop (you can open it with Windows\Layers if it isn’t there), double-click the layer and rename it “bg”.
Believe it or not, you’ve just created the first page of your eBook! Hit Cmd+S to save your work.
At this point, if you’re like most developers you’re eager to see your work in action :] Click the publish button in the Kwik 2 panel, which will automatically start up CoronaSDK.
Hey, wait a second! CoronaSDK is running, but where’s our book?
In CoronaSDK, click File > Open and browse for Documents > Kwik > eBook > eBook > build > main.lua.
main.lua is the only file CoronaSDK will run in the simulator. If you’re familiar with HTML, think of it as the index.html file that automatically gets read as the default page in web browsers.
Now that your eBook is open, you’ll see the first page of your book running in the simulator. You can change the devices in Corona by navigating to Window > View As, but since you’re making an iPad book, just worry about the iPad view for now.
Sidebar: If you think you recognize LUA from somewhere else — you may be right! If you’ve ever used a World of Warcraft UI enhancement, then you’ve used LUA. There is also the iPad code editor/builder Codea from Australian developer Two Lives Left. If you want to read and understand your main.lua file, see The Programming Language Lua for more resources.
You can leave the simulator running in the background, as each time you publish your book to test it, the simulator will automatically update. Head back to Photoshop; you now are going to change some book settings in Kwik.
Under the Project and Pages tab in the Kwik Toolset, click Project Properties.
Check Export thumbnails, Create navigation panel, and uncheck Enable page swipe. In the configure panel for the navigation panel, set the alpha to 80%, and click Create and then Save.
Okay — time for a little review of the above steps. You just told Kwik to create a navigation panel that will consist of thumbnail images of each page on the top of our book. You then disabled the default page swiping effect to turn pages because your eBook will let users turn the page by tapping on arrow buttons.
When designing an interactive eBook, it’s usually a good idea to use some sort of buttons to navigate through the pages. It can be extremely frustrating for the user if they try to interact with another element of your book, and end up accidentally turning the page!
However, before you create page navigation buttons, first you’ll need to create a new page that you can navigate to! :]
Under the Project and Pages tab, click on the “Add new page” button. Name this page “page2″, uncheck all of the checkboxes, and click OK.
Open your images folder from Documents > Kwik > eBook and drag “bg.png” onto your page2.psd file in Photoshop. Place and move so it fills the screen completely. It should be noted that you can create all the graphics of your book directly in Photoshop without having to import artwork. However, the .png files have been provided with this tutorial in order to save time. Rename the new layer “bg” and save your work.
Are you ready to click Publish and see it in action? Not just yet, eager beaver! At this point, you could click Publish, but there would be no way to see page 2 since you disabled page swiping! Whoops!
When you created a second page earlier, Photoshop created a new page2.psd for you. You want to add a button on page 1 that will go to page 2, so to do this you need to switch back to page1.psd. Click page1.psd on the top toolbar to re-open it.
Next add “readSelf.png” from the Images folder into your page1.psd. You can do this either by dragging it in, or by opening it in Photoshop and copy/pasting it in. Move the image to the bottom left of the page, and resize it a bit.
To move the image, you can use the Photoshop “move” tool (shortcut key ‘V’), and to resize the image you can use Edit\Free Transform (shortcut key ‘Cmd-T’). After you have it in the right spot, rename the layer “readSelf.”
With the “readSelf” layer selected, go to Interactions > Add Button in the Kwik panel.
In the dialog that appears, change the name to “selfBtn”. Then expand the “Common” drop down menu, choose Read to Me, uncheck Enable Read to Me, and click Create. This enables the Read Myself button to go to page2.
Click Publish and check your CoronaSDK simulator — your book should now be updated in the simulator! When you click Read Myself, your book will now go to page 2, which is just a blank blue background for now.
Pause here for a moment and consider what you’ve done so far — you’ve just created a two-page eBook app without writing ANY code at all! In fact, all you’ve really done is just import pictures into Photoshop. True, it took a bit of setup to get here, but you’ll have these tools installed and ready for your next eBook project!
However, that blank blue screen is kind of unnerving, isn’t it? Time to add some user interaction to your eBook!
Physics in Action
Switch back to Photoshop. Open ball.png, ramp.png and square.png and then paste them one-by-one into page2.psd. Rename the layers “ball”, “ramp” and “square” respectively.
In the Kwik panel, go to the Physics tab, then to “Environment Properties”. Keep the default settings as-is, except check “Create virtual walls”, then save.
With the ball layer selected, click “Set Body Properties”. Set the ball as Dynamic, Density 0.3, Friction 0.1, Bounce 0.8 and Circle Shape then save.
Click “Publish”, and switch back to the CoronoaSDK simulator. Click “Read Myself” and watch your ball bounce around on the page.
Holy cow — you’ve just added a complex physics system to our book and you STILL haven’t written a single line of code! That’s pretty cool!
However, the square is stuck floating in mid-air, you can’t move the ball and it doesn’t interact with the ramp. Hmm, that’s not too interactive, is it? Time to fix that! :]
Back in Photoshop, select the square layer and set body properties the same way you did for the ball. You can experiment with different density, friction and bounce numbers, but for now use Density 0.5, Friction 0.3, and Bounce 0.9. Also set it to Dynamic and Rectangular.
Before you hit “Publish” and test out your newly added physics, add something a bit more complex to the ramp layer. If you don’t already have your Paths panel open, go to Window > Paths. Start a new path and use the Pen Tool to make three points around the ramp to trace the triangular shape. When you’ve connected the points together, rename the path layer “rampPath”.
Now select the “ramp” layer and open your “Set Body Properties” window from the Kwik panel again. This time set it as Static, Density 1.0, Friction 0.3, Bounce 0.2, Polygon Shape, and Use Path: rampPath.
Save your PSD file and click Publish in the Kwik panel. Now when you go to page 2 of your book, you’ll see the ball and square both bounce off each other, as well as bouncing off the ramp!
Watching objects bounce off each other is fun, but it’d be a lot more fun for the user if they got to move those objects around!
Switch back to Photoshop and select the ball layer again. In the Kwik panel, go to Interactions > Drag Object. Name it “ballBtn” and click Create.
In the Kwik panel, navigate to Physics > Set force properties. Set the Impulse for Auto, Curved trajectory and 2.75 X and Y Force.
Now repeat these two steps for the square. Select the square layer, select Interactions > Drag object, name it “squareBtn”, and click Create. Then navigate to Physics > Set Force Properties and apply the same force properties for the square layer as well.
Now Publish your project, and check out page 2! You’re now able to drag and drop both the ball and square around the screen, and they’ll bounce off the ramp — STILL without a single line of code!
Read to Me!
Okay, adding physics and interactions is a nice feature to have in your interactive eBook, but you’re missing a key component of any book…words!
Switch back to page2.psd in Photoshop, select the text tool, and type the sentences “Here is an example of physics that can be utilized. Drag and drop the ball and square.” Highlight all of the text and change the color to white, change the font to Arial and rename the text layer to “text”.
So your book now has words in it, but this is an interactive eBook — you can make it a bit more exciting than that! In the Kwik panel, go to Project and Pages > Add Audio. Browse for “page2.wav” in the “sound” folder of your project, set it as the Read Me file, disable Play when page starts, Loop 1 time and use channel 1.
Now select the “text” layer. In the Kwik panel, go to Layers and Replacements > Sync audio with text replacement. Use native system font, 10 pixel padding, Use page Read Me audio, click “Import from Audacity” and select page2.txt, and change the text highlighting color to black.
So now your book has the capability of reading the story to the reader — but you need to tell it when that should happen!
In Photoshop, open “readMe.png” from the images folder, paste it into page1.psd and rename the layer readMe. Follow the same steps that you did for the readSelf button (Interactions > Add Button), except this time leave the Enable Read to Me box checked – use “readMeBtn” for the name.
Publish and have a look at your eBook! Now, when you click the “Read to Me” button, the narration you recorded way back at the beginning of this tutorial will play, and the text will highlight accordingly. You can click the speaker icon to hear the narration play again.
Not bad for just a few mouse clicks, eh? :]
Adding Page Navigation
Now you need to need to create a way to get to page 3 from page 2. In Photoshop, open “arrow.png” from the images folder and paste it into page2.psd. Rename the layer “kwkBack”, duplicate the layer, rename the duplicated layer “kwkNext”, and using the free transform tool (command-T), make the duplicated arrow layer point to the right.
If you have trouble getting the transform to apply to the right layer, you could transform the arrow, then copy and paste it in as a right-pointing arrow rather than transforming in place.
The reason you’ve named the layers using “kwk” is because they’re shared elements that will be used on multiple pages. This will reduce the file size when the book is published. Now with the “kwkBack” layer selected, in the Kwik panel go to Interactions > Add Button. Name it “backBtn”, choose “Go to Page” in the “Common” drop down menu, choose Move from left, 0 seconds, and Previous (auto).
Do the same steps with the “kwkNext” layer highlighted except name it “nextBtn” and choose Move from right and Next (auto).
Publish and test your project! Now when you’re on page 2, you’ll be able to navigate back to page 1. However, you won’t be able to go to page 3 because you haven’t created it yet!
The Third Time’s a Charm
Time to create page 3. In the Photoshop Kwik panel, go to Project and Pages > Add new page and name it “page3″ and uncheck all of the checkboxes.
Copy and paste the “bg” layer from page2.psd into page3.psd and name the layer “bg”. Using the text tool, paste in this sentence: “Here are sprites. One is always moving, the other one will move when the user taps on it. Both play sound when tapped.”
Highlight all of the text, change the font to Arial and color to white. Rename the text layer “text.”
In the Kwik panel, just as you did for page 2, go to Project and Pages > Add Audio. Browse for “page3.wav” in the “sound” folder of your project, set it as the Read Me file, disable Play when page starts, Loop 1 time and use channel 1.
Select the “text” layer and in the Kwik panel, go to Layers and Replacements > Sync audio with text replacement. Use native system font, 10 pixel padding, Use page Read Me audio, import page3.txt from Audacity and change the text highlighting color to black.
Publish your project and check it out! If you select “Read to Me”, page 2 and 3 should have their narration read aloud with text highlighting.
However, when you get to page 3 — you’re stuck! You need some way to navigate back through previous pages.
Switch back to Photoshop. Since this will be the last page of your book, you’ll only need an instance of “kwkBack”. Find that layer in page2.psd, right click it, and choose “Duplicate layer.” Select page3.psd as the destination, and click OK.
In page3.psd, select the “kwkBack” layer and in the Kwik panel go to Interactions > Add Button. Name it “backBtn” , choose “Go to Page” in the “Common” drop down menu, choose Move from left, 0 seconds, and Previous (auto). This should look very familiar to page 2.
You have narrated text with highlighting along with interactive elements in your eBook — but this book needs to be a little more…animated! :]
Lights, Camera, Action!
This section will show you how to create two different types of animations. One will animate in a loop and play a sound when the user taps on it. The other one will be static until the user taps on it; at that point it will animate and play a sound.
In Photoshop, open “bored00001.png” found in Documents > Kwik > eBook > eBook > images > Bored. Paste it into page3.psd and rename the layer “bored”. Do the same with “talker0001.png” from Documents > Kwik > eBook > eBook > images > Talker except name the layer “talker”.
Now import the sounds for each of your characters. In the Kwik panel, go to Project and Pages > Add Audio, then browse for “blah.wav” in the sound folder. Make it a short file, disable play when page starts and loop 1 time.
Save it, and perform the same steps with the same settings for “yawn.wav”. Just make sure all of your sounds use different channels — it doesn’t matter which sound is tied to which channel, as long as they’re all different.
Now get these guys moving and talking!
Select the “bored” layer, and in the Kwik panel, go to Layers and Replacements > Sprite sheet replacement. Browse for the bored.png and bored.lua files you created in TexturePacker in the “images” folder. The first text area should hold the .png, and the second text area should hold the .lua file.
Also set the start frame for 1, frame count at 6, loop 1 time, play for 1 second and pause at frame 1.
Turn the bored guy into a button by going to Interactions > Add Button in the Kwik panel. Name the button “boredBtn”, choose “Play Audio” from the Audio drop down menu and choose “yawn”. Then go to the Sprites drop down menu and choose “Play Sprite” and select “bored”. Now when you tap on the bored guy, he’ll animate and play a sound.
Publish now to try it out, and see how boring he is in action! :]
He Talks as Much as my Wife!
You’ll notice the talking guy isn’t doing anything though, so set him up in an infinite animation loop.
Select the “talker” layer and go to Layers and Replacements > Sprite sheet replacement. Browse for the talker.png and talker.lua files you created in TexturePacker in the “images” folder. Set the start frame for 1, frame count at 5, loop forever, play for 3 seconds and reverse after last frame.
Since the talker guy is already animated, you’ll just need to make him talk when he is tapped. Go to Interactions > Add Button in the Kwik panel. Name your button “talkBtn”, choose “Play Audio” from the Audio drop down menu and choose “blah”.
Publish and test your book! You’ll see one guy talking, and he plays a sound when tapped. When the other guy is tapped, he animates and plays a sound.
Okay! There’s only 2 more steps: adding a navigation button and optimizing your background images to reduce file size.
In Photoshop, open “nav.png” from the “images” folder and paste it into page1.psd. Rename the layer “kwkNav” and make it a button (Interactions > Add button). Name it “navBtn” and from the Common drop down menu, select Show/Hide Navigation. Add this button and follow those same steps on pages 2 and 3.
Publish and test your book — now you should have a working navigation menu that you can toggle with the Navigation button.
This final step is optional, but can drastically reduce your file size, especially if you develop a full-length book. In page1.psd, select the “bg” layer, go to Layers and Replacements > Layer Properties and choose Export image as .jpg. The default is 6, but even at 8 you’ll reduce the file size substantially without noticing notice a loss in quality. You can do this to every “bg” layer on all of the pages.
Where To Go From Here?
Congratulations! You now have an interactive eBook app that you created without writing one single line of code! By simply selecting layers in Photoshop and selecting a series of checkboxes, you were able to integrate a physics system, animations, and sounds into an application.
From here, the sky is the limit; you can experiment with all the other features Kwik has to offer and see what you can create! For more info, check out the official Kwik 2 documentation.
Here is the completed project from this tutorial. You can open the main.lua file in CoronaSDK to view it. If you want to open it in Kwik, you will need to unzip the folder, link to it in the Kwik settings window under Project Folder Location, then in the Kwik panel, choose Open Project > eBook > eBook > eBook.kwk.
I hope this tutorial helps you on your journey to create the ultimate interactive book! Drop me a line if you create anything cool, and if you have any questions or comments please join the forum discussion below!