Code Your Own Time Travel Animation

We’ve put together a STEM activity for you to create your very own time travel animation in Scratch.

Let’s get started…

1. Visit the Scratch website.

2. If you already have a Scratch account, click ‘Sign in’ and enter your login details, otherwise click ‘Join Scratch’ and create your free Scratch account.

Time to create your animation…

3. Click on the Scratch sprite library button, it can be found in the bottom right of your screen and looks like this:

4. Add in ‘Dani’, or any other person, as your time traveller sprite

5. Add in three button sprites, we will edit these later to make them say ‘Past’, ‘Present’ and ‘Future’

6. Now you’ll need to go to the Scratch backdrops library, this is also found in the bottom right of your screen, the icon looks like the one below. You’ll first need to add in one present day background (we picked the Bedroom)

7. Next we will add in one future background, we picked one of the space backgrounds, but you can pick whichever you like!

8. We will also need to add in one historical background too, we went for one of the castle backgrounds

Optional: Want a challenge? Draw or upload your own backgrounds into Scratch!

9. Edit your button sprite costumes so that each of them say ‘Past’, ‘Present’ or ‘Future’. You’ll first need to click on the button sprite you want to edit, then go to ‘Costumes’ in the top left of your screen. Once here, you can use the ‘T’ (Text) editing tool to write ‘Past’.

10. Repeat this step for your other button sprites, except change the text to ‘Present’ and ‘Future

11. Return back to the main screen and position your button sprites on your scratch screen, we have put ours at the top of the screen

12. Rename your Past, Present and Future button Sprites to be called Past, Present and Future! It will make it a lot easier to remember which is which when we start coding in a minute. You can change the name where it says Sprite (see image below)

13. Past sprite: First, ensure you have clicked on the Past button as this is the sprite we will code now. Add the below code so that when we click on the past button something will happen (it won’t happen yet, but we are setting our program up to do something!)

14. Repeat this for the Present and Future button sprites too

15. Backdrop code: now we are going to code our backdrops. First, ensure that you have clicked on the backdrop. Then add the following code to the script area. This code will mean that when you click on the past, present and future sprites, then your backdrop will change to the right era! It will also mean that we always start off in the present. If you have different backgrounds to ours, yours will be called different things. Just ensure that they match up with the time period you want them to!

16. Time traveller sprite: click on your time traveller sprite, mine is called Dani! We are going to make sure that at the start of the game she always starts in the same place, facing the same way and tells us that she has invented a time travel machine! Add the below code to your game (you can change what she says):

17. Now I am going to make Dani say something when she arrives in my Tudor period. You might like to do some research into your chosen era too so that the time traveller can tell your player something new when they arrive! Add the below code to your Time Traveller sprite:

18. Now we will code the present. We will still be coding the Dani sprite though! Add in the below code, but feel free to change any of the text or add in your own!

19. Finally, we will code the future! This one has a few more lines of code, because we have made our sprite float around in space! Add the below code to your program:

20. Congratulations - you have coded your own time travel animation!