Hello App Inventor!: Android programming for kids and the rest of us (2015)

Chapter 4. Fling, touch, and drag: user interaction with the touch screen

One of the great things about phone apps that is different from PC-based games is the use of touch-screen technology, which enables the user to interact in a direct way with your apps. In this chapter, we’ll show you how to put together a catchy app called Fling It! that uses touch screen-based Touched, Dragged, and Flung events. You’ll also build a mini app to demonstrate the use of the Dragged and Flung events.

As you get more experienced with App Inventor, you’ll see that different components (labels, buttons, image sprites, and so on) can do different things. This chapter is about some of the ways in which your user physically interacts with the components on your phone screen.

For example, labels are just that: labels. A label can’t sing or dance; you can’t drag it or click it. A label can only display text to tell the user what something else is. The user can’t physically interact with it at all. The same goes for an image component.

But other components are more fun to play with, such as buttons, the canvas, balls, and sprites. The following table lists the three main events you’ll use in this chapter and which components they can be used with.

In previous chapters you’ve used images, labels, buttons, the canvas, and the accelerometer but not the animation components, which are called balls and sprites. (In the computing community in the 1970s, the word sprite was adopted to describe an image that is capable of movement on the screen.) If you’re creating an app that uses a sprite or a ball, you must use a canvas to hold these components on the app. The difference between a ball and a sprite is that the only appearance changes you can make to a ball are its size and color, whereas you can assign an image to your sprite.

A sprite is usually an animated character in a game, such as Sonic The Hedgehog, Super Mario, or Pacman. But sprites can also be objects that are capable of movement, such as the coins in Super Mario, the space ship in Defender, and the asteroids in ... ummm ... Asteroids.

You used the Touched and Dragged events in the Graffiti Artist app, but Flung is new. Have you heard of the game Temple Run? The graphics are incredible, but what makes the game different from many others are its fast pace and the flexible use of Flung (or, as the game calls it, swipe) to make the sprite turn, jump, or duck.

It’s good to know up front what a component does, before you put it in your Designer, so you don’t discover in the Blocks Editor that something can’t be flung! Some of these events work in the emulator, and some don’t. The good news for this chapter is that you can use Touched,Dragged, and Flung successfully in the emulator.

The helpful and clever people at the Massachusetts Institute of Technology (MIT) who constantly update and improve App Inventor have provided a great resource for checking out what each component can do. You can find it at http://ai2.appinventor.mit.edu/reference/components. We can’t recommend these pages highly enough for you app inventors out there.

Events up close

When you built the Graffiti Artist project in chapter 3, we looked in detail at the Dragged event you used for drawing. Now let’s look at the Flung and Dragged events you can use for action!

Flung event

Because the Flung event is one of the more complicated physical events, we have provided a table that explains each of the arguments reported by the event.

You may remember we pointed out that in order to effectively use an event handler, your methods don’t have to use all the arguments it provides. You can produce an effective fling by using just the speed and heading. The mini app in the next section will demonstrate this.

Drag event

In order to allow the user to reposition a sprite, you only need to use the current x and current y arguments that indicate where the user’s finger leaves the screen after dragging the sprite.

Flingflung app

PURPOSE OF THIS APP

This mini app demonstrates the use of the Flung and Dragged events. The user flings the ball toward the block, which, when hit, changes to a bang! graphic. The ideas used in this mini app can be used in a fully formed game.

APP RATING

ASSETS YOU’LL NEED

Image sprite: Blocksprite. Two image files:

Bigblueblocksprite.png and Bang.png.

The following table sets out the components needed for setting up the Flingflung app. We have kept the interface simple to allow you to set it up and start coding the blocks quickly.

Learning Point: Intervals

The interval of the sprite you’re going to fling—in this case, the ball—is important. The interval means how often (in milliseconds) the sprite’s position is updated. For example, if the interval is 50 and the speed is 10, then the sprite will move 10 pixels every 50 milliseconds. One thousand milliseconds is one second. The speed is measured in how many pixels per interval the sprite (or ball) moves. To get a smooth fling movement, an interval of 10 works well. We’ll sort out the speed side of things in the Blocks Editor.

