Create an animation with sprites that run or fly to catch a bus 🚌.
You will:
- Make sprites do different things
when green flag clicked - Position sprites on the Stage
- Use a
repeatloop tomovesprites andswitch costumes
Play ▶️
**Animation** creates the effect of movement by changing pictures quickly. The first animators carved pictures out of wooden blocks and used them as stamps. It is much faster to use Scratch to code your animation!
Open the starter project
Open the Catch the bus starter project. Scratch will open in another browser tab.
Choose a Backdrop
Click (or on a tablet, tap) on Choose a Backdrop in the Stage pane (in the bottom right-hand corner of the screen):
Click on the Outdoors category. Add a backdrop that makes a good starting point for your bus:
Choose a Sprite
Click on Choose a Sprite:
Type bus in the search box at the top:
Add the City Bus sprite to your project.
Give your bus a starting position
Make sure that the City Bus sprite is selected in the Sprite list below the Stage.
Drag a when green flag clicked block from the Events blocks menu to the Code area:
when flag clicked
Drag the bus to a good position on the Stage:
The x and y coordinates (the numbers used to describe the position) of the bus are shown in the Sprite pane below the Stage:
Add a go to x: y: block:
when flag clicked
+go to x: (0) y: (-100)
The numbers in the go to x: y: block are the current x and y coordinates of the bus. The numbers in your project might be a bit different.
Test: Drag the bus to anywhere on the Stage, and then click on the green flag. The bus should always go to its starting position.
Move the bus behind the character sprites
To make sure that the City Bus sprite is always behind all the character sprites, add a go to front layer block, then click on front and change it to back:
when flag clicked
go to x: (0) y: (-100)
- go to [back v] layer
Tip: If you cannot see the go to front layer block, you need to scroll down in the Looks blocks menu.
Change the bus colour
You can change the colour of the bus:
when flag clicked
go to x: (0) y: (-100)
go to [back v] layer
+set [color v] effect to (50) // try numbers up to 200
Resize the Scratch Cat
The Scratch Cat appears in all new Scratch projects as Sprite1 in the Sprite list. Click on the Sprite1 sprite in the Sprite list to get ready to animate the Scratch Cat:
Tip: If you have accidentally deleted the Sprite1 (Scratch Cat) sprite, you can click on the Choose a Sprite icon and search for cat.
In the Sprite pane, click in the Size property and change the Scratch Cat's size to 50:
Get the Scratch Cat into their starting position
Click in the Direction property in the Sprite pane. Rotate the arrow to point to -90. Then, click on the Left/Right icon in the middle to change the rotation style to left-right to stop the Scratch Cat turning upside down:
Drag the Scratch Cat to the bottom right-hand side of the Stage.
Tip: If you try to position a sprite off the Stage, it will move back to its last position on the Stage.
Add code to get the Scratch Cat to their starting position:
when flag clicked
go to x:(200) y:(-150) // bottom right-hand side
Test: Drag the Scratch Cat to a new position, then click on your go to x: y: block. The Scratch Cat should move back to the bottom right-hand side each time.
Animate the Scratch Cat
You will add code in a repeat loop to make the Scratch Cat repeat a small number of steps many times. This will make the Scratch Cat appear animated.
Add a repeat 10 block, then drag a move 10 steps block inside it:
when flag clicked
go to x:(200) y:(-150) // bottom right-hand side
- repeat (10) // try different numbers
move (5) steps // 5 is a good walking speed
end
Test: Click on the green flag. Try changing the numbers in the repeat 10 block so that the Scratch Cat stops at the bus.
Some sprites have more than one costume. You will use the Scratch Cat sprite's costumes to create an animation of the Scratch Cat walking.
Click on the Costumes tab. The Scratch Cat sprite has two costumes, and together, they can be used to make a walking movement.
Click on the Code tab. Add a next costume block inside the repeat block:
when flag clicked
go to x:(200) y:(-150) // bottom right-hand side
repeat (20) // try different numbers
move (5) steps // 5 is a good walking speed
- next costume
end
Test: Click on the green flag, and the Scratch Cat will walk to the bus.
Hide the Scratch Cat
Add a block to hide the Scratch Cat when they reach the bus:
when flag clicked
go to x:(200) y:(-150) // bottom right-hand side
repeat (20) // try different numbers
move (5) steps // 5 is a good walking speed
next costume
end
- hide
Test: Click on the green flag again, and you will see that the Scratch Cat has now disappeared.
Show the Scratch Cat
Add a show block so that the Scratch Cat appears before they walk to the bus:
when flag clicked
go to x:(200) y:(-150) // bottom right-hand side
- show
repeat (20) // try different numbers
move (5) steps // 5 is a good walking speed
next costume
end
hide
Tip: When you use a hide block, you need to also add a show block to make sure that a sprite is visible when it needs to be.
Test: Click on the green flag to test your project, and make sure that the Scratch Cat appears.
Give the Hippo a starting position
Add the Hippo1 sprite to your project.
Change the Size of the Hippo1 sprite:
Drag the hippo to the top left-hand side of the Stage.
Add code to get the hippo to their starting position:
when flag clicked
go to x: [-200] y: [150] // top left-hand side
Tip: The x and y coordinates in the go to x: y: block will be the current position of the hippo, so you do not need to type them in.
Make the Hippo flap its wings and fly
Add code to make the hippo fly towards the City Bus:
when flag clicked
go to x: [-200] y: [150]
+repeat [100]
point towards (City Bus v) // change from mouse-pointer
move [3] steps
next costume
+end
Test: Click on the green flag and check that the hippo flies to the bus. You can change the number in the repeat block to get the hippo to stop in just the right place.
Show and hide the hippo
Add show and hide blocks:
when flag clicked
go to x: [-200] y: [150]
- show
repeat [90]
point towards (City Bus v)
move [3] steps
next costume
end
- hide
Test: Click on the green flag. The hippo will fly and enter the bus.
Animate the Bus
Select the City Bus sprite.
Add code to make the bus drive off to the right four seconds after the green flag is clicked.
when flag clicked
wait [4] seconds // change 1 to 4
Drag your bus to the right-hand side of the Stage. This is the x and y position that the bus will glide to.
Tip: If you move the bus too far to the right, it will jump back. Try again, but don't move it so far.
Add a glide 2 secs to x: y: block under the wait block.
The x and y coordinates in your project might be a bit different and will be the exact position that you dragged the bus to.
when flag clicked
wait [4] seconds // change 1 to 4
+glide [2] secs to x: [320] y: [-100] // right-hand side of the Stage
Test: Click on the green flag. The Scratch Cat and hippo will move to the bus, and the bus will drive off to the right after four seconds.
Hide and show the Bus
Add a hide block to make the bus seem to drive off the Stage:
when flag clicked
wait [4] seconds // change 1 to 4
glide [2] secs to x: [320] y: [-100]
- hide
Test: Click on the green flag. The bus will now hide after driving off. Do you remember how to make sure that a sprite reappears when you click on the green flag?
Add a show block to your when green flag clicked script to make the bus appear when you run your project:
when flag clicked
go to x: (0) y: (-100)
go to [back v] layer
set [color v] effect to (85) // try numbers up to 200
+show
Test: Click on the green flag and watch your animation. The bus should appear in the centre of the Stage and then drive off to the right and disappear.
Is everyone on the bus when it leaves? You can change the amount of time that the bus waits, if you need to.
Make Scratch Cat miss the bus
Select the Scratch Cat sprite and add a wait block:
when flag clicked
go to x:(200) y:(-150)
show
repeat (20) // try different numbers
move (5) steps
next costume
- wait (1) seconds
end
hide
Test: Click on the green flag. The Scratch Cat will walk too slowly and miss the bus!
Make Scratch Cat catch the Bus
You will want delays of less than one second. 0.5 is half a second, 0.25 is a quarter of a second, and 0.1 is a tenth of a second.
Change the delay in the wait block:
wait (0.2) seconds // try 0.1, 0.5, 0.05
Test: Click on the green flag, and the Scratch Cat will walk faster. Choose the delay that you like the most.
Choose if Scratch Cat catches or misses the bus
If you want the Scratch Cat to miss the bus, remove the hide block from your code so that the Scratch Cat stays on the Stage:
when flag clicked
go to x:(200) y:(-150)
show
repeat (20)
move (5) steps
next costume
wait (0.5) seconds
end
-hide
If you want the Scratch Cat to catch the bus, make the bus wait longer before it leaves:
when flag clicked
+wait [4] seconds // change from 4 to 6
glide [2] secs to x: [320] y: [-100] // right-hand side of the Stage
hide
You will need to put the hide block back in the Scratch Cat sprite's code if you have removed it and want the Scratch Cat to successfully catch the bus.
Make changes until you get the animation to work the way that you want it to.
When working on a project, you often go back and change or improve your code as you get new ideas.
Edit the City Bus sprite
Select the City Bus sprite and click on the Costumes tab:
Click on the white "Scratch Tours" text to select it, and then click on Delete to remove it.
Tip: You can use the Delete icon in the Paint editor or the Delete key on your keyboard.
Select the Text (writing) tool.
Click on the bus where you want your text to start, and type the destination of your choice.
To change the font (writing style), you can click on the Font drop-down menu:
Click on the Select (Arrow) tool, then drag the text to position it on the bus.
Follow this step in the original project.
Now, you can add a sprite of your choice to your animation. You will need to add code to make your sprite go to a starting position, point in the right direction, and then repeat move and next costume blocks to reach the bus.
Tip: When you click on Choose a Sprite, you can hold your mouse cursor over a sprite to see its costumes, or on some mobile devices, you can tap and hold on a sprite to see its costumes (if a window pops up when you tap and hold on a sprite, tap at the side of the screen to close the window and see the costumes). Looking at sprites' costumes can help you find a sprite that works well for animation.
You can use any of the blocks that you learned about in this project, as well as those that you already know:
when flag clicked
go to x: [0] y: [0] // drag the sprite to choose x and y
show
hide
glide [2] secs to x: [0] y: [-100] // bottom middle of the Stage
repeat [30]
end
point towards (City Bus v)
point in direction (180) // point down
set rotation style [left-right v]
move [3] steps
next costume
start sound [clown honk v]
wait [0.1] seconds // short delay
set [color v] effect to [50] // up to 200
You can also 'remix' the project to make any changes you like. You could add sound effects to the bus or other sprites, or set the colour effect of the bus. One of the sprites could miss the bus and not hide.
Thanks to digital maker Lyla for sending this fantastic upgrade!
--- save ---