Category Archives: Programming Method

Sensors: Using the Accelerometer to detect motion

This tutorial introduces the accelerometer – at a high level – as a tool to detect the phone being shaken. You can use this feature as another kind of user input to your app – for example, make a game where shaking the phone resets the game play or starts a new game.

An accelerometer is a hardware device that detects and measures motion, typically in three axes: X, Y and Z. For example, if the phone is moved left or right, the acceleration changes in the X axis and the accelerometer returns a value indicating the X axis movement.

Smart phones – and many modern devices – have special hardware accelerometer components built in. The orientation sensor, described previously, is actually a software sensor that uses the hardware accelerometer but converts acceleration into orientation values.

The purpose of this demonstration app is to show one example of using the accelerometer.

The user interface is simple – it displays a Start button and a Stop button, and the status of the accelerometer.



Continue reading Sensors: Using the Accelerometer to detect motion

Sensors: How to use the Orientation Sensor

Smart phones and tablets contain several kinds of “sensors” to sense information about their environment. For example, an accelerometer provides information about movement of the phone (or tablet) – letting us know the speed and direction of travel in x, y and z coordinates (three dimensions).

The orientation sensor tells us if the phone is tilted to the left or right, or up or down (or flipped over). App Inventor provides a simple to use interface to the orientation sensor. We can use this to control a sprite or ball on the screen – by tilting our phone, we can make graphic items move around on the screen!

Sample source code that you can download is at the bottom of this post!

After going through this tutorial, you now know enough to create your own interactive smart phone game!


Before we get started, please review these earlier tutorials:

Continue reading Sensors: How to use the Orientation Sensor

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.


Using ImageSprites for animated App Inventor graphics

I described the basics of creating a bouncing ball animation earlier and mentioned that “image sprites” are similar to the bouncing ball graphic, but provide a way to specify your own image for the ball. To introduce a bit about images in App Inventor, we took a quick look at using the phone’s camera.

This tutorial starts with the original bouncing ball program and then modifies it to use an Image Sprite instead of a ball. Be sure to read the bouncing ball and camera tutorials first!


The ImageSprite component is almost identical to the ball component!

Continue reading Using ImageSprites for animated App Inventor graphics

How to create a bouncing ball animation in App Inventor 2

App Inventor 2 provides easy to use features for creating games. These features have proven popular for introducing programming concepts to students in K-12, especially at the elementary and middle school level. While our focus is oriented towards practical applications rather than games, we can have a little fun too!

The purpose of the sample app in this blog post is to illustrate the basic programming concepts of a bouncing ball animation.

The “Game”

Well, its not much of a game! To keep the programming simple, all this does is enable a ball to bounce around on the screen, to change its heading or trajectory, and to make it travel faster or slower. When the ball hits the edge of the screen, it rebounds in an appropriate direction. Here’s the user interface as seen on the smart phone:


Press the Start button to make the ball start moving; press Stop to end the movement.

To change the speed of movement press the Faster or Slower buttons. Pretty easy?

To change the trajectory, you may enter a heading value in degrees, in the field next to the Set heading button, and then press the Set heading button.

Continue reading How to create a bouncing ball animation in App Inventor 2