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 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, click add button

This button will have a few actions. When completed, its window will look like this: * Show/Hide LightOn * Show/Hide Text01 * IF aPlaying == 0 Then * Stop Audio lights * Play Audio they * Edit Variable aPlaying = 1 * ELSE * Edit Variable aPlaying = 0 * Stop Audio they * Play Audio lights * END

Show/Hide

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.

IF/ELSE/END

Besides variables, conditions (IF/ELSE/END) 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

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.

ELSE

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:

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.

END

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 Corona SDK’s documents.