In this tutorial, you will learn about animation in App Inventor by making a Ball (a sprite) bounce around on the screen (on a Canvas).
| Subject | Computer Science |
| Length | 90 minutes |
| Pedagogical Approach | Haptic Learning, Technology-Assisted Learning |
| Competences | Algorithms, Programming, New Technologies |
| Grades | 4th grade, 5th grade, 6th grade |
| Technologies | App Inventor, Tablets, Smartphones, Computers |
| Download | pdf.file |
Other Materials Needed
Computer with an internet connection, optionally an Android device and a Wifi
Description
Start a new project
If you have another project open, go to My Projects menu and choose New Project.
Name the Project
Call it something like “BallBounce”. Remember, no spaces, but underscores are OK.
Add a Canvas
From the Drawing and Animation drawer, drag out a Canvas component and drop it onto the viewer.
Set the Screen so that it does not scroll
The default setting for App Inventor is that the screen of your app will be “scrollable”, which means that the user interface can go beyond the limit of the screen and the user can scroll down by swiping their finger (like scrolling on a web page). When you are using a Canvas, you have to turn off the “Scrollable” setting (UNCHECK THE BOX) so that the screen does not scroll. This will allow you to make the Canvas to fill up the whole screen.
Change the Height and Width of the Canvas to Fill Parent
Make sure the Canvas component is selected (#1) so that its properties show up in the Properties Pane (#2). Down at the bottom, set the Height property to “Fill Parent”. Do the same with the Width property.
Add a Ball
Now that we have a Canvas in place, we can add a Ball Sprite. This can also be found in the Drawing and Animation drawer. Drag out a Ball component and drop it onto the Canvas (#1). If you’d like the ball to show up better, you can change its Radius property in the Properties pane (#2).
Open the Blocks Editor
Open the Ball1 Drawer to view the Ball’s blocks.
Drag out the Flung Event Handler
Choose the block when Ball1.Flung and drag-and-drop it onto the workspace. Flung refers to the user making a “Fling gesture” with his/her finger to “fling” the ball. Fling is a gesture like what a golf club does, not like how you launch Angry Birds! In App Inventor, the event handler for that type of gesture is called when Flung.
Set the Ball’s Heading and Speed. First get the setter blocks.
Open the Ball drawer and scroll down in the list of blocks to get the set Ball1.Heading and set Ball1.Speed blocks
Plug the set Ball1.Speed and set Ball1.Heading into the Fling event handler
Set the Ball’s speed to be the same as the Fling gesture’s speed
Mouse over the “speed” parameter of the when Ball1.Flung event handler. The get and set blocks for the speed of the fling will pop up. Grab the get speed block and plug that into the set Ball1.Speed block.
Set the Ball’s heading to be the same as the Fling gesture’s heading
Do the same for the Ball’s heading. Mouse over the heading parameter and you’ll see the get heading block appear. Grab that block, and click it into the set Ball1.Heading block
Test it out
A good habit while building apps is to test while you build. App Inventor lets you do this easily because you can have a live connection between your phone (or emulator) and the App Inventor development environment. If you don’t have a phone (or emulator) connected, go to the connection instructions and then come back to this tutorial. (Connection instructions are in Tutorial #1 or on the website under “Getting Started”.)
Why does the Ball get stuck on the side of the screen?!
After flinging your ball across the screen, you probably noticed that it got stuck on the side. This is because the ball’s heading has not changed even though it hit the side of the canvas. To make the ball “bounce” of the edge of the screen, we can program in a new event handler called “When Edge Reached”.
Go into the Ball1 drawer and pull out a when Ball1.EdgeReached do event.
Go back into the Ball1 drawer and pull out a Ball.Bounce block.
Add the edge value for the Ball.Bounce block
The Ball.Bounce method needs an edge argument. Notice that the Ball1.EdgeReached event has an “edge” as a parameter. We can take the get edge block from that argument and plug it into the call Ball1.Bounce method. Grab the get edge block by mousing over (hover your mouse pointer over) the “edge” parameter on the when Ball1.EdgeReached block.
Your final blocks should look like this. Now test it out!
There are many ways to extend this app.
Here are some ideas… but the possibilities are endless!
- Change the color of the ball based on how fast it is moving or which edge it reaches.
- Scale the speed of the ball so that it slows down and stops after it gets flung.
- Give the ball obstacles or targets to hit
- Introduce a paddle for intercepting the ball, like a Pong game
Visit the App Inventor website to find tutorials that help you extend this app, particularly the Mini Golf tutorial.
Evaluation Tools
Students can build the core game with these instructions, even if they’ve never programmed before. If students manage to extend their apps, it would be possible to evaluate the results as peer feedback. These are the first steps to the programming, so the evaluation should be supporting and positive. Instructions for peer evaluation should take this to account.
Attachments
This tutorial was published in App Inventor -Website. There are a lot of other tutorials, we recommend checking them out!