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.

Adding animations

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.

Hiding objects

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.

Creating interactivity

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.

Adding audios

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.

Switching images

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.