1. Dragging out the Ball1.Flung event handler from the Ball1 drawer

This diagram shows an empty event handler for the Flung event.

2. Giving the ball velocity

As we explained earlier, velocity is made up of speed and direction. So in order to give the ball velocity to head off on its fling journey, you need to assign both a heading value and speed value to Ball1. To make the ball travel faster, you can drag out a Built-in > Math block and multiply its speed by 4.

3. Enabling the Dragged event

Create the following code block. In this event, you set the x and y coordinates of the new position of the block to be the “current” x and y—that is, where the user’s finger leaves the screen.

4. Enabling the CollidedWith event

In this app, you want the block to look as though it has exploded when the ball hits it. So you need to use the CollidedWith block.

Simple but effective, don’t you think? The next app is a bit more interactive and, although still short, functions well as a game.

Fling It! app

PURPOSE OF THIS APP

This game is inspired by the audio game Bop It! In Fling It!, play consists of the user responding to a series of spoken commands on a rhythmic soundtrack by using the events Touched, Flung, and Dragged.

APP RATING

ASSETS YOU’LL NEED

Images: Fling, Touch, Drag, and a Fling It! machine for the canvas background. Sounds: Fling, Touch, Drag, and Soundtrack.

Bop It! Is a game a bit like Simon Says. The Bop It! machine calls out instructions, and the player has to do different things such as twist a crank, pull a handle, and toggle a switch as quickly as they can.

Although Fling It! is an interactive app, the appearance of the screen doesn’t change while the user is playing the game. The user is invited to use the Touched, Dragged, and Flung event on the sprites. Each sprite has a corresponding sound that plays when the player touches, drags, or flings it: the touch makes a “pop!” sound, the drag makes a “scrape” sound, and the fling goes “wheeeee!” You have to build the app to fully understand.

In the previous chapter, we suggested that you might want to start developing your independence by setting up the interface of your app using only the following table and a screen capture of the interface. The table contains the properties and files needed for the components.

The following diagram shows how the screen is designed.

To code this app, you just need to ensure that the three sprites react to the Flung, Dragged, and Touched events and that the buttons start and stop the soundtrack. This app is effective, but coding it is relatively simple. Doing so can be broken down into five steps.

1. Making the touch sprite react to the user touching the sprite

Let’s think about what is going on in App Inventor when the user uses a swiping motion to activate the Flung event. When you open the FlingSprite1 drawer, for example, you see a number of different event handlers. The event handler “handles” the information (or arguments; see the next Learning Point) that you need if the event occurs. It can be helpful to give a voice to what is going on in the program. For the Flung event, for example, you can imagine the event handler is saying, “You know the user has just flung that sprite. Well, just in case you wanted to know, the sprite was in the bottom-left corner (x,y), the user flung it pretty fast (counted in pixels per millisecond), the direction the sprite was heading in was (0–360 degrees), the velocity of the x vector was this, and the velocity of the y vector was that.”

The Touched event is a bit simpler and only reports the x and y values of the location on the screen where the user touched the sprite.

For this event, select TouchSprite1 and select the when Touched Flung do event handler. The only thing you want to do in response to the Flung event is play the flung sound, so go to the Touchsound1 drawer, select the Touchsound1.Play method, and slot it into the event handler.

Learning Point: Arguments

In computing, an argument is a value or piece of data that is passed between a function, procedure, or routine. In the case of the Flung routine, for example, when the user swipes their finger across the screen, the event handler collects the argument speed, which is then made available should you want to use it. In App Inventor, some event handlers report many arguments. You can, but don’t have to, use all of them in the methods in the event handler. In fact, you can ignore them and do something completely different in response to an event—which is what you do in Fling It!

2. Making the drag sprite react to the user dragging the sprite

Again for this event, select the drag sprite and select the when Dragged do event handler. The only thing you want to do in response to the Dragged event is play the drag sound, so go to the Dragsound2 drawer, select the Dragsound2.Play method, and slot it into the event handler.

3. Making the fling sprite react to the user flinging the sprite

Here, you’ll follow essentially the same directions to get the fling sprite to react to a Flung event and play the fling sound.

4. Playing the soundtrack

If you’re reading this chapter and want to make your own soundtrack without downloading the resources, we’d better explain what the soundtrack is so you can record one yourself. It goes like this: “Fling it (clap-clap, clap-clap), touch it (clap-clap, clap-clap), drag it (clap-clap, clap-clap).” You can use a voice recorder to make a .wav file that is good-enough quality for this purpose. Then, to play the soundtrack (which lasts about 20 seconds), select the following blocks. To get an even rhythm, we recommend writing a varied combination of commands to read from: fling it, fling it, drag it, touch it, touch it, drag it, fling it, and so on.

5. Stopping the soundtrack

Admittedly, a repeating soundtrack can be grating after a while, so we always recommend that you have a Stop button in an app that has a soundtrack.

Taking it further

You’ve created this fun app using three user-interactive events. There are many more you can use to help customize your own creations. If you look at the following table, you’ll recognize a few from your favorite phone apps. As you can see, some components can do more than others.

There are lots of creative ways you could change or rebuild the apps in this chapter. Here are a few ideas:

1. For Fling It!, provide an element of challenge by recording two soundtracks yourself, one fast and one slow. Incorporate level buttons for the user to choose their own level and have something to progress to.

2. In Fling It!, instead of a shape-based Fling Touch Drag machine, use images of percussive instruments that suggest those sound effects: for example, a drum for touch, a whistle for fling, and a washboard for drag.

3. In Flingflung, when the ball hits the block, change the image of the block to look like an exploded block.

What did you learn?

In this chapter, you learned the following:

· That different components do different things.

· That some event handlers come with information about the event, such as the speed of the sprite, called arguments.

· Once an event handler with arguments has been used, App Inventor creates value blocks for the arguments that are available from within the event handler.

· You can (but don’t have to) use these arguments in the methods in the event handler. For example, the Flung event handler collects the speed of the sprite, which you can then use in combination with direction to fling the sprite across the screen.

· How to use arguments to produce Dragged and Flung events for actions.

· How to use the math functions to multiply a variable by a number.

· How to use the CollidedWith event.

Test your knowledge

1

Which event reports the speed argument?

2

Which event reports the velocity argument?

3

Once you have set up a Dragged event, if you wanted to use the currentX argument value, where would you find it?

4

What is a sprite?

5

What is the difference between a sprite and a ball?

6

What (in computing) is an argument?

Try it out

Your apps are starting to look more like games, which is great for now, but you may have noticed a few things that are still missing: a scoring system, levels, and animation. These will be addressed when we look at variables in chapter 5 and animation in chapter 6. Once you have those two things conquered, the world’s your oyster (or eggplant, for the vegetarians)! So keep going, and enjoy inventing apps. When you understand those bits, you can come back and try these other projects:

1

Increase the difficulty of the Fling It! app in response to how the user is doing rather than letting them choose the difficulty level.

2

Rather than use the Flingitmachine.png graphic we have provided for the background image of the canvas, create your own. You can either hand-draw the machine or use drawing software to create a simple shape that becomes your Fling It! machine. The machine’s three areas should be far enough away from each other that the user’s flinging finger doesn’t accidentally land on the Touch It sprite.

3

In the coming chapters, you’ll learn how to keep score in a game. You can develop Fling It! to keep score and to use specific soundtracks that include known numbers of fling, drag, and touch mentions.

4

In Fling It!, instead of having static shapes responding to the user’s touch, drag, or fling, you can have image sprites that perform an action (in addition to the sound) in response to the event. For example, in response to a touch, a tambourine could shake; or in response to a drag, a trombone could slide.