Day 1: Variables / Bouncing Ball

Getting Started

1. Go to the MIT App Inventor and log in using your google account
2. Click on "My Projects" on the top and then press the New button.
3. Name the new project Day1
4. Click on Day1 to open it
5. Open an emulator or connect your device to app inventor using the MIT Companion App

Learn the Terms

The App Inventor has two main parts, The Designer and The Blocks

The Designer window has four columns: Palette, Viewer, Components, and Properties.

• Palette has the tools that are available to you.
• Viewer will show you what your device screen will look (more or less)
• Components will show what you have put on the viewer so far and will organize those components in a logical way. You will change the names of the components in this part of the window.
• Properties is where you will define how your component will look and how it will respond in your app.

You can switch between the Blocks and the Designer by clicking on the buttons found over the Properties.

The Blocks Screen is where you add pieces that will make your app's components do stuff.

Let's Start

1. Under the Drawing and Animation section of the Palette, click and drag Canvas from the Palette into the Viewer.
2. Select on Canvas1 on the Components window (it should be under Screen1)
3. Under the Properties window click BackgroundColor and select Blue

1. What happened on your device?
2. Under the Properties window change Canvas1's Width and Height to 200px

1. What happened on your device or emulator?
2. Under the Palette's Category Animation, drag Ball onto the Viewer's Canvas1. Place the ball anywhere on the Canvas.
3. What happened on your device? Ball1 should now be under Canvas1 on the Components window.
4. Select Ball1 on the Components window and change the speed property to 10.0. Watch you device when you press enter!

1. Ball1 should have moved slowed across Canvas1 until it reached the side. Ball1 is now stuck on the side of Canvas1.

The Blocks Screen

When working with the app inventor, we will use the Blocks Screen to add block that tell the app to do things.

We don't want the Ball1 to stay stuck on the side of the Canvas1. We want it to bounce off the walls. To do that, we need to work with the blocks screen. Here is what to do:

1. Go to the Blocks Screen by pushing the Blocks button.
2. Look on the left side. You should see a list of our Components: Canvas1, Ball1, and Screen1.

1. Click on Ball1. A list of "Blocks" will appear. By fitting blocks together we make that component "do" things.
2. With your mouse, grab the when Ball1.EdgeReached block and drag it onto the board.

1. Next, click Ball1 on the side again. Drag the call Ball1.Bounce block and snap it into when Ball1.EdgeReached

1. Mouse over the edge button on the when Ball1.EdgeReached block and drag and snap the value edge piece into the call Ball1.Bounce

1. What is happening on your emulator or device?
2. Minimize the blocks editor (leave it open in the background) and go back to your component viewer.

Making Stuff Happen

Do the following. Each time you make a change, see what happens on your emulator or device.

Interval

1. Change Ball1's Interval to 500
2. Change Ball1's Interval to 100
3. Change Ball1's Interval to 10 (leave it here)

Speed

1. Change Ball1's Speed to 100
2. Change Ball1's Speed to 1 (leave it here)

Heading

1. Change Ball1's Heading to 90
2. Change Ball1's Heading to 45 (leave it here)

Radius

1. Change Ball's Radius to 20
2. Change Ball's Radius to 10 (leave it here)

Mess Around: Change any property of Ball1. Return them to the leave it here value when finished.

Challenge Stuff

Here are some hard things to try to do. If you don't want to try any of these, or are finished

Thinking man's challenge:

1. After having done all of this, can you imagine a game that might use some of the ideas you learned today? (soccer? what else?)

Some what challenging:

1. Can you change the color of Ball1?
2. Can you change the color of Canvas1?
3. Can you change the shape of Canvas1 to be a rectangle rather than a square?
4. Can you change the shape of Canvas1 to be the same size as the screen?

Really Challenging:

1. Can you add another Ball and make it bounce at the same time as Ball1?

Really REALLY SUPER challenging:

1. Can you make two balls that bounce off walls AND each other?

Middle School Android App Inventor Tutorials by Richard Incorvia is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported License.