* with illustrations and sound effects by Leonardo Amora, a Brazilian artist working on his first Kwik storybook.
So, you’re a master of Photoshop and have a great idea for an iPad storybook. Like most, you’re probably not a developer, and lack the budget to hire someone to develop your idea. What are your chances of turning your book idea into a reality?
In this article, I will cover how to create a 2-page storybook, directly from your Photoshop compositions, without ANY code. The story will include buttons, animations, audio and a “read to me” feature. You can see the end results here:
You can download the project files here. Don’t forget to install the latest Kwik 2. After unzipping the file, open the CoverA.psd file in Photoshop.
Besides Photoshop CS5 or CS6, you will need to install Kwik, a Photoshop plugin from Kwiksher (www.kwiksher.com). Kwik allows graphic designers, illustrators and any creative folks, to build rich, interactive apps in Photoshop for iOS and Android. Best of all, Kwik allows you to create interactive content without the need for code. Kwik is free for projects with up to 6 pages. Just download and install Kwik via Adobe Extension Manager.
In order to preview your creations, you will need to download Corona SDK (http://www.coronalabs.com/products/corona-sdk/), a popular cross-platform development tool that “reads” Kwik projects and previews your work in a really cool Simulator. Corona SDK is offered as a free and unlimited trial and you’ll only need to pay for a subscription once you’re ready to publish your work to an app market. With Corona SDK, you can publish your final project to Apple, Google, Amazon and Nook platforms. After downloading Corona, follow the installation instructions.
After installing Kwik, open Photoshop. If the plugin window does not show up automatically, make it visible by going to Menu Window->Extensions->Kwik 2.
The Kwik 2 panel looks like this when there is no project opened:
The Toolset Bar offers three icons (from left to right). They are:
- Create a new project (which we are going to use in this tutorial);
- Open a project;
- Open last project;
Before working on a new project, let’s take a quick look at the Status Bar. The three icons (from left to right) are:
- Open Settings window;
- Export images: when enabled, Kwik will export images from each document layer;
- Export current page only: when enabled, it exports content just for the current page, instead of the entire project;
Lets click the Settings button and configure our experience. The following window opens:
Although there are several options, the only ones that matter at this moment are the Location of Corona Simulator and the Location of Kwik’s project folders. You can set both using the Browse buttons and pointing to the correct paths. Both are important: the first will open the Simulator when you publish your project. The second will save your project contents in the correct place.
Time for the “fun part”. If you haven’t opened the file coverA.psd, do it now. It contains the first page of our project.
Click the New Project button in the Toolset Bar. Once the project window opens, enter the following:
We are naming our project Afraid, setting it to iPad as main device, landscape orientation, using the current opened document as our first page content. Once you hit Create, Kwik will set the dimensions and resolution according the selected device. You don’t need to worry about device sizes and so forth.
Now, you will see that the panel changed to something similar to it:
There are several new options in the Toolset Bar. Also, you see the project info (name and device), and the middle of the panel now shows the pages of the project (in this case, just CoverA, as our project has only one page at the moment).
As it is impossible to cover all the features in this article, I recommend you check the Learn Kwik 2 page, from Kwiksher’s website. In this piece, we will focus only on a handful of features.
To create some suspense to our storybook, let’s add a background sound. In the first Toolset (called Project and Pages), select the Add Audio button (the second icon in the second line). Then, enter the following:
Browse and point to the terror.mp3 file (this comes with the tutorial files), select the Short file and Play when page starts checkboxes. In the Controls box, select Loop forever.
Previewing your progress
Excited to see what we have accomplished thus far? Check if you have the Export images option enabled (the icon must be a bright blue) in the Status Bar (if not, simply click it), then press the big Publish button. You will promptly see Kwik creating all the images and the code for you. When it’s finished, the following alert will appear:
Once you click OK , the Corona Simulator will open:
From there, go to File->Open-> then point to your project folder. There, you will see a build folder (this is the folder containing all code, audio and images for publishing). Open it and Corona will load your storybook to the Simulator. If you are not seeing the iPad as the simulated device, go to Window->View As and select iPad. You just published your first page with Kwik 2 and the background sound is like already playing.
Storybooks must have animations that support the storytelling or simply bring fun to the reader. In this page, we are going to animate the title and the two buttons. Let’s start with the title.
Select the title layer, and then go to Toolset Animations (the rocket icon). There, click the first action, called Linear Animation. The following window will open:
As the name states, linear animations allow objects to move from point A (start) to point B (end). Between the points, you can set duration of the animation, delay and lots of other effects, like easing, for example.
Kwik always uses the current position of the layer as the starting point. In our case, all we need to set is the end position (you can use the sliders or the text fields to enter it), which is the actual position. Then we set the animation duration to 3 seconds, the loop to 1 and the easing to outBounce (it will bounce a little). Create the animation then publish again. Tip: As you have exported all images already, you don’t need to re-export them again. Simply disable the Export images button in the Status Bar. Your publishing process will be much faster.
You will see that no animation happened. The reason is because both the start and end points are the same. Let’s fix it. Back in Photoshop, move the layer Title content (Y axis) to position -150. You can do that by simply dragging the layer content to the new position or apply a Free Transform (Ctrl+T if you are using Windows, Command+T if you are using a Mac) and enter the numbers directly in the Y field).
Publish the project again and you will see the animated title.
Now that you learned how to animate, let’s make the buttons appear after the title animates.
When the first page starts, we do not want to see the buttons. They must fade from transparent to visible only after the title animates. Let’s select layer readToMe. Go to Toolbox Project and Pages (the first icon) and select the Hide layer or group. You will see the following window:
It will hide the button. Do the same for the readMyself grouped layer.
Let’s animate the buttons to make them visible. Select one of the buttons and click the Linear Animation again:
In this scenario, we are setting a delay of 2 seconds (after the page loads) for a transition from full transparent (alpha 0) to fully visible (alpha 100) during 2 seconds. Also, the loop is just once. Publish again and you will see the button fades after 2 seconds.
Do the same for the other layer.
It is common, in storybook apps, to have options allowing users to read the story by themselves, or have the read to me option. This is especially popular for children who enjoy the narrated audio. Our story will offer this too.
Back in Photoshop, let’s create the two buttons. Select grouped layer readMyself then go to Toolset Interactions (the third big Arrow icon). Click the first icon, Add button. It will open the following window:
Rename the button to but_readMyself, leave all other default and over state with their defaults. In the Properties/Interactions list, select Read to Me. Another window will open:
For the readMyself button (user will read the content without narration playing in the back), we need to disable the Enable Read to Me checkbox. As we want the user to start reading the book after clicking the button, let’s keep the Go to NEXT page automatically option checked.
Click Create in both windows and you will see the button created in the panel. If you cannot see it, it is probably because you are seeing your page list (instead of Components list). To switch it to Components, click the second small icon below the Publish button.
Do the same process for the readToMe grouped layer but now, check the Enable Read to Me checkbox.
Creating the second page
Let’s open file Page01A.psd (it contains our second page). Then, go to Toolset Project and Pages and click the Add new page button (first button in the first row, below the toolset). Enter the following:
Create a name for the page and accept the current opened document as the content of the new page.
We need two audio files in Page 2. The first one, called lights.mp3 contains the narration of the page sentence. Lets add it the same way we did before: Toolset Project and Pages->Add audio:
The only settings we need are to enable the Read Me file checkbox and set the audio as Short file. Save it and Publish the project again (don’t forget to enable Export images in the Status bar).
In the Simulator, click the Read to Me button. It will change pages and automatically start the narration (read to me file) in page2. Notice that we can navigate between pages by swiping them.
Also, repeat the process for the audio they.mp3 but now, disable all checkboxes, setting only the Loop to 1 and enabling the Short file checkbox. This audio will be used when we create our switch button.
Working with variables
Variables are the most precious feature for a developer. They can hold and/or set values that can be used for many things, like conditional execution. In our project, we are going to need one variable to inform us which audio is playing.
In order to create a variable, go to Toolset Project and Pages then select Create variable (the big X icon in the last line). Enter the following:
We are creating a variable called aPlaying, setting its initial value to 0. A local variable will only exist in the current page.
Our next step is to set the Switch layer to act as a button. Notice that this layer Fill is set to 0%. Tip: This is a nice trick to create transparent buttons using Kwik:
When our storybook user clicks the switch button, both layers Text01 and LightOn will hide, allowing the layers Text02 and LightOff to show up. Also, audios they.mp3 and lights.mp3 will play accordingly, after the transition.
With layer Switch selected, create a button (Toolset Interactions->Add button). This button will have a few actions (our past buttons only had one action each). When completed, its window will look like this:
After naming the button, let’s create the first action. Go to Interactions, Common and select Show/Hide. When the window opens, enter the following:
We are asking to Hide layer LightOn, as faster as possible (duration 0, delay 0) but also, enabling it to show again if it is hidden, or vice-versa, when we checked the Toggle show/hide option. In sum, if the layer is visible and user presses the switch button, the layer will hide. If the layer is hidden, it will show. Create the interaction.
Do exactly the same for layer Text01. After pressing Create, your button Actions list will show two actions.
When layers Text01 and LightOn are transparent, users will be able to see layers Text02 and LightOff.
Working with conditions
Besides variables, conditions (IF/THEN/ELSE) are one of the most useful resources available for developers. Kwik allow you to use them without coding. Let’s learn how.
As we have different text and, consequently, different audio files for each one of them, in each image, we must establish a way to play the correct audio depending on the image being shown. This is a perfect case for the IF condition.
If it is not opened, go to the Interactions and open the Condition category. Select the IF option. When the window opens, enter the following:
Remember we created a variable to register which audio was playing? It’s time to use it. In our example here we are telling our storybook “IF variable aPlaying is equal 0” the next interactions will play, until it finds an ELSE or END statement.
Now that the condition is created, it is time to create the list of actions that will play while our variable content is zero.
Go to Interactions, Audio. Then select Stop Audio. Select audio lights from the list. We know that a value of zero in our variable means that, potentially, the lights.mp3 is playing. So, before playing another audio file, we are stopping the first one.
Still in the Audio category, select Play Audio. Now select they from the list.
The next step is to change the content of our variable (a value of one means they.mp3 is playing). Go to Interactions, Code. Select Edit Variable. Set the value of our variable to 1.
We just finished the list of actions that will play in the first scenario. Now it is time to set the second scenario (user now is seeing the switched image). Go to Interactions, Condition, then pick ELSE. Enter the following:
This is similar to our original IF statement. The only change here is the value of our variable, now set to 1 in the comparison field. Reading it “in English”, we are saying “if variable aPlaying equals 1,” the following list of actions will play.
Follow the steps above and create a Stop Audio for the “they” audio. Then a Play Audio for the “lights” audio. Lastly, Edit Variable and set the value to 0.
In order to end our IF statement, we must to tell Kwik about it. Go to Interactions, Condition then select END. Create the button, and then Publish again.
Congratulations! You just create your first storybook for iPad without ANY code*!
*If you want to build your project and check it on your device, you will need to purchase Corona SDK and become an Apple Registered Developer.