Backgrounds in Motion: Scene Transitions

In this step-by-step lesson, you'll learn to animate a moving background and create smooth scene transitions in Scratch. You'll start by adding a Scratch City Bus sprite, setting the starting background, and coding the bus's motion. You'll then animate the bus, add a background transition, and optionally move the background for a dynamic effect. Finally, you'll test your animation and wrap up the lesson.

Learning Goals Learning Outcomes

Warning: Your screen size is quite small for viewing this. Rotate your device into landscape mode if you can.

1 Introduction
2 Create a new project
3 Add the Scratch Bus
4 Set the Starting Background
5 Placing the Bus
6 Animate the Bus Driving
7 Add a Background Transition
8 undefined
9 Move the Background (Optional)
10 Test Your Animation
11 Wrap Up
Challenge
Quiz

1 - Introduction

In this lesson, we’re going to explore how to make our Scratch projects more dynamic by using moving backgrounds and scene transitions.

Imagine a city bus driving through different parts of the city—now you can bring that to life in your project! By the end of the lesson, you’ll know how to animate a background and create smooth transitions between different scenes

2 - Create a new project

Scratch: How to create a new project

Go to the Scratch website using the link below and click on the 'Create' link in the blue bar at the top.

By default, each new project starts with the cat sprite already added. To delete the cat click on the x in the blue circle beside the cat in the sprite list.

https://scratch.mit.edu

3 - Add the Scratch Bus

Start by deleting Scratch the Cat and adding the Scratch City Bus sprite from the sprite library. This will be the vehicle that moves through your scenes.

Scratch: How to add a sprite from the library

To add a sprite from the sprite library follow these steps:

Put your mouse over the Choose a Sprite button
Click on the magnifying glass
Find the sprite you want in the library
Click on your chosen sprite

You can use search box or the filter links (Animals, People, Fantasy etc) to locate your sprite.

4 - Set the Starting Background

Choose the first background from the backdrop library. Let’s start with a city street.

This will be where the bus begins its journey.

Scratch: How to add a backdrop from the library

To add a backdrop from the backdrop library follow these steps:

Put your mouse over the Choose a Backdrop button
Click on the magnifying glass
Find the backdrop you want in the library
Click on your chosen backdrop

You can use search box or the filter links (Fantasy, Music, Sports etc) to locate your backdrop.

5 - Placing the Bus

Click on the Scratch Bus sprite to start coding. Begin with a "when green flag clicked" block from the Events section. Underneath, add the "go to x: y:" block from the Motion section to place the bus at the starting point of the background. Set the x value to -140 (left edge of the screen) and y to -100 (near the bottom of the screen).

when green flag clicked
go to x:[-240] y:[-100]

Unlock the Full Learning Experience

Get ready to embark on an incredible learning journey! Get access to this lesson and hundreds more in our Digital Skills Curriculum.

Get started

Copyright Notice
This lesson is copyright of Coding Ireland. Unauthorised use, copying or distribution is not allowed.

Scratch is developed by the Lifelong Kindergarten Group at the MIT Media Lab. It is available for free at https://scratch.mit.edu