3-6 Animation Coding Challenge

Lesson 3-6: Coding Challenge! Animation

Objective: Animate motion in App Inventor using the Canvas and Clock components.

Engage

Watch the video to learn about stop animation

Question:

How is Scratch or App Inventor animation similar to a flip book?

Mini-Lesson

3-6 Animation Coding Challenge

Animation Review

Moving a Ball (the Boring Way)

With a partner, answer these questions:

1. What happens when the user presses RightButton?
2. What does X represent?
3. Why do we set X to X + 1?

The gif on the right displays what happens when the button is pressed; the ball moves to the right (by one pixel) each time the button is clicked.

Here, the button is being clicked very quickly so that it looks like the ball is moving; this is animation.

Questions:

How could you change this app to make the ball move without clicking? Which component could we use?

(Hint: You used this component in the last lesson!)

Animation Using the Clock Component

In App Inventor, you can use the Clock component and its when Clock.Timer event to facilitate animation.

Timer events are not triggered by the user; rather, they are triggered by the passing of time.

For instance, the following blocks use the Clock.Timer event to move the ball to the right every second:

This is what it looks like (to the right -->)

Look carefully! It looks like nothing is happening, but the ball is actually moving -- just very slowly.

Notice that the ball is slow and lags. This is because the Clock.Timer event triggers every 1000 milliseconds by default.

1000 milliseconds is equal to 1 second.

You can change the Clock.TimerInterval property (in the Designer) to make an animation faster or slower; this is how you control the frames per second.

Question:

If the default timer interval is 1000 milliseconds, how would you change this number to make the animation seem faster?

For instance, if we changed the Clock.TimerInterval property to 10 ms instead of 1000 ms, we would achieve a faster ball movement.

Now the ball moves smoothly across the screen because it is moving 1 pixel every 10 ms.

Animating a Sprite in App Inventor

An ImageSprite's speed, measured in pixels per second, is determined by two properties:

The Interval property specifies how often the sprite will be moved. It is similar to the TimerInterval property of the Clock component.
The Speed property specifies how many pixels the sprite will move each interval (change in time).

In this example, the sprite moves 5 pixels (speed) per 50 ms (interval). This is equivalent to 1 pixel per 10 ms and to 100 pixels per second.

The Heading property specifies the direction it moves. As shown below, a heading of 270 degrees will move the sprite down.

Review

Watch this video to review how to animate a Sprite in App Inventor

Animation Coding Challenge!

Part 1: Move a ball across the screen

Open App Inventor and start a new project.
In the Designer, add:
- a Canvas component
  - width = size of the screen (Properties → Width → Fill Parent)
    - height = 300 pixels
  - a Ball sprite (Palette → Drawing and Animation)
The Ball sprite initializes (starts) in the middle of the screen.
- Use when Screen1.Initializes, set Ball1.X, and set Ball1.Y to the middle of the screen (Hint: height is 300 pixels).
- Change settings to make the ball move.
- Ball1 Heading directions: Up =90, Down = 270, Right = 0, Left = 180
- Ball1. speed = 10

Part 2: Move the Ball using a Button

Create an animated app that:

- Make the ball remain stationary when the app launches.
  - Disable the Ball.enable when the app launches.
- Add a Button labeled "GO" below the Canvas

When the "GO" button is clicked, make the ball move smoothly in your chosen direction.
- - To help make smooth movement, watch this tutorial.

Part 3: Move Back and Forth

To make the ball bounce when it hits an edge, add when Ball1.EdgeReached and call Ball1.Bounce.

Now, when the ball hits an edge, it reverses its heading (the direction it is pointed).

Part 4: Add a Second Ball

Add another Ball sprite that initializes (starts) in the middle.
When the "GO" button is clicked, the second ball should move.
Change the speed and direction of the ball so that it is different from the first ball.

Part 5: Add a Third Ball

Add a third Ball sprite that again initializes (starts) in the middle.
When "GO" button is clicked, have the ball move diagonally across the screen and back.
- Instead of changing just the X or Y value, you will need to change both values to move diagonally.

Part 6: Customize App

Now, customize the app. Consider these ideas:

- Make it a game: move a sprite and avoid the moving balls.
- Control one or more of the balls using a flinging motion.
- Use the AccelerometerSensor to control the motion of a ball by tilting the tablet, similar to a marble maze.

Handout

3-6 Animation Coding Challenges

Extension

Try these additional customizations for your coding challenge:

- Make the three balls move at different speeds.
- Allow one ball to be controlled by a flinging motion, instead of the Clock.Timer event.
  - - Hint: Use the when Ball1.Flung event and its parameters.
  - Start the motion of one ball by clicking it, instead of using the Clock.Timer.

Page updated

Report abuse