Animation with some time loop



I’ve the impression that some time loop isn’t used too typically by content material creators. On this publish I’ll present an instance, find out how to use this characteristic for creating an animation that you could begin and cease with a click on of a button. First, let’s see what the animation is like. Click on the button under.

What you will have.

This animation is predicated on png information. Merely put, sequential footage organized as states named Default, NewState1, NewState2, NewState3.

I additionally want two buttons. I used good shapes and named them “Drink” and “Cease ingesting”.

As for the property, that’s all.   Now we have to do some work to show these footage into an animation.

The right way to animate the sequence.

Step 1 – a variable

Create a variable.  Go to the top-bar menu, click on Mission->Variable, create a variable and identify it. Don’t neglect to reserve it! We’ll want this variable as a situation below which some time loop runs. I named this variable “safer”. Don’t ask me why. Make the identify significant to you.

Step 2 – superior actions



Let’s create a brand new superior motion. Mission -> Superior Actions. Now you possibly can identify the motion. We’ll want two tabs. Have a look at the primary one. I referred to as it “earlier than loop”.

What does this resolution tab do?

  • After a click on, it disables the drink_button. It’s necessary. In case you don’t do it and the person clicks the button a number of instances, the animation will break and begin from the start. We wish to keep away from such an impact.
  • It assigns our variable with so referred to as “string”, which on this case is a phrase “nonstop”. In case you want numbers, you possibly can assign this variable with 1. It will likely be wanted to “get up” our whereas loop.


Now for the second tab.

Keep in mind to vary “Preform actions:” into “whereas” ( The default motion is “if”.)

What does this resolution tab do?

After a click on our variable isn’t equal to the phrase “cease” which signifies that the motion will probably be executed.

Are you able to bear in mind, that within the earlier tab we assigned our varaible with the phrase “nonstop”? In case you assigned the variable with 1, bear in mind to make use of this worth in your loop. In such a case, the situation could be “whereas safer not equal to 0”. Let’s put it in a nutshell:

variable worth is the same as “nonstop” (or 1 )  – play the loop.

variable worth  “cease” (or 0)  – cease the loop.

The distinction between “if” and “whereas” is that wile repeats the motion till the situation adjustments, that’s why it’s referred to as “a loop”.

The actions in the primary physique are self explanatory. The state adjustments shortly from “regular” to newState1, newState2 and newState3 with little delays between them, which creates the phantasm of motion.


Create a brand new superior motion. As you possibly can see under, I named it “cease”. It will likely be used for stopping the animation.

As you possibly can see, this tab could be very easy. After a click on, we wish to cease the animation so we have to change the worth of our variable to”cease”. As you bear in mind, the animation performs whereas our variable isn’t equal to “cease”. Assigning the variable with “cease” instantly stops the animation. (In case you used no 1 not the phrase, change the variable worth to 0)  On the identical time, we wish to unblock the “drink button” so as to have the ability to begin the animation from the start.

Step 3 – bind the buttons with the superior actions.

Now go to the Properties tab, click on the primary button (“Drink”), select “on success”-> execute superior actions ->Script: “your motion’s identify”.

Do the identical with the “Cease ingesting” button. After all you attache the second motion to it.

Last thought

The animation I described above can be utilized for easy functions. In case you consider one thing extra superior, with many parts, the method may be troublesome to regulate. One of many methods to make use of it’s for creating avatars with suggestions. Keep in mind, you may also add some extra parts in the primary physique of a loop: sound, speech bubbles and many others.

I hope you loved this weblog. Thanks for studying!


Leave a Comment