Controlling the sprite animation with your finger on the screen

In the prior tutorial, we created a sprite-based bouncing animation – which is surprisingly easy to do in App Inventor.

But how might we make the animation interactive? Such as touching the bouncing object with a finger and flinging it (throwing it) off in another direction? In other words, as the object travels around the screen, we would like to touch it with our finger and then “drag” the object off in a new direction.

To implement this, just handle the Image Sprite’s “Flung” event, like this:



App Inventor (and the Android OS) handle the details of sensing our finger on the screen and translating that into some values we can use in our app.

When the “Flung” event occurs, App Inventor passes along several values – including the (x,y) coordinate values at the time we touch the object, the speed and heading in which we’ve dragged the object with our finger, and the x and y velocity.  When this event is detected, our program sets the sprite’s current heading and speed to the values determined by our finger drag across the screen.

Click on the “speed” and “heading” parameters in the Flung event to find the “get heading” and “get speed” values.

I multiplied the speed parameter by 3 as the values returned by Flung were small and resulted in slow movement of the sprite. You can set this value to a smaller or larger value based on your preference.

Here’s the app screen, when in use:



As the sprite moves across the screen, touch it with your finger and “fling” it off in a new direction. (You may have to experiment for a bit in terms of how you do your “flings”).

Stopping the Sprite When Touched

If the sprite is moving quickly, it moves out from under your finger before you can take action. To fix this, we sense the finger touching the sprite and stop the sprite while it is being touched.

We implement the “TouchDown” event for ImageSprite1. The moment our finger touches the sprite, the sprite is stopped by setting its Speed property to zero. Now we can casually “fling” the sprite in a new direction.  When we stop touching the sprite, the “TouchUp” event occurs – here we restore the original speed so that the sprite resumes moving. Of course, the “Flung” event occurs next and sets a new speed for the sprite based on our finger movement.

Update: Delete – do not use – the .Touchup block, shown below. It is not needed. Instead, when you lift your finger up as part of a “flung” operation, the flung event handler will set the sprite’s speed proportional to your finger movement. Thus, it is not necessary to restore the saved speed value.