O'Reilly logo

App Inventor by Ellen Spertus, Liz Looney, Hal Abelson, David Wolber

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Chapter 17. Creating Animated Apps

image with no caption

This chapter discusses methods for creating apps with simple animations—objects that move. You’ll learn the basics of creating two-dimensional games with App Inventor and become comfortable with image sprites and handling events like two objects colliding.

When you see an object moving smoothly along the computer screen, what you’re really seeing is a quick succession of images with the object in a slightly different place each time. It’s an illusion not much different from “flipbooks,” in which you see a moving picture by flipping quickly through the pages (and it’s also how far more sophisticated animated films are made!).

With App Inventor, you’ll define animation by placing objects within a Canvas component and moving those objects around the Canvas over time. In this chapter, you’ll learn how the Canvas coordinate system works, how the Clock.Timer event can be used to trigger movement, how to control the speed of objects, and how to respond to events such as two objects colliding.

Adding a Canvas Component to Your App

You can drag a Canvas component into your app from the Basic palette. After dragging it out, specify the Canvas’s Width and Height. Often, you’ll want the Canvas to span the width of the device screen. To do this, choose “Fill parent” when specifying the Width, as shown in Figure 17-1.

Figure 17-1. Setting the Canvas’s Width to span ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required