When you see a bird flapping in a game or an alien being exploded in pieces, how do you think it’s done? Well, usually it’s nothing but a set of images and changing of those images in a timely manner. In App Inventor, we can use a Canvas, some ImageSprite components, and a Clock to achieve those animations/effects.

We are going to make an app that looks like this-

If you tap on the Flap button, the bird will continuously flap and if you tap on Explode button, the bird will explode.

This is how our design view looks like-

We have a Canvas named MainCanvas, an ImageSprite named BirdSprite, two Buttons named FlapBtn and ExplodeBtn. We have a Clock component named Timer and two Sound components for flap and explosion sound. Under Media, you can see our assets – some images and two sound files. Download this project AnimationAndEffects and take a look.

During screen initialization, we setup the sizes of our canvas and horizontal layout as you can see below. We do it because different devices have different screen sizes and we want the app to make full use of the device screen size it’s being run on. We want the canvas and horizontal layout components to take the full device width. That is why we set their width to screen’s width. We want the canvas to take 90% of the height and the horizontal arrangement to take 10%. Our buttons are inside the horizontal arrangement component and both their widths and heights are set to Fill parent so that they will not take more than what the layout component is set to. In this case, full width and 10% of the height. We set the Clock component’s interval to 1 so that it will function better. We disable the clock because we want it to work when a button is pressed. Note that you can also set these in design view. We also have some global variables that we will use later.

We have two procedures – Flap and Explode. I believe you already know what they are supposed to do. Take a look before I explain.

We want the bird to flap continuously once the flap button is pressed/tapped. We have two images to make a flap animation – Bird1.png and Bird2.png. In Flap procedure, we first check the current picture our BirdSprite is attached to. If its current picture is Bird1.png, then we simply change it to Bird2.png. If it’s not Bird1.png then we know the current one is Bird2.png. So we change it back to Bird1.png. After we are done changing, we play our glorious flap sound.

Our explosion effect is consisted of 4 images – Explode1.png, Explode2.png, Explode3.png, and Explode4.png. We can have some if – else if – else to do the checking and changing of pictures but that could be too messy. Instead we used a variable named explodeCtr to change the picture. We’ve set the initial value of the counter to 1 as you can see it in the screenshot where we initialized the screen. We set it to 1 because our explosion images have numbers from 1 to 4 – the first one has 1, then the next one has 2, and so on. First we check if the counter’s value is more than 4. Remember we only have 4 images. If more than 4, then we reset it to 1. We also disable the timer/clock since we don’t want the explosion to be repetitive like our flap animation. Then we put back our Bird’s original image since the explosion cycle has completed. If less than or equal to 4, the else block gets executed where we use Text’s join to form the name of the image with the counter to change the current picture. After we change the picture, we increase the counter by 1 to show the next image.

Now the question is, when do we change the pictures? How fast do we change them? Well, let’s take a look at the screenshot below first.

For our flap animation, we want the change to take place in every 10 milliseconds. For explosion, we want it a bit faster. We opted for 5 milliseconds for each explosion image duration.

When flap button is pressed, we set the timerCtr to 0. This variable informs us if it is time to change the flap picture when flapping is on. During explosion, it tells us if we are supposed to change the explosion image. We also set our variable shouldFlap to true so that we know it’s now time to flap. Lastly we enable the timer. We will get to that in a bit.

When explode button is pressed, we first disable the timer which might have been enabled for flapping. You might be wondering why we didn’t disable the timer in flap button’s click event. We didn’t need to because when explosion ends we disable the timer in Explode procedure. Like in flap button’s click event, we also reset the timerCtr. We set the explodeCtr to 1 as our first explosion image has 1 in it. Obviously we set shouldFlap to false. Then we enable the timer. Lastly we play our explosion sound. Explosion sound is played only once. That is why we put it here and not in Explode procedure.

Our clock/timer wakes up after every 1 millisecond because we set its interval to be 1 during screen initialization. If it was 1000, it would wake up after every second. 1000 milliseconds = 1 second. So when time fires, we first check if we should flap or explode. Remember our flap has a duration of 10 milliseconds. That is why we check if the timerCtr is 10. If 10, we flap and then we reset the timerCtr for the next flap. We do it continuously until you press the explode button.

If we should explode, we enter the else section where we check if timerCtr is 5. We change the explosion image in every 5 milliseconds. If so, we call Explode procedure and reset the timerCtr for next change.

Finally we increase the value of timerCtr by 1 regardless of the current action – flap or explode. If we don’t, timerCtr will never be 10 or 5.

As always Download the source file AnimationAndEffects to try it for yourself.