Animation with a while loop

Introduction

I have the impression that a while loop is not used too often by content creators. In this post I will show an example, how to use this feature for creating an animation that you can start and stop with a click of a button. First, let’s see what the animation is like. Click the button below.

What you will need.

This animation is based on png files. Simply put, sequential pictures arranged as states named Default, NewState1, NewState2, NewState3.

I also need two buttons. I used smart shapes and named them “Drink” and “Stop drinking”.

As for the assets, that’s all.   Now we need to do some work to turn these pictures into an animation.

How to animate the sequence.

Step 1 – a variable

Create a variable.  Go to the top-bar menu, click Project->Variable, create a variable and name it. Don’t forget to save it! We will need this variable as a condition under which a while loop runs. I named this variable “safer”. Don’t ask me why. Make the name meaningful to you.

Step 2 – advanced actions

ACTION FOR THE “DRINK BUTTON”

TAB 1

Let’s create a new advanced action. Project -> Advanced Actions. Now you can name the action. We will need two tabs. Look at the first one. I called it “before loop”.

What does this decision tab do?

• After a click, it disables the drink_button. It’s important. If you don’t do it and the user clicks the button multiple times, the animation will break and start from the beginning. We want to avoid such an effect.
• It assigns our variable with so called “string”, which in this case is a word “nonstop”. If you prefer numbers, you can assign this variable with 1. It will be needed to “wake up” our while loop.

TAB 2

Now for the second tab.

Remember to change “Preform actions:” into “while” ( The default action is “if”.)

What does this decision tab do?

After a click our variable is not equal to the word “stop” which means that the action will be executed.

Can you remember, that in the previous tab we assigned our varaible with the word “nonstop”? If you assigned the variable with 1, remember to use this value in your loop. In such a case, the condition would be “while safer not equal to 0”. Let’s put it in a nutshell:

variable value is equal to “nonstop” (or 1 )  – play the loop.

variable value  “stop” (or 0)  – stop the loop.

The difference between “if” and “while” is that wile repeats the action until the condition changes, that’s why it’s called “a loop”.

The actions in the main body are self explanatory. The state changes quickly from “normal” to newState1, newState2 and newState3 with little delays between them, which creates the illusion of movement.

ACTION FOR THE “STOP DRINKING BUTTON”

Create a new advanced action. As you can see below, I named it “stop”. It will be used for stopping the animation.

As you can see, this tab is very simple. After a click, we want to stop the animation so we need to change the value of our variable to”stop”. As you remember, the animation plays while our variable is not equal to “stop”. Assigning the variable with “stop” immediately stops the animation. (If you used number 1 not the word, change the variable value to 0)  At the same time, we want to unblock the “drink button” in order to be able to start the animation from the beginning.

Step 3 – bind the buttons with the advanced actions.

Now go to the Properties tab, click the first button (“Drink”), choose “on success”-> execute advanced actions ->Script: “your action’s name”.

Do the same with the “Stop drinking” button. Of course you attache the second action to it.

Final thought

The animation I described above can be used for simple purposes. If you think of something more advanced, with many elements, the process might be difficult to control. One of the ways to use it is for creating avatars with feedback. Remember, you can also add some additional elements in the main body of a loop: sound, speech bubbles etc.

I hope you enjoyed this blog. Thank you for reading!