Working with variables

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 a conditional execution, looping with while statement. 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 of the layer Text01 and LightOn will hide, allowing the layer Text02 and LightOff to show up. Also, audios they.mp3 and lights.mp3 will be played after the transition.

With layer Switch selected, click add button

This button will have a few actions. 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.

Do exactly the same for layer Text01. After pressing Create, your button Actions list will show two actions.

When the layers Text01 and LightOn are transparent, users will be able to see the layers Text02 and LightOff.


Besides variables, conditions (IF/ELSE/END) are one of the most useful resources available for developers. Kwik allows 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, 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 Audio category, select Play Audio. Now select “they” audio 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 (this time, user is seeing the switched image). Go to Interactions, Condition, then pick ELSE. Enter the following:

Click to insert ELSE statement to Actions table.

Next create Stop Audio for the “they” audio and Play Audio for the “lights” audio. Lastly, Edit Variable and set the value to 0.


In order to end our IF statement, we must add END statement. Go to Interactions, Condition then select END.

That’s all. Click Create button of add button window and then you can publish the project.

Congratulations! You just create your first storybook! If you want to build your project and check it on your device, please read Solar2D’s documents